一，HTML介绍
二，HTML结构
三，HTML的常用标签
四，框架标签
五，表格标签
六，表单标签
七，多媒体标签
一，HTML介绍
html是超文本标记语言
html是标记语言
标记语言是一套标记标签
html使用标记标签来描述网页
二，HTML结构
1，html基本结构
2，head标签内常用的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>one</title>
</head>
<body>
<p>主题内容</p>
</body>
</html>
主要标签
title 用于定义文档标题
script 用于包含javascript脚本
link 用于来链接外部css资源文件
style 用于定义内部css样式
meta 用于html页面的元数据
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
–http-equiv指定元信息的名称，该属性指定的名称具有特殊的意义，它可以向浏览器回传一些有用的信息，帮助浏览器正确地处理网页内容
–name指定元信息名称，该名称可以随意指定
–content指定元信息的值
都可以省略
三，HTML的常用标签
1，块级标签
<1>常用块级标签p,h1-h6,div,ul
h–标题标签
p–段落标签
hr–水平线标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html学习</title>
</head>
<body>
<hi>一级标签</hi>
<hr 水平线 />
<p>欢迎</p>
<p>你</p>
</body>
</html>
<2>有序列表标签语法
ol,li
<3>无序列表
ul,li
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html学习</title>
</head>
<body>
<h1>一级标签</h1>
<hr 水平线 />
<p>欢迎</p>
<p>你</p>
<ol>
<h3>列表</h3>
<li>列表1</li>
<li>列表2</li>
</ol>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</body>
</html>
<4>定义描述标签
dl,dt,dd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html学习</title>
</head>
<body>
<dl>
<dt>标题</dt>
<dd>描述</dd>
</dl>
</body>
</html>
<5>分区标签
一般当作结构化块状元素使用，一般最常见的用途是对网页进行整体分块布局，即当容器来使用
div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html学习</title>
</head>
<body>
<div>分区1</div>
<div>分区2</div>
</body>
</html>
2，行级标签
文本格式化元素
b-粗体
i-斜体
em-强调
strong-粗体
small-小号
sub-下标
sup-上标
bdo-文本显示方向，内有dir属性，只能取值ltr或rtl
span
<span>文本等行级内容</span>br换行
<br/>换行符3，超链接标签
href 指定超链接所关联的另一个资源
target 指定框架集中哪个框架来装载另一个资源，该属性可以是-blank-self-top-parent四个值，分别代表使用自身，新窗口，顶层框架，父框架来装载新的资源
<a href="链接地址" target="目标窗口">链接文本或图片</a>4，图像标签
<img src= "图片地址" alt= "提示文字">四，框架标签
1，frameset框架集
<1>创建各个子窗口对应的HTML文件
<2>创建整个框架文件，分别引用子窗口文件
cols:pixels % *定义框架集中列的数目和尺寸
rows:pixls % * 定义框架集中行的数目和尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html学习</title>
</head>
<frameset cols="25%,50%">
<frame src="1.html" />
<frame src="2.html" />
</frameset>
</html>
2，iframe内嵌框架
iframe常用属性
frame border：0，1规定是否显示框架周围的边框
name frame_name：规定iframe的名称
scrolling yes,no,auto：规定是否在iframe中显示滚动条
src URL：规定在iframe中显示的文档的URL
<body>
<iframe src="1.html" name="1" frameborder="边框" scrolling="yes"/>
</body>五，表格标签
表格标签的使用
表格的相关元素
table 定义表格
tr 定义表格行，该元素只能包含td或者th两种元素
td 定义单元格，包含两个主要的属性：colspan-指定单元格跨多少列，rowspan-指定单元格可横跨的行数
caption 定义单元格标题
th 定义表格页眉的单元格
tbody 定义表格的主题
thead 定义表格的头
tfoot 定义表格的脚 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html学习</title>
</head>
<body>
<table width="50%" height="200px" border="1">
<caption>歌单</caption>
<thead>
<tr>
<th>歌名</th>
<th>歌手</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
</tr>
</tbody>
<tfoot >
<tr>
<td colspan="2">5</td>
</tr>
</tfoot>
</table>
</body>
</html>
六，表单标签
1,from标签
2，常见的表单元素必须和元素一起使用，表单是表单元素的容器
语法
<form action="表单提交地址" method="提交方法">文本框，按钮等表单元素</form>
常用属性
action：指定表单提交后由服务器上的哪个处理程序进行处理
enctype：用于指定表单数据的编码方式 
method：指定向服务器提交的方式一般为get和post两种方式get方式的请求会将请求参数的名和值转换成字符串，并附加在原URl之后，因此可以在地址栏中看到的请求参数的名和值。且get请求传送的数据量比较小，一般不能超过2KB*一般超链接是get请求* ；post方式的请求传送的数据量比较大，通常认为可以不受限制，往往取决于服务器的限制。post方式的请求参数是放在HTML的HEADER中传输，用户在地址栏看不见请求参数，安全性相对较高
常见的表单元素
input元素 
常见的属性 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html学习</title>
</head>
<body>
<form name = "regForm" method="post" action="提交地址">
单行文本框<input type="text" name="uname" id="uname" maxlength="10"/><br />
密码文本框<input type="password" name="pwd" id="pwd" size="5"/><br />
隐藏域<input type="hidden" name="hidn" id="hidn" /><br />
单选按钮<input type="radio" name="sex" id="male" checked="checked"/>男<br />
<input type="radio" name="sex" id="female" />女<br />
复选框<input type="checkbox" name="hobby" value="1" id="football" />足球<br />
复选框<input type="checkbox" name="hobby" value="2" id="bbasall" />篮球<br />
图像域<input type="image" src="图像路径"
width="100px" height="20px"
name="photo" id="photo"/><br />
文件上传域<input type="file" name="file" /><br />
按钮<input type="submit" name="submit" value="提交"/>
按钮<input type="reset" name="reset" value="重置"/>
按钮<input type="button" name="button" value="普通"/>
</form>
</body>
</html>
button元素
使用button元素
<button type="按钮类型"> 普通文本 图像等</button>
常用属性
disabled：指定是否禁用此元素，该属性只能是disabled或者省略
name：指定该按钮的唯一名称
type：指定该按钮属于哪种按钮，只能是button，reset，submit
button提交按钮<br />
<button name="sub2" type="submit">提交</button><br />
<button name="reset2" type="reset"><b>重置</b></button><br />
<button name="bnt2" disabled="disabled" type="button">普通</button><br />列表框和下拉菜单
<select name="指定列表名称" size="行数"><option value="选项值" selected="selected"></option></select>
常见的属性
-disable 指定元素是否禁用
-mutple 改列表框是否允许选多行
-size 指定该列表内同时显示多少个列表项
在其元素里，只能包含如下的两种子元素
option 用于指定列表框或菜单项，常见的属性
-selected 指定该列表初始状态是否被选中
-value 指定该选项对应的请求参数值
optgroup用于定义列表项或菜单项组，常见的属性
-label 指定该选项组的标签。必填属性
下拉菜单<br />
<select name="city" id="city">
<option value="beijing">北京</option>
<option selected="selected" value="shanghai">上海</option>
<option>广州</option>
</select><br />
列表框<br />
<select name="city2" id="city2" size="3">
<option value="beijing">北京</option>
<option selected="selected" value="shanghai">上海</option>
<option>广州</option>
</select><br />
选项组列表框<br />
<select name="city2" id="city2" size="3">
<optgroup label="一线城市">
<option value="beijing">北京</option>
<option selected="selected" value="shanghai">上海</option>
<option>广州</option>
</optgroup>
<option value="beijing">北京</option>
<option selected="selected" value="shanghai">上海</option>
<option>广州</option>
</select>多行文本框
<textarea name="..." cols="列宽" rows="行宽">文本内容</textarea>
常见的属性
cols 指定文本框的宽度，必填
rows 指定文本框的高度，必填
readonly 指定该文本框只读 该属性只能是readonly或者省略
<textarea cols="20" rows="5" name="wenbenkaung" readonly="readonly">
文本框内容
</textarea>七，多媒体标签
音频和视频的标签
embed 播放音频
<embed src="音频文件资源" width="200" height="200"></embed>
embed播放flash视频
PLUGINSPAGE设置flash插件的位置
object标签
可以通过object标签来给浏览器加载插件，通过加载的插件来播放音频和视频
<object data="资源">
<param name="src" value="资源" />
<param name="autoplay" value="true" />
</object>