目录
html基础
基础语法
html概念
HTML（Hypertext Markup Language）即超文本标记语言。
了解html发展史
- 93年（IETF）发布HTML1.0
- 95年（W3C）发布HTML2.0
- 96年（W3C）发布HTML3.0
- 97年（W3C）发布HTML4.0
- 99年（W3C）发布HTML4.0.1
- 00年（W3C）发布XHTML1.0
- 01年（W3C）发布XHTML1.1
- 04年（WHATWG）发布HTML5草案
- 08年（合并）HTML5正式版
- 14年HTML5定稿
HTML特点
- HTML不需要编译，直接由浏览器执行
- HTML是一个文本文件
- HTML文件必须使用html或htm为文件名后缀
- HTML大小写不敏感，HTML与html一样
开发工具
记事本、Word、DreamWeaver、Subline等。
基础语法
HTML基本结构
写在head标签内的所有内容在网页中不会显示出来，浏览器能看到的内容全都写在body标签内。
注释
<!-- 注释内容 -->
文档段落
DOCTYPE用于声明文档类型，<!DOCTYPE>声明必须放在HTML文档第一行，不是HTML标签。
网页编码设置
问题：当网页显示出现乱码时
解决：在<head></head>标签之间添加
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />这句话声明了网页使用什么语言和编码形式。
其中，http-equiv 声明文档类型，content 声明编码形式，国内常用编码是 utf-8、gb2312、gbk 等编码。
utf-8 支持简体中文、繁体中文、日文、韩文等；gb2312支持简体中文。
HTML 4.01 与 HTML5之间的差异
使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式
- HTML 4.01
<meta http-equiv="content-type" content="text/html; charset=UTF-8">- HTML5
<meta charset="UTF-8">文字和段落标签
- 标题标签：<h1></h1>~<h6></h6>
- 段落标签：<p></p>，段落与段落之间会有一段空白以区分不同段落。
- 预格式标签：<pre></pre>，在此标签内输入的文本是什么形式的，在网页中就以什么形式展现。
align对齐属性值
- left：左对齐内容
- right：右对齐内容
- center：居中对齐内容
- justify：对行进行伸展，这样每行都可以有相等的长度。
修饰标签和特殊符号
- 斜体：<i>、<em>
- 加粗：<b>、<strong>
- 小于号或显示标记"<"：<
- 大于号或显示标记">"：>
- 已注册"®"：®
- 版权"©"：©
- 商标"™"：™
- 不断行的空白：
列表标签
无序列表<ul>
其中列表项用<li>表示。
<ul>
<li>列表项</li>
<li>列表项</li>
……
</ul><ul>标签的type属性值
- disc：圆点
- square：正方形
- circle：空心圆
有序列表<ol>
列表项有先后顺序，其中列表项用<li>表示。
<ol>
<li>列表项</li>
<li>列表项</li>
……
</ol><ol>标签的type属性值
- 1：数字1、2
- a：小写字母a、b
- A：大写字母A、B
- i：小写罗马数字i、ii、iii
- I：大写罗马数字I、II、III
定义列表<dl>
应用场景：带摘要、新闻缩略图的列表
<dl>
<dt>定义项目</dt>
<dd>项目描述</dd>
<!-- dt与dd标签成对出现，并且是并列关系，不能嵌套 -->
</dl>调试工具
快捷键F12
经验
开发中，ul和ol的编号去掉，使用图片代替。
图像和超链接
图像标签<img>
src属性是必填的，指明图片存放的路径。
alt属性用于网速太慢、src属性中的错误、浏览器禁用图像导致用户无法查看图像时，可以代替图像显示在浏览器中。
<img>标签引入图片时路径中的斜杠/和反斜杠\是一样的。
html路径分为相对路径和绝对路径，绝对路径要从盘符开始写起，相对路径是图片相对于网页的路径。
- 若html文件与图片文件位于同级文件夹，则相对路径为
<img src="pic.jpg" />- 若图片位于html文件的上一级，则相对路径为
<img src="../pic.jpg" />注意：../代表一个上一级，如上一级的上一级则表示为../../
- 若图片位于html文件的下一级，则相对路径为
<img src="文件夹名/pic.jpg" />注意：创建的文件夹建议都用英文
超链接标签<a>
<a href="" >内容</a> <!-- 当链接为空时，点击超链接会刷新 -->站内链接即本网站内的页面跳转，一般使用相对路径。
站外链接即从当前网站跳转到另一个网站中，一般使用绝对路径。
属性
- href—链接地址（href="#"为空链接）
- target—链接的目标窗口，有_self（在当前窗口打开）、_blank（创建新窗口，打开新页面）、_top、_parent
- title—链接提示文字，额外信息
- name—链接命名
锚链接
通过name属性定义锚的名称，实现点击链接直接定位到某个位置的效果。
<!-- 同一页面 -->
<a href="#锚名1" >目录1</a>
<a href="#锚名2" >目录2</a>
<a href="..." name="锚名1" >内容</a>
xxxxx
<a href="..." name="锚名2" >内容</a>
xxxxx
<!-- 不同页面 -->
网页1：<a href="网页名称#锚名" >...</a>
网页2：<a name="锚名" >...</a>
xxxxx总结：定义锚的位置和锚名，设置寻找锚的链接。
邮箱链接
<a href="mailto:邮箱地址">...</a>文件下载
<a href="下载文件的地址">...</a>注意：下载文件要压缩；直接写下载的文件名，会打开文件。
html表格
基础表格
- <table>：表格
- <tr>：行
- <td>：单元格
- <th>：表头单元格（内容居中，加粗显示）
- <caption>：表格标题（居中显示）
以下是一个3×3的表格
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头标题1</th>
<th>表头标题2</th>
<th>表头标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tfoot>
</table>表格操作
添加、删除第N列时，要把每行的第N个单元格删掉。
带结构的表格
表格划分三部分：表头、主题、脚注
- thead：表格的头（放表格的头），会在最开始显示
- tbody：表格的主体（放数据本体），会在中间显示
- tfoot：表格的脚（放表格的脚注），会在最后一行显示
使用带结构的表格目的是当网速太慢时，网页可以按照表格划分来逐部分加载。但这三个标签不会影响表格的展示。
表格属性
跨列（行）属性colspan（rowspan）
<td colspan="2">xxx</td> <!-- 表示将包括此单元格在内的2个单元格按跨列形式合并起来。 -->
<td rowspan="2">xxx</td> <!-- 表示将包括此单元格在内的2个单元格按跨行形式合并起来。 -->表格嵌套
嵌套的表格必须放在<td>标签内
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头标题1</th>
<th>表头标题2</th>
<th>表头标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>
<!-- 表格嵌套 -->
<table>
<tr>
<td>xx</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tfoot>
</table>表格布局
尽量少用表格嵌套、尽量少用跨行跨列，否则会增加代码维护的成本。
表单基础结构
form元素是块级元素，其前后会产生析行。
表单应用场景
表单元素
表单元素有：文本域、单选框、复选框、按钮、列表……
注意：表单本身不可见，所有表单内容要写在<form>标签内
input标签
点击submit类型的按钮，表单内容提交至服务器。
name属性用于表单元素命名，数据处理时，通过name名称来区分。
文本域和文件域
placeholder属性用来提示内容标签。
size属性设置文本域的宽度为多少个英文字符。
maxlength指用户输入得最大字符长度。
文件域file可以访问本机文件，并上传到服务器。
单选框和复选框
单选框radio用checked来设置默认选中值。
一组单选框若只能选择其中一个就要给它们起相同的name。
提交表单时上传的是<input>标签中value属性的值。
<!-- 单选框 -->
<input type="radio" name="sexual" value="1" checked />男
<input type="radio" name="sexual" value="2" />女
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="dance"/>跳舞
<input type="checkbox" name="hobby" value="sing"/>唱歌
<input type="checkbox" name="hobby" value="read"/>阅读图像域
图像域不单单是一个图片，而且和属性为submit的botton一样，有提交表单的功能。
<input type="image" name="xxx" src="..." />隐藏域
用于有些信息不想让用户看到，又需要传递数据的情况。
<input type="hidden" name="xxx" value="xxx" />按钮
<button>的三种类型
- button（多配合js使用）
- submit（点击提交表单）
- reset（清空表单恢复初始设置）
下拉菜单和列表标签
优点是节约空间。
<select> <!-- 下拉菜单开始 -->
<option value="1"> 列表项1 </option>
<option value="2"> 列表项2 </option>
<option value="3"> 列表项3 </option>
</select><select>标签属性
- name（设置下拉菜单和列表的名称）
- multiple（设置可选择多个选项）
- size（设置列表中可见选项的数目，设置了就是列表，不设置则是下拉菜单）
<option>标签属性
- selected（设置选项初始选中状态）
- value（定义送往服务器的选项值）
分组下拉菜单和列表标签
<!-- -->
<select name="xxx">
<optgroup label="group1">
<option value="..." selected>选项</option>
<option value="...">选项</option>
</optgroup>
<optgroup label="group2">
<option value="...">选项</option>
<option value="...">选项</option>
</optgroup>
</select>多行文本域
<textarea>标签属性
- rows（设置文本内可见行数）
- cols（设置文本内可见列数）
表单页面调整
表单页面调整
表单提示文字一般右对齐，表单元素一般左对齐。
表单属性
<form action="" method="" name=""... >
表单元素
</form>
method属性的默认值是get，get会把表单信息暴露在url中，而post不会，它起到一定的保密性，因此用form表单提交密码之类的信息应该用post方法。
target属性的默认值是_self。
搭建网页结构
div和span标签
<div>标签是一个区块容器，其中可以包含段落、表格、图片等各种html元素。
<span>标签没有任何意义，只是为了应用样式。
<div>标签是块级元素，<span>标签是行内元素。
块级元素需要独占一行，每个块级元素都需要换行，一般用于搭建网页结构、布局。
行内元素在一行进行展示，不需要换行，一般用于样式的展示。
标签嵌套
标签嵌套规则
- 块级元素可包含行内元素和某些块级元素。
- 行内元素不能包含块级元素，只能包含其他行内元素。
- 块级元素不能放在<p>标签内，<p>标签是用来显示文字段落的。如果将块级元素放到<p>标签内，在浏览器中会自动将<p>标签内的块状元素脱离出来，改正这个错误。
- 有些特殊的块级元素只能包含行内元素，不能再包含块级元素。比如<h1>~<h6>、<p>、<dt>
- 块级元素和块级元素并列，行内元素和行内元素并列。
<div><h1></h1><p></p></div> <!-- 块级元素并列 正确 -->
<div><span></span><a href=""></a></div> <!-- 行内元素并列 正确 -->
<div><h1></h1><span></span></div> <!-- 行内元素和块级元素并列 错误 但也能正常显示 -->