HTML5学习2

今天所看的html5书籍上介绍了一下以下的内容，我们可以接着学习，下面学习过程中包含了一些例子在网上也可以找到，大家也可以多看一些其他的例子。

16、突出显示文本 <mark>
<mark> 定义有记号的文本。<mark> 标签是 HTML 5 中的新标签。
例：<p>学习网页设计，主要就是学习<mark>HTML</mark>、<mark>CSS</mark>和<mark>Javascript</mark>。</p>

17、水平线 <hr>

18、有序列表 <ol> <li>
<ol> 定义有序列表。
<li> 定义列表的项目。
例：
<ol>
   <li>《HTML5+CSS3网页布局和样式精粹》</li>
   <li>《HTML+CSS网页设计与布局从入门到精通》</li>
   <li>《锋利的jQuery》</li>
   <li>《《HTML 5与 CSS 3权威指南》》</li>
</ol>
对ol元素，有一下2个属性
start属性，规定起始数字。如start = "5"。
type属性，属性值为：1、a、A、i、I，表示序号的样式，在HTML5中取消了这个属性
例：
<ol type="a" start=3>
   <li>《HTML5+CSS3网页布局和样式精粹》</li>
   <li>《HTML+CSS网页设计与布局从入门到精通》</li>
   <li>《锋利的jQuery》</li>
   <li>《HTML 5与 CSS 3权威指南》</li>
</ol>

HTML5新增的属性reversed，表示序号反转，即按降序显示序号。

19、无序列表 <ul> <li>
<ul> 定义无序列表。
例：
<ul>
   <li>《HTML5+CSS3网页布局和样式精粹》</li>
   <li>《HTML+CSS网页设计与布局从入门到精通》</li>
   <li>《锋利的jQuery》</li>
   <li>《HTML 5与 CSS 3权威指南》</li>
</ul>
ul元素的type属性，值为：disc、square、circle，在HTML5中取消了这个属性

20、定义列表 <dl> <dt> <dd>
<dl> 标签定义一个定义列表。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

例：
<dl>
  <dt>第一章</dt>
    <dd>第一节内容</dd>
    <dd>第二节内容</dd>
    <dd>第三节内容</dd>
  <dt>第二章</dt>
    <dd>第一节内容</dd>
    <dd>第二节内容</dd>
</dl>

21、水平居中标签<center>
在 HTML 5 中，不再支持 <center> 标签。
例：
<center><h1>我的网页</h1></center>

22、设置文字式样的标签 <font>
<font> 标签规定文本的字体、大小和颜色。
在 HTML 5 中，不再支持 <font> 标签。
例：
<font size="16pt" face="隶书" color="green">这是一段文字</font>

23、链接 <a>
<a> 标签定义超链接。
href属性，表示链接的目标 URL。
target属性，表示打开链接的窗口，值为_blank时表示打开新窗口。
如：
<a href="http://t.qq.com/leixiaoyuan" target="_blank">我的微博</a>

可以链接到本网页的其它位置
如：
<a href="#abc">第4章</a>
<a id="abc">第4章</a>

24、图像 <img>
<img> 标签定义 HTML 页面中的图像。
图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。
<img> 的属性：
src：说明图像的 URL，
alt：规定图像的替代文本。
width：图像的宽度
height：图像的高度
不要通过 height 和 width 属性来缩放图像。
例：
<img src="image/HTML5+CSS3网页布局和样式精粹.jpg" width="500" height="500" alt="HTML5+CSS3网页布局和样式精粹" title="HTML5+CSS3网页布局和样式精粹" />

图像可做为链接
<a href="http://book.360buy.com/10849719.html" target="_blank"><img src="image/HTML5+CSS3网页布局和样式精粹.jpg" width="500" height="500" alt="HTML5+CSS3网页布局和样式精粹" /></a>

25、<figure> <figcaption> 标签
<figure> 定义媒介内容的分组，以及它们的标题。
<figcaption> 标签定义 figure 元素的标题。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
例：
<figure>
  <figcaption>五个主要浏览器的图标</figcaption>
  <img src="image/chrome.png" alt="chrome" />
  <img src="image/FireFox.png" alt="FireFox" />
  <img src="image/IE.png" alt="IE" />
  <img src="image/Opera.png" alt="Opera" />
  <img src="image/Safari.png" alt="Safari" />
</figure>

26、图像映射 <map> <area>
<map> 定义图像映射。
<area> 定义图像映射中的区域。
例：
<img src="image/navi.jpg" width="400" height="200" border="0" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="303,22,377,52" href="04-08-01.htm">
  <area shape="rect" coords="242,76,321,105" href="04-08-02.htm">
  <area shape="rect" coords="141,126,216,157" href="04-08-03.htm">
  <area shape="rect" coords="15,152,92,183" href="04-08-04.htm">
  <area shape ="circle" coords ="55,60,40" href ="04-08-05.htm">
</map>

27、表格 <table> <tr> <td>
table的属性
border：在HTML 4.01 中，border表示表格边框的宽度。在 HTML5 中，border 属性仅用于指示表格是否用于布局目的，且只允许属性值 "" 或 "1"。
cellspacing：规定单元格之间的空白。HTML5 中不支持。
cellpadding：规定单元边沿与其内容之间的空白。HTML5 中不支持。
align：设置表格的居中显示。HTML4.01不赞成使用，HTML5 中不支持。
bgcolor：设置表格的背景颜色。HTML4.01不赞成使用，HTML5 中不支持。
width：表格的宽度。HTML5 中不支持。

<tr> 定义表格中的行。
tr的属性
align：定义表格行的内容对齐方式。HTML5 中不支持。
valign：规定表格行中内容的垂直对齐方式。HTML5 中不支持。
bgcolor：设置表格行的背景颜色。HTML4.01不赞成使用，HTML5 中不支持。

<td> 定义表格单元。
td的属性
align：规定单元格内容的水平对齐方式。HTML 5 中不支持。
bgcolor：规定单元格的背景颜色。HTML4.01不赞成使用，HTML5 中不支持。
height：规定表格单元格的高度。HTML4.01不赞成使用，HTML5 中不支持。
width：规定表格单元格的宽度。HTML4.01不赞成使用，HTML5 中不支持。
valign：规定单元格内容的垂直排列方式。HTML5 中不支持。
colspan：规定此单元格可横跨的列数。
rowspan：规定此单元格可横跨的行数。
例：
<table>
 <tr>
  <td>A1</td>
  <td>A2</td>
  <td>A3</td>
 </tr>
 <tr>
  <td>B1</td>
  <td>B2</td>
  <td>B3</td>
 </tr>
 <tr>
  <td>C1</td>
  <td>C2</td>
  <td>C3</td>
 </tr>
</table>

28、表格中的<th> <caption>标签
<th> 定义表格中的表头单元格。
th基本和td一样。
th 元素中的文本呈现为粗体并且居中。
td 元素中的文本是普通的左对齐文本
<caption> 标签定义表格的标题。
<caption> 标签必须直接放置到 <table> 标签之后。每个表格只能规定一个标题。通常标题会居中显示在表格上方。

29、表格的分组 <thead> <tbody> <tfoot>
<tbody> 定义表格的主体。
<thead> 定义表格的表头。
<tfoot> 定义表格的脚注。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
例：
<table>
  <thead>
    <tr><td>THEAD 中的文本</td></tr>
  </thead>
  <tfoot>
    <tr><td>TFOOT 中的文本</td></tr>
  </tfoot>
  <tbody>
    <tr><td>TBODY 中的文本</td></tr>
  </tbody>
</table>

30、表格中的按列分组 <colgroup> <col>
<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
<col> 标签为表格中的一个或多个列定义属性值。
属性 span 定义 <colgroup> 或 <col> 应当横跨的列数。
通过使用 <colgroup> 和 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
如果您希望为多个表格列规定不同的属性值，请使用 <col> 元素。
提示：如果您希望为一组表格列规定相同的属性值，请使用 <colgroup> 元素。
例：
<colgroup span="2" style="background:#ccffff" />
<colgroup span="5" style="width:130px" />

 

在网上也有很多html5 游戏开发的例子，大家也可以找来多看一些，逐步加深学习的兴趣。