HTML5基础

HTML5基础

HTML5基本结构

文档类型声明< !DOCTYPE>

DOCTYPE是Document Type的缩写，意思是文档类型。网页中有许多浏览模式，如：兼容模式，标准模式等。
< !DOCTYPE>用来决定使用哪种模式在浏览器呈现，< !DOCTYPE html>说说明浏览器把页面定义为标准兼容模式。

根标签< html>

所有的HTML文档以< html>开始，以< /html>结束。

首部标签< head>

< head>用来标记文档的首部。首部以< head>开始，以< /head>结束。< head>标签中的内容不会显示在网页中。

网页标题标签< title>

< title>标签用来标记网页标题，该标题会显示在浏览器窗口的标题栏中，还能显示在网站被添加进收藏夹时的标题。若省略< title> 标签，网页标题则会显示为 “无标题文档”。

基础地址标签< base>

< base>标签为页面上所有链接设置默认URL地址或目标target。若HTML5文档使用了相对路径，浏览器会用< base>标签指定的URL进行补全。若不适用< base>标签指定URL地址，则浏览器会用当前HTML5文档的URL对图片地址进行补全。

元数据标签< meta>

< meta>标签为HTML文档提供元数据，这些数据不会直接显示在网页上，但是可以告诉给机器，适用于搜索引擎索引，通常< meta>标签用来定义网页字符集、关键词、描述、作者等信息。

例如：声明字符集，关系词，页面描述

<mtea charset="utf-8">
    < meta name="keywords" content="HTML5,CSS3,jQuery"/>
    <meta name="description" content="This is a tutorial about HTML5,CSS3,jQuery"/>

搜索引擎会根据< meta>中的name和content属性来索引网页。

样式标签< style>< /style>

样式标签< style>用来定义文档中指定区域的字体风格、背景颜色、对齐方式等各类样式信息。

链接标签< link>

< link>标签用来==链接外部资源和当前HTML5文档，它只出现在< head> < /head>中。

脚本标签< script>< /script>

< script>标签可选，取决于当前页面是否需要使用脚本的内容。

主体标签< body>

hHTML5文档注释

注释方法：< !–…-->,中间三个 点替换成文字。

HTML5文档规范

1. 文件类型。文件名后缀推荐使用.html ，也可以用.htm 。目前两种扩展名都被广泛浏览器支持，互换后缀名不会引起打开错误。但是通过URL访问时则需正确的扩展名。
2. 元素标签格式。元素标签一般成对出现，首尾标签名字保持一致，并且尾标签中需要加上斜杠符号。最新版的HTML5中必须使用小写格式。对于单独使用的标签无结束符号（没有斜杠），在XML规范中，所有标签必须有结束标签，所以加上结束符号的标签更标准。即< br>改成< br/>,< hr>改成< hr/>

字符实体的使用

字符实体的使用。一些特殊字符无法再HTML5文档中使用，比如小于号和大于号时无法直接输出的，连续空格被认定为一个空格。字符实体需要借助对应字符名称或数字代码进行输出，格式如下：

&实体名称;
&#实体数字;

实体名称和实体数字都以&开头，以；结束，数字实体前还要加#进行区分。若部分实体名称不被浏览器支持，只需改用数字实体代替即可。

HTML5保留的常用标签

基础标签

段落标签< p>< /p>

< p>与< /p>为一个段落，段落与段落之间默认空一行。

标题标签< h1>~< h6>

标题标价签一共有6级，大于6都以6级显示。h1的字体最大，h6的字体最小。

水平线标签< hr>

< hr>在网页上话一条水平线。该标签单独使用。默认情况 为一条宽度为1像素的褐色水平线。

换行标签< br>

< br>标签也是单独使用，在当前位置产生一个换行，相当于一次回车的效果。建议使用该标签代替回车键，因为回车键产生的连续换行会被浏览器自动忽略。

文本格式标签

斜体字标签< i>< /i>

< i>与< /i>之间的文本内容显示为斜体字型效果。

粗体字标签< b>< /b>和< strong>< /strong>

两者都可以使标签内的字体加粗，区别是< strong>< /strong>内的文本会被认为是重要内容。

上标签< sup>< /sup>和下标签< sub>< /sub>

< sup>< /sup>内的内容为上标，< sub>< /sub>内的内容为下标。

修订标签< del>< /del>和< ins>< /ins>

< del>< /del>内的内容会显示删除线，< ins>< /ins>的内容会显示下划线。

预格式化标签< pre>< /pre>

< pre>< /pre>标签内的文本在显示时保留换行与空格的排版效果。

列表格式标签

有序列表标签< ol>< /ol>

有序列表即带编号的列表。需要和列表项目标签< li>配合使用，列表选项默认为缩进显示效果。

<ol>
    <li>第一项
    <li>第二项   
    <li>第三项   
</ol>

有序列表默认起始数值为1，可以用start属性重新定义起始编号值

<ol start="n">       <!--n为指定的起始编号值-->

若需更改编号样式，则用type属性进行修改

<ol type="类型值">

类型值与对应样式如下图：

无序列表标签< ul>< /ul>

无序列表不带编号，也需要与< li>标签配合使用。列表选项默认为缩进显示效果。默认编号样式为实心圆形，嵌套的二级列表编号样式默认为空心圆形。若需自定义样式，使用type属性声明，下图是属性值与对应样式：

定义列表标签< dl>< /dl>

定义列表标签< dl>< /dl>用来进行词条定义的特殊列表，每条表项需要结合词条标签< dt>和定义标签< dd>一起使用。词条< dt>需要标记在每个词条的开头，定义标签< dd>则需要标记在每个定义部分的开头。默认为全文缩进表示。

<dl>
    <dt>第一个词条
        <dd>第一个词条的意义
    <dt>第二个词条
        <dd>第二个词条的意义
</dl>

图像标签< img>

< img>用于网页嵌入图片，该标签无结束标签，单独使用。
< img>标签两个常用属性：

• src：指明图片的存储路径，通常为URL形式
• alt：无法找到src中图象时的替代文本，该属性可省略不写。

超链接标签（锚链接标签）< a>< /a>

超链接在网页中标记文本或图像，用户单击后跳转到另一页面。适用于网页导航菜单或列表，也可以是发送邮件或下载文件等。

超链接的两个重要属性：

• href：目标内容的URL地址
• target：目标内容的打开方式，属性与对应作用如下图
  

外部链接

基本格式：

<a href="URL地址">链接文本或图片</a>

外部链接可以包含文本内容或者图片内容，比如：

文本示例：
<a href="www.baidu.com">百度</a>

图片示例：
<a href="www.baidu.com"></a><img src="logo.png"></a>

内部链接

超链接跳转到同一页面的指定区域。语法格式如下：

<a href="#指定区域名">链接文本或图像</a>

指定区域名可以自定义，只要目标区域标出正确对应名称即可，语法格式如下：

<a name="区域名">目标内容</a>

表格标签< table>< /table>

< table>< /table>用来定义一个完整的表格。

表格行标签< tr>< /tr>

< tr>< /tr>定义表格中的一行。

表格单元格标签< td>< /td>

< td>< /td>用来定义表格行中的一个数据单元格。数据单元格可以包含表单、文本、水平线、图片、列表、段落、新的表格等。默认内容左对齐。

表头标签< th>< /th>

< th>< /th>用来定义表格的第一行表头。默认粗体字、居中对齐。

表格标题标签< caption> < /caption>

< caption> < /caption>用来为表格添加标题，该标题默认居中对齐并显示在表格顶部

框架标签

框架标签用来在网页的框架内定义子窗口。该标签仅支持src属性，用来指定框架内部的网页来源。

容器标签

< div>< /div>标签

< div>< /div>标签把网页页面分割为不同的独立部分，通常用于定义文档中的区域或节。该标签是块级元素，浏览器自动在< div>< /div>所标记的区域前后放置一个换行符，每个标签可有一个独立的id号。可设置< div>< /div>标签内的样式等属性。

< span>< /span>标签

< span>< /span>标签通常作为文本的容器，无特定含义和样式，与CSS同时使用才有可以指定文本设置样式。该标签是内联元素，与块级元素相反，内联元素不会自动在前后放置换行符，因此内联元素默认在同一行表示。

HTML5新增常用标签

新增文档结构标签

页眉标签< header>< /header>

用于定义整个网页文档或其中一节的标题。

导航标签< nav>< /nav>

用于定义导航菜单栏

节标签< section>< /section>

用于定义节段落

文章标签< article>< /article>

用于定义正文内容，每个article都可以包含自己的页眉页脚

侧栏标签< aside>< /aside>

用于定义网页正文两侧的侧栏内容

页脚标签< footer>< /footer>

用于定义整个网页文档或其中一节的页脚

新增格式标签

记号标签< mark>< /mark>

用来突出显示指定区域的文本内容。可以为文字添加黄色底色

进度标签< progress>< /progress>

用于显示任务的进度状态，可配合JavaScript使用以显示任务进度的动态进行效果。该标签可以增加属性value和max分别用于定义任务进度的当前值和最大值。

度量标签< meter>< /meter>

用于显示标量测量结果，通常用于显示磁盘使用量、投票数据统计等。该标签通常应用于已知范围内的恒定数值标记，不用于任务进度指示。
度量标签< meter>有一系列属性用于辅助显示效果，属性相关说明如下图：

新增API

常用API列举：

• 拖放----实现元素的拖放
• 画布----实现2D和3D绘图效果
• 音频和视频----实现自带控件播放音频和视频
• 表单----新增一系列输入类型，比如，电话号码、数字范围、E-mail地址等
• 地理定位----使用浏览器进行地理位置的经纬度的定位
• Web存储----实现本地持久化存储大量数据