HTML5保留元素
来源：互联网 发布：笔记本电池维护软件 编辑：程序博客网 时间：2024/05/18 00:30
HTML5文档结构
<!DOCTYPE html><html><head><title>页面标题</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body>页面内容</body></html>指定页面使用的字符集有两种方式：
1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2. <meta charst="utf-8">
基本元素
1. <!– –> 注释
2. <style> 引入样式定义
3. <h1>到<h6>是标题
4. <p>段落
5. <br />换行
6. <hr />定义水平线
7. <div>定义文档中的节，自动换行
8. <span>行内标签，不会换行，不能包含p标签
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基本标签</title> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /></head><body> <!-- 采用标题一到标题六来输出文本 --> <h1>疯狂Java讲义</h1> <h2>疯狂Android讲义</h2> <h3>轻量级Java EE企业应用实战</h3> <h4>疯狂XML讲义</h4> <h5>疯狂Ajax讲义</h5> <h6>经典Java EE企业应用实战</h6> <!-- 输出一条水平线 --> <hr /> <!-- 使用三个span定义三节 --> <span>Tomcat</span><span>Jetty</span><span>Resin</span> <!-- 输出换行 --> <br /> <!-- 使用三个div定义三节 --> <div>Tomcat</div><div>Jetty</div><div>Resin</div> <!-- 使用三个p定义三段落 --> <p>Tomcat<p>Jetty<p>Resin</body></html>显示效果：
基本标签
疯狂Java讲义
疯狂Android讲义
轻量级Java EE企业应用实战
疯狂XML讲义
疯狂Ajax讲义
经典Java EE企业应用实战
TomcatJettyResin
Tomcat
Jetty
Resin
Tomcat
Jetty
Resin
文本格式化元素
1. <b>定义粗体文本
2. <i>定义斜体文本
3. <em>定义强调文本，效果和斜体文本差不多
4. <strong>效果和b标签差不多
5. <small>专门表示小字印刷体（免责声明、注意事项、版权信息、法律规定）
6. <sub>下标
7. <sup>上标
8. <bdo>定义文本显示的方向（dir属性）
<!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 文本格式化标签 </title></head><body> <span><b>加粗文本</b></span><br /> <span><i>斜体文本</i></span><br /> <span><b><i>粗斜体文本</i></b></span><br /> <span><em>被强调的文本</em></span><br /> <p><strong>加粗文本</strong></p> <small><span>小号字体文本</span></small><br /> <div>普通文本<sup>上标文本</sup></div> <span>普通文本<strong><sub>下标加粗文本</sub></strong></span><br /> <!-- 指定文本从左向右（正常情况）排列 --> <bdo dir="ltr">从左向右排列的文本</bdo><br /> <!-- 指定文本从右向左排列 --> <bdo dir="rtl">从右向左排列的文本</bdo><br /></body></html>显示效果：
文本格式化标签
加粗文本
斜体文本
粗斜体文本
被强调的文本
加粗文本
小号字体文本
普通文本上标文本
普通文本下标加粗文本
从左向右排列的文本
从右向左排列的文本
语义相关元素：
1. <abbr>表示一个缩写，title属性表示缩写的全称
2. <address>表示一个地址，斜体字显示
3. <blockquote>表示一段长的引用文本，缩进显示（cite属性指定应用的URL）
4. <q>表示短的引用文本，显示效果是加引号（cite属性）
5. <cite>表示书、电影等的标题，斜体显示
6. <code>表示一段代码
7. <dfn>定义一个术语，斜体或加粗显示
8. <del>表示删除的文本，中间加横线表示
9. <ins>插入的文本，下划线形式显示
上边两个元素有两个属性：cite 指向一个URL，datatime表示时间
10. <pre>原样标签，保留文本中的空格。
11. <damp>定义示范文本
12. <kbd>定义键盘文本
13. <var>定义一个变量
<!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 语义相关元素 </title></head><body><!-- 使用q表示一段短的引用文本。 --><p>疯狂Java的精神是<q cite="http://www.fkjava.org">疯狂源自梦想，技术成就辉煌</q>这也是所有疯狂Java程序员的精神。</p><div><!-- 使用blockquote表示一段长的引用文本。 --><blockquote>锦瑟无端五十弦，一弦一柱思华年。<br>庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br>沧海月明珠有泪，蓝田日暖玉生烟。<br>此情可待成追忆，只是当时已惘然。</blockquote>是唐朝诗人李商隐的代表作，诗中隐藏中一种淡淡的忧伤，让人无法言说，但又无以谴怀。</div><p><cite>《芙蓉镇》</cite>、<cite>《蓝风筝》</cite>是国内导演拍摄的最有思考深度的两部电影。</p><p>下面代码定义了一个Java类：<br><code> public class Cat<br> {<br> private int name = "garfield";<br> }<br></code></p><!-- pre元素包含的内容是“预格式化”文本。 --><pre> public class Cat { private int name = "garfield"; }</pre><p><!-- 使用abbr定义缩写 -->疯狂Java教育中心的缩写是<abbr title="疯狂Java教育">fkjava</abbr>。<!-- 使用address定义地址 -->疯狂软件地址是<address>广州市天河区车陂大岗路4号沣宏大厦3006-3011</address><!-- 使用dfn定义专业术语 --><p><dfn>HTML</dfn>是一种广为人知的标记语言。</p><p>可通过输入如下命令：<br/><kbd>list -l</kbd><br/>在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。</p><p>如果您在阅读疯狂Java体系图书时，遇到有任何无法理解的技术问题，<br/>请登录www.fkjava.org发帖提问，可按如下示例内容发帖：<br/><!-- 使用samp定义范例文本 --><samp>我在阅读XXX图书的第X章、第X节时，遇到一个XXX问题，<br/>错误提示信息是：XXX。</samp></p><!-- 使用var定义变量 --><var>i</var>、<var>j</var>、<var>k</var>通常用于作为循环计数器变量。<!-- 使用del和ins表示修订 --><p>Android是一个<del>开发</del><ins>开放</ins>式的手机、平板电脑操作系统</p></body></html>疯狂Java的精神是疯狂源自梦想，技术成就辉煌
这也是所有疯狂Java程序员的精神。
锦瑟无端五十弦，一弦一柱思华年。是唐朝诗人李商隐的代表作，诗中隐藏中一种淡淡的忧伤，让人无法言说，但又无以谴怀。
庄生晓梦迷蝴蝶，望帝春心托杜鹃。
沧海月明珠有泪，蓝田日暖玉生烟。
此情可待成追忆，只是当时已惘然。
《芙蓉镇》、《蓝风筝》是国内导演拍摄的最有思考深度的两部电影。
下面代码定义了一个Java类： public class Cat
{
private int name = "garfield";
}
public class Cat { private int name = "garfield"; }疯狂Java教育中心的缩写是fkjava。疯狂软件地址是
广州市天河区车陂大岗路4号沣宏大厦3006-3011HTML是一种广为人知的标记语言。
可通过输入如下命令：
list -l
在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。
如果您在阅读疯狂Java体系图书时，遇到有任何无法理解的技术问题，
请登录www.fkjava.org发帖提问，可按如下示例内容发帖：
我在阅读XXX图书的第X章、第X节时，遇到一个XXX问题，
错误提示信息是：XXX。
i、j、k通常用于作为循环计数器变量。
Android是一个开发开放式的手机、平板电脑操作系统
超链接和锚点（<a>标签）
href：指定超链接指向的一个资源
target：指定那个框架来加载连接的资源，_self（自身）、_blank（新窗口）、_top（顶层框架）、_parent（父框架）
media：指定目标URL的媒体类型，默认为all。只有当指定了herf属性后才有效，HTML5新曾的属性。
<!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 超链接 </title></head><body><!-- 在本窗口打开另一个资源 --><a href="http://www.crazyit.org"><b>疯狂Java联盟</b></a><br /><!-- 在新窗口中打开另一个资源 --><a href="http://www.crazyit.org" target="_blank"><em>疯狂Java联盟</em></a><br /><!-- 为图像增加超链接 --><a href="http://www.crazyit.org"><img src="img/logo.jpg" alt="疯狂Java联盟"/></a><br /><!-- 基于相对路径指定另一个资源 --><a href="text.html">文本格式化标签</a><br /></body></html>如果行对路径，就在该页面的基准路径上加上该文件名。
命名锚点：
<!-- 定义锚点 --><a name="test"></a><!-- 连接锚点，#之前可以跟一个URL --><a href="#test"></a>列表相关元素
<ul>无序列表（<li>）
<ol>有序列表。start属性指定开始的数字，type指定编号类型。
<dl>也用于生成列表。
<dt>定义标题列表。
<dd>定义普通列表项。
<!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 列表相关标签 </title></head><body> <!-- 定义无序列表 --> <ul> <li>疯狂Java讲义</li> <li>轻量级Java EE企业应用实战</li> <li>疯狂Android讲义</li> </ul> <!-- 定义有序列表 --> <ol start="2" type="I" reversed> <li>疯狂Java讲义</li> <li>轻量级Java EE企业应用实战</li> <li>疯狂Android讲义</li> </ol> <!-- 定义列表 --> <dl> <!-- 定义标题列表项--> <dt>疯狂Java体系</dt> <dd>疯狂Java讲义</dd> <dd>轻量级Java EE企业应用实战</dd> <dd>疯狂Android讲义</dd> <!-- 定义标题列表项--> <dt>作者其他图书</dt> <dd>Struts 2.1权威指南</dd> <dd>基于J2EE的Ajax宝典</dd> </dl></body></html>显示效果：
列表相关标签
- 疯狂Java讲义
- 轻量级Java EE企业应用实战
- 疯狂Android讲义
- 疯狂Java讲义
- 轻量级Java EE企业应用实战
- 疯狂Android讲义
- 疯狂Java体系
- 疯狂Java讲义
- 轻量级Java EE企业应用实战
- 疯狂Android讲义
- 作者其他图书
- Struts 2.1权威指南
- 基于J2EE的Ajax宝典
图像相关元素
<img…/>
属性：
src：指定图片文件地址。
alt：描述图片的文字。
height、weight高和宽，可以是像素也可以是百分比。
<map>
可以包含多个<area>元素
<area>元素定义一个区域，可以链接到一个URL，其属性为：
shape：指定区域类型，可以是矩形，圆形。
coords：坐标，指定区域位置。
href：链接的URL。
alt：描述文本。
target：目标框架。
media：URL的媒体类型。
<!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 图片相关标签 </title></head><body><img src="images/logo.jpg" alt="疯狂Java的Logo" /><br /><!-- 定义图片，指定高、宽 --><img src="images/logo.jpg" width="300" height="120" alt="疯狂Java的Logo" /><br /><!-- 定义图片，使用指定的图片映射 --><img src="images/logo.jpg" width="300" height="120" border="0" usemap="#test" alt="疯狂Java的Logo" /><br /><!-- 定义图片映射 --><map name="test" id="test"> <!-- 为该图片映射定义2个区域 --> <area shape="circle" coords="57,55,25" href="http://www.fkjava.org" alt="fkjava.org" /> <area shape="poly" coords="188,28,185,50,200,74,224,72,246,51" href="http://www.crazyit.org" alt="crazyit.org" /></map></body></html>表格相关元素：
<table>用于定义表格，属性有：cellpadding定义单元格内容和单元格边框之间的间距。cellspacing指定单元格之间的间距，width指定表格的宽度。
<captionn>定义表格标题
<tr>定义一行
<td>定义一个单元格，<th>定义表头（单元格），单元格的属性如下：colspan指定单元格跨多少列，rowspan指定单元格跨多少行，height、weight指定单元格的宽度和高度。
<thead>定义表头，可有可无（只能一个），<tfoot>定义表尾，可有可无（只能一个），<tbody>一个或多个。这三个元素主要是对表格中的行进行分组。有个表头和表尾，当表格过长时，就可以对表体内容进行滚动，打印时，表头表尾将被打印在包含表格数据的每个页面上。
<!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 简单表格 </title></head><body><table style="width:400px" border="1"> <caption><b>疯狂Java体系图书</b></caption> <tr> <th>书名</th> <th>作者</th> </tr> <tr> <td>疯狂Java讲义</td> <td>李刚</td> </tr> <tr> <td>轻量级Java EE企业应用实战</td> <td>李刚</td> </tr></table></body></html><!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 跨行、跨列的表格 </title></head><body><table style="width:240px" border="1"> <tr> <td rowspan="2">跨2行的单元格</td> <td>普通单元格</td> </tr> <tr> <td>普通单元格</td> </tr> <tr> <td colspan="2">跨2列的单元格</td> </tr> <tr> <td>普通单元格</td> <td>普通单元格</td> </tr></table></body></html>显示效果：
跨行、跨列的表格
HTML5中保留了如下两个标签（用在table标签中）：
<col>用于为表中一列或多列指定属性。只能用在table和colgroup标签中。span属性指定跨多少列。
<colgroup>用于为表中一列或多列指定属性。
<!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 带col的表格 </title></head><body><!-- 设置表格背景色为黑色，单元格之间的间距为1px 通过设置背景色为黑色可以实现边框效果--><table style="background-color:black; border-collapse:separate;border-spacing:1px;"> <caption><b>疯狂Java体系图书</b></caption> <!-- 定义所有列的背景色都是白色 --> <colgroup style="background-color:white;"> <!-- 设置第一列宽160px --> <col style="width:160px"/> <!-- 定义横跨两列，设置这两列各宽100px --> <col span="2" style="width:100px"/> </colgroup> <thead> <tr> <th>书名</th> <th>作者</th> <th>价格</th> </tr> </thead> <tfoot> <tr> <td colspan="3" style="text-align:right">现总计：2本图书</td> </tr> </tfoot> <tbody> <tr> <td>疯狂Java讲义</td> <td>李刚</td> <td>109</td> </tr> <tr> <td>轻量级Java EE企业应用实战</td> <td>李刚</td> <td>89</td> </tr> </tbody></table></body></html>框架相关元素：
HTML5删除了<frameset><frame><norames>这三个标签，但保留了<iframe>标签，src属性指定一个URL。
<!DOCTYPE html><html><head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 内联框架 </title></head><body><iframe src="img.html" width="200" height="120"></iframe>主页面内容</body></html> 0 0
- HTML5保留元素
- 疯狂html5讲义（二）：HTML5简的常用元素与属性（一）:html5保留的常用元素
- HTML5+CSS3+JS(第二课).HTML5保留的常用元素（一）
- HTML5+CSS3+JS(第二课).HTML5保留的常用元素（二）
- HTML5+CSS3+JS(第二课).HTML5保留的常用元素（三）和新通用属性
- HTML5元素
- HTMl5元素
- html5元素
- 链表去重 保留第一个元素
- 保留最后N个元素
- “删除重复元素”：保留两个
- HTML5 表单元素
- HTML5元素周期表
- HTML5之结构元素
- Html5新增的元素
- HTML5 Video元素
- html5-datalist 元素
- html5 表单元素美化
- Linux常用命令（1）
- http协议详解
- 如何设置wordpress的all-in-one-seo插件
- poj 3894 迷宫
- 初看泊松分布
- HTML5保留元素
- 使用sharepoint designer编辑pwa
- RAID和LVM
- 中软！第二天
- Cogs 14. [网络流24题] 搭配飞行员(二分图匹配)
- python--flask框架的安装和简单使用
- svn再封装
- hdu2234无题I 迭代深搜IDA*
- 学习Web前端的日子，部分转载
