基本框架：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>标题 h1~h6
<h1> 文本 </h1>
<h2> 文本 </h2>
<h3> 文本 </h3>
<h4> 文本 </h4>
<h5> 文本 </h5>
<h6> 文本 </h6>段内换行 br
<br/>
段内分组 span
<span> 文本 </span>水平线 hr
<hr/>
段落 p
<p> 文本 </p>预留格式 pre
<pre> 文本 </pre>注释 <!- ->
<!-注释内容->强调文本 b.i.em.strong
<b>标记原本含义是加粗，现在表示“文体突出”文字，通俗讲就是普通段落文字中突出不安分的文字，并把这部分文本呈现为粗体文本
<i>标记原本只是倾斜，现在用来体现与文本中其余部分不同的部分，并把这部分文本呈现为斜体文
<b> 文本 </b> 加粗
<i> 文本 </i> 倾斜
<em> 文本 </em> 倾斜
<strong> 文本 </strong> 加粗作品标题 cite
<cite>标记用来定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等）的标题
<cite> 文本 </cite>小型文本 small
<small> 文本 </small>标记文本改变 ins.del
<ins> 插入的文本 </ins>
<del> 删除的文本 </del>文字上下标 sub.sup
<sub> 下标文本 </sub>
<sup> 上标文本 </sup>旁注 ruby.rt.rp
<ruby> 标记定义需要被旁注的文本（文本的注音或解释）
<rt> 标记定义文本的注音或解释，还包括可选的rp元素，定义当浏览器不支持ruby元素时显示的内容
<ruby>
文本 <rt> 文本的注音或解释 </rt>
</ruby>举例：
<body>
<h1>龙生九子之睚眦</h1>
<ruby>
睚眦<rt>yá zì</rt>
</ruby>
<br />
<ruby>
睚眦<rt><rp>（</rp>yá zì<rp>）</rp></rt>
</ruby>
</body>效果：
日期时间 time
<time datetime=" " pubdate=" "> 元素内容 </time>其它语义化、结构化文本
块级元素与行内元素
文档<body>部分出现的元素，它们可以被分为块级元素和行内元素。
块级元素在浏览器中显示时，就好像在它的首尾都有一个换行符。例如<p>、<h1>-<h6>、<pre>、<address>、<header>、<nav>和<footer>等。
行内元素则可以出现在某一行句子中而不必新起一行。例如<b>、<i>、<em>、<strong>、<sup>、<sub>、<small>、<ins>、<del>和<cite>等都是行内元素。
从严格意义上讲，行内元素不可以包含块级元素，并且只能处于块级元素内， 而块级元素则可以包含块级元素，也可以包含行内元素。
无语义的容器元素 div.span
语义即意义，HTML5的语义元素能够为浏览器和开发者清楚的描述其意义，HTML5中大部分标记都是语义元素，本节主要介绍两个无语义元素——<span>和<div>，两者特别是<div>是排版布局很常用的容器类元素。
<div> 元素是块级元素，它是可用于组合其它HTML元素的容器，也就是说<div>标记是一个区块容器标记，可以容纳段落、标题、表格、图片等各种HTML元素。 <div>元素没有特定的含义，如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div>元素最常见的用途是网页布局，DIV+CSS布局方法取代了使用表格定义布局的老式方法。
<span>元素是一个行内元素，它是<div>元素的一位表亲，同样是一个没有语义的通用元素，就其本身而言，<span>元素对文档的视觉效果没有任何影响。
使用字符实体表示特殊字符
无序列表 ul.li
<ul>
<li>列表项</li>
<li>列表项</li>
...
</ul>有序列表 ol.li
<ol>
<li>列表项</li>
<li>列表项</li>
...
</ol> 
描述列表 dl.dt.dd
<dl>元素代表了一个描述列表，由0到多个“术语-描述”组构成，每一组都与一个或多个“术语”（<dt>元素的内容）以及一个或多个“描述”（<dd>元素的内容）相关。
创建描述列表应使用描述列表标记<dl>，
<dt>标记定义列表项
<dd>标记用于描述列表中的项目
一个<dl>元素里有若干个<dt>
每一个<dt>元素对应若干个<dd>元素
举例：
<d1>
<dt>赤鷩</dt>
<dd>鸟，可以御火</dd>
<dd>赤鷩，山鸡之属，胸腹洞赤，冠金，背黄，头绿，尾中有赤，毛彩鲜明。</dd>
<dt>葱聋</dt>
<dd>兽，其状如羊而赤鬣</dd>
<dd>符禺之水出焉，而北流注于渭。其兽多葱聋，其状如羊而赤鬣</dd>
<dd>《埤雅》也认为：葱聋是“羊之异者，赤鬣谓之葱聋”。</dd>
<dt>鳢鱼</dt>
<dd>鱼，其状如鳖，其音如羊</dd>
<dt>肥囗</dt>
<dd>蛇，六足四翼，见则天下大旱</dd>
</d1>效果：
【HTML5中的图像、音频和视频】
在页面中插入图像 img
1.JPEG格式 JPEG 格式由一个软件开发联合会组织制定，是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤,文件后辍名为“．jpg”或“．jpeg”。
2. GIF格式 GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。
3.PNG格式 PNG 是无损的格式，因此采用这种格式对图像进行压缩时不会造成品质的损失。GIF 只有256 种颜色，但PNG 却支持几百万种颜色。
————————————————————————
1、图像资源属性——src属性
在<img>元素中src属性是不能缺省的。
<img src="url" />2、图像替代文本——alt属性
使用alt 属性，可以为图像添加一段描述性文本，当图像不能够正常显示或鼠标指向图片并暂停在图片上时会显示的替代文本。
<img src="url" alt="替代文本" />3、图像的宽高——width和height属性
<img src="url" width="像素|百分比" height="像素|百分比" />在网页中插入视频 video
HTML5 支持三种视频文件格式：mp4、webm和ogg。目前各种浏览器支持的视频格式不一致。
通过HTML5的新增加的video标记，可以快速的在网页中嵌入影片，只要使用的浏览器支持视频格式，不需要安装任何第三方插件。
<video src="url" controls="controls" autoplay="autoplay"
width="百分比|像素" height="百分比|像素" preload="auto|meta|none" loop="loop">
浏览器不支持video，会显示此部分内容
</video>在网页中插入音频 audio
和<video>元素类似，HTML5新增的<audio>元素用于加载音频文件，HTML5规定了一种通过<audio>元素来包含音频的标准方法。
音频目前主要有5种格式：mp3、ogg vorbis、wav、mp4和aac。
<audio>元素能够播放声音文件或音频流。<audio>元素的属性与<video>元素具有的属性大致相同，不过<audio>元素比<video>元素常用的属性少了四个，分别是：muted、width、height、poster。
<audio src="url" controls="controls" autoplay="autoplay"
preload="auto|meida|none" loop="loop">
浏览器不支持audio，会显示此部分内容
</audio>使用多种来源的多媒体和备用文本 source
<source>元素可以链接不同的媒体文件，例如视频文件和音频文件等。
<video>元素或者<audio>中可以指定多个<source>元素
<video width="369" height="208" controls="controls">
<source src="paddle-steamer.mp4" type="video/mp4">
<source src="paddle-steamer.webm" type="video/webm">
浏览器不支持video元素
</video>插入多媒体文件 embed
在某些情况下，必须包含一些不被<audio>和<video>元素支持的内容，此时应该使用<embed>元素进行处理。对于要求使用外部辅助应用程序或插件的多媒体内容——如Adobe Flash，<embed>元素正好派上用场。
<embed src="url" width="像素" height="像素" type="类型"></embed>定义媒介分组和标题 figure / figcaption
<figure> 和 <figcaption> 是两个经常在一起使用的语义化元素。
<figure> 元素不仅仅只限于图片的使用，也适用于其它元素，例如:代码块、视频、音频剪辑。
<figcaption> 元素代表了<figure>元素的一个标题或者说是其相关解释。
<figure>
<figcaption>标题</figcaption>
…
</figure>超链接
<a href＝"URL ">链接起点</a><a>标记是英文anchor（锚点）的简写。
<a>元素中间的内容是链接的起点，一般是文本或图片。
href属性用于设定链接目标地址，链接目标为URL地址。
<a href＝"URL ">文字</a>
<a href="链接目标"><img src="图像路径"/></a>外部链接
如果链接的目标点位于Web上而不是网站内部，一般要使用外部链接，创建外部链接通常要使用绝对路径。
<a href="网址">文字或图像</a>内部链接
如果链接的目标点位于网站内部，则常常是本地机器上的一个文件，这种链接就是内部链接，创建内部链接通常采用相对路径。
<a>标记的属性
在html5中，<a>标记原有的属性有一些已经不再使用了，如：charset、coords等属性，同时又增添了一些新的属性，如type和media等属性。
1. target属性
<a href="URL" target="目标窗口的打开方式">链接元素</a>“target属性”用于指定打开链接的目标窗口，其默认方式是原窗口。
_self: 默认值，被链接的目标加载到与该链接文字相同的窗口中。
_blank: 将被链接的目标加载到新的浏览器窗口中。
_parent: 将被链接的目标加载到父框架窗口中。
_top: 被链接的目标加载到整个浏览器窗口中并删除所有框架。
浏览器窗口名称：在某个已经指定名称的浏览器窗口中打开链接。
2. type属性
“type属性”规定目标URL的 MIME 类型，默认值为all。
MIME类型类似于文件扩展名，在不同操作系统中被广泛接受，例如HTML页面的MIME类型是text/HTML，GIF图像的MIME类型是image/gif，CSS文件的MIME类型是text/css。
附录中给出了常见MIME类型。
例如：
<a href="images/flower.jpg" target="_blank" type="image/jpeg">春花秋月</a>
<a href="index.html" type="text/html">首页</a>3. media属性
“media属性”规定目标URL是为什么类型的媒介/设备进行优化的，一般情况该属性用于规定目标URL是为特殊设备（比如iPhone）、语音或打印媒介设计的。
例如：
<a href="http://myleaf.com" media="handheld">移动设备</a>4. hreflang属性
“hreflang属性”规定目标URL的基准语言，用于当链接的目标页面与当前页面语言不同的情况，其取值是一个双字符语言代码。
例如：
<a href="http://myleaf.com" hreflang="EN">目标英语</a>5. rel属性
“rel属性”指明当前文档与href属性指定资源间的关系。主流浏览器目前对此特性没有任何实际使用，在此不做详细描述。
例如：
<a href=“http://myleaf.com” rel=“help”>查看帮助</a>6. title属性
“title属性”是HTML5的全局属性，规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段提示文本。一般来说，以图像为起点的超链接都应该使用“title属性”。
例如：
<a href="http://myleaf.com" title="回到首页">首页</a>Email链接
Email链接是一种目标为电子邮件地址的特殊链接，点击电子邮件链接后，将启动机器上的电子邮件管理软件，并解析出电子邮件地址。
例如：
<a href="mailto:dingdang@126.com">联系我们</a>浏览者一旦单击了“联系我们”这个链接，将自动启动本机上的电子邮件管理软件的写信功能，并已经把收件人的邮箱地址写入收件人地址栏中。
锚记（书签）链接
锚记链接是超链接的一种，又被称为书签链接，常常用于那些内容庞大繁琐的网页，通过锚记链接，能够指向某个页面的特定位置（锚记）。<a>元素的name属性用于定义锚记的名称，一个页面可以定义0到多个锚记，通过<a>的href属性可以根据name跳转到相应的锚记位置。
锚记链接的目标锚记位置可以在同一页面中，也可以在不同页面中，在同一页面中只需指定锚记位置，在不同页面中需要指定好目标的页面地址和锚记位置。
<a name="锚记名称"></a> <!-- 命名锚记名称-->
<a href="#锚记名称">链接元素内容</a> <!-- 同一页面锚记链接 -->
<a name="锚记名称"></a> <!-- 命名锚记名称-->
<a href="URL#锚记名称">链接元素内容</a> <!-- 不同页面间锚记链接 -->设置图像映射
有时候需要在图像上的某个区域或多个区域设置链接，这就需要用到图像映射。图像映射是一个能对链接指示做出反应的图形，单击该图像的已定义区域，可转到与该区域相链接的目标。图像映射也被称为热区链接，也就是在图像上设置一到多个热点区域（热区），然后在每个热区上都可以设置超链接。
<img src="图像路径" usemap="#图像映射名称" />
<map name="图像映射名称" id="图像映射名称">
<area shape="形状" coords="坐标" href="URL" />
<area shape="形状" coords="坐标" href="URL" />
......
</map>
内联框架<iframe>及其链接
HTML4中，布局可以使用框架<frame>和<frameset>，由于框架对网页可用性存在负面影响，在HTML5中不再支持<frame>和<frameset>，但保留了内联框架<iframe>。
内联框架
<iframe>元素可以用来创建包含在另外一个文档中的浮动窗口，被称为内联框架或内嵌窗口等。简单讲就是在一个页面上开辟一个窗口，在这个窗口中可以嵌入显示其它的HTML文档，类似于“画中画”的感觉。
<iframe src="URL">……<iframe>内联框架相关的链接
<!DOCTYPE html>
<html>
<head>
<title>内联框架</title>
</head>
<body>
<h2>内联框架链接示意</h2>
<p>
例5-9-1.html中内容<br />
<a href="5-9-3.html" target="in" >链接到5-9-3.html</a> <br />
<a href="images/ar.jpg" target="in" >链接到图片ar.jpg</a>
</p>
<iframe class="s" src="5-9-2.html" name="in"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>嵌入的页面</title>
</head>
<body>
<h1>嵌入的页面</h1>
<p>
例5-9-2.html的内容<br />
<a href="5-9-3.html">链接到5-9-3.html</a><br />
<a href="http://www.baidu.com" target="_top">百度</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>链接页面</title>
</head>
<body>
<h1>显示到内联窗口的链接目标页面</h1>
<p>例5-9-3.html的内容</p>
</body>
</html>定义基准地址<base>
<base>元素用来为当前页面中的所有相对URL规定一个默认地址或默认目标。通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对的URL，使用<base>可以改变这一点，浏览器将不再使用当前文档的URL，而使用由<base>标记指定的基准URL来解析所有的相对URL。
<base>标记位于网页的head部分，影响到的相对URL包括<a>、<img>、<link>和<form>标记。
<head>
<base href="url" target="值" />
</head>表格
<table> <!--表格开始-->
<caption>...</caption> <!--表题目-->
<tr> <!--行开始-->
<th>...</th> <!--单元格，内容默认居中加粗-->
</tr> <!--行结束-->
<tr> <!--行开始-->
<td>…</td> <!--单元格-->
</tr> <!--行结束-->
</table> <!--表格结束-->在HTML5以前版本里面，<table>标记支持很多属性，但为了新的标准希望网页样式用CSS设计，<table>中规定样式的属性被去掉了，只保留了"border"属性。border属性：表示是否显示表格的边框，只使用值 "1" 或 "0 "；如果修改border属性值为"0"，表示无边框，和默认效果一样。
<table border="属性值">合并单元格
设置跨列——colspan
<td colspan="#">设置跨行——rowspan
<td rowspan="#">表格嵌套
表格的按行分组显示<thead>/<tbody>/<tfoot>
<thead>、<tfoot> 以及<tbody>元素使您有能力对表格中的行进行分组。
<tfoot>标记定义表格的页脚（脚注或表注）。该标记用于组合 HTML 表格中的表注内容。
<tfoot>元素应该与<thead>和<tbody>元素结合起来使用。
<thead> 元素用于对 HTML 表格中的表头内容进行分组，而tbody元素用于对 HTML 表格中的主体内容进行分组。
表单
<form name=" " method=" " action=" " >
……
表单元素（如文本框、单选按钮、复选框、列表框、文本区域等）
……
</form>name：该属性表示表单的名称。
method：该属性用来定义提交信息的方式，取值为post或get，默认为get。
action：该属性用来指定处理表单数据的程序文件所在的位置，当单击提交按钮后，就将表单信息提交给该文件进行处理。
<form name="form1" method="post" action=" login.html" >
</form><input>标记
<input name=" " type=" " />
1. 文本框和密码框
文本框和密码框是表单设计里面最常用的两个表单元素，比如登录、注册等页面设计都会用到这两个表单元素。
<input type="类型" name="名称" readonly="只读" size="宽度"
maxlength="可输入字符数" value=”默认值”/>2. 按钮
在表单中常用的按钮有四种，分别是提交按钮、重置按钮、普通按钮和图片按钮。 提交按钮的type属性值为submit。 重置按钮就是让所有表单数据都还原到初始值。 普通按钮就是能生成一个按钮的形状，但单击按钮不会有任何操作，需要配合相关代码支持功能操作。 图片按钮当<input>标记的属性值为image时，就成为一个图像域，图像域相当于一个图片样式的提交按钮。
<input type="image" src="图片的位置" width="图片宽度" height="图片的高度" />3. 单选按钮
单选按钮(radio button)是较小的圆形按钮，它允许用户从一个选项列表中选择单个选项。只需使用input元素并将type特性设置为radio，就可以创建单选按钮。 在定义选项时，必须保证同一组的单选框的name属性值一样，这样才能在一组选项中作出一个选择。
4. 复选框
复选框允许从一个选项列表中选择多个选项。在input标记中设置type属性值为checkbox。在定义选项时，要注意如果name值一样的话，用户所有选项会组合为一个数据进行提交。
5. 文件域
文件域类型用于文件上传。在设计网站时，有时会需要用户上传一些本地计算机上的一些文件。这时候使用文件域就会非常方便，可以让用户自行选择要上传的文件。
6. hidden类型
hidden类型可以定义一个隐藏的表单控件。在浏览器中，这个隐藏项用户是看不到的。通常情况下，设计者可以利用隐藏表单控件存储一些数据，可以当作一个页面变量。
<input type="hidden" name="hiddenText" value="1000" /> 多行文字框<textarea>
<textarea>和</textarea>标记就用于定义一个多行文本域，常用于需要输入大量文字的地方，如留言、自我介绍等。由<textarea>创建的文本域对输入的文本长度没有任何限制，该区域在垂直方向和水平方向上都可以有滚动条。
<textarea rows="行数" cols="列数">
这是多行文字框
</textarea>列表<select><option><datalist>
1. <select>
<select>标记是和<option>标记配合使用的，一个<option>标记就是下拉菜单中的一项。
<select>
<option value="列表项的值1">列表项的说明1</option>
……
<option value="列表项的值n">列表项的说明n</option>
</select>2. <datalist>
< datalist>虽然也可以生成列表，但是不能独立使用这个表单。<datalist>标记必须和一个可输入文本框类型一起配合使用。
<input type="text" list="要绑定的datalist的id" name="名称" />
<datalist id=列表id >
<option label="列表项的说明1 " value="列表项的值1" />
……
<option label="列表项的说明n" value="列表项的值n" />
</datalist><input>新增表单高级
url类型
定义url类型的输入表单，是在input标记中设置type属性值为url。当提交数据时，该表单会对输入的路径值自动进行验证，输入的是不合法路径时会有提示语句。
<input type="url" name="名称"/>email类型
定义email类型的输入表单，是在input标记中设置type属性值为email。当提交数据时，该表单会对输入的邮箱地址值自动进行验证，如果用户输入不符合格式就会给出提示。
<input type="email" name="名称" />日期和时间
HTML5之前日期和时间是需要另外编程插入能选择日期和时间的控件，现在HTML5提供了多种新的日期和时间输入表单，用户可以方便的通过鼠标选择日期和时间。
<input type="时间日期关键字" name="名称" />数字类型
如果要在HTML5中输入整数，有两种数字类型可以实现number和range，这两种类型的属性都是一样的，唯一不同之处在于页面中的展示形式。
<input type="range或者number" name="名称" min="最小值" max="最大值"
step="步长" value="初始值" />color类型
HTML5提供了type为color的input表单，打破了以前设计网页时，如果想要任意选择一种颜色，必须依赖编辑工具的帮助。用户使用color新型表单控件可以通过鼠标在调色板上自由的选择颜色。
<input type="color" name="名称" />fieldset控件组
<fieldset>标记用于对同一个表单中的控件进行分组，也可以将一个网页上的不同表单进行分组，<legend>标记与<fieldset>标记搭配使用，<legend>标记可以为该控件组定义一个标题。
<form>
<fieldset>
<legend>控件组的标题</legend>
……
</fieldset>
</form>search类型
search类型用于搜索功能，但这个类型功能有限，真正的搜索功能是需要大量的代码和算法支持。
<input type="search" name="usearch" />tel类型
tel类型用于应该输入电话号码的地方，但HTML5这个类型的表单控件功能暂时没有特殊的验证功能，只是相当于一个普通文本输入框。
<input type="tel" name="phone" />通用的表单属性
autofocus属性
autofocus属性可以让页面的某个表单元素在页面加载完成后自动地获得焦点。
<input autofocus="autofocus" /> multiple属性
multiple属性适用于file类型或者select的 <input> 标记。multiple属性设置了这种输入框可以同时选中多个输入值。
<input type="file" multiple="multiple" />placeholder属性
placeholder属性称为占位属性，其属性值为占位文本。placeholder属性可以在输入域内给浏览者显示一段提示语句，当输入域获得焦点时，也就是当用户将光标定位进去后，这种提示就会自动消失。
<input type="属性值" placeholder="提示文本" />required属性
required属性是一个可用于各种表单的通用属性，该属性的作用是检测输入的内容是否为空，但不负责验证数据是否合法。
<inpu required="required" />pattern属性
pattern属性的作用相当于给input输入域加上一个验证模式，这个验证模式（pattern）是一个正则表达式。在提交时，会将输入框中的内容与表达式进行匹配，如果不符，则提示错误信息。
<input pattern="正则表达式" /> 
扫一扫
377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
