如何学好html，记住背好标签是关键！
背会html标签属性是学好网页的关键！
趁着周末接着上一期继续与大家分享一下标签完美版的标签！
祝大家周末愉快哦！
图像<img> 语法格式：
<img src="url"alt="?" width="?" height="?" border="?"align="?">
border属性定义图片边框的宽度，默认值为0
align属性设置图片旁边文字的位置
语法格式：<imgsrc="" align"">
可选值有：
top图片和文字顶部对齐
middle图片和文字居中对齐
bottom图片和文字底边对齐（默认）
left图片居左对齐，文字沿图片绕排
right图片居右对齐，文字沿图片绕排
absmiddle图片对齐到目前文字行绝对中央
absbottom图片对齐到目前文字行绝对底部
文字的排版
不换行空白标记
font元素
语法格式：
<font face="字体名称" size="字体大小" color="字体颜色">
字体大小可选值为1——7，默认为3
例：〈fontface="黑体"size="4" color="#ff00ff">....</font>
水平线<hr>
语法格式：<hrwidth="宽度"align="对齐方式默认居中center"size="水平线厚度默认为2"color="颜色"noshade>
noshade无阴影，既实线
层〈div><span>两种元素
<div>是块级元素，和段落元素<p>相似，不同的是两个<div>元素之间不会产生两个<p>元素之间的空行，
<span>是行内元素，可以定义段落中部分文字的属性
语法格式：
<div align=""style="">...</div>
align设置层中元素的水平对齐方式
stule设置元素应用css规范的属性
<div>兼容性比<span>要好一点，最好使用<div>
表格语法格式：
<table width=""bgcolor="" background="" border=""cellspacing="" cellpadding="">
<tr>...<td>....</td>....</tr>
</table>
border边框宽度默认值为0，既没有边框
cellspacing表格中单元格的边距大小，默认值为两个像素
cellpadding表格中单元格之间的间距大小，默认值为两个像素
tr元素
语法格式：
<tr align=""bgcolor="">....</tr>
align属性对齐方式可选值如下：left,center,tight,默认为left
bgcolor指定该行的背景颜色
td元素
语法格式：
<td width="宽度" height="高度" align="水平对齐方式" valign="垂直对齐方式" bgcolor=""background="" rowspan="单元格的行跨度" colapan="单元格的列跨度">.....</td>
align属性的可选值有：left,center,right
valign属性的可选值有：top,middle,bottom
rowspan和colapan跨行和跨列的数量，默认为1
input元素 语法格式：
<input type="">
type属性的可选值有：
text 单行文本框
属性：name 文本框名称
value 文本框的初始值
size 文本框的长度
maxlength 可输入字符串最大的长度
radio 单选框
属性：name 单选框名称
value 内部值
checked 默认选定
checkbox 复选框
属性：name 复选框名称
value 内部值
checked 默认选定
reset 重置按钮
submit 确定按钮
属性：name 按钮名称
value 显示在按钮上的文字
password 密码框
属性与文本框的属性完全相同
file 文件域
属性：name文件域名称
size 文件域的长度
maxlength 文件域可接受的字符数量的上限
hidden 隐藏域
属性：name 隐藏域名称
value 内定值
image 图片域
属性：name 所要代表的按钮，可以是submit,reset,或其他.
src 按钮图片的url 地址
列表框<select>
语法格式：
<select>
.....
<option>....</option>
.....
</select>
select元素
语法格式：<selectname="" size=""multiple></select>
name 指定列表框的名字
size 指定列表框显示列表项的条数，如果指定了该参数，select元素是个列表，否则是一个下拉列表框
multiple 指定了这个参数，则表示该列表框可选择多项，否则只可选择一项
option属性
语法格式：<optionvalue="" selected></option>
value 该列表项的值
selected 如果设定了这个参数，默认为选定这一项
多行文本框<textarea>
<textarea name=""cols="" rows="" wrap="off/physical/virtual"></textarea>
属性：
name文本框的名称
cols文本框的宽度
rows文本框的高度
wrap文本框的折行方式可选值有：
off不保存换行信息
physical强迫浏览器在发送信息到web服务器端时必须将多行文本框的文字一行一行的送出，
virtual送出连续成串的字除非使用者按回车。
css 层叠样式表
引入层叠样式表的方法包括：
外联式样式表
例：<head>
<link rel="stylesheet"href="/css/default.css">
</head>
<body>
....
</body>
</html>
属性：rel 用来说明<link>元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址
内嵌式样式表：
例：<html>
<head>
<style type="text/css">
<!--
td{font:9pt;color:red}
.font105{font:10.5pt;color:blue}
-->
</style>
</head>
<body>....</body>
</html>
元素内定
格式：<pstyle="font-size:10.5pt">
导入式样式表
〈html>
<head>
<style type="text/css">
<!--
@import url(css/home.css);
-->
</style>
<body>
....
</body>
</html>
css的优先级
越接近目标的样式定义优先级越高，高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义
如果4种样式表对同一元素定义了不同的样式，那么他们的优先级顺序从高到低是，元素内定，内嵌样式表，导入样式表，外联样式表。
css结构
例：td{font-size:10.5pt;color:#666666}
css样式包含两个基础部分，
选择符<td>和声明{font-size:10.5pt;color:#666666}
声明也有两部分组成：
属性font-size,color和值10.5pt,#666666
选择符分为6种
1元素选择符
当页面上多个元素的样式相同时，可以将多个元素放在一起定义，中间以逗号分开例：td,p,li,input,select{font-size:12px;}
2class(类)选择符
例：〈head>
<title>.....</title>
<style type="text/css">
<!--
.red{font-size:10.5pt;color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p>士大夫井冈山地方官</p>
<p>九连环离开计划</p>
</body>
还有一种方法就是限定可以应用它的页面元素
例：〈head>
<title>.....</title>
<style type="text/css">
<!--
h1.red{color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p>士大夫井冈山地方官</p>
<h1>九连环离开计划</h1>
</body>
3 id选择符
与class选择附类似，只是把'.'换成'#'
例：<body>
<head>
<style type="text/css">
<!--
#select{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250"border="1" height="50">
<tr>
<tdid="select">id选择符</td>
</tr>
</table>
</body>
</html>
我们看到在调用ID选择附时与CLASS选择附类似，只是将class=""换成了id=""，方便页面脚本语言的调用
关联选择符
<body>
<head>
<style type="text/css">
<!--
td p{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250"border="1" height="50">
<tr>
<td><p>关联选择符</p></td>
</tr>
</table>
<p>关联选择符</p>
</body>
</html>
我们设定了在元素中<td>的元素<p>所包含文字的样式，只有在两个条件都满足是，样式在会起作用，
伪类选择符
是只能用在css选择符里，而不能用在html代码中的选择符
例：
〈html>
<head>
<style type="text/css">
<!--
a:link{color:#000000}
a:visited{color:#cccccc}
a:hover{color:#ff0000}
a:active{color:#ooooff}
-->
</style>
</head>
<body>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
〈/body>
</html>
正确的顺序是a:link\a:visited\a:hover否则会引起页面上连接颜色混乱
伪元素选择符
与伪类选择符定义类似，目前被大多数浏览器支持的有两个：首行伪元素（first-line）和首字符伪元素(first-letter)是用来实现首行大写和首行下沉效果的
例：首行
<html>
<head>
<style>
<!--
p:first-line{color:red;font-size:20pt}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
长度随浏览器窗口大小而改变
首字
<html>
<head>
<style>
<!--
p:first-letter{color:red;font-size:50pt;float:left;}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
以上两种都只能应用于块状元素上
css规则
1.继承
例：<html>
<head>
<style type="text/css">
<!--
td{font-size:12pt}
p{color:red}
-->
</style>
</hesd>
<body>
<table width="300"border="1" height="150">
<tr>
<td>
<p>css规则</p>
</td>
</table>
</body>
</html>
<p>为最高级<td>次一级两种css用在一个属性元素上，相同的覆盖，不同的继承，
2.组合
例:td{font-size:12pt}
p1{font-size:12pt}
组合后
td,.p1{font-size:12pt}
3.层叠
在样式里定义过后，在表格属性中又定义一次
<html>
<head>
<style type="text/css">
<!--
red{color:#ff0000 limportant}
-->
</style>
</hesd>
<body>
<table width="300"border="1" height="150">
<tr>
<tdstyle="color:#0000ff">决撒地方官</td>
</tr>
</table>
</body>
</html>
css单位
分四大类：
1 长度单位
数值可以是整数，小数，正数，负数，0，后加单位（负值不要轻易使用）
换算关系：
1in(英寸)=6pc(派)
1in(英寸)=72pt(磅)
1in(英寸)=2.54(厘米)
1cm(厘米)=10mm(毫米)
1cm(厘米)=0.3937(英寸)
1pt(磅)=1/72in(英寸)=0.2478mm(毫米)
1pc(派)=1/6in(英寸)=我国新四号铅字的尺寸
2 百分比单位
3 颜色单位
4 url单位
div属性
color : #999999 文字颜色
font-family : 宋体 文字字型
font-size : 10pt 文字大小
font-style:itelic 文字斜体育
font-variant:small-caps 小字体
letter-spacing : 1pt 文字间距
line-height : 200% 设定行高
font-weight:bold 文字粗体
vertical-align:sub 下标字
vertical-align:super 上标字
text-decoration:line-through 加?h除线
text-decoration:overline 加顶线
text-decoration:underline 加底线
text-decoration:none ?h除连接底线
text-transform : capitalize 首字大写
text-transform : uppercase 英文大写
text-transform : lowercase 英文写
text-align:right 文字*右对齐
text-align:left 文字*左对齐
text-align:center 文字置中对齐
这些是一些简单的文字效果，可以应用到css的页面中。
背景
background-color:black 背景颜色
background-image : none 背景图片
background-attachment : fixed 固定背景
background-repeat : repeat 重复排列-网页预设
background-repeat : no-repeat 不重复排列
background-repeat : repeat-x 在x轴重复排列
background-repeat : repeat-y 在y轴重复排列
background-position : 90% 90% 背景图片x与y轴的位置
链接
A 所有超连接
A:link 超连接文字格式
A:visited 浏览过的连接文字格式
A:active 按下连接的格式
A:hover 鼠标移至连接
边框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四边框
虚线
<TEXTAREA STYLE="border:1px dashedpink">
实线
<TEXTAREA STYLE="border:1px solidpink">
