有时，在 HTML 有些特殊符号不能直接写，如：

• 多个连续空间(浏览器会自动分析在网页上编写的多个空间的默认情况)
• 例如，字母两侧大于小于号（可视为标签和分析）

如果我们需要在网页上写这些特殊符号，我们需要使用它们 html 实体(转义字符)的语法:&实体名称；，如：

更多字符实体，请参考：HTML 字符实体、HTML ISO-8859-1 参考手册

以京东网站为例，右键单击，选择查看网页源代码

在网页中 HTML 专门用来负责网页的结构所以在使用 html 标签时，应该关注的是标签的语义，而不是它的样式

这里先介绍几个基本的语义标签，还有些常用的标签放在后面具体讲解

举例

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

效果

HTML5 提供的新语义元素有

这些新语义标签在视觉效果上基本上没有什么区别

• 在网页中一般通过块元素来对页面进行布局

• 行内元素主要用来包裹文字
• 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
  • 如<p>元素中不能放任何的块元素，不过

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如：

• 标签写在了根元素的外部
• <p>元素中嵌套了块元素
• 根元素中出现了除head和body以外的子元素

这个通过浏览器中的查看网页源代码并不能看到效果，但是使用 F12 进行开发者调试时是能够看到上述几种情况被修正的结果。

不过虽然浏览器能够对不规范的页面内容进行修正，还是不建议编写不规范的代码，因为这对后期代码维护或团队代码协作将是非常不好的后果和体验。

结构化语义标签

• header表示网页的头部（页眉）
• main表示网页的主体部分（一个页面中只会有一个 main）
• footer表示网页的底部（页脚）
• nav表示网页中的导航
• aside和主体相关的其他内容（侧边栏）
• article表示一个独立的文章
• section表示一个独立的区块，上边的标签都不能表示时使用 section

• div 块元素，没有任何的语义，就用来表示一个区块。目前来讲，div 还是主要的布局元素
• span 行内元素，没有任何的语义，一般用于在网页中选中文字

在 html 中可以创建列表，html 列表一共有三种：

• 有序列表，使用ol标签来创建有序列表，使用li表示列表项

  <ol>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
  </ol>
  

• 无序列表，使用ul标签来创建无序列表，使用li表示列表项

  <ul>
    <li>Milk</li>
    <li>
      Cheese
      <ul>
        <li>
          Blue cheese
          <ul>
            <li>Sweet blue cheese</li>
            <li>Sour blue cheese</li>
          </ul>
        </li>
        <li>Feta</li>
      </ul>
    </li>
  </ul>
  

  可以看出，列表元素之间是可以互相嵌套的

• 定义列表，使用dl标签来创建定义列表，使用dt表示定义的内容，使用dd来对内容进行解释说明

  <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>
  

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

• Linking to an absolute URL：链接一个绝对路径
• Linking to an email address：链接一个 email 地址
• Linking to telephone numbers：链接电话号码
• Using the download attribute to save a <canvas> as a PNG：下载图片

<ul>
  <li><a href="https://www.baidu.com">Website</a></li>
  <li><a href="mailto:example@outlook.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

效果

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以./或../开头

• ./ 表示当前文件所在目录，可以省略不写
• ../表示当前文件所在目录的上一级目录

<a href="./test1.html">超链接1</a><br />
<a href="../test2.html">超链接2</a><br />
<a href="./test3/test3.html">超链接3</a><br />
<a href="../test4/test4.html">超链接4</a>

效果

target属性，用来指定超链接打开的位置可选值：

• _self在当前页面中打开超链接，默认值
• _blank在新建页面中打开超链接

<a href="./test1.html">超链接1——默认</a><br />
<a href="./test1.html" target="_self">超链接1——当前页面</a><br />
<a href="./test1.html" target="_blank">超链接1——新建页面</a><br />

可以使用javascript:void(0);来作为href的属性，此时点击这个超链接什么也不会发生

可以将#作为超链接的路径的占位符使用。

可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置

可以跳转到页面的指定位置（锚点），只需将href属性设置#目标元素的id属性值（唯一不重复）