HTML学习笔记 day two

ＨＴＭＬ学习笔记　

ｄａｙ　ｔｗｏ

Ｃｈａｒｔｅｒ　ｔｈｒｅｅ网站中的文本样式标签

３．１设置标题字体

语法结构：＜ｈ＃＞标题文字＜／ｈ＃＞

注：其中的＃可以为１,２,３，４,５,６，不同的数字代表标题的大小，数字越大字体越小。

３.２设置网页文字样式

语法结构：＜ｆｏｎｔ　ｓｉｚｅ＝＂＃＂　ｆａｃｅ＝＂想要的字体“＞文本内容＜／ｆｏｎｔ＞

注：其中的＃可以是１,２,３,４,５,６，７，不同的数字代表标题的大小，数字越大字体越大。

３.３文本布局标签

文本缩进标签：

语法结构：＜ｂｌｏｃｋｑｕｏｔｅ＞文本内容＜／ｂｌｏｃｋｑｕｏｔｅ＞

作用：它是对整段的内容进行缩进而不是对首行进行缩进，所以他常用于引用。

保留格式标签： 语法结构：＜ｐｒｅ＞文本内容＜／ｐｒｅ＞

作用：用来保留文本中的空格和换行

内联行标签

语法结构：＜ｓｐａｎ＞文本内容＜／ｓｐａｎ＞

作用：它本身是没有意义的，他要和ＣＳＳ结合起来使用

３．４基于物理样式的文本标签

加粗标签

语法结构：＜ｂ＞加粗文字＜／ｂ＞

斜体标签

语法结构：＜ｉ＞斜体文字＜／ｉ＞

下划线标签

语法结构：＜ｕ＞文字＜／ｕ＞

文字标记标签

语法结构：＜ｉｎｓ　ｃｉｔｅ＝”链接“　ｄａｔｅｔｉｍｅ＝”时间“＞文字＜／ｉｎｓ＞

属性：ｃｉｔｅ和ｄａｔｅｔｉｍｅ，前者指出文档的链接或者修改原来的链接，总之就是一个链接，后者指出的是修改的时间

删除线标签

语法结构：＜ｄｅｌ＞文字＜／ｄｅｌ＞或者＜ｓ＞文字＜／ｓ＞

上标标签

语法结构：＜ｓｕｐ＞斜体文字＜／ｓｕｐ＞

下标标签

语法结构：＜ｓｕｂ＞斜体文字＜／ｓｕｂ＞

３．５基于逻辑样式的文本标签

逻辑样式标签指的是浏览器根据自己对标签的理解然后显示出效果

＜ｂｉｇ＞文字＜／ｂｉｇ＞

＜ｓｍａｌｌ＞文字＜／ｓｍａｌｌ＞

前一个标签是让文字大一号，后一个标签是让文字小一号

特注：在ＨＴＭＬ５中已经没有ｆｏｎｔ，ｂｉｇ，ｓｍａｌｌ，ｕ标签，在你写的时候会有横线，但是可以执行，效果也可以显示出来，原因应该是浏览器还能够读出标签的含义

Ｃｈａｐｔｅｒ　ｆｏｕｒ　超链接

４.１创建超链接

语法结构：＜ａ　ｈｒｅｆ＝＂链接的地址”＞显示出的名称＜／ａ＞

４.２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:设置背景图片，在ＩＥ里面ｔｒ不能用，在ｇｏｏｌｅ　ｃｈｏｒｍ可以用，另外在ｔａｂｌｅ，ｔｄ中两者都可以用

Ｃｅｌｌｓｐａｃｉｎｇ：表格间距，制表格中列与列之间的间距，方在ｔａｂｌｅ中

注意：想要切出来的图显示不变形，然后可以很好的对齐，可以设ｃｅｌｌｓｐｃｉｎｇ＝０　ｂｏｒｄｅｒ＝０

Ｃｅｌｌｐａｄｄｉｎｇ：设置单元格的内容和边框的距离

６.４表格边框

属性：

Ｂｏｒｄｅｒ：设置边框的宽度

Ｂｏｒｄｅｒｃｏｌｏｒ：设置边框的颜色

Ｂｏｒｄｅｒｃｏｌｏｒｌｉｇｈｔ：亮色边框颜色，指的是左边框和上边框的颜色

Ｂｏｒｄｅｒｃｏｌｏｒｄａｒｋ：暗色边框颜色，指的是右边框和下边框的颜色

Ｆｒａｍｅ：四周边框显不显示，它的值有　ｖｏｉｄ，ｈｓｉｄｅｓ，ｖｓｉｄｅｓ，ａｂｏｖｅ，ｂｅｌｏｗ，ｌｈｓ，ｒｈｓ

Ｖｏｉｄ：不显示外边框【，只显示内边框，

Ｈｓｉｄｅｓ：只显示上下边框

Ｖｓｉｄｅｓ：只显示左右边框

ａｂｏｖｅ，ｂｅｌｏｗ，ｌｈｓ，ｒｈｓ：分别显示上下左右的一个边框

６.５对齐方式

适用于行，即＜ｔｒ＞标签

Ａｌｉｇｎ＝”ｃｅｎｔｅｒ／ｌｅｆｔ／ｒｉｇｈｔ＂　这是进行水平对齐方式

ＶＡｌｉｇｎ＝”ｔｏｐ／ｍｉｄｄｌｅ／ｂｏｔｔｏｍ＂　这是进行竖直对齐方式

注意：在写标签属性的时候一定要特别注意他们的顺序，如果顺序错了就会读不出来，想要知道他的顺序，只要查查笔记中各个属性提到的时间的前后就是他们的顺序。

６.６行和列的合并

行的合并　语法结构

＜ｔａｂｌｅ＞

＜ｔｒ＞

　　＜ｔｄ　ｒｏｗｓｐａｎ＝＂ｎ＂＞＜／ｔｄ＞

　＜／ｔｒ＞

＜／ｔａｂｌｅ＞

列的合并　语法结构

＜ｔａｂｌｅ＞

＜ｔｒ＞

　　＜ｔｄ　ｃｏｌｓｐａｎ＝＂ｎ＂＞＜／ｔｄ＞

　＜／ｔｒ＞

＜／ｔａｂｌｅ＞

注其中的ｎ都表示要合并的

６.７表格标题标签

语法结构：

＜ｔａｂｌｅ＞

＜ｃａｐｔｉｏｎ＞表格标题内容＜／ｃａｐｔｉｏｎ＞

＜ｔｒ＞

　　＜ｔｄ　＞＜／ｔｄ＞

　＜／ｔｒ＞

＜／ｔａｂｌｅ＞

作用：通常被居中显示在表格的正上方，必须紧随ｔａｂｌｅ标签，并且每个表格只能定义一个标题

Ｃｈａｐｔｅｒ　ｓｅｖｅｎ多媒体元素

７.１活动字幕

语法结构： ＜ｍａｒｑｕｅｅ＞文本或图片＜／ｍａｒｑｕｅｅ＞

属性： ｂｅｈａｖｉｏｒ：值有ｓｃｒｏｌｌ，ｓｌｉｄｅ，ａｌｔｅｒｎａｔｅ

其中ｓｃｒｏｌｌ表示循环滚动，ｓｌｉｄｅ表示只滚动一次，ａｌｔｅｒｎａｔｅ表示来回滚动

Ｂｇｃｏｌｏｒ：表示背景色

Ｄｉｒｅｃｔｉｏｎ：值有ｌｅｆｔ，ｒｉｇｈｔ，ｕｐ，ｄｏｗｍ，表示滚动的方向

Ｓｃｒｏｌｌａｍｏｕｎｔ：表示滚动的速度，数值从１开始，数值越大的滚动的速度越快

Ｓｃｒｏｌｌｄｅｌａｙ：滚动字幕停顿的时间，填的数字，默认单位是毫秒，所以数字越大停顿的时间越长

Ｈｓｐａｃｅ，ｖｓｐａｃｅ：用来设置内容和滚动框的水平和竖直的距离

Ｌｏｏｐ：用来设置循环的次数

ｏｎｍｏｕｓｅＯｖｅｒ：用来设置鼠标的滑动（用法如下

＜ｍａｒｑｕｅｅ　ｏｎｍｏｕｓｅｏｕｔ＝＂ｔｈｉｓ．Ｓｔａｒｔ（）＂　ｏｎｍｏｕｓｅｏｖｅｒ＝＂ｔｈｉｓ．Ｓｔｏｐ（＿）＂＞文本内容＜／ｍａｒｑｕｅｅ＞

作用：前面一个来设置鼠标移出该区域时继续滚动，后者设置鼠标移入该区域时停止滚动