HTML5保留元素

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

HTML是一种广为人知的标记语言。

可通过输入如下命令:
list -l
在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。

如果您在阅读疯狂Java体系图书时,遇到有任何无法理解的技术问题,
请登录www.fkjava.org发帖提问,可按如下示例内容发帖:
我在阅读XXX图书的第X章、第X节时,遇到一个XXX问题,
错误提示信息是:XXX。


ijk通常用于作为循环计数器变量。

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



  1. 疯狂Java讲义
  2. 轻量级Java EE企业应用实战
  3. 疯狂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>

显示效果:





跨行、跨列的表格

跨2行的单元格 普通单元格
普通单元格
跨2列的单元格
普通单元格 普通单元格



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>
展开阅读全文

没有更多推荐了,返回首页