8.4 H5知识点总结

HTML简介

HyperText Markup Language 简称为HTML

HyperText: 超文本（文本 + 图片 + 视频 + 音频 + 链接）

Markup Language: 标记语言

由SGML(标准通用标记语言)发展而来

写给浏览器的语言

HTML的基本结构

<html>
　　<head>
　　　　<title>我的第一个网页</title>
　　</head>
　　<body>
　　　　欢迎来到HTML世界
　　</body>
</html>

HTML标签元素

HTML元素由开始标签和结束标签组成。

位于开始标签和结束标签中的文本是元素的内容。

HTML 标签有开始必须有结束。如果是没有内容的标签（空标签），用 />来结束。

标签名推荐用小写。

标签具有属性，属性用来表示标签的性质和特征。属性要在开始标签中指定。

定义一个合格的HTML页面

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<title></title>
</head>
<body>

</body>
</html>

HTML常用元素

换行符 <br/>

段落 <p></p>

标题

文本格式化

<b>定义粗体文本</b>

<i> 定义斜体文本 </i>

<del>定义删除文本</del>

<sup>定义上标字</sup>

<sub>定义下标字</sub>

链接

锚点

锚点标签用于使用户"跳"到文档的某个部分。

图像

图片相对地址的定义

同一目录

下一层目录

上一层目录

同一层不同目录

图像热区

<img src="URL"  usemap="# map 名称" />

　　<map name="map 名称">

　　<area shape="形状" coords="坐标值" href="URL" />

</map>

HTML实体字符

实体字符	字符实体
大于号（>）	&gt；
小于号（<）	<
引号（“）	"
注册商标（®）	®
版权（©）	©
&号	&smp;

无序列表

<ul>

</ul>

有序列表

<ol>

</ol>

HTML表格

<table border="1">
　　<tr>
　　　　<td>row 1, cell 1</td>
　　　　<td>row 1, cell 2</td>
　　</tr>
　　<tr>
　　　　<td>row 2, cell 1</td>
　　　　<td>row 2, cell 2</td>
　　</tr>
</table>

<iframe>内嵌框架

form（表单）

<form name="form1" action="URL" method="get">
　　用户名：<input type="text" name="">
　　密 码：<input type="password" name="passwd">
</form>

文本框

密码框

单选按钮

<input type="radio"name="sex"value="1"checked="checked">男

<input type="radio"name="sex"value="0">女

checked是指默认选项，不需要可以不设置

复选框

按钮

按钮还可以用图片设置，使视觉性更好一点

隐藏域

<form action="" method="post" enctype="multipart/form-data">
　　<input type="file" name="file">
</form>

textarea（表单元素：多行文本域）

<textarea rows="5" cols="50"></textarea>

select（表单元素：下拉框）

<label for="province">省份</label>
    <select id="province">
    <option>请选择</option>
    <option selected>广东</option>
    <option>上海</option>
 </select>

optgroup（表单元素：下拉框分组）

<select>
　　<optgroup label="热门城市">
　　　　<option>广州</option>
　　　　<option>深圳</option>
　　　　<option>上海</option>
　　</optgroup>
　　<optgroup label="其他城市">
　　　　<option>AAA</option>
　　　　<option>BBB</option>
　　　　<option>CCC</option>
　　</optgroup>
</select>