HTML教程标签详细用法文档格式.docx
《HTML教程标签详细用法文档格式.docx》由会员分享,可在线阅读,更多相关《HTML教程标签详细用法文档格式.docx(31页珍藏版)》请在冰点文库上搜索。
scriptsrc="
path/to/script.js"
language="
javascript"
type="
<
三、html中元素的书写:
1、元素属性值必须包含在双引号中;
fontcolor=”#000000”size=”3”face=”Arial”>
2、form中必须加action属性,并且不能为空。
formaction=”/r/add.cgi”method=”post”>
如果不需要使用action属性,也必须定义:
formaction=”no”>
3、img的alt属性不可以缺少;
imgsrc="
/q/img/btn_style.gif"
border="
0"
alt="
Select”>
4、head与<
之间必须有title;
……
yourtitle<
5、tr、td必须定义在table之间;
6、button按钮必须定义在form之间,否则netscape不支持;
formaction=”……”method=”post”>
inputtype=”button”name=”but”value=”back”>
/form>
7、在javascript中的字符串中出现的“/”前要用转义符“\”:
scripttype=”text/javascript”>
—
functioncheck(str){
varstr=”\/r\/add.cgi”;
}
-->
8、onclick属性必须和onkeypress成对写(onmousedown+onkeydown、onmouseup+onkeyup)
mm
9、用URL传值时直接写&
是不可以的,可用&
替换:
四、缩近规则:
table>
中<
td>
/td>
<
tr>
/tr>
等必须保持严格的缩近规则,以"
Tab"
键为准:
…<
…
/table>
….
五、为了检验您的HTML代码是否合法,您可以到W3的HTMLValidator工具中进行检验,支持URI输入,上传文件和直接输入代码三种方式进行检验
编辑本段HTML标签参考
基本标签
创建一个HTML文档<
html>
/html>
设置文档标题以及其他不在WEB网页上显示的信息<
设置文档的可见部分<
body>
/body>
标题标签
将文档的题目放在标题栏中<
文档整体属性
设置背景颜色,使用名字或十六进制值<
bodybgcolor=?
设置文本文字颜色,使用名字或十六进制值<
bodytext=?
设置链接颜色,使用名字或十六进制值<
bodylink=?
设置已使用的链接的颜色,使用名字或十六进制值<
bodyvlink=?
设置正在被击中的链接的颜色,使用名字或十六进制值<
bodyalink=?
文本标签
创建预格式化文本<
pre>
/pre>
创建最大的标题<
h1>
/h1>
创建最小的标题<
h6>
/h6>
创建黑体字<
b>
/b>
创建斜体字<
i>
/i>
创建打字机风格的字体<
tt>
/tt>
创建一个引用,通常是斜体<
cite>
/cite>
加重一个单词(通常是斜体加黑体)<
em>
/em>
strong>
/strong>
设置字体大小,从1到7<
fontsize=?
/font>
设置字体的颜色,使用名字或十六进制值<
fontcolor=?
链接
创建一个超链接<
ahref="
URL"
/a>
创建一个自动发送电子邮件的链接<
mailto:
EMAIL"
.... <
创建一个位于文档内部的靶位<
aname="
NAME"
创建一个指向位于文档内部靶位的链接<
#NAME"
格式排版
创建一个新的段落<
p>
将段落按左、中、右对齐<
palign=?
插入一个回车换行符<
br>
从两边缩进文本<
blockquote>
/blockquote>
创建一个定义列表<
dl>
/dl>
放在每个定义术语词之前<
dt>
放在每个定义之前<
dd>
创建一个标有数字的列表<
ol>
/ol>
放在每个数字列表项之前,并加上一个数字<
li>
创建一个标有圆点的列表<
ul>
/ul>
放在每个圆点列表项之前,并加上一个圆点<
一个用来排版大块HTML段落的标签,也用于格式化表<
divalign=?
图形元素
添加一个图像<
name"
排列对齐一个图像:
左中右或上中下<
align=?
设置围绕一个图像的边框的大小<
border=?
加入一条水平线<
hr>
设置水平线的大小(高度)<
hrsize=?
设置水平线的宽度(百分比或绝对像素点)<
hrwidth=?
创建一个没有阴影的水平线<
hrnoshade>
表格
创建一个表格<
开始表格中的每一行<
开始一行中的每一个格子<
设置表格头:
一个通常使用黑体居中文字的格子<
th>
/th>
表格属性
设置围绕表格的边框的宽度<
tableborder=#>
设置表格格子之间空间的大小<
tablecellspacing=#>
设置表格格子边框与其内部内容之间空间的大小<
tablecellpadding=#>
设置表格的宽度-用绝对像素值或文档总宽度的百分比<
tablewidth=#or%>
设置表格格子的水平对齐(左中右)<
tralign=?
or<
tdalign=?
设置表格格子的垂直对齐(上中下)<
trvalign=?
tdvalign=?
设置一个表格格子应跨占的列数(缺省为1)<
tdcolspan=#>
设置一个表格格子应跨占的行数(缺省为1)<
tdrowspan=#>
禁止表格格子内的内容自动断行回卷<
tdnowrap>
窗框
放在一个窗框文档的<
标签之前,也可以嵌在其他窗框文档中<
frameset>
/frameset>
定义一个窗框内的行数,可以使用绝对像素值或高度的百分比<
framesetrows="
value,value"
定义一个窗框内的列数,可以使用绝对像素值或宽度的百分比<
framesetcols="
定义一个窗框内的单一窗或窗区域<
frame>
定义在不支持窗框的浏览器中显示什么提示<
noframes>
/noframes>
窗框属性
规定窗框内显示什么HTML文档<
framesrc="
命名窗框或区域以便别的窗框可以指向它<
framename="
定义窗框左右边缘的空白大小,必须大于等于1<
framemarginwidth=#>
定义窗框上下边缘的空白大小,必须大于等于1<
framemarginheight=#>
设置窗框是否有滚动栏,其值可以是"
yes"
"
no"
auto"
,缺省时一般为"
<
framescrolling=VALUE>
禁止用户调整一个窗框的大小<
framenoresize>
表单
对于功能性的表单,一般需要运行一个CGI小程序,HTML仅仅是产生表单的表面样子。
创建所有表单<
form>
创建一个滚动菜单,size设置在需要滚动前可以看到的表单项数目<
selectmultiplename="
size=?
/select>
设置每个表单项的内容<
option>
创建一个下拉菜单<
selectname="
设置每个菜单项的内容<
创建一个文本框区域,列的数目设置宽度,行的数目设置高度<
textareaname="
cols=40rows=8>
/textarea>
创建一个复选框,文字在标签后面<
inputtype="
checkbox"
name="
创建一个单选框,文字在标签后面<
radio"
value="
x"
创建一个单行文本输入区域,size设置以字符计的宽度<
inputtype=textname="
foo"
size=20>
创建一个submit(提交)按钮<
submit"
创建一个使用图象的submit(提交)按钮<
image"
border=0name="
src="
name.gif"
创建一个reset(重置)按钮<
reset"
字体效果
...<
标题字(最大)
标题字(最小)
粗体字
粗体字(强调)
斜体字
斜体字(强调)
dfn>
/dfn>
斜体字(表示定义)
u>
/u>
底线
ins>
/ins>
底线(表示插入文字)
strike>
/strike>
横线
s>
/s>
删除线
del>
/del>
删除线(表示删除)
kbd>
/kbd>
键盘文字
打字体
xmp>
/xmp>
固定宽度字体(在文件中空白、换行、定位功能有效)
plaintext>
/plaintext>
固定宽度字体(不执行标记符号)
listing>
/listing>
固定宽度小字体
fontcolor=00ff00>
字体颜色
fontsize=1>
最小字体
fontstyle=font-size:
100px>
无限增大
HTML标签和属性的语义化
分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。
一个XHTML元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。
换句话说,不要让CSS使一个HTML元素看起来就像另一个HTML元素,比如用<
div>
来代替<
标记标题。
首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。
用来区别于其他文字,起到了强调的作用。
至于列表和表格很明显的告诉你他们是做什么的。
其次,语义化的网页的好处,最主要的就是对搜索引擎友好,又有良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。
具体的语义和用途在,XHTML1.0TAG参考中都已经说明,这里将一些容易遗忘或者混淆的TAGS和属性予以补充。
Hx>
、<
h2>
h3>
h4>
h5>
作为标题使用,并且依据重要性递减。
是最高的等级。
例如:
文档标题<
次级标题<
/h2>
而不要使用
divclass=\"
title\"
/div>
,或者<
spanclass=\"
/span>
.很明显搜索引擎对于后者是不会认为他是标题的。
段落标记,知道了<
作为段落,你就不会再使用<
br/>
来换行了,而且不需要<
来区分段落与段落。
/p>
中的文字会自动换行,而且换行的效果优于<
。
段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。
在利用行高(line-height)很容易的定义出行间距,再定义首字下沉等效果,那就挺完美了。
例如:
无序列表,很常见的到了大家广泛的使用,<
有序列表也挺常用。
在web标准化过程中,<
还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持CSS的时候,导航链接仍然很好使,就是美观方面差了一点。
项目一<
/li>
项目二<
项目三<
第一章<
第二章<
第三章<
dl就是“定义列表”。
比如说词典里面的词的解释、定义就可以用这种列表。
Dog<
/dt>
AcarnivorousmammalofthefamilyCanidae.<
/dd>
上海滩<
这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后,产生了巨大的轰动效应。
周润发<
和所有伟大的影星一样,周润发印证了一个时代,一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑,都封存胶片之中,当我们回首寻望的时候,发哥已被刻为一个时代的坐标。
、cite、<
q>
、<
论坛和blog经常会用到引用别人的话,用<
来标记简短的单行引用。
Web浏览器会自动识别在<
之间的内容。
不幸的是,IE不能识别,并且有些时候,<
会引起一些可访问性(Accessibility)的问题。
正因为如此,一些人建议尽量不要使用<
手动的插入引用标记。
在一个包含适当的类的<
span>
中加入单行的引用内容,那么就可以用CSS来给引用设计样式了,但是这个没有语义上的意义。
CSS可以用来定义引用的样式。
注意,一段文章是不可以直接放在<
中的,引用的内容还必须包含在一个元素中,通常是<
属性cite既可以与<
一起用,也可以与<
一起用,用来提供引用内容的来源地址。
需要注意的是,如果你使用<
来代替<
标记引用内容,那么你就不能使用cite属性了。
DesigningwithWebStandards<
isanexcellentbookbyJeffreyZeldman.
孔子<
曰:
学而不思则罔,思而不学则殆<
/q>
.<
TheW3Csaysthat<
qcite=\"
http:
//www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1\"
Thepresentationofphraseelements
dependsontheuseragent.<
blockquotecite=\"
//www.w3cn.org/\"
“我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,
我们就需要升级或者重新建造一遍网站。
例如1996-1999年典型的\"
浏览器大战\"
,
为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。
同样的,
每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,
例如支持手机上网的WAP技术。
类似的问题举不胜举:
网站代码臃肿、繁杂浪费了我们大量的带宽;
针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户;
不易用的代码,残障人士无法浏览网站等等。
这是一种恶性循环,是一种巨大的浪费。
”<
是用作强调的,<
是用作重点强调的。
大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,然而,这是没有必要的,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。
当你想要的只是视觉上的效果时,就不要使用强调了。
而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好,特别是斜体对于中文来说,那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。
强调<
的文本通常用斜体显示,
然而,<
特别强调<
的文本通常以粗体显示。
caption>
、summary
XHTML中的表格不应用来布局。
然而如果是为了标记列表的数据,就应该使用表格了。
为表格标题,属性summar为摘要,<
caption>
标签为首部说明,<
thead>
标签为表格头部,<
tbody>
标签为表格主体内容,<
tfoot>
标签为表格尾部。
其中还可以使用scope可用于取代headers属性,标记含有表头信息的单元格,其中各数值的内容如下:
row指示当前单元格,为包含当前单元格的行提供相关的表头信息。
col指示当前单元格,为根据当前单元格指定的列提供相应的表头信息。
rowgroup指示当前单元格,为包含当前单元格的其余行组提供相关的表头信息。
colgroup指示当前单元格,为根据当前单元格指定的其余列组提供相应的表头信息。
abbr用于定义表头单元格中的缩写名,如果没有定义该属性,则将默认单元格内容为节略形式。
tableid=\"
mytable\"
cellspacing=\"
0\"
summary=\"
ThetechnicalspecificationsoftheApplePowerMacG5series\"
Table1:
PowerMacG5techspecs<
/caption>
thscope=\"
col\"
abbr=\"
Configurations\"
class=\"
nobg\"
Configurations<
Dual1.8\"
Dual1.8GHz<
thscop