HTML 常用标签2

span 标签

对、、这三个标签进行一下总结：

和标签是为了强调一段话中的关键字时使用，它们的语义是强调。
标签是没有语义的，它的作用就是为了设置单独的样式用的。

如果现在我们想把上一段诗中的朝代和作者设置成red(red红色)，但注意不是为了强调这个，而只是想为它设置和其它文字不同的样式(并不想让屏幕阅读器对朝代和加重音读出)，所以这样情况下就可以用到标签了。

如下面例子：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<style>
span{color:red;
}
</style><body><h1>水调歌头·丙辰中秋</h1>
<pre>
<span>朝代：宋代
作者：苏轼</span>
<strong>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</strong>明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
<em>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</em>
<pre></body>
</html>

HTML字符实体

空格：代表一个半角空格。一个汉字是2个字节。1个字节相当于1个半角空格。

<：<

>：>

&：&

￥：¥

×：$times;

÷：$divide;

通过实例，会看的更加清楚

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><font size="4">双十一快到了&nbsp;&nbsp;&nbsp;&nbsp;推荐大家去淘宝上多买点书，这本&lt;PHP高级程序设计：模式、框架与测试&gt;只要10&yen;</font></body>
</html>

注：一定要加上“;”符号，不然识别不出来

HTML列表

HTML项目符号(无序列表)

网页中的列表随处可见，比如新闻页面随处可见这样的列表

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

下面，我们来实现这样的效果

语法：

内容1
内容2
内容3

ul 或 li 的常用属性

type：项目符号的类型，取值：disc(小黑点)、circle(空心圆)、square(实心方块)

实例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><ul type="square"><li>三星在大陆召回19万台Note7手机 可全额退款</li><li>国土部等5部委：进城落户人口人均用地不超1百平米</li><li>13位科学家实名呼吁对韩春雨启动调查：为学界名声</li></ul></body>
</html>

注：在HTML标记中，内容应该放在最底层标记中。

HTML编号列表(有序列表)

网站之中还有这样的列表

这类信息展示就可以使用

标签来制作有序列表来展示。

语法：
1. ……
2. ……
3. ……
ol 或 li 的常用属性

type：编号类型，取值：1、a、A、i、I
start：从第几个开始编号(数字)。

改造上面一个例子：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><ol type="1" start="1"><li>三星在大陆召回19万台Note7手机 可全额退款</li><li>国土部等5部委：进城落户人口人均用地不超1百平米</li><li>13位科学家实名呼吁对韩春雨启动调查：为学界名声</li></ol></body>
</html>

图片标记

图片标签

注：这是一个单边标签

在网页中，随处可见图片的踪影

基本上每个网页都有图片

接下来，我们来使用<img>标签给我们自己的网页加上图片

语法格式：<img 属性 = “值”>

常用属性

Width：图片宽度
Height：图片高度
Border：图片边框粗细。
Src：图片的路径(相对路径)
Align：图片的水平对齐方式，取值：left、center、right
Hspace：图片与左右文字之间的距离(水平距离)
Vspace：图片与上下文字之间的距离(垂直距离)。

注意事项

如果图片想等比例缩放，只需要指定width或height其中一个。
Align属性只能让文本居中，不能让图片单独居中。
Align可以实现“图文混排”效果。align = “left | right”
来看个实例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><p>Life was like a box of chocolates, you never know what you're gonna get.(生命就像一盒巧克力，结果往往出人意料。)---《阿甘正传》 </p><img src="/upload/course/000/000/009/58117bf7d1215384.jpg" width="200" border="5" align="center"></body>
</html>

meta 标签

http-equiv属性

功能：模拟http协议文件头信息，当信息从服务器端传到客户端时，告诉浏览器如何正确的显示网页内容。
http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。

(1)设置网页的字符集

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

这个我们在前面的例子中已经接触过很多次了

(2)网页自动刷新

<meta http-equiv="refresh" content="2">   //每隔2秒钟，自动刷新网页一次
<meta http-equiv="refresh" content="2;url=http://www.baidu.com">   //2秒钟后，跳转到百度

来看个实例

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="refresh" content="2;url=http://www.baidu.com"></head><body><h1>欢迎加入php.cn</h1><h2>希望你能够在这里学的开心</h2></body>
</html>

name属性

name属性主要用于设置网页的搜索关键字、版权信息、作者等。

来看一个网站的搜索结果

(1)第一部分为设置网页搜索关键字

<meta name="keywords" content="小猪cms,pigcms,微信公众平台源码,微信分销,微信开发,微信o2o源码..." />

(2)第二部分为设置网页描述信息

<meta name="description" content="小猪cms是国家高新技术企业,双软认证企业,资深微信开发专家,提供微信营销系统,o2o系统,微信分销,微信应用号源码程序,公司客户遍布世界各地”>

表格标签

网页中有类似word里面的功能，当然，也会有类似excel里面的功能，表格就是其中之一

表格的结构

<table><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr>
</table>

table 属性

Width：表格宽度，单位可以是百分比，也可以是固定值。
Height：表格高度。
Align：表格水平对齐方式，取值：left、center、right
Border：边框粗细。
Bordercolor：边框颜色。
bgColor：表格背景色。
background：背景图片URL。
cellpadding：单元格边线到内容间的距离(填充距离)
cellspacing：单元格与单元格之间的距离(间距)
rules：合并单元格边框线，取值：all

注意：rules兼容性不好，请使用CSS来取代它。

我们来实际画一个表格

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"><tr><td>工号</td><td>姓名</td><td>职位</td></tr><tr><td>001</td><td>小明</td><td>设计师</td></tr><tr><td>002</td><td>小方</td><td>工程师</td></tr><tr><td>003</td><td>小白</td><td>程序员</td></tr></table> </body>
</html>

tr 属性——行标记

bgColor：行的背景色
height：行的高度
align：行中的文本水平居中，取值：left、center、right
valign：垂直居中，取值：top(上)、middle(中)、 bottom(下)

td 或 th 属性

<td>是普通单元格，<th>是标题单元各，居中加粗显示。

width：单元格宽度
height：单元格高度
bgColor：单元格背景色
background：单元格背景图片
align：水平对齐
valign：垂直水齐
rowspan：上下单元格合并。合并属性必须放在第一个单元格中。
colspan：左右单元格合并。合并时，有增就得有减，要保证每一行单元格的个数不变。

实例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"><tr bgColor="red" align="center"><th>星期日</th> <th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th></tr><tr bgColor="yellow" align="center"><td height="50">25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>1</td></tr><tr align="center"><td  height="50">2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr></table> </body>
</html>

注：属性是区分大小写的，bgColor如果写成bgcolor是没有效果的

caption标签

为表格添加标题和摘要

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：

标题

用以描述表格内容，标题的显示位置：表格上方。

语法：

<table>    <caption>标题文本</caption>   <tr>       <td>…</td>       <td>…</td>       …   </tr>…</table>

实例：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"summary="日历信息"><caption>2016.10日历</caption><tr bgColor="red" align="center"><th>星期日</th> <th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th></tr><tr bgColor="yellow" align="center"><td height="50">25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>1</td></tr><tr align="center"><td  height="50">2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr></table> </body>
</html>

XHTML简介

XHTML简介

传统的HTML开发的初衷是面向pc机的，而随机移动终端的不断出现，HTML已经满足不了市场的需求了。

XHTML是新一代的HTML标注语言。
XHTML的目的是为了取代HTML。
XHTML的标记，与HTML一模一样。
XHTML的语法要比HTML严格的多。
XHTML可扩展超文本标注语言。

XHTML编写规范

所有的标记和属性要全小写
单边标记必须关闭。如：
——>
所有的属性值都必须要加引号。
所有的属性都必须有值。如：

——
标记之间要顺序嵌套，外层套内层，一层套一层。
XHTML网页必须要有DTD文档类型定义代码。

注：希望大家以后书写HTML时，尽量严格按照XHTML编写规范来编写

DTD文档类型定义

DTD文档类型定义的目的：是一种验证机制，也就是说检验一下你写的XHTML标记语法是否合法。

DTD一共有三大类型：

严格型、过度型、框架型

严格型的DTD

在严格型的DTD中，不能再使用各种表现的标记。如：、、

要求必须使用CSS来取代各种表现标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

过渡型的DTD

在过渡型的DTD中，可以继续使用HTML中的表现的写法。

这些表现标记，还可以继续使用。如：、、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

框架的DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">