十分钟学会 HTML
1.1 HTML 简介
1.1.1 概述
HTML 是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm。
1.1.2 格式
<!-- 定义整个 html 文档整体 -->
<HTML>
<!-- 对网页进行一些设置以及定义标题文件等 -->
<head>
<title></title>
</head>
<!-- 文档主题，编写网页上显示的内容 -->
<body>
</body>
</HTML>1.2 HTML 标签
1.2.1 标签分类
围堵标签
格式：<标签名> 内容 </标签名>
例如：<body>HelloWorld</body>自闭合标签
格式：<标签名 />
例如：<br />1.2.1 字符集
<head></head> 中使用 <meta charset="UTF-8"> 进行字符集设置，常用字符集有：
UTF-8 包含全世界所有国家需要用到的字符
BIG5 繁体中文，港澳台等用
gb2312 简单中文，包括6763个汉字
GBK 包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
1.2.3 标签介绍
☛ 文档类型
<!DOCTYPE> 于文档的最前面，用于向浏览器说明当前文档使用哪种标准规范，必需在开头处使用该标签。为所有的 XHTML 文档指定 HTML 版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
☛ 简单标签
标签 | 说明 |
|---|---|
<hn>标题标签</hn> | n 越大字越小，h1 标签重要，尽量少用，不要动不动扔一个h1。 一般 h1 都是给 logo 使用 |
<p>文本标签</p> | 默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行 |
<hr /> | 在网页中显示默认样式的水平线 |
<br /> | 强制换行显示 |
<div></div> | 没有语义，是我们网页布局盒子 |
<span></span> | 没有语义，是我们网页布局盒子 |
<b></b> <strong></strong> | 加粗 |
<i></i> <em></em> | 斜体 |
<s></s> <del></del> | 删除线 |
<u></u> <ins></ins> | 下划线 |
☛ 标签属性
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面；属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开；任何标签的属性都有默认值，省略该属性则取默认值。
☛ 图像标签
属性 | 内容 | 说明 |
|---|---|---|
src | URL | 图片路径 |
alt | 文本 | 图片不能显示提示消息 |
title | 文本 | 鼠标悬停时的内容 |
wideh | 像素 | 图片宽度 |
height | 像素 | 图片高度 |
border | 数字 | 设置图像边框的宽度 |
<img src="http://pic.90sjimg.com/design/00/79/33/96/592399fd35cfb.png" width="200px"/>
☛ 链接标签
属性 | 内容 | 说明 |
|---|---|---|
href | URL | 跳转目标 |
target | self、blank | 打开方式，其中self为默认值，blank为在新窗口中打开方式 |
<a href="http://www.baidu.com" target="blank">去百度</a>
注意： ① 外部链接 需要添加 http ② 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页 ③ 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。 ④ 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
☛ 列表
① <ul></ul> 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
② <ol></ol> 有序列表
有排列顺序的列表，其各个列表项按照一定的顺序排列定义
<ol type="A" start="4"> <!-- 用ABCD标号，从第四个开始 -->
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
③ 自定义列表 常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
☛ 表格
table 用于定义一个表格。 th 用户定义表中的字段 tr 用于定义表格中的一行，必须嵌套在 table 标签中，在 table 中包含几对 tr 就有几行表格。 td 用于定义表格中的单元格，必须嵌套在 tr 标签中，一对 tr 中包含几对 td 就表示该行中有多少列（或多少个单元格）。
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>表格属性
属性 | 内容 | 说明 |
|---|---|---|
border | 像素 | 表格边框宽度 |
cellspacing | 像素 | 单元格边框之间的间距 |
cellpadding | 像素 | 单元格内容与边框的间距 |
width | 像素 | 表格宽度 |
height | 像素 | 表格高度 |
align | left、center、right | 表格对齐方式 |
rowspan | 单元格 | 跨行合并 |
colspan | 单元格 | 跨列合并 |
其他标签
<thead></thead>：用于定义表格的头部。必须位于 table 标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>：用于定义表格的主体。位于 table 标签中，一般包含网页中除头部和底部之外的其他内容。
☛ 表单
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>属性 | 内容 | 说明 |
|---|---|---|
action | URL | 表单提交的地址 |
method | get、post | 表单数据的提交方式 |
name | 用于指定表单的名称 |
☛ 控件
input
属性 | 内容 | 说明 |
|---|---|---|
type | text | 单行文本框 |
password | 密码输入框 | |
radio | 单选框 | |
checkbox | 复选框 | |
button | 普通按钮 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像形式提交按钮 | |
file | 文件域 | |
name | 自定义 | 控件名称 |
value | 自定义 | 默认文本值 |
size | 正整数 | 显示宽度 |
checked | checked | 默认选中 |
maxlength | 正整数 | 允许输入的最大字符数 |
<input type="text" />
<input type="button" value="按钮"/>
label 用于绑定一个表单元素, 当点击 label 标签的时候, 被绑定的表单元素就会获得输入焦点，for 属性规定 label 与哪个表单元素绑定
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
textarea 需要输入大量的信息，就需要用到 textarea 标签。通过 textarea 控件可以轻松地创建多行文本输入框
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意 ① select 中至少应包含一对 </option。 ② 在 option 中定义 selected =" selected "时，当前项即为默认选中项。