HTML语义化标签（一）

一、实体

1.实体作用
在html中需要书写特殊的符号，则需要html的实体（转义字符）

例如：

<p>今天             天气挺好的</p>

效果：

浏览器中只有一个空格

• 问题解析

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

• 解决方法：使用实体
  2.实体的语法：

&实体的名字；

例如：

<p>明天 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天气也不错
  <p>2&gt1</p>
  <p>1&lt2</p>

效果：

其中代码中实体表示结果如下

&nbsp；<!--空格-->
&gt；<!--大于号-->
&lt;<!--小于号-->
&copy；<!--版权符号-->  

具体html实体链接：html实体参考手册

二、meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看的

主要属性：

• charset指定网页的字符集
• name指定的属性的名称
• content指定的数据的内容
• description用于网站的描述，会显示在搜索引擎的搜索的结果中

例如：

<meta name="keywords" content="html5,前端,css">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验">

keywords表示网站的关键字，可以同时指定多个关键字，关键字间使用逗号隔开。例如我们搜索关键字“网上购物”，就会出现例如京东等电商平台，我们打开京东网页源代码，keywords的值中存在网上购物这个值（搜索“购物”也是类似）如图（1），图（2）所示

以京东为例：

                                         图（1）

                                         图（2）

description用于网站的描述，会显示在搜索引擎的搜索的结果中，例如下图（3）所示，title表示标题，可以看到我们搜索出来的标题网页，description表示该网页的描述，我们也可以在网站中查看到。

                                         图（3）

其余meta属性如下：meta属性表

三、语义化标签

1.标题标签

• h1~h6一共有六级标题
• 从h1~h6重要性递减，h1最重要，h6最不重要，h1在网页中的重要性仅次于title标签。一般情况下一个页面中只会有一个h1。

例如：

  <h1>一级标题</h1>
   <h2>二级标题</h2>
   <h3>三级标题</h3>
   <h4>四级标题</h4>
   <h5>五级标题</h5>
   <h6>六级标题</h6>

效果：

• div是一个块元素没有语义，就用来表示一个区块，目前来讲div是我们主要的布局元素
• span是一个行内元素，没有任何语义，一般用于在网页中选中文字
• nav表示网页中的导航
• footer表示网页的底部
• main表示网页的主题部分（一个页面中只有一个main）
• header表示网页的头部

其余标签有：

四、块元素与行内元素

• 块元素

在页面中独占一行的元素称为块元素（block element）：例如p标签（p标签表示页面中的一个段落）。在网页中通过块元素对页面进行布局。

• 行内元素

在页面中不会独占一行的元素称为行内元素（inline element）：例如em标签。主要用来包裹文字。
例如：

<p>在p标签中表示一个段落</p>
<p>在p标签中<p>表示</p>一个段落</p>
<p>在p标签中<em>表示</em>一个段落</p>

效果;

一般情况下会在块元素中放置行内元素。p元素中不能放置任何块元素。
例如：

<h1><em>aaa</em></h1>

HTML标签手册：HTML标签手册

五、列表

在html中共有三种列表

• 有序列表：使用ol标签来创建列表，li表示列表项
• 无序列表：使用ul标签来创建列表，li表示列表项
• 定义列表：使用dl标签来创建列表，dt表示定义的内容，dd对内容进行解释

例如：

<ol>
  <li>SY</li>
  <li>2001</li>
  <li>COME ON</li>
  </ol>

  <u1>
    <li>SY</li>
    <li>2001</li>
    <li>COME ON</li>
    
    </u1>
    <dl>
      <dt>Beast of Bodmin</dt>
      <dd>A large feline inhabiting Bodmin Moor.</dd>
  
      <dt>Morgawr</dt>
      <dd>A sea serpent.</dd>
  
      <dt>Owlman</dt>
      <dd>A giant owl-like creature.</dd>
  </dl>

效果：

列表之间可以相互嵌套，例如ol里面嵌套一个ul

例如：

<ol>
  <li>SY</li>
  <li>2001</li>
<ul>

<li>我是</li>
<li>嵌套的</li>
</ul>
<li>COME ON</li>
  </ol>

效果：