html语言中代表网页标题的标签是(html段落标签)
今天给各位分享html语言中代表网页标题的标签是的知识,其中也会对html段落标签进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
html 标签 属性
详解HTML
标签和属性
在HTML中,通常标签都是由开始标签和结束标签组成的,开始标签用“<标签名>”表示,结束标签用“</标签名>”表示。
元素指的是包含标签在内的整体,除去标签的部分叫做内容。
属性要在开始标签中指定,用来表示该标签的性质和特性。通常都是以“属性名=”值””的形式来表示,用空格隔开后,还可以指定多个属性。指定多个属性时不用区分顺序
颜色的指定方法
用HTML指定颜色有两种方法
1、用16进制数值来指定:在#号的后面,把RGB的各个选项用十六进制的数值来表示,数值保持两位数。
2、指定颜色的名称:可以对基本的16色用名称来指定其颜色
指定文件的位置
在对某部分设置链接的时候,需要指定链接端HTML文件的位置;同样,如果想在该处显示图像也需要指定图像的位置。在HTML中,这个位置用URL来表示,有以下两种表示方法:
1、绝对URL:绝对URL就是用Web浏览器查看网页时,地址栏中显示的以http://开头的路径
2、相对URL:相对URL是在同一站点内进行设置,类似于在同一磁盘上管理文件的形式。这种方法是以当前文件的位置为基准。使用相对URL时,如果要指定的文件在当前文件的下级,就从目录名开始一直写到要指定的文件名,中间用“/”符号隔开。如果在当前文件的上级,每上一级就加一个“../”符号
2、基本内容
显示HTML的版本
<!DOCTYPE~>
HTML的版本表明HTML文件是按照哪个版本进行编写的(标明该HTML文件遵循的DTD文件),不同的版本和种类都有固定的书写格式,要按照固定的格式输入文件开头,然后在文件开头处写明版本,按照这种版本的规定格式进行编写
必须使用的标签
<html>~</html>
<head>~</head>
<title>~</title>
<body>~</body>
HTML文件的开头写有<!DOCTYPE~>的部分,代表HTML的版本,其后是必须存在的四种标签
首先,<!DOCTYPE~>后面的整个都要用html标签(<html>~</html>)括起来,其中要按照head标签(<head>~</head)和body标签的顺序(<body>~</body>)的顺序进行排列。
在head标签中填写与该文件相关的信息,body标签中填写世纪要在浏览器上显示的内容。另外,在head标签中,只能有一个代表文件标题的title标签
设置页面的文字颜色
<body text=”颜色指定”>~</body>
设置页面的背景颜色
<body bgcolor=”颜色指定”>~</body>
设置页面的背景图像
<body background=”图像的URL”>~</body>
按照目的设定范围
<div>~</div>
<span>~</span>
插入注释
<!—注释语句-->
3、设置文件信息
添加标题
<title>~</title>
title标签用来给HTML文件添加标题
这个标签一定要位于<head>~</head>圈定的范围内。在这里指定的标题除了可以在通常的浏览器窗口的标题栏中显示以外,还可以作为加入收藏夹时的标题
显示文件编码
<meta http-equiv="Content-Type" content="text/html; charset=文字编码"/>
meta标签的charset属性表示该HTML文件是用什么文字编码编写的
注意,该标签一定要位于<head>~</head>范围内
添加关键字、内容介绍及作者姓名
<meta name="keywords" content="关键字1,关键字2,…"/>
<meta name="description" content="内容介绍"/>
<meta name="author" content="作者姓名"/>
这些信息都不会在画面上显示出来,但是搜索引擎在收集信息时要用到
注意,该标签一定要位于<head>~</head>范围内
设置样式表和脚本语言的种类
<meta http-equiv="Content-Style-Type" content="样式表的种类"/>
<meta http-equiv="Content-Script-Type" content="脚本的种类"/>
在HTML文件内可以设置样式表和脚本的默认语言
注意,该标签一定要位于<head>~</head>范围内
设置进入网页
<link rel=”关系” href=”URL”>
<link rev=”关系” href=”URL”>
rel:在本页看到的,与URL标明的网页之间的关系
rev:在URL标明的网页中看到的,与本页之间的关系
link标签表示的是该文件和与其相关的其他文件之间的关系
注意,该标签一定要位于<head>~</head>范围内
设置标准URL
<base href=”绝对URL”>
<base href=”绝对URL” target=”目标名”>
base标签用来设置将该页中使用的相对URL的标准指向成绝对URL,指定了这个标签之后,在该页指定的相对URL就会全部认定为已在这里指定的绝对URL。如果不进行这项设置,就以当前页的位置为标准,如果指定了Target属性,就可以指定打开链接地址网页的默认框架和窗口
注意,该标签一定要位于<head>~</head>范围内
设置自动倒入网页功能
<meta http-equiv="refresh" content="秒数"/>
<meta http-equiv="refresh" content="秒数";URL=要移动到的URL/>
在经过数秒后,自动开始导入网页。如果指定了要移动到的URL,就会导入URL指定的网页。如果没有指定,就会再次导入相同的页
注意,该标签一定要位于<head>~</head>范围内
4、设置文本类型
设置各级标题
<h1>~<h1>
…
设置段落
<p>~</p>
p标签表示的是该部分为一个段落
设置联系地址
<address>~</address>
address标签表示的内容是该网页制作者的联系地址和有关网页内容的咨询地址等信息
设置强调内容
<em>~</em>
<strong>~</strong>
这两个标签所圈内容表示该部分是强调的内容
设置较短的引用文字
<q>~</q>
<q cite=”引用页的URL”>~</q>
q标签代表的意思是该部分为较短的引用文,在引用段落的某一部分的时候使用,如果使用cite属性,还能够把引用页的URL显示出来
设置较长的引用文章
<blockquote>~</blockquote>
<blockquote cite=”引用页的URL”>~</blockquote>
设置文字内容的出处
<cite>~</cite>
设置缩略语
<abbr title=”字符串”>~</abbr>
<acronym title=”字符串”>~</acronym>
title:不处于省略状态下的词汇(字符串)
设置添加的内容
<ins cite=”URL” datetime=”添加日期时间”>~</ins>
设置需要删除的内容
<de cite=”URL” datetime=”删除日期时间”>~</del>
突出显示段落中的术语
<dfn>~</dfn>
表示与程序关联的文本
<kbd>~</kbd>:输入文本
<samp>~</samp>:输出样本
<code>~</code>:源代码
<var>~</var>:变量
显示特殊符号
<:<
>:>
":”
&:&
5、设置显示方式
设置文字的换行
<br>
添加了br标签之后,文本就会再该处换行。即使在HTML代码中已经换行了,在浏览器上显示的时候却反映不出来,因此如果想在浏览器上换行的话,就要使用br标签
添加不同横线效果
<hr>
<hr size=”粗细” width=”长度” align=”对齐方式” noshade>
加入了hr标签后,就可以在其标注的地方显示横线
设置文本格式
<b>~</b>:黑体字
<i>~</i>:斜体字
<tt>~</tt>:等大字体
<sup>~</sup>:上标
<sub>~</sub>:下标
<u>~</u>:下划线
<s>~</s>:删除线
设置空格和换行
<pre>~</pre>
<pre>标签可以保留文字在源代码中的格式,使得页面中显示的内容和源代中的格式完全一致
设置居中效果
<center>~</center>
center标签用于将指定范围内的内容设置为居中
设置行对齐方式
<h1 align=”行对齐方式”>~<h1>
<p align=”行对齐方式”>~<p>
<div align=”行对齐方式”>~<div>
使用align属性可以设置标题、段落以及指定范围内的行对齐方式
设置文字颜色
<font color=”设置颜色”>~</font>
设置字体类型
<font>字体名”>~</font>
设置字体字号
<font size=”字号”>~</font>
相对改变字体大小
<big>~</big>:增大
<small>~</small>:减小
<font size=”+n”>:增大n号
<font size=”-n”>:减小n号
设置字号的基本大小
<basefont size=”字号”>
size:1~7
6、设置链接相关的属性
链接到其他页面
<a href=”链接目标URL”>~</a>
a标签的href属性能把指定的范围链接到其他页面上,链接部分的词语要设置得让人看到这个部分就能联想到链接网页上的具体内容
另外,在链接图像的时候,一定要插入替代的文字(alt=”~”)使用户能够很明确的了解到链接的目标
链接到当前页的特定位置
<a href=”#位置名”>~</a>:指定链接文件(从什么位置开始链接)
<a name=”位置名”>~</a>:指定链接的地址(要链接的位置)
如果一页上的内容非常多,可以在一个网页中给特定的位置命名,然后再链接到该位置(跳转)。在给链接对象位置命名的时候要使用name属性。然后,在链接的时候,要用href属性在链接地址名称的前面加上#号
设置链接到其他页面的特定位置
<a href=”URL#位置名”>~</a>:指定链接源(从什么位置开始链接)
<a name=”位置名”>~</a>:指定链接的地址(要链接的位置)
在链接到其他网页上的时候,可以先给那一页上特定的位置命名,然后链接到该位置。在给链接对象位置命名的时候要使用name属性。然后,在链接的时候,要用href属性设置成”URL+#+位置名”这样一种格式
设置链接文字的颜色
<body link=”指定颜色” vlink=”指定颜色” alink=”指定颜色”>~<body>
link:还没有看见的链接部分的文字颜色
vlink:已经看见的链接部分的文字颜色
alink:鼠标单击链接部分的文字颜色
body标签用于设置网页整体链接部分的文字颜色
在新窗口中打开链接网页
<a href=” URL” target=”窗口名”>~</a>
利用target属性可以设置打开链接窗口的方式
通过设置链接来启动邮箱
<a href=”mailto:邮箱地址”>~</a>
7、制作不同类型的列表
为列表添加不同类型的标记
<ul><li>列表项目1</li><><li>列表项目2</li>…<ul>
ul标签的作用是将列表(条款形式)加上圆点或方括号的标记。列表的整体要在<ul>~</ul>标签范围内,在这之间的各个项目要在<li>~</li>标签之内
更改列表标记
<ul type=”标记种类”>~</ul>
<li type=”标记种类”>~</li>
标记的种类包括disc、cicle和square
制作带序号的列表
<ol><li>列表项目1</li><><li>列表项目2</li>…<ol>
改变序号的样式
<ol type=”序号样式”>~</ol>
<li type=”序号样式”>~</li>
改变序号的顺序
<ol start=”开始序号”>~</ol>
<li value=”开始序号”>~</li>
制作包含专用语和解释的列表
<dl><dt>专用语<dt><dd>对其解释</dd>…<dl>
8、设置表格
表格的基本形式
<table border=”边框的粗度”>~</table>:整个表格
<tr>~</tr>:单独一行
<th>~</th>:单元格:标题用
<td>~</td>:单元格:数据用
表格的整体要圈在<table>~</table>之间显示,表格当中某一个单元格用<th>~</th>表示或者<td>~</td>表示。每个单元格都在表的单独以行,放置在<tr>~</tr>中。也就是说,table标签的内容是由tr标签构成的。各个tr标签的内容是由表示单元格的th或者td标签构成的。th标签代表这个单元格的内容是标题。td标签代表这个单元格的内容是数据
为表格添加标题
<caption>~</caption>
<caption align=”对齐方式”>~</caption>
caption标签用来给表格添加标题
该标签一定要放在table标签的紧后面。标题的显示位置(即对齐方式)可以指定在表格的上部,或者表格的下部
指定表格的大小
<table width=”宽度”>~</table>
宽度:针对像素或者窗口的百分比
指定单元格大小
<th width=”宽度” height=”高度”>~</th>
<td width=”宽度” height=”高度”>~</td>
合并单元格
<th rowspan=”垂直方向的合并数”>~</th>
<th colspan=”水平方向的合并数”>~</th>
<td rowspan=”垂直方向的合并数”>~</td>
<td colspan=”水平方向的合并数”>~</td>
垂直方向的合并数:从当前单元格开始向下合并的单元格数
水平方向的合并数:从当前单元格开始向右合并的单元格数
设置单元格之间的距离
<table cellspacing=”单元格的距离”>~</table>
设置单元格边框与内容之间的距离
<table cellpadding=”单元格边框与内容之间的距离”>~</table>
设置单元格中的行对齐方式和列对齐方式
align属性用于设置单元格内的行对齐方式,valign属性用来设置单元格内的列对齐方式
禁止在单元格内换行
<th nowrap>~</th>
<td nowrap>~</td>
设置表格和单元格的背景颜色
bgcolor属性用于指定表格和单元格中的背景颜色
设置表格和单元格的背景图像
background属性用于指定表格和单元格中的背景图像
设置表格外框的宽度
<table border=”外框的宽度”>~</table>
设置表格外框的显示形式
<table frame=”外框的显示形式”>~</table>
设置表格内补边框线的显示形式
<table rules=”内部边框线的显示形式”>~</table>
定义表格中的横行
<thead>~</thead>:表头部分
<tbody>~</tbody>:表体部分
<tfoot>~</tfoot>:表底部分
thead标签、tbody标签和tfoot标签都是用来定义表格的横行(tr标签)的
这样组合之后,就可以针对该组合的整体来应用属性和样式表。
使用这些标签的时候,一定要以thead标签、tfoot标签和tbody标签的顺序进行排列。在一个表格里,只能放置一个thead标签和一个tfoot标签,而tbody标签可以根据需要放置多个
利用纵列设置表格属性和样式表
<col span=”纵列数”>
<col span=”纵列数” width=”宽度”>
col标签不仅可以用来改变表格的纵列结构,还可以用来根据纵列,来综合指定宽和行对齐方式等属性以及样式表
该标签放置的位置要在caption标签的紧后面(如果没有caption标签,就放在table标签的开始标签的紧后面),以及thead标签和tr标签的前面
设置表格居中
<table align=”center”>~</table>
将表格嵌入到文本中
<table align=”对齐方式”>~</table>
位置:left,right
将table标签的align属性指定为left或者right后,就可以将表格以居左或居右的方式嵌入到文字中间
如果想要解除嵌入状态,可以使用<br>标签的clear属性
解除表格的嵌套
<br clear=”解除表格那一侧的嵌套”>
left:解除左侧表格的嵌套
right:解除右侧表格的嵌套
all:解除两侧表格的嵌套
设置表格与嵌套文字之间的距离
<table vspace=”垂直距离” hspace=”水平距离”>~</table>
垂直距离:表格的上下框与文字间的距离
水平距离:表格的左右框与文字间的距离
9、设置图像与多媒体
插入图像
<img src=”URL” width=”宽度” hignt=”高度” alt=”替代文字”>
使用img标签,可以把图像插入到HTML文件中
图像的格式一般可以使用GIF格式、JPEG格式和PNG格式
不管图像实际的大小如何,都会按照在这里所指定的宽度和高度来显示
alt属性是在不能显示图像的情况下,指定替代图像所使用的文字
设置图像的边框
<img src=”URL” alt=”替代文字” border=”边框的粗度”>
设置图像与文字的垂直位置关系
<img src=”URL” alt=”替代文字” align=”对齐方式”>
在同一行中,如果有图像和文字,那么就可以用align属性来设置图像和文字的垂直位置关系
制作图像热区
<img src=”URL” alt=”替代文字” usemap=”#map名”>
<map name=”map名”>~</map>
<area shape=”形状” cords=”坐标” href=”URL” alt=”替代文字”>
在map标签中,用来设置实际单击的区域和链接地址的是area标签
在area标签中,一定要指定表示链接地址的替代文字,之后要用image标签的usemap属性指定定义后的image map的名称(名称前面要加#),这样图像就可以作为image map产生相应的效果
将图像嵌套在文本中
<img src=”URL” alt=”替代文字” align=”对齐方式”>
位置:left,right
解除图像的嵌套
<br clear=”解除哪一侧图像的嵌套”>
设置图像与周围文字之间的距离
<img src=”URL” alt=”替代文字” vspace=”垂直距离” hspace=”水平距离”>
放置Java小程序
<applet code=”类文件名” width=”宽度” height=”高度”>~</applet>
<param name=”参数名” value=”参数值”>
applet标签是嵌入Java小程序时要使用的标签
如果使用param标签,在执行java小程序时,需事先指定一些必要值。这时,param标签要位于<applet>~</applet>范围的最开始部分
10、制作不同类型的表单
制作填写表单
<form action=”URL” method=”发送形式” enctype=”MIME类型” target=”窗口名称”>~</form>
URL:用来处理发送后表格的程序的URL
发送形式:get,post
MIME类型:以post方式发送内容时的MIME类型
窗口名称:先是发送结果的窗口或框架名
form标签表示在表单中填写的内容是可以发送的
制作发送按钮
<input type=”submit” value=”标签” name=”名称”>
标签:在按钮上显示的文字
名称:按钮的名称
将input标签的type属性设置为submit,再根据form标签的设置,可以制作发送填写在表单中数据的按钮
制作重置按钮
<input type=”reset” value=”标签”>
制作通用按钮
<input type=”button” name=”名称” value=”标签”>
通用按钮通常与JavaScript等脚本语言组合使用
利用图像来制作发送按钮
<input type=”image” src=”URL” name=”名称” alt=”替代文字” align=”对齐方式”>
通常,发送按钮都使用input type=”submit”代码,不过图像也可以作为发送按钮,具有发送功能。这时,图像被单击的位置将和表单的内容一起被发送
制作不同功能的发送按钮
<button type=”类型” name=”名称” value=”发送值”>~</button>
类型:submit,reset,button
button标签是用来制作按钮专用的
通过指定type属性值,就可以产生具有不同功能的按钮,包括发送按钮、重置按钮和通用按钮。另外,在<button>~</button>中放置相应的内容,可以作为按钮的标签显示出来。在需要进行其他处理并设置多个发送按钮的情况下,根据name属性和value属性所显示的值,接受方就可以分辨出单击的是哪一个发送按钮
制作单行文本框
<input type=”text” name=”名称” value=”默认文字” size=”宽度” maxlength=”字符的最大输入数量”>
制作多行文本框
<textarea name=”名称” rows=”行数” cols=”宽度”>~</textarea>
制作输入密码的文本框
<input type=”password” name=”名称” value=”默认文字” size=”宽度” maxlength=”字符的最大输入数量”>
插入隐藏域
<input type=”hidden” name=”名称” value=”发送值”>
制作单选按钮
<input type=”radio” name=”名称” value=”发送文字”>
<input type=”radio” name=”名称” value=”发送文字” checked>
将input标签的type属性设置为radio,可以用来制作单选按钮。单选按钮是多个选项当中只能选择其一的按钮。作为公共项目的选项而使用的单选按钮,要把它们都指定为同一名称。另外,发送数据的时候,为了识别所选的是哪一项,要用value属性来指定相应的值
制作复选框
<input type=”checkbox” name=”名称” value=”发送文字”>
<input type=” checkbox” name=”名称” value=”发送文字” checked>
将input标签的type属性设置为checkbox,可以用来制作复选框。复选框可以在多个选项当中进行多项选择。作为公共项目的选项而使用的复选框,要把它们都指定为同一名称。另外,发送数据的时候,为了识别所选的是哪一项,要用value属性来指定相应的值
制作菜单
<select name=”名称”>~</select>:菜单整体
<option value=”发送值”>~</option>:菜单项
<option selected>~</option>:菜单项
select标签用来制作菜单
菜单的整体要在<select>~</select>范围之内显示,然后按需要的数量在其中放置表示选项的<option>~</option>。<option>~</option>范围之内要写上实际菜单要显示的选项的名称。另外,如果省略了value属性,在这里记录的文字本身就会作为所选值发送
组合菜单选项
<optgroup lable=”组合名称”>~</optgroup>:制作组合菜单
<option lable=”次选项”>~</option>:组合内的选项
组合名称:第一级显示的组合标题
次选项:对应组合名称下面的在第二级显示出来的选项
制作的菜单选项可以利用<select>~</select>标签组合起来
制作下拉列表
<select size=”行数” name=”名称” multiple>~</select>:下拉列表框
<option value=”发送值”>~</option>:菜单项
<option selected>~</option>:菜单项
在用于制作菜单的select标签中指定了size属性后,就可以显示下拉列表框
添加选择文件的功能
<input type=”file” name=”名称”accept=”MIME”类型>
将input标签的type属性设置为file,可以自动做成能够选择发送表单数据的文件按钮和文本框
综合利用菜单选项
<fieldset>~</fieldset>:组合
<legend align=”对齐方式”>~</legend>:组合的标题
field标签用来把填写在表单中需要包含的输入内容和选项组合起来
在<fieldset>~</fieldset>的最开始部分放置legend标签,并且给该组合加上标题
将标签文字与项目一体化
<label for=”参照ID”>~</lable>
参照ID:添加了标签的对象的id属性值
lable标签的作用是在输入项和选项及其标签文字之间建立起明确的关联,并使其一体化
11、利用框架布局网页
设置框架整体结构
<frameset rows=”高度”>~</frameset>
<frameset cols=”宽度”>~</frameset>
<frame src=”URL” name=”框架名称”>
高度:在垂直方向上分布的多个框架的高度,按从上到下的顺序依次用逗号隔开来指定
宽度:在水平方向上分布的多个框架的宽度,按从左到右的顺序依次用逗号隔开来指定
URL:作为框架内容显示的HTML文件的URL
框架名称:在指定链接等显示目标的时候使用的名称
使用框架功能可以把窗口横竖切割开,然后在不同的块区域中显示其他的HTML文件。在指定了框架的文件中,原来body标签所在的位置,要放置frameset标签,这主要是由于在框架页面中不能使用body标签
在<frameset>~</frameset>的范围中要按照顺序填入分割后框架内要填写的内容。如果不需要再分割,就用frame标签指定要导入的HTML文件,如果还要继续分割的话,就需要放置frameset标签(作为嵌套放置在里面,并且指定盖框架如何分割)
设置框架的显示方法
<frame scrolling=”滚动控制” noresize>
<frame marginwidth=”左右缩进” marginheight=”上下缩进”>
设置是否显示边框
<frame frameborder=”显示指定框架的边框”>
frameborder属性用来设置分割开相邻框架的边框是否显示
去除分割框架的边框
<frameset frameborder=”0” framespacing=”0” border=”0”>
在不支持框架的环境中显示所需内容
<noframes>~</noframes>
这个标签要在<frameset>~</frameset>范围的最开始或者最后处放置一个。在<noframes>~</noframes>范围内要首先放置body标签,并在其中填写所要显示的内容。
指定链接目标在哪一个框架内显示
<a href=”URL” target=”框架名”>~</a>
如果对框架内的文件中指定的链接不进行设置的话,就会在原来的相同框架中显示链接目标,如果想使这个链接目标在其他框架中显示的话,就需要指定target属性值,用想要显示(frame标签)的那个框架的name属性来指定框架名称
插入内嵌框架
<iframe src=”内容的URL” name=”框架名”>~</iframe>
iframe标签不仅可以放置分割窗口形式的框架,还可以在窗口中放置独立显示的内嵌框架。在框架内还可以显示src属性所指定的内容
如果浏览器不支持这种框架,要在<iframe>~</iframe>之间指定要显示的内容
12、关于脚本
在HTML中插入脚本
<script type=”MME类型”>~</script>
<script type=”MME类型” language=”语言名称” src=”URL”>~</script>
在HTML文件中编写脚本的时候要用到script标签,脚本语言要写在这个标签的范围内
这时,在不支持这个标签的浏览器上会在画面上显示出脚本的部分,为了避免这种现象,通常把脚本整体作为HTML的注释。这个标签可以放在<head>~</head>和<body>~</body>范围内的任意位置上
在不能执行脚本的环境中添加所需的内容
<noscript>~</noscript>
在脚本不能运行的时候,可以使用noscript标签来指定替代显示的内容
这个标签要放置在<body>~</body>的范围内
html标签
HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈.
也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面;你所需要的只是一个文字处理器(如McrosoftWord\记事本\写字板等等)以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。
HTML只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂.
HTML标签通常是英文词汇的全称(如块引用:blockquote)或缩略语(如“p”代表Paragragh),但它们的与一般文本有区别,因为它们放在单书名号里。故Paragragh标签是<p>,块引用标签是<blockquote>。有些标签说明页面如何被格式化(例如,<p>开始一个新段落),其他则说明这些词如何显示(<b>使文字变粗)还有一些其他标签提供在页面上不显示的信息--例如标题。
关于标签,需要记住的是,它们是成双出现的。每当使用一个标签--如<blockquote>,则必须以另一个标签</blockquote>将它关闭。注意“blockquote”前的斜杠,那就是关闭标签与打开标签的区别。
基本HTML页面以<html>标签开始,以</html>结束。在它们之间,整个页面有两部分--标题和正文。
标题词--夹在<head>和</head>标签之间--这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在<body>和</body>之间--即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。
那么让我们建立一个简单的范例吧,非常容易的。第一步,当然是要建立一个新的文本文件(记住,如果你在使用比较复杂的文字处理器,就应该用“纯文本”或“普通文本”来保存),将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文)
然后你可以用浏览器将它打开,你会看见最简单的自己做的页面。
如何处理html5新标签的浏览器兼容问题
HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML(标准通用标记语言下的一个应用)标准版本;现在仍处于发展阶段,但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点:首先,强化了Web网页的表现性能。其次,追加了本地数据库等Web应用的功能。
广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。
目前HTML5已向开发人员提供了很多新的标签,如section,nav,article,header和footer等。这些标签语义化程度高,会被经常使用,但在IE6,IE7,IE8和Firefox 2等老式浏览器中却不能识别和正常使用。
一、HTML5标签在浏览器展示存在的问题
对于现阶段来说,使用HTML5标签可能遇到的最大问题就是如何在不支持新标签的浏览器中做恰当的处理。当我们在页面中使用HTML5元素时,可能会得到三种不同的结果。
结果1:标签被当作错误处理并被忽略。那么DOM构建的时候,就会当作这个标签不存在。
结果2:标签会被当作错误处理,并在DOM构建的时候依然会按照预期的代码进行创建,并且HTML标签会被构造成行内元素(也就是说虽然不能识别,但是代码里section标签依然会在dom中创建一个对应section节点,但是属于行内元素)。
结果3:标签被识别为HTML5标签,然后用DOM节点对其进行替换。DOM在构建的时候和预想的一致,并且合适的样式会应用到标签上(大部分情况下是块级元素)。
有一个具体的例子,大家思考一下下面的代码:
<div><section><h1>title</h1><p>text</p></section></div>
很多浏览器(比如Firefox 3.6和Safari4)解析的时候都会将div作为最外层的元素,然后div里面是一个识别不了的元素(section),它会在DOM中创建,并被作为一个行内元素存在。h1和p元素都是作为section元素的子节点。因为section在DOM中真实存在,所以也可以修改其样式。这种情况对应结果2。
IE9之前的版本会认为section标签是一个错误,并直接将其忽略,那么h1和p标签会被解析,然后成为div标签的子节点。</section>也会被认为是一个错误并直接跳过。在这些浏览器中实际有效的代码是这样的:
<div><h1>title</h1><p>text</p></div>
那么,旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样,其对不可识别标签的容错能力还是很棒的。因为section节点没有在DOM树中构建,所以也就不能给其增加样式。这种情况对应结果1。
当然,支持HTML5的浏览器比如IE9,Firefox4+,Safari5+会创建正确的DOM结构,然后这些标签会默认附带HTML5规范中定义的默认样式。
那么,我们所面临的最大问题就是同样的代码在不同的浏览器中形成了不同的DOM结构,并且含有不同的样式。
二、如何解决HTML5标签不兼容
或许会有很多人在质疑:为什么老式的浏览器不能识别这些标签?其实错不在浏览器,因为在那个时代根本不存在这种标签,所以不能正确识别出来,而这种不寻常的标签识别令DOM结构变得异常。对此,人们想出了很多在现阶段页面中使用HTML5元素的解决方案。每一个解决方案为了做到兼容都会遇到一些特定的问题。在此也在马海祥博客上跟大家分享一下:
1、实现标签被识别
马海祥曾做个一个测试(以IE8为例),是一个文章标题和蓝色字的文章内容,其中文章内容用了article标签。代码如下:
<!DOCTYPE html><html xmlns=""><head><meta charset="UTF-8"/><title>测试</title><style>article{color:#06F;}</style></head><body><h1>文章标题</h1><article>这是文章内容,应该是一段蓝色的文字。在老式浏览器中,如果不做hack将显示异常。</article></body></html>
在IE8浏览器中,显示如下:
IE8不能识别article标签,定义在标签上的CSS样式没有起作用。在IE8中,<article>被解释成命名为<article/>和</article/>两个空的标签元素,与文章内容并列为兄弟节点,如下图所示:
既然因为不能识别标签而不能使用,那我们的解决办法就是让标签被识别出来。所幸,简单地通过document.createElement(tagName)即可以让浏览器识别标签和CSS引擎知道该标签的存在。假设我们上面的例子的<head>区域加上如下代码。
<script>document.createElement('article');</script>
IE8浏览器中的DOM解释就会变成下图所示:
自然,文字也显示成正常的蓝色。如下图所示:
2、JavaScript解决方案
JavaScript解决方案目的是解决在旧版本的IE中样式应用的问题。老版本的IE不会识别不明元素已经是一个耳熟能详的特性,而如果这些元素已经通过document.createElement()创建,那么浏览器就可以识别这些标签,并可以将其在DOM树中构建,然后允许开发者对其应用样式。
这个方法可以确保HTML5标签能在旧版本IE中对应创建DOM节点,然后可以对其应用样式。这个方法将HTML5块级元素设置成display:block,从而可以在各个浏览器中做到兼容。
今天测试以下把马海祥博客的网页改成了HTML5的,调试了一下,在FF和Opera中都显示正常了,到了IE6上却变得面目全非了。对此我还特意去找了一些使用JS代码支持HTML5标签元素的方法,在此也跟大家分享一下:
(1)、使用html5shiv
查看了一下,发现了html5shiv能解决这个问题,可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行:
<!--if lt IE 9]><script src=""></script><![endif]-->
当然你也可以直接把这个文件下载到自己的网站上。但这个文件必须在head标签中调用,因为IE必须在元素解析这前知道这些元素,才能启作用!但马海祥还要提醒你一下:还要在你的CSS文件中加上以下代码,不然有可能会出现些莫名其妙的问题。
header,nav,article,section,aside,footer{display:block;}
另外excanvas.js是Google为IE6支持canvas元素写的脚本,以后马海祥会跟大家再细说这样的例子,感兴趣的朋友可以去试试。
(2)、使用Kill IE6
除此之外你还可以使用KILL IE6一族,前提是你的浏览器允许执行JS文件。方法很简单,在你的网站的</body>之前加上以下代码就可以了:
<!--if lte IE 6]><script src=""></script><![endif]-->
上面写的<!--if lte IE 6]>在正常的HTML中属于注释,不会被执行,但在IE中是一个判断语句,所以这些代码只有在IE中才会被识别并加载。
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt:就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt:就是Greater than的简写,也就是大于的意思。
!:就是不等于的意思,跟javascript里的不等于判断符相同
说实话,马海祥不喜欢这个利用JavaScript解决的方案,因为它破坏了我最主要的web应用开发原则:我们不应该使用JavaScript来控制布局。不仅仅是因为这个做法给那些禁用脚本的用户带来了糟糕的用户体验,更重要的是,如果我们希望我们的web应用代码是面向未来,并且维护性高的,那么必须将视图相关部分分离出来。这个方案对在跨浏览器中构建相同的DOM结构很有帮助,也可以确保你的JavaScript和CSS在各个地方运行结果相同,但是这个优势并不能改变我对这个方法的不认同。
3、Namespace hack
永远不要缺乏使用hack解决问题的能力,在IE中还有其他技术来让浏览器识别不明的标签。这个来自Elco Klingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间,并使用了含有namespace前缀的元素。例如:
<html xmlns="" xmlns:html5=""><body><html5:section><!-- content--></html5:section></body></html>
前缀html5是纯粹是用于这个例子而且也不是官方支持的,你甚至可以用"foo"作为前缀,结果还是一样。有了前缀之后,IE会识别新的元素,从而可以应用样式。在其他浏览器中一样有效,那么最后,你就成功地在各个浏览器中构建了一样的元素和一样的样式。
这个方法的缺陷很明显:你必须在HTML文档中使用XML格式的命名空间,同样,你也需要在css中这么做:
html5\:section{ display: block;}
马海祥点评:这并不是我期望Web开发者编写代码的方式。虽然这是一个非常杰出的解决方案,但是这让应用变得不自然。我不希望看到文件中充满了带命名空间的元素。
4、Bulletproof技术(防弹衣技术)
说实话,我是第一次接触到这个技术,建议在所有新的HTML5块级元素中增加一个内部的div元素,然后包含一个CSS class,用这个元素来替代HTML元素(类似在里面穿了一件防弹衣),例如:
<section><div><!-- content--></div></section>
在应用样式的时候,Tantek推荐直接给div增加样式,而不是给新元素增加样式
推荐使用:
.section{ color: blue;}
而不是:
section{ color: blue;}
这个方案的原理是用简单的方式将原来的样式应用方式转移到一个代表了HTML5标签的元素上。由于我一般情况下不会将样式通过标签名的方式应用到元素上,所以马海祥也并完全支持这个建议。
马海祥觉得这个方案的缺陷是不同的浏览器构建了不同的DOM结构,那么你必须在编写JavaScript和CSS的时候格外小心。获取子节点或者父节点的时候,不同的浏览器返回的结果可能会不一样。特别是在下面的代码中:
<div><section><div class="section main"><!-- content--></div></section></div>
5、反向的bulletproof技术
还有一些方法,比如尝试使用和Tanteck方案相反的技术,也就是把HTML5元素放在div元素内部,例如:
<div><section><!-- content--></section><div>
这个方案唯一的不同是HTML5元素的位置,其他都一样。喜欢这个技术的支持者认为他的一致性很好(适用于所有的元素,包括<hgroup>)。但是DOM结构的不同让这个方案意义变得不大。他的主要优势是技术上的一致性。
6、关于X-UA-Compatible的使用
目前绝大多数网站都用以下代码来作为IE8的兼容方法。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
虽然微软将IE向标准迈进了一大步,而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。
在X-UA-Compatible中可用的方法有:
<meta http-equiv="X-UA-Compatible" content="IE=6"><meta http-equiv="X-UA-Compatible" content="IE=7"><meta http-equiv="X-UA-Compatible" content="IE=8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
其中最后一行是永远以最新的IE版本模式来显示网页的。
另外加上
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
而使用,Emulate模式后则更重视。
所以目前来说还是以使用
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
为首选。
7、通过修改HTML部分来实现
我的主要目标是确保我只需要修改HTML部分。这就意味着不需要修改CSS和JavaScript。为什么会有这样的需求?需要修改的Web应用视图越多,你越有可能制造bug。将改变限制到一个视图也就限制了bug的出现,即使出现了bug,也可以减少你查找错误的范围。如果一个视图破相了,我可以知道这是因为我增加了一个section元素,而不是考虑是不是CSS文件修改来带的影响。
在研究了所有这些解决方案,并进行一些尝试和设计之后,我回到了Tantek的方案。这是唯一一个只需要修改HTML而不用动CSS和HTML的方案。现在,我在他的方案基础上做了一些改进,来达到我想要的结果。
首先,我不会给那些代表HTML5元素的class增加样式(所以我不会使用.section这样的选择器)。我保留了div元素,然后再增加一个带语义的class来应用样式,并作为进行JavaScript操作的钩子。例如,这样的代码:
<div><!-- content--></div>
经过改进后:
<section><div class="section content"><!-- content--></div></section>
这样的修改完成后,我依然使用.content作为样式和脚本的入口。这也意味着我不需要修改CSS和JavaScript。
然后,为了避免hgroup标签这样的情况,我选择不使用这个标签。我在我已有的所有页面中没有找到任何一个使用了这个标签的。由于hgroup标签只能包含标题元素,如果你确实想要使用这个标签,那么使用hrgoup来包含本身是非常安全的(假设它没有包含其他的块级元素)。
OK,本文到此结束,希望对大家有所帮助。