1.品牌列表

1。 Unordered list（无序列表）

Unordered：无顺序

1）功能：

• 添加一堆内容 无序列表语义（整体无序），列表中没有项目按顺序排列

2）格式：

• li 英文是list item，翻译为列表项

    <h4>中国城市列举(CN)</h4>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>杭州</li>
</ul>

3）ul应用脚本：

• 导航栏
• 产品列表等❀❀❀。 4) 注意：
  • 其实ul还有一个type属性，可以改变初始符号的样式。值包括圆盘、square和圆。
    • 不过由于以后样式会通过CSS来完成，这里就不给大家介绍了
  • ul是一个组标签，必须以簇的形式出现，也就是说，如果标签不能独立存在，那么它必须包在ul
  • 既然ul，如果是一个单位，不建议在ul上包其他标签。永远记住，最好只在 ul 中写入 li 标签
  • 虽然建议只在 ul 中写入 li 标签，但 li 标签是一个容器标签。您可以将任何标签添加到 li 标签，甚至添加 ul 标签

  <h4>课程安排</h4>
  <ul>
      <li>
          上午
          <ul>
              <li>HTML5</li>
              <li>CSS</li>
          </ul>
      </li>
      <li>
          下午
          <ul>
              <li>OC</li>
              <li>Swift</li>
          </ul>
      </li>
  
  </ul>
  

  

  2。有序列表（排名列表）

  1）功能：为一组内容添加有序列表语义（有序列表总体排名），列表中的项目按顺序排列

  <h4>中国房价排行榜</h4>
  <ol>
      <li>北京</li>
      <li>上海</li>
      <li>杭州</li>
      <li>广州</li>
      <li>深圳</li>
  </ol>
  
  

  

  2）应用场景：

  • xxx排名list
  • ol的应用场景其实并不多，因为ol能做的事情都可以用常规的ul属性完成
  • ul可以改变开头的样式和序号符号

  第二个定义列表（定义列表）

  1）功能：

  • 使用 dt 将列表语义添加到一组内容中列出列表中的项目，然后使用 dd 相应地描述每个项目

  2）格式：

  • dt 英文定义名称，翻译为定义名称
  • 添加英文定义描述，翻译为定义描述信息

  <dl>
      <dt>北京</dt>
      <dd>国家的首都</dd>
      <dt>杭州</dt>
      <dd>坑爹,房价上涨最快的地方</dd>
  </dl>
  
  ![Snip20170614_7.png](http://upload-images.jianshu.io/upload_images/4122543-2d304b7b5f58b8c3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  

  3) dl 应用场景如下：

<h4>课程安排</h4>
<ul>
    <li>
        上午
        <ul>
            <li>HTML5</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>
        下午
        <ul>
            <li>OC</li>
            <li>Swift</li>
        </ul>
    </li>

</ul>

网站

• 每当您看到大量用于描述某些内容的内容时内容，你们要记住 dl

4) 注：

• dl 是，组的标签必须成捆出现，即标签dt 和 加无法独立存在，必须将❙包裹在
• 内，因为 dl和dt、dd为一个单位，因此不建议将包装在内。容器标记以及标记li。您可以向其添加任何标签。
• 定义列表非常灵活。一个 dt
  • dd
  可以配置多个，但最好不要有多个❙❙❙ add，dd 的语义 是描述最接近它的 dt 所以其他 ♝ 相当于描述定义列表中的 no 是每个项目都可以列出并描述
• 列表定义很灵活，可以组合几个，dt+dd组合又分为几个dl

<h4>课程安排</h4>
<ul>
    <li>
        上午
        <ul>
            <li>HTML5</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>
        下午
        <ul>
            <li>OC</li>
            <li>Swift</li>
        </ul>
    </li>

</ul>

dl系列~He。 ）

1。功能：

• 用于为文本添加标题语义
• 格式：

• xxxxxx

2.注意：

• H 标签用于向文本添加标题语义，而不是设置文本样式。 H标签一共有6个，从H1~H6，最多只能是6个，超过6个无效
• H系列标签包裹的内容将占据独占行
• H系列中标签，H1最大，H6最小
• 企业发展中，谨慎使用H系列标签，尤其是H1标签。业务开发中，界面中一般只能出现一个H1标签（与SEO相关）

4. P标签（段落）

1 功能：

• 告诉浏览器哪些文本是段落 ♿⓾ 格式:
• xxxxxxxx

2. 注：

• 在浏览器中单独占一行

5.Hr 标签（水平规则）1♸ 功能：

• 在浏览器中显示分割线
• 格式：

• ---

2。注：

• 在浏览器中单独占一行
• 我观察发现HR标签可以写/也可以不写
  • 如果不写/，就是按照HTML规范写的
  • 如果你写/，那么它就是按照XHTML规范写的。
• 由于hr标签是用于造型的，所以不建议使用。以后的开发中一般会使用CSS框来添加水平线

6. HTML Annotation（注释）

1. 什么什么是评论

1。评论格式

2.注：

• 注释内容不会在浏览器中显示，评论为
  • 为个人查看而写的评论无法插入

-->

3。快捷键：ctrl + /

示例代码

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>我是假的,标题7</h7>

<!--我是注释-->
<hr />

<p>告诉浏览器哪些文字是一个段落</p>

<!--下面是分割线-->
<hr />

标签Seven.img（图片）

1）功能：❝2）在网页上嵌入页面：❙）嵌入页面[图片]！ ](http://note.youdao.com/favicon.ico)

3) 标签属性

• 写在标签文本K=“V”中，这种格式我们称为标签属性

属性名称	函数
src(source)	告诉浏览器要嵌入的图像的路径，以便浏览器可以在该路径下找到要嵌入的图像。
alt(alternate)	指定图像的替代文本，只有当在src指定的路径中找不到图像时，才会显示alt指定的文本
title （我们引入此图像，只有当鼠标滚动到图像上时才会出现）
高度	设置图像显示高度
宽度	设置图像宽度❙4）注： 与img一起添加的图像默认情况下，标签不占据整行空间。如果你想让图片按比例拉伸，只需写出高度或宽度即可 5) 示例代码 <!--图片标签-->       <img alt="找不到图片"> 5) 临时结果 8.br标签(Break) 1) 功能:❀离开内容换行 2) 格式： 3) 注： br 表示不要换行，99.99% 的情况下都需要换行在网页上，是因为新段落，所以要用p来标记 9.a标签（锚点） 1）格式： 我的小书 2）功能： 用于从一个页面链接到另一个页面 3）备注： 在标签和标签之间写入文字，如果没有，则该品牌不在网站上。标签也称为超链接或超级链接 4) 标签属性 属性名称 功能 href（超文本引用） 具体跳转目标地址 target 告诉浏览器是否保留原来的界面，_blank保留，_Self不保留 title ​​ 悬挂stop text（我们介绍这个链接，只有当鼠标移动到超链接时才会出现） 4) 代码示例 <!--a标签--> <a href="http://www.jianshu.com/u/5bd5e9ed569e">我的简书</a> <a href="http://www.jianshu.com/u/5bd5e9ed569e" title="我的简书">我的简书</a> <a href="http://www.jianshu.com/u/5bd5e9ed569e" title="我的简书" target="_blank">我的简书</a> 5) 一起使用基础标签和标签 如果每个标签都想在一个新的标签上page中打开，那么一一设置属性target标签是有问题的。目前，我们可以使用base和tag的组合来一次性打开新页面上的所有标签 格式： 注意： base必须嵌套在标签 head 中，如果标签指定 base 还指定target，然后按照指示完成标签上 6) 标签的其他用途 假链接（本质上是跳转到当前页面） 格式 格式我的简书 a> 2.将 id 属性添加到页面上指定位置的任何标签 例如 这是页面上的目标 指定位置指定页面 格式：跳转到指定位置 只需要使用链接01只需在.html页面中添加位置ID即可 下载（强烈不推荐） 例如❀下载社保资源 作者：RunTitan 链接: https://爵jin.im/post/5aabb3206fb9a028e11fb6df 来源：掘金 版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。