1、文档结构

<!-- 1.文档类型元素 -->
<!-- 2.根元素：浏览器渲染html的起点，入口 -->
<!-- lang="zh-cn"：属性，标签的特征，用“键，值对”的方式来表示 -->
<html lang="zh-cn">
    <!-- 根元素只有两个子元素 <head><body> -->
    <!-- 2.1 头元素：浏览器，搜索引擎SEO -->
    <head>
        <!-- 2.1.1 元标签，中介，媒婆 -->
        <!-- 页面编码 -->
        <meta charset="utf-8" />
        <!-- 兼容模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome" />
        <!-- 视口设置：视口（可视窗口） -->
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- 页面标题 -->
        <title>html结构</title>
        <!-- 页面主体 -->
        <body>
            <!-- <girl-friend height="170" weight="110" bwh="88,86,84">小小</girl-friend> -->
            <!--
                1. 元素: 女朋友
                2. 标签: <girl-friend>，自定义标签
                3. 属性: height,weight,bwh(bust,waist,hips)
                通用属性, 姓名,性别,年龄,学历
            -->
            <h1 id="header" class="title" style="color: red">Hello, world</h1>
            <!--
                1. 元素: 大标题
                2. 标签: <h1>
                3. 属性: id,class,style (通用属性/预定义)，ID属性优先级高
                预置标签: w3c制定,各家浏览器实现
            -->
            <!-- 双标签: 起始标签和结束标签,内容写到他们之间,属性写到起始标签中 -->
            <!-- 单标签: 空标签,它的内容由某个属性来设置,本质上"资源占位符" -->
            <!-- <input type="text" value="admin" />
            <img src="url" alt="" />
            <link rel="stylesheet" href="style.css" /> -->
            <!--
                1. 双标签: 自身内容,由开发人员自己写
                2. 单标签: 外部资源的占位符,空标签
                3. 预定义标签: <h1>,<input>,<div>,<ul>...
                4. 预定义属性: id,class,style,src,type,value,name...
                5. 自定义标签: <girl-friend>
                6. 自定义属性: height,weight,bwh(bust,waist,hips)
                7. 标准化的自定义属性: "data-"自定义属性固定前缀
            -->
            <!-- 
                标准化的自定义属性："data-"自定义属性固定前缀。 `data-`前缀，如`data-email`
            -->
            <h3 data-email="1499@qq.com">测试</h3>
            <!-- 
                document.querySelector('h3').dataset.email
                '1499@qq.com'
             -->
        </body>
    </head>
</html>

二、元素布局

    <!-- 传统 div + id -->
    # 传统页面内容布局少可用
    <div id="header">页眉</div>
    <div id="main">主体</div>
    <div id="footer">页脚</div>
    <!-- # : 表示 id  -->
    # 自动生成：
    <!-- div#header{页头} -->
    <!-- #header{页头} -->
    <!-- <div id="header">页头</div> -->
    <!-- 优化: div + class 目前是主流 -->
    <div class="header" id="header">页眉</div>
    <div class="main">主体</div>
    <div class="footer">页脚</div>
    <!-- emmet: . 表示class  -->
    # 自动生成：
    <!-- <div class="footer">xxxx</div> -->
    <!-- 默认标签就是div,可不写 -->
    <!-- <div class="footer">xxxx</div> -->
    <!-- class权重要小于id -->
    <hr />
    <!-- 语义化 -->
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>
    <!-- 标签权重更低更好,一目了然,直观；但是数量有限 -->
    <hr />
    <!-- <style>
    # 给header标签给予属性，颜色为红色
      .article.header {
        color: red;
      }
    </style>
    <article>
      <header class="article header">文章头部</header>
      <main>文章主体</main>
      <footer>文章底部</footer>
    </article> -->
    <!-- 语义化标签,数量有限,且会导致元素的层级过深 -->
    <!-- tag + class  -->
    <div class="article header">文章头部</div>
    <p class="article main">文章主体</p>
    <div class="article footer">文章底部</div>

3、图文语义化

    <!-- 语义化 -->
    <figure>
      <!-- 图片 -->
      <a href=""> <!--可放链接-->
        <img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" alt="" />
      </a>
      <!-- 文字 -->
      <figcaption>第二十二期_前端开发</figcaption>
    </figure>

4、演示图像,链接

    <!-- 图像 -->
    <img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" alt="php.cn22期" width="200" />
    <!-- 链接 -->
    <a href="https://php.cn">php.cn</a><!--文字点击跳转-->
    <a href="https://php.cn" target="_blank">
    <!--
      常用前2个：
      _blank：新窗口打开链接
      _self：当前窗口打开链接
      _parent：在父级框架打开链接
      _top：在整个窗口中打开链接
      framename：在指定框架中打开链接
    -->
      <button>click</button><!-- 按钮点击跳转 -->
    </a>
    <a href="https://www.php.cn/course/1492.html">
      <img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" alt="php.cn22期" width="200"
    /></a>
    <!-- A标签里面的是点击跳转内容方式 -->

5、列表元素

<!-- 列表 -->
<!-- 无序 ul+li-->
<!-- 有序 ol+li-->
<!-- 自动填写：ul>li*2{item$} -->
<!-- 1. 无序 ul+li 复合元素,用一组标签进行描述 -->
<ul>
  <li>item1</li>
  <li>item2</li>
</ul>
<ol>
  <li>item1</li>
  <li>item2</li>
</ol>
<!-- 自定义列表: 类似名词解释,dl+dt+dd -->
<dl>
  <!-- 标题 -->
  <dt>html:</dt>
  <!-- 内容 -->
  <dd>结构化标记语言</dd>
</dl>

```

个人小结：

今天学习的内容：文档结构，元素、标签属性，语义化标签，图文元素，链接列表等内容，值得比较注意的是语义化标签，因为优点直观，但是缺点也明显（数量有限），所以还是会常用 `tag + class` 比较方便。

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

匿名函数与命名空间_0929

2019-10-08 13:01:48

1、文档结构

二、元素布局

3、图文语义化

4、演示图像,链接

5、列表元素

个人小结：

今天学习的内容：文档结构，元素、标签属性，语义化标签，图文元素，链接列表等内容，值得比较注意的是语义化标签，因为优点直观，但是缺点也明显（数量有限），所以还是会常用 tag + class 比较方便。

今天学习的内容：文档结构，元素、标签属性，语义化标签，图文元素，链接列表等内容，值得比较注意的是语义化标签，因为优点直观，但是缺点也明显（数量有限），所以还是会常用 `tag + class` 比较方便。