HTML基础知识总结
1.基本架构
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这里是页面头部</title>
</head> <!-- 两部分构成一个HTML网页 -->
<body
这里是页面主体
</body>
</html>
2.<br/>和<p>标签
<body>
当一段文字在网页中过长而显得累赘，<br/>就可以使用换行标签来修饰
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</body>
3.标题标签与文本格式化
<body>
<h1><b>标题1</b></h1> <!-- 标题1+加粗字体 -->
<h2><i>标题2</i></h2> <!-- 标题2+斜体字 -->
<h3><del>标题3</del></h3> <!-- 标题3+删除字体 -->
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
X<sup>2</sup>+Y<sup>2</sup><br/> <!-- 上标字 -->
H<sub>2</sub>O <!-- 下标字 -->
</body>
4.链接
<body>
<a href="http://www.baidu.com">外部链接</a>
<a target="blank" href="about.html">访问本地网络</a>
<!-- target是打开链接的方式(_blank 新的空白页,_self 当前页,_top) -->
<a href=“mailto:邮箱地址”>邮件链接</a>
<a href=“tel:电话号码”>一键拨打</a>
<a href="sms:139xxxxxxx">一键发送短信</a>
</body>
5.图像
<img src="URL" width="100" height="100" >
<!-- 在网页中插入一张图片，src定义图像的url，width设置图像宽度，height设置图像高度 -->
图片相对地址：
./ 当前目录
../ 回到上一层目录
images/ 进入一层目录
../images/ 回到上一层目录，然后再进入images目录
图像热区
<img src="URL" usemap="# map 名称" />
<map name="map 名称">
<area shape="形状" coords="坐标值" href="URL" />
</map>
shape 热区形状(rect、circle、poly )
coords 形状的坐标值
rect 选取正方形左上角坐标轴位置和右下角坐标轴位置（X1，Y1，X2，Y2）
circle 测量圆的半径和圆心的位置（X1，Y1，r）
poly 多边形的多个点（X1,Y1,X2,Y2,X3,Y3,X4,Y4,X5,Y5）
6.音频、视频
(音频)
带控制器的音频播放器
语法：
<audio src="song.ogg" controls="controls"></audio>
<audio width="320" height="240" controls="controls">
<!-- 设置播放器的宽高和控制按钮 -->
考虑到不同浏览器对视频文件的兼容性
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<!-- 音频的两种格式(ogg/mp3) -->
<p>Your browser does not support the audio tag.</p>
<!-- 如果浏览器不支持，会在网页上显示这个效果 -->
</audio >
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
(视频)
带控制器的视频播放器
语法：
<video src=“movie.mp4” controls="controls"></video>
<video width="320" height="240" controls="controls">
<!-- 设置播放器的宽高和控制按钮 -->
考虑到不同浏览器对视频文件的兼容性
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<!-- 视频的两种格式(ogg/mp3) -->
<p>Your browser does not support the video tag.</p>
<!-- 如果浏览器不支持，会在网页上显示这个效果 -->
</video>
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
7.实体字符
实体字符 字符实体
大于号(>) >
小于号(<) <
引号(") "
注册商标(®) ®
版权(© ) ©
&号 &
8.列表
(无序列表)
<ul type="square"> <!-- type属性设置列表项目前的图标类型 -->
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
(有序列表)
<ol type="a" start="3"> <!-- 设置列表项目图标类型,从类型的第N个属性开始 -->
<li>123</li>
<li>456</li>
<li>789</li>
</ol>
(定义列表)
<dl>
<dt>HTML</dt>
<dd>html 是超文本标记语言</dd>
<!-- 定义列表用来组织术语和它们的定义。任何信息如果包含多个术语和相对应的解释，都可以使用定义列表进行组织。 -->
<dt>XHTML</dt>
<dd>可扩展超文本置标语言 </dd>
<dd>表现方式与超文本置标语言（HTML）类似，不过语法上更加严格 </dd>
</dl>
9.表格
<table>
tr*3>td*3 + table <!-- 创建一个3行3列的表格 -->
</table>
属性 值 说明
width px、 % 指定表格的宽度
height px、% 表格的高度
border px 指定表格边框的宽度
cellpadding px 指定边框与内容之间的空白
cellspacing px、 % 指定单元格之间的空白
align left、 right 、 center 指定对齐方式
valign top、 middle 、 bottom 垂直排列方式
colspan 合并列单元格
rowspan 合并行单元格
设置表格各项属性可参考上文。
<ifram>内嵌框架
<iframe width="500px" scrolling="yes" frameborder="1" height="500px" src="http://www.163.com"></iframe>
属性 属性值 说明
width px , % 指定框架的宽度
height px , % 指定框架的高度
scrolling yes,no,auto 是否显示滚动条
frameborder 1, 0 是否显示边框
10.表单
<input type="text/password/submit/button/radio name=""/checkbox name/reset/images name="" src="""/>
文本/密码 提交 /按钮 /单选 /复选框 /重置 /图片
<input type="hidden" name="uid" "file" >
隐藏域 文件上传
multiple：控制多个文件上传
<textarea name="content" rows="5" cols="50"> </textarea> <!-- 创建多行文本域 -->
高度为5行 宽度为50每行
属性 说明
name 元素的名称
rows 指定文本框的高度
cols 指定文本框的宽度
select 表单元素下拉框
<select name="city">
<option value="sz">深圳</option
<option value="bj">北京</option>
<option value="gz">广州</option>
</select>
name 下拉列表框的名称
size 下拉列表框的显示行数
multiple 是否多选
disabled 是否禁用
selected 设置默认选中的选项
value 选项的值
optgroup 表单下拉框分组
<select name="city" multiple>
<optgroup label="广东"> <!-- 指定组名称 -->
<option value="1">广州</option>
<option value="2">深圳</option>
</optgroup>
<optgroup label="其他">
<option value="3">长沙</option>
<option value="4">香港</option>
</optgroup>
</select>
lable 标签的作用是将输入项或选项及其标签文字关联起来。
<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label> <!-- 点击中文字符也会弹回输入框 --!>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女
</label>
