- HTML介绍
html(hyper text markup language)----超文本标记语言
html标准---W3C
超文本--在文本内容的基础上，添加更加丰富的信息（图片、动画、声音等）
标记（markup--标签）：<单词></单词>---挨着<是标记
标记通常有两层含义：
- 表形：每一个标签都具有一定的表现形式
- 表意：每一个标签都具有一定的意义
语言特点： 可以直接被浏览器解析，是一种超文本标记语言，与程序语言不同。
- HTML的标签分类
1.双标签： 由开始标签和结束标签构成，内容放入开始标签和结束标签之中
语法：<标签名 属性名="属性值">.....内容....</标签>
属性可理解为人的特征 性别="女" 体重="45" 身高="165"
例如 <div></div> <body></body>.....
2.单标签：只有开始标签，没有结束标签，没有内容
语法：<标签名 属性名="属性值" 属性名="属性值" /> 注意：一定要闭合
例如：<link/> <img/> <meta/> <br/>
- HTML基本骨架结构
<html>
<head>
<title>网站的标题</title>
</head>
<body>
</body>
</html>
文件的扩展名是xxx.html
html结构说明： 1.<html>含义：告诉浏览器网页的代码用什么格式来解析
2.<head>含义：告诉浏览器网页的汉字用什么字符集，使用的字符集不正确就会出现乱码。
gb2312 简体中文 (汉字操作系统下默认使用的字符集) gbk 国际码 utf-8 多国语言
3.<title>含义：便于搜索引擎
4.<body>含义：网站的内容，99%的内容都放入<body></body>中，只有放在该标签中，才能在窗口显示
注意：tab键可以缩进
- HTML书写规范
1.Html不区分大小写，但是w3c使用的是小写的<body>,不推荐<BODY>
2.Html如果有标签嵌套，必须顺序嵌套，不能交叉
3.单标签一定要闭合,例如<br/>
4.属性：每一个标签有没有属性，有多少属性----已经由w3c规定好
5.属性值：双引号引起来，如<body background="black"></body>
- HTML文本标签
font 设置文本的颜色 文本的字体 文本的大小
<font color="设置颜色" size="设置大小" face="设置字体"> 设置的内容</font>
<b></b> 加粗
<strong></strong> 加粗 加强语气
<i></i> 倾斜
<em></em> 倾斜 加强语气
<u></u> 下划线
<ins></ins> 插入的是文本 例如 * | 之类的
<sup></sup> 上标 使文本上标
<sub></sub> 下标 使文本下标
- Html段落标签
<p></P> 一段
段落的属性有：
Align(居中方式) 取值 left center right
标题：
<h1></h1> 标题1
......
<h6></h6> 标题6
属性：Align : left center right
Pre标签：预定义标签，保留原有的空格和换行
Div标签：区域划分作用，独占一行，块标签 (p h1 table ul ol... )
Span标签：本身并没有什么含义，但是也是网站使用最多的标签之一，结合CSS一起使用构成功能，行内标签 (span em i b strong u)
注意：一般是块标签内含有行内标签
- 无序列表
语法：
<ul>
<li>
</li>
<li>
</li>
</ul>
ul的属性：
type 设置列表前面的项目符号的样式 circle(空心圆) disc(实心圆) square(方形)
- 图片标签(单标签、行内标签)
语法：<img 属性名="属性值" />
属性 ： 图片的路径 src="图片的地址"(图片要放到同一个站点下，即和html文件放在同一个文件夹)
图片的宽度 width="数值" 以像素为单位的px，但是在html标签中不写单位，如 width="300"
图片的高度 height="数值" 以像素为单位的px，但是在html标签中不写单位，如 height="200"
图片的边框 border="数值"
图片的解释 alt="对图片的描述内容"
（ 图片和内容左右之间的距离 hspace="数值"
图片和内容上下之间的距离 vspace="数值" ） 通常不用这两个，用CSS 实现
注意：图片等比例缩放，只设置宽度或高度
- 表格介绍
语法：
<table>
<tr>
<td>
</td>
</tr>
</table>
通常表格<table</table>包括行<tr></tr> 行里面包括单元格<td></td>
属性：表格的边框 border 默认值是0
表格宽度 width
表格高度 height(不建议使用)
居中方式 align="居中方式" 取值 left center right
表格中的内容和单元格之间的距离 cellpadding="数值" 默认数值是 2px
表格中的单元格和单元格之间的距离 cellspacing="数值" 默认数值是 2px
表格的背景颜色 bgcolor="颜色值"
表格的背景图片 background="图片地址"(背景图片不能含有中文) ----修饰作用
表格的合并边框线 rules="all" (w3c不推荐使用 用CSS实现)
表格的边框线颜色 bordercolor="颜色值" (不建议使用)
注意：背景图片的优先级高于背景颜色
<tr>的属性：
行的高度 height
背景颜色 bgcolor
背景图片 background
水平对齐方式 align 取值 left center right
垂直对齐方式 valign 取值 top middle bottom
<td>的属性：
背景颜色 height
背景图片 background
宽度 width
高度 height
内容在单元格中的水平对齐方式 align 取值 left center right
内容在单元格中的垂直对齐方式 valign 取值 left center right
- 表格的扩充
合并单元格的问题：
横向合并(即左右合并)： 若干个单元格合并为一个单元格
cosplan="数值" 例如：cosplan="3" 横向合并3个单元格
纵向合并(即上下合并)
rowspan="数值" 例如：rowspan="3" 纵向合并3个单元格
- 链接
语法 <a 属性="属性值"> 内容 </a>
属性：
链接的地址 href="链接的地址" url 绝对地址 或 相对地址
打开目标文件的窗口 target
_blank 在新的窗口中打开目标文件
_self 在原来的窗口打开目标文件(原来的窗口被覆盖)
定义锚点的名称 name
- 绝对地址(网络地址)
语法 <a href="http://www/taobao.com"> 淘宝 </a> 网络地址
<a href="file:///C:/video/www/test.html"> 本地的html文件 </a> 本地地址
- 相对地址
在同一个站点下，在同一个文件夹
目标文件和当前文件在同一个目录，直接写名称
目标文件在当前文件的下一级目录，xx表示文件夹名 xx/文件名称
目标文件在当前文件的下两级目录下 xx/xx/文件名称
目标文件在当前文件的上一级目录 ../文件名称
目标文件在当前文件的上两级目录 ../../文件名称
- 特殊链接
下载链接
文件不用下载可以直接做链接 .html .jpg
文件必须下载链接 .zip .exe
邮件链接
<a href=mailto:邮件的地址> 内容 </a>
空链接
在当前页面做链接 <a href="#"> 内容 </a>
Javascript链接
<a href="javascript:window.close()"> 内容 </a>
- 锚点
同一个页面的不同区域跳转
定义锚点 <a name="自定义名称"></a> 在页面中的任一处定义 <a></a>之间不加内容，给链接中的target用
跳转锚点 <a href="#锚点名称">内容</a> 跳转到定义锚点的位置