ＨＴＭＬ学习笔记
ｄａｙ ｔｗｏ
Ｃｈａｒｔｅｒ ｔｈｒｅｅ网站中的文本样式标签
３．１设置标题字体
语法结构：＜ｈ＃＞标题文字＜／ｈ＃＞
注：其中的＃可以为１,２,３，４,５,６，不同的数字代表标题的大小，数字越大字体越小。
３.２设置网页文字样式
语法结构：＜ｆｏｎｔ ｓｉｚｅ＝＂＃＂ ｆａｃｅ＝＂想要的字体“＞文本内容＜／ｆｏｎｔ＞
注：其中的＃可以是１,２,３,４,５,６，７，不同的数字代表标题的大小，数字越大字体越大。
３.３文本布局标签
文本缩进标签：
语法结构：＜ｂｌｏｃｋｑｕｏｔｅ＞文本内容＜／ｂｌｏｃｋｑｕｏｔｅ＞
作用：它是对整段的内容进行缩进而不是对首行进行缩进，所以他常用于引用。
保留格式标签： 语法结构：＜ｐｒｅ＞文本内容＜／ｐｒｅ＞
作用：用来保留文本中的空格和换行
内联行标签
语法结构：＜ｓｐａｎ＞文本内容＜／ｓｐａｎ＞
作用：它本身是没有意义的，他要和ＣＳＳ结合起来使用
３．４基于物理样式的文本标签
加粗标签
语法结构：＜ｂ＞加粗文字＜／ｂ＞
斜体标签
语法结构：＜ｉ＞斜体文字＜／ｉ＞
下划线标签
语法结构：＜ｕ＞文字＜／ｕ＞
文字标记标签
语法结构：＜ｉｎｓ ｃｉｔｅ＝”链接“ ｄａｔｅｔｉｍｅ＝”时间“＞文字＜／ｉｎｓ＞
属性：ｃｉｔｅ和ｄａｔｅｔｉｍｅ，前者指出文档的链接或者修改原来的链接，总之就是一个链接，后者指出的是修改的时间
删除线标签
语法结构：＜ｄｅｌ＞文字＜／ｄｅｌ＞或者＜ｓ＞文字＜／ｓ＞
上标标签
语法结构：＜ｓｕｐ＞斜体文字＜／ｓｕｐ＞
下标标签
语法结构：＜ｓｕｂ＞斜体文字＜／ｓｕｂ＞
３．５基于逻辑样式的文本标签
逻辑样式标签指的是浏览器根据自己对标签的理解然后显示出效果
＜ｂｉｇ＞文字＜／ｂｉｇ＞
＜ｓｍａｌｌ＞文字＜／ｓｍａｌｌ＞
前一个标签是让文字大一号，后一个标签是让文字小一号
特注：在ＨＴＭＬ５中已经没有ｆｏｎｔ，ｂｉｇ，ｓｍａｌｌ，ｕ标签，在你写的时候会有横线，但是可以执行，效果也可以显示出来，原因应该是浏览器还能够读出标签的含义
Ｃｈａｐｔｅｒ ｆｏｕｒ 超链接
４.１创建超链接
语法结构：＜ａ ｈｒｅｆ＝＂链接的地址”＞显示出的名称＜／ａ＞
４.２href属性
链接到同一页面的其他位置
语法结构：
<a name=”n”>显示出的名称</a>
<a href=”#n”>显示出的名称</a>
这两个谁在前谁在后没有关系关键是name属性的值和href属性中值要对应，常用于页面太长的情况
本地相对路径 1,同级链接： 直接写上链接的HTML的名字就可以
2.下级链接：
“文件名/链接的ＨＴＭＬ的名字＂
3.上级链接
”．．／链接的ＨＴＭＬ的名字＂
空间网址绝对路径 ＵＲＬ
“ｈｔｔｐ：／／ｗｗｗ．Ｂａｉｄｕ．ｃｏｍ／＂
为了规范一般要在最后的位置加上 ／ ；不能够少了ｈｔｔｐ：／／这样的头
４.３ｔａｒｇｅｔ属性
作用：用来控制链接目标的打开方式
方式： ＿ｂｌａｎｋ：在新窗口打开
＿ｐａｒｅｎｔ：在父窗口打开，原来的页面会被覆盖 ＿ｓｅｌｆ：在当前窗口打开，不考虑框架的情况下和前者是一样的 ＿ｔｏｐ：打开的链接会出现在最顶层的窗体，不考虑框架的情况下和前者是一样的
Ｃｈａｐｔｅｒ ｆｉｖｅ 图像的使用
5.２设置背景图像
语法结构
＜ｂｏｄｙ ｂａｃｋｇｒｏｕｎｄ＝＂＃＂＞ ＜／ｂｏｄｙ＞ 注：其中＃填的是图片的路径名
５．３图像标签
语法结构：＜ｉｍｇ ｓｒｃ＝＂图片路径” ａｌｔ＝＂替换的文本＂ ｗｉｄｔｈ＝＂数字ｐｘ＂ ｈｅｉｇｈｔ＝＂数字ｐｘ ＂ ａｌｉｇｎ＝＂ 方位＂ ｂｏｒｄｅｒ＝＂ 数字ｐｘ＂ ｈｓｐａｃｅ＝＂数字ｐｘ ＂ ｖｓｐａｃｅ＝＂数字ｐｘ ＂／＞
图片路径的写法：
<img src="./meishaonv1.jpg" alt="这里是图片"/>
用来链接当前和ＨＴＭＬ同级的图片
<img src="../myimage/baobao.jpg" alt="这里是图片"/>
用来链接在同一目录下两个不同的文件夹，图片在ｍｙｉｍａｇｅ文件夹，而ＨＴＭＬ在Ｍｙｈｔｍｌ文件夹
它的路径名和超链接的是一样的用法
属性：
Ａｌｔ：写上当图片不显示的时候所代替它显示的文本，在ｇｏｏｌｅ ｃｈｏｒｍ不会显示，在IE会显示
Ｗｉｄｔｈ：设置图片的宽度，不改变图片本身的内容
Ｈｅｉｇｈｔ：设置图片的高度，不改变图片本身的内容
Align：在图片进行排版，有五个方向：bottom，left，right，Middle，top，用来设置文字在图片的那个位置
Border：默认的边框颜色是黑色
Hspace:水平间距
Vspace:垂直间距//这两者都是为了来设置图片和文字的距离
5.4图像超链接
语法结构： <a href=”链接的路径名 “><img src=”图片的路径名 “/> </a>
创建热点区域：
<img src=”图片的路径名 “ usemap=”#图片名称“/>
<map name=”图片名称”>
<area shape=”确定热点图形” cords=” 坐标“ href=”被连接的地址”>
</map>
注：
热点图形有：rect:它的坐标要用四个值表示，前两个值表示起始的一个角x,y ;后两个值表示与之成对角线的角的x,y
Circle:它的坐标只要三个值，前面两个值表示圆心坐标，最后一个表示半径
Poly：这是多边形，他有2n个数字，每对数字都表示出了一个转折点
5.5插入视频文件
语法结构： <img dynsrc=”视频地址” loop=“数字” start=”开始的方式“/>
Loop:表示循环的次数，当等于-1时表示无限循环
Start：表示开始的方式，fileopen 表示一打开就会播放mouseover 当鼠标点击的时候才会播放
Chapter six表格的使用
6.1表格的基本构成
语法结构： <table>
<tr>//行标签
<th>标题内容</th>//标题标签 <td>文本内容</td>//列标签
</tr>
</table>
注意： 每一个文本内容都要添加在<td>标签之中，只有添加到这个标签之中才能够被正确的读取
标题标签的特殊之处在于它能够使得文字加粗并且居中，这是它与列标签的不同之处
6.3表格属性
Width：表格宽度设置，td,table都可以用
Height：表格高度设置，td,table，tr都可以用
Background:设置背景图片，在ＩＥ里面ｔｒ不能用，在ｇｏｏｌｅ ｃｈｏｒｍ可以用，另外在ｔａｂｌｅ，ｔｄ中两者都可以用
Ｃｅｌｌｓｐａｃｉｎｇ：表格间距，制表格中列与列之间的间距，方在ｔａｂｌｅ中
注意：想要切出来的图显示不变形，然后可以很好的对齐，可以设ｃｅｌｌｓｐｃｉｎｇ＝０ ｂｏｒｄｅｒ＝０
Ｃｅｌｌｐａｄｄｉｎｇ：设置单元格的内容和边框的距离
６.４表格边框
属性：
Ｂｏｒｄｅｒ：设置边框的宽度
Ｂｏｒｄｅｒｃｏｌｏｒ：设置边框的颜色
Ｂｏｒｄｅｒｃｏｌｏｒｌｉｇｈｔ：亮色边框颜色，指的是左边框和上边框的颜色
Ｂｏｒｄｅｒｃｏｌｏｒｄａｒｋ：暗色边框颜色，指的是右边框和下边框的颜色
Ｆｒａｍｅ：四周边框显不显示，它的值有 ｖｏｉｄ，ｈｓｉｄｅｓ，ｖｓｉｄｅｓ，ａｂｏｖｅ，ｂｅｌｏｗ，ｌｈｓ，ｒｈｓ
Ｖｏｉｄ：不显示外边框【，只显示内边框，
Ｈｓｉｄｅｓ：只显示上下边框
Ｖｓｉｄｅｓ：只显示左右边框
ａｂｏｖｅ，ｂｅｌｏｗ，ｌｈｓ，ｒｈｓ：分别显示上下左右的一个边框
６.５对齐方式
适用于行，即＜ｔｒ＞标签
Ａｌｉｇｎ＝”ｃｅｎｔｅｒ／ｌｅｆｔ／ｒｉｇｈｔ＂ 这是进行水平对齐方式
ＶＡｌｉｇｎ＝”ｔｏｐ／ｍｉｄｄｌｅ／ｂｏｔｔｏｍ＂ 这是进行竖直对齐方式
注意：在写标签属性的时候一定要特别注意他们的顺序，如果顺序错了就会读不出来，想要知道他的顺序，只要查查笔记中各个属性提到的时间的前后就是他们的顺序。
６.６行和列的合并
行的合并 语法结构
＜ｔａｂｌｅ＞
＜ｔｒ＞
＜ｔｄ ｒｏｗｓｐａｎ＝＂ｎ＂＞＜／ｔｄ＞
＜／ｔｒ＞
＜／ｔａｂｌｅ＞
列的合并 语法结构
＜ｔａｂｌｅ＞
＜ｔｒ＞
＜ｔｄ ｃｏｌｓｐａｎ＝＂ｎ＂＞＜／ｔｄ＞
＜／ｔｒ＞
＜／ｔａｂｌｅ＞
注其中的ｎ都表示要合并的
６.７表格标题标签
语法结构：
＜ｔａｂｌｅ＞
＜ｃａｐｔｉｏｎ＞表格标题内容＜／ｃａｐｔｉｏｎ＞
＜ｔｒ＞
＜ｔｄ ＞＜／ｔｄ＞
＜／ｔｒ＞
＜／ｔａｂｌｅ＞
作用：通常被居中显示在表格的正上方，必须紧随ｔａｂｌｅ标签，并且每个表格只能定义一个标题
Ｃｈａｐｔｅｒ ｓｅｖｅｎ多媒体元素
７.１活动字幕
语法结构： ＜ｍａｒｑｕｅｅ＞文本或图片＜／ｍａｒｑｕｅｅ＞
属性： ｂｅｈａｖｉｏｒ：值有ｓｃｒｏｌｌ，ｓｌｉｄｅ，ａｌｔｅｒｎａｔｅ
其中ｓｃｒｏｌｌ表示循环滚动，ｓｌｉｄｅ表示只滚动一次，ａｌｔｅｒｎａｔｅ表示来回滚动
Ｂｇｃｏｌｏｒ：表示背景色
Ｄｉｒｅｃｔｉｏｎ：值有ｌｅｆｔ，ｒｉｇｈｔ，ｕｐ，ｄｏｗｍ，表示滚动的方向
Ｓｃｒｏｌｌａｍｏｕｎｔ：表示滚动的速度，数值从１开始，数值越大的滚动的速度越快
Ｓｃｒｏｌｌｄｅｌａｙ：滚动字幕停顿的时间，填的数字，默认单位是毫秒，所以数字越大停顿的时间越长
Ｈｓｐａｃｅ，ｖｓｐａｃｅ：用来设置内容和滚动框的水平和竖直的距离
Ｌｏｏｐ：用来设置循环的次数
ｏｎｍｏｕｓｅＯｖｅｒ：用来设置鼠标的滑动（用法如下
＜ｍａｒｑｕｅｅ ｏｎｍｏｕｓｅｏｕｔ＝＂ｔｈｉｓ．Ｓｔａｒｔ（）＂ ｏｎｍｏｕｓｅｏｖｅｒ＝＂ｔｈｉｓ．Ｓｔｏｐ（＿）＂＞文本内容＜／ｍａｒｑｕｅｅ＞
作用：前面一个来设置鼠标移出该区域时继续滚动，后者设置鼠标移入该区域时停止滚动