HTML笔记（中）

一、字符编码

字符：

文字与符号的集合，包含多个国家的文字、图形符号、标点符号、数字

字符集：

字符集的集合，各个国家拥有自己的字符集

字符编码的统一：

为了方便国际间使用电脑进行交流，国际组织编制了一个包含全世界几乎所有国家的字符集：unicode字符集，（相当于一个世界词典）

如何避免乱码：

1.HTML 的存储编码要与浏览显示的编码要一致

2.PHP脚本的编码也要与显示编码一致

3.数据库中数据的存储编码也要与显示编码一致

HTML、PHP、数据库、浏览器的显示编码要一致，则肯定不会出现乱码问题

二、链接标签

语法：

<a 属性=“值”>内容</a>

说明：

主要用于实现页面跳转，或使用a标签模拟一个按钮。

常用的属性：

href：值是一个网址（url）

示例：<a href="http://www.baidu.com">点击跳转</a>

target：用于设置所要跳转的页面的显示位置

取值：_self（当前页打开所要跳转的页面，默认）、_blank（在新的窗口中打开所要跳转的页面）、_top（在顶级窗口中显示所要跳转的页面）、_parent（在父窗口中显示将要跳转的页面） ，还可以是<frame>标签的name属性值

用法：

1.跳转

<a href="http://www.baidu.com">点击跳转</a>

2.发邮件

<a href="mailto:[e-mail]">点击发邮件</a>

3.下载

<a href="浏览器不可识别的文件">点击下载</a>

注意：如果是浏览器可识别的文件，只能使用PHP技术

4.空链接      

语法1：<a href="#"></a>  用于模拟按钮，调用JS代码

语法2：<a href="javascript:;"></a> 

5.锚点

页面内跳转，实现锚点需要两个a链接配合使用。

第一个链接用于定义锚点（锚点就是为了网页的某一处位置定义一个名字用于跳转）

语法：

<a name="锚点名">内容可有可无</a>

第二个链接用于进行跳转

语法：

<a href="#锚点名"></a>

还可以在不同的页面跳转到指定的锚点

第一步：在页面中设置要跳转的页面和锚点

比如：<a href="test.html（空格）#锚点名">

第二步：在test.html文件中设置锚点

<a name="锚点名">内容可有可无</a>

三、图片标签

1.颜色的表示方法

1.颜色单词，如：red、green、blue

2.RGB，R（Red红）、G（Green绿）、B（Blue蓝）       在HTML中失效

格式：RGB（0-255，0-255，0-255），八位二进制最大的十进制为255

3.16进制

格式：#00 00 00

每两位为一组，每一组的范围是00至FF

#FF0000 红色 ，#00FF00 绿色 ，#0000FF 蓝色 ，#000000 白色 ，#FFFFFF 黑色

2.  图片标签（单边标签）

标签语法：<img 属性=“值”/>

常用的属性：

 src         用于指定图片的路径

width      设置图片的宽度               不需要加单位

height     设置图片的高度              不需要加单位

border    设置图片的边框线                

align       设置水平对齐方式  取值：left  水平居左、right 水平居右、center 文字与图片的中线对齐

vspace    垂直间距

hspace    水平间距

alt     当图片无法显示时的提示信息

title   设置鼠标悬停时的提示信息

3.图像热点

实现图像热点至少需要两个标签

1、将一个图片作为一个容器（在此图片再创建不同的区域）

2、在图片上创建区域

<map name="映射名">

<area shape="circle">

</map>

说明：

<map></map>用于定义整个映射

<area>用于定义具体的区域类型及范围，属性有：

shape（形状）：circle（圆形）、rect（矩形）、poly（多边形）

coords（坐标）

如果shape的取值为circle，那么coords="x,y,r" 

xy圆心坐标，r表示半径

如果shape的取值为rect，那么coords="x,y,w,h" xy表示左上坐标，wh表示宽高

coords="x1,y1,x2,y2" x1y1表示左上坐标，x2y2表示右下坐标

如果shape的取值为poly，那么coords="x1,y1,x2,y2,x3,y3..." 分别表示多边形各个顶点的坐标

（在计算机中确定一个矩形的方法有：

方法1：左上坐标、宽、高，方法2：左上角与右下角坐标）

3、在图片标签上关联热点

如：

<img src="test.png" usemap="#映射名">

<map name="映射名">

<area shape="circle" coords="50,50,20" href="http://www.baidu.com">

</map>

4.路径

当前的文档需要引入外部的一个文件时，就涉及到路径的问题

路径分为相对路径与绝对路径

相对路径：在指定所要引入的外部文件时，以当前文件所在的目录为（起点）基础，一级级的指向，这样的方式即为相对路径

./          当前文件夹（可以省略）

../         当前文件夹的上级文件夹（有几个就是上几级）

 比如：E:\php_folder\20160706\0707\code\01demo.html

             E:\php_folder\20160706\0708\demo.jpg

01demo.html的代码引入外部文件demo.jpg的路径是 ../../0708/demo.jpg

  

绝对路径：以磁盘根目录为起点，决定文件的走向

如  E:\php_folder\20160706\0708\demo.jpg

注意：在HTML标签引入外部的图片资源时，不能使用绝对路径

四、表格标签

1.table标签

table数据标签，主要是用于数据，具有行列结构的数据，table标签是一个标签组

语法：

<table>

<tr>

<td></td>

<td></td>

              ......

</tr>

......

</table>

常用属性：

table标签属性：

border：用于设置表格的边框线

bordercolor：边框线的颜色

width：宽度，取值是整数或百分比 （不需要加单位）

height：高度，取值是整数或百分比（不需要加单位）

bgcolor：背景颜色

background：背景图片

align：设置表格本身的文字水平对齐方式，left、center、right

rules：设置表格边线合并，取值 all

cellspadding：用于设置单元格内容与边线的距离

cellspacing：用于设置单元格之间边线的距离

tr标签属性

bgcolor：整行的背景颜色

background：整行的背景图片

align：整行内容的水平对齐方式 ，取值：left（默认）、center、right

valign：整行内容垂直的对齐方式 ，取值：top（垂直上对齐）、middle（垂直居中默认）、bottom（垂直下对齐）

td标签属性：

bgcolor：单元格的背景颜色

background：单元格的背景图片

width：设置整列的宽度

height：设置整行的高度

align：设置当前单元格内容的水平对齐方式

valign：设置当前单元格内容垂直的对齐方式 

colspan：用于合并一个行上多个元素的单元格（合并多列）

rowspan：用于合并一列上多个连续的单元格（合并多行）

合并方法：

1、首先找到合并的开始单元格，书写属性。

2、删除其后或其下被合并的单元格

<th></th>

用于定义表格的表头，只是比td标签多了加粗与居中的效果

表格其他标签（浏览器显示时会自动添加）：

<thead></thead>

主要用户划分表格的头部区域

<tbody></tbody>

主要用于划分表格的数据区域

<tfoot></tfoot>

主要用于划分表格尾部区域

<caption></caption>

主要用于定义表格的标题

caption的属性：

align用于定义表格的标题的位置，取值：left（左侧）、right（右侧）、top（上部）、bottom（下部）

注意：

table标签中只能包含表格相关的标签（tr、td、caption、thead、tbody、tfoot、th）。如果想包含其他的标签，其他标签一定要放在td内