1. HTML5文档基本格式

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.          <title>标题</title>
  5.     </head>
  6.     <body>   
  7.          HTML5页面  
  8.     </body>
  9. </html>
标 签 作 用
<!DOCTYPE html> 定义文档类型
定义HTML文档，根标记
定义关于文档的信息，头部标记
定义文档的标题
定义文档的字符编码
定义文档主体，HTML要显示的内容，主体标记

2. 文本控制标记

（1）标题和段落标记

标题标记

为了使网页更具有语义化，我们经常会在页面中用到标题标记，HTML5提供了6个等级的标题， 即

、

、

、

、

和
，从

到

重要性递减。

其基本语法格式如下：
标题文本
注：该语法中n的取值为1到6，align属性为可选属性，用于指定标题的对齐方式。
align后面可以跟的属性值有3种：left、center、right。

  1. <html>
  2.     <head>
  3.          <title>标题</title>
  4.     </head>
  5.     <body>   
  6.          <h1>h1标题标记</h1>
  7.                 <h2>h2标题标记</h2>
  8.                 <h3>h3标题标记</h3>
  9.                  <h4>h4标题标记</h4>
  10.                 <h5>h5标题标记</h5>
  11.                 <h6>h6标题标记</h6>
  12.     </body>
  13. </html>

预览效果：
image.png
段落标记

网页也可以分为若干个段落，而段落的标记就是

，默认情况下，文本在段落中会根据浏览器窗口的大小自动换行。

是HTML文档中最常见的标记。

其基本语法格式如下：

段落文本


水平线标记

水平线标记

，
是一个单标记。该标记的常用属性如下所示：

属性名 含义 属性值
align 设置水平线的对齐方式 可选择left、right、center三种值，默认为center，居中对齐
size 设置水平线的粗细 以像素为单位，默认为2像素
color 设置水平线的颜色 可用颜色名称、十六进制#RGB、rgb(r,g,b)
width 设置水平线的宽度 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%

换行标记

换行标记
，
是一个单标记，网页中敲回车键换行是不起作用的，需要使用换行标记实现换行。 但是换行不分段。

（2）文本格式化标记

粗体、斜体、下划线、删除线等

标记 显示效果
和 文字以粗体方式显示（XHTML推荐使用strong）
和 文字以斜体方式显示（XHTML推荐使用em）
和 文字以加删除线方式显示（XHTML推荐使用del）
和 文字以加下划线方式显示（XHTML不赞成使用u）

（3）特殊字符标记

常用的如下：

特殊字符 描述 字符的代码

空格符  
< 小于号 <
> 大于号 >

3. 图像标记

目前网页上常用的图像格式主要有GIF、JPG和PNG三种，具体区别如下：

  • GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式。另外，GIF支持透明（全透明或全不透明），在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。
  • PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。
  • JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，网页制作过程中类似于照片的图像比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。

基本语法格式：

相关属性：src、alt、width、height、border、vspace、hspace、align等

属性 值 描述
align top、bottom、middle、left、right HTML5 不支持。HTML 4.01 已废弃。
规定如何根据周围的文本来排列图像。
alt 值 图像的替换文本属性，在图像无法显示时告诉用户该图片的内容。
width、height 值 用来定义图片的宽度和高度，如只设置其中的一个，另一个会按原图等比例显示。
在 HTML 4.01 中，宽度应该被定义为以像素为单位或以包含元素的百分比为单位。
在 HTML5 中，宽度值必须以像素为单位。
src URL 规定显示图像的 URL。
title 值 图像标记HTML基础知识 - 图3中的属性title可以用于设置鼠标悬停时图像的提示文字。
border 值 为图像添加边框、设置边框的宽度。但边框颜色的调整仅仅通过HTML属性是不能够实现的。HTML5 不支持 HTML基础知识 - 图4 border 属性，使用 CSS 代替，不建议使用。
vspace、space 值 HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

补充：绝对路径和相对路径
绝对路径：绝对路径一般是指带有盘符的路径，例如完整的网络地址“http://www.itcast.cn
/images/logo.gif”。
相对路径：相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

4. 超链接标记

（1）创建超链接

超链接：点击页面中的导航或者带有链接地址的文字就可以跳转到不同的页面 只需用标记环绕需要被链接的对象即可。

基本语法格式如下：
文本或图像
属性说明：

_self为默认值，意为在原窗口中打开
_blank为在新窗口中打开

（2）锚点链接

如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条，来查看所需要的内容，这样效率较低且不方便。 HTML5语言提供了一种特殊的链接——锚点链接，用户能够快速定位到目标内容。

常见锚点链接分为两步：

  1. 使用“ 链接文本”创建链接文本；
  2. 使用相应的id名标注跳转目标的位置。

案例：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>锚点的使用</title>
  6. </head>
  7. <body>
  8.     <a id="top"></a>
  9.         <a href="#1lou">1楼</a>
  10.         <a href="#2lou">2楼</a>
  11.         <a href="#3lou">3楼</a>
  12.         <br />
  14.         <img id="1lou" src="images/01.jpg"><br />
  15.         <a href="#top">顶部</a> <br />
  17.         <img id="2lou" src="images/02.jpg"><br />
  18.         <a href="#top">顶部</a> <br />
  20.         <img id="3lou" src="images/03.jpg"><br />
  21.         <a href="#top">顶部</a> <br />
  22.         <br /><br /><br /><br /><br />
  23. </body>
  24. </html>

5. 列表元素

HTML语言提供了3种常用的列表，分别为无序列表、有序列表和定义列表。

（1）无序列表

无序列表是网页中最常用的列表，其各个列表项之间为并列关系，没有顺序级别之分。

无序列表使用

    标记定义，
  • 为具体的列表项。

    基本语法：

    1. <ul>                  // <ul></ul>标记用于定义无序列表
    2.     <li>列表项1</li>
    3.     <li>列表项2</li>  // <li></li>标记用于描述具体的列表项
    4.         ......
    5. </ul>

    注意：

      标记中不允许直接输入文字，每对
        中至少应包含一对

      • 案例：
        image.png

        （2）有序列表

        有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列 例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。 有序列表使用

          标记定义，
        1. 为具体的列表项。

          基本语法：

          1. <ol>                     // <ol></ol>标记用于定义有序列表
          2.     <li>列表项1</li>
          3.     <li>列表项2</li>      // <li></li>标记用于描述具体的列表项
          4.         ......
          5. </ol>

          说明：ol元素还包括 start 属性：更改列表编号的起始值。
          reversed 属性：表示是否对列表进行反向排序，默认为true。
          注意：

            标记中不允许直接输入文字，每对
              中至少应包含一对

            1. image.png

              （3）定义列表

              定义列表常用语对术语或名词进行解释和描述， 也常用于图文混排，其中

              标记中插入图片，
              标记中放入对图片解释说明的文字。 列表项前没有任何项目符号。

              基本语法：

              1. <dl>
              2.     <dt>名词1</dt>
              3.     <dd>名词1解释1</dd>
              4.     <dd>名词1解释2</dd>
              5.     ...
              6.     <dt>名词2</dt>
              7.     <dd>名词2解释1</dd>
              8.     <dd>名词2解释2</dd>
              9.     ...
              10. </dl>

              6. 结构元素

              HTML5中所有的元素都是有结构性的，且这些元素的作用与块元素非常相似。

              image.png

              特殊字符 描述 基本语法
              header元素 header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。 header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。
              nav元素 nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确
              article元素 article元素代表文档、页面或者应用程序中与上下文不相关的独立部分 该元素经常被用于定义一篇日志、一条新闻或用户评论等
              aside元素 aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分 aside元素的用法主要分为两种：
              a．被包含在article元素内作为主要内容的附属信息。
              b．在article元素之外使用，作为页面或站点全局的附属信息部分。
              section元素 section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成 a．不要将section元素用作设置样式的页面容器，那是div特性。
              b．如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。
              c．没有标题的内容区块不要使用section元素定义。
              footer元素 footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容

              公司版权注册信息