网站入门经典Html常用标签元素Word文档格式.docx
《网站入门经典Html常用标签元素Word文档格式.docx》由会员分享，可在线阅读，更多相关《网站入门经典Html常用标签元素Word文档格式.docx（11页珍藏版）》请在冰点文库上搜索。
最近常常宕机。
示例：
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
4.<
address>
标签是一个非常不起眼的小标签，但是这并不意味着它没有用。
顾名思义<
允许你在HTML中语义化标签。
这个小巧的标签将默认斜体显示标签内的内容，当然，使用样式可以很容易的改变默认的样式。
GlenStansberry
1234WebDevLane
Anywhere,USA
/address>
5.<
ins>
和<
del>
如果你想使用标签来显示编辑版本，<
正好适合。
顾名思义，<
用下划线高亮显示添加进来的内容，而<
用删除线显示被移除的信息。
John<
likes<
/del>
LOVES<
/ins>
hisnewiPod.
6.<
label>
貌似表单元素最容易忘掉何时标记文本。
对于表单元素，最常忘记的就是<
标签。
不仅仅是一个便捷的标记文本的方式，<
标签还能传递一个”for”属性来指定哪个元素将会被关联。
不仅易于用样式来控制，还允许你让标题可点击。
username"
用户名<
inputid="
type="
text"
/>
7.<
fieldset>
Fieldset是一个小巧的标签，你可以用来为你的表单元素添加逻辑分组。
标签就会在其内部的元素周围画一个框。
另外一点就是可以在fieldset里面添加<
legend>
标签来定义分组的标题。
form>
你比5年纪学生聪明吗？
/legend>
当然<
inputname="
yes"
radio"
value="
不知道<
no"
/fieldset>
/form>
8.<
abbr>
标签颇类似于<
标签，不同的是<
标签只用于定义缩写单词。
就像<
一样，你可以为这个标签定义一个title属性。
当用户将鼠标放到缩写文字上面时，全部内容就会在下面显示。
标签很少用，但是对于屏幕阅读者、拼写检查者以及搜索引擎是非常有用的。
abbrtitle="
脑残"
NC<
/abbr>
是一个不太文明的用语。
9.rel
Rel可以是一个极度有用的属性，任何HTML元素都可以应用一个rel属性。
它有助于传递没有另外指定的额外参数。
这对于在HTML中使用JavaScript的时候是非常有用的。
如果你有一个想要在行内编辑的链接，你可以添加：
arel="
clickable"
href="
page.html"
这个链接可编辑。
/a>
Javascript会寻找带有rel属性”clickable”的a链接，并应用一些Ajax并允许它在行内被编辑。
这只是你可以使用rel属性的众多技术中的一种用法，因为它的潜力是无止境的。
感兴趣的朋友可以深入研究一下W3C关于Rel的介绍。
10.<
wbr>
标签是一个难以相信的不出名的标签。
坦率的讲，我也很怀疑你们会接触到这个标签，因为它几乎从来没有用到。
（的确，在我写这篇文章之前我几乎没有见到过这个标签）。
事实上，这个标签算是一个软断行，允许你在某一行内指定一个断行点，表明在该点处可以断行，但是不是一定会断行，仅仅是在有需要断行的时候才会断行。
如果你想避免出现水平滚动条，那么使用这个标签是很棒的。
下面是一个200像素宽的box，没有定义overflow。
如果你想要实现相同的效果而不使用<
标签，你可以试一下&
#8203;
或&
shy;
。
据说这三个标签都未被所有浏览器完全支持。
你可以通过这篇文章来查看各个浏览器对着三个标签的支持情况。
PS：
颇困难的翻译了这篇文章，神飞深深的感受到了语义化的魅力以及HTML标签的强大，相信我们没有认识到的标签还有很多，结果，常见的标签大家都很熟悉，不常见的标签大家有都不会用。
正如之前我在一篇文章中阐述的那样，“语义化”很大的一部分是，在恰当的地方使用合适的标签，而不是一味的div下去。
如果，我们能够了解更多的HTML标签，我们就能写出更具语义的HTML代码，也能大大的降低我们写CSS的难度和工作量，并使我们的页面结构更趋合理。
Html常用标签元素
常用HTML标签元素结合及简介
html>
/html>
创建一个HTML文档
head>
/head>
设置文档标题和其它在网页中不显示的信息
title>
/title>
设置文档的标题
h1>
/h1>
最大的标题
pre>
/pre>
预先格式化文本
u>
/u>
下划线
b>
/b>
黑体字
i>
/i>
斜体字
tt>
/tt>
打字机风格的字体
引用,通常是斜体
强调文本（通常是斜体加黑体）
strong>
/strong>
加重文本（通常是斜体加黑体）
fontsize="
"
color="
/font>
设置字体大小从1到7，颜色使用名字或RGB的十六进制值
BASEFONT>
/BASEFONT>
基准字体标记
big>
/big>
字体加大
SMALL>
/SMALL>
字体缩小
STRIKE>
/STRIKE>
加删除线
CODE>
/CODE>
程式码
KBD>
/KBD>
键盘字
SAMP>
/SAMP>
范例
VAR>
/VAR>
变量
BLOCKQUOTE>
/BLOCKQUOTE>
向右缩排
DFN>
/DFN>
述语定义
ADDRESS>
/ADDRESS>
地址标记
sup>
/SUP>
上标字
SUB>
/SUB>
下标字
xmp>
...<
/xmp>
固定寬度字体（在文件中空白、換行、定位功能有效）
plaintext>
/plaintext>
固定寬度字體（不執行標記符號）
listing>
/listing>
固定寬度小字體
fontcolor=00ff00>
字體顏色
fontsize=1>
最小字體
fontstyle='
font-size:
100px'
無限增大
格式标志标签
创建一个段落
palign="
将段落按左、中、右对齐
br>
换行插入换行符
/blockquote>
从两边缩进文本
dl>
/dl>
定义列表
dt>
放在每个定义术语词前
dd>
放在每个定义之前
ol>
/ol>
创建一个标有数字的列表
ul>
/ul>
创建一个标有圆点的列表
li>
放在每个列表项之前,若在<
之间则每个列表项加上一个数字,
若在<
之间则每个列表项加上一个圆点
divalign="
/div>
用来排版大块HTML段落,也用于格式化表
MENU>
选项清单
DIR>
目录清单
nobr>
/nobr>
强行不换行
hrsize='
9'
width='
80%'
color='
ff0000'
水平線（設定寬度）
center>
/center>
水平居中
链接标志表格标志
ahref="
URL"
创建超文本链接
mailtEMAIL"
创建自动发送电子邮件的链接
aname="
name"
创建位于文档内部的书签
#name"
创建指向位于文档内部书签的链接
BASE>
文档中不能被该站点辨识的其它所有链接源的URL
LINK>
定义一个链接和源之间的相互关系
链接标记注解：
◆target="
..."
决定链接源在什么地方显示（用户自定义的名字，_blank,_parent,_self,_top
◆rel="
发送链接的类型
◆rev="
保存链接的类型
◆accesskey="
指定该元素的热键
◆shape="
允许我们使用已定义的形状定义客户端的图形镜像（default，rect，circle，poly
◆coord="
使用像素或者长度百分比来定义形状的尺寸
◆tabindex="
使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序（使用tab键使元素获得焦点）
大部分标签可以运用时候通过CSS控制改变样式达到我们想要的布局效果。
html,head,body
属性设置：
标签的基本特点：
成对，嵌套关系，属性（属性名=属性值）
body的bgColor属性：
背景色（bgcolor="
red/#ff0000"
）
head中的标签
title
和meta
表示标题
meta
http-equiv="
content-Type"
content="
text/html;
charset=gb2312"
h1~h6
标题，h1最大
属性：
align{left|right|center}
P
段落
font
字体标签
size:
字体大小，最大为7，最小-7，符号表示相对大小，例如+3表示6号字
color：
颜色
face：
字体名称
pre
与格式化标签，保持代码原有格式输出
img
图像标签
src:
文件路径，有相对和绝对路径
alt：
替换文字
align：
文字相对这图片的对齐（垂直方向）{top|middle|bottom}
height,width:
尺寸
a
超链接
name:
命名锚记
href:
链接目标，有相对和绝对之分
href="
mailto:
...."
:
邮件链接
#..."
：
锚链接
target:
打开目标，也就是在哪个窗口打开新的页面
{_self|_top|_parent|_blank|框架名称}
hr
水平线
线宽，或者粗细，等同于其他标签的height
width：
线的宽度，注意没有height属性
ul，ol，li：
列表
ul
无序列表
type：
列表类型{circle|square|disc}
ol
有序列表
列表类型{1,a,A,i,I}
marquee
滚动标签
direction：
滚动方向{up,down,left,right}
scrollamount:
滚动的跨度，每次滚动的距离
scrolldelay:
滚动演示，每次滚动的时间间隔
br
换行
table表示表格本身属性
表格自身的对齐方式，而不是里面内容的对齐方式{left,center,right}
height,width
border
background
bgcolor
cellpadding:
单元格边框和内容间距
cellspacing:
单元格之间的距离
tr
td
除了常规的背景，尺寸，对齐等属性
rowspan：
跨越行（合并行）
colspan：
跨越列（合并列）
table>
tr>
td>
1<
/td>
colspan="
2"
2<
3<
/tr>
4<
5<
6<
7<
/table>
form
表单标签，表示一个要提交数据的表单
name：
名称
action：
提交的目的地址
method：
{get|post}（三个方面有区别：
长度限制，安全性，效率）
input
type="
表示文本框
属性:
提交数据的名称
value：
默认值
size：
文本框显示出来的宽度
maxlength：
可以填入最多的字符个数
readonly：
是否为只读
password"
表示密码框
同文本框
单选按钮
name
value
checked：
是否默认被选中
注意：
如果要实现单选的效果，name属性必须一致，也就是说所有name相同的单选按钮只能选中其中一个
checkbox"
复选框
通单选按钮的属性
button"
普通按钮
代表要显示到按钮上的文字，等同winforms中的text属性
submit"
提交按钮
属性同普通按钮
reset"
重置按钮，所有数据恢复到初始值状态
textarea
多行文本框
属性
cols：
显示的宽度，以字符为单位
rows：
显示的高度，以字符为单位
通所有表单元素
没有改属性！
！
他的value写在标签内部
cols="
50"
rows="
6"
name="
copyRight"
请仔细阅读本说明<
/textarea>
select
代表下拉列表
option标签对表示下拉列表中的项
不会显示到选项中，要显示的内容写在option标签内部
option
value="
1"
第一学期<
没有那么属性，多个哦option共用一个select标签的name
selected:
默认选中的选项
frameset
框架集
列的拆分标准（cols="
100,30%,*"
行的拆分标准
frame
框架
scrolling：
是否出现滚动条
noresize：
是否可以调整大小
×
样式表******************************
样式表的分类和语法
行内样式：
标签
style="
样式名1：
样式值1；
样式名2：
样式值2；
....."
/标签>
内嵌:
style
text/css"
选择器代码
/style>
外部：
在css文件中写上选择器代码
导入的语法：
1、<
link
文件名"
rel="
stylesheet"
2、<
@import
url（文件名）;
选择器
标签选择器（HTML选择器）
定义语法
P{
样式名：
样式值;
.....
}
使用：
被动选择，所有p标签的样式都被修改
类选择器
定义语法：
.class1{
标签的class属性来引用：
p
class="
class1"
id选择器
#ID1{
标签的ID属性来引用：
ID1"
伪类选择器
超链接的特殊状态下的样式规则
a:
hover
鼠标悬停
未访问
active
选中
visited
已访问
常用样式
字体修饰
记得写单位
font-family:
font-style:
斜体
text-align:
对齐{left|center|right}
color:
text-decoration:
{underline|none}
背景
background-color:
背景色
background-image:
背景图（url（文件名））
background-repeat:
背景平铺方式（no-repeat:
不平铺repeat-x:
水平方向平铺repeat-y：
垂直方向平铺）
方框
边框
border-style
border-width
border-color
边界
margin-top
margin-left
....
填充
padding-top
padding-rigSTB
升级会员 