文件框架
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>HTML标签
1.1开头
见文件框架
<!DOCTYPE html> 声明是HTML文件
<html lang="zh-CN">声明网页语言
<meta charset="code">放在<head>标签间，声明文件编码
<title> 放在<head>标签间设置网页标题
1.2标题
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>每个标题独占一行
1.3段落标签<p>和换行标签<br />
<p>段落</p>
<br /><p>（paragraph）：两个段落之间有一点距离。
<br />（break）：分割的两行内容行间距紧凑。
1.4文本格式化
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> | 推荐<strong>标签，语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 推荐<em>标签，语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 推荐<del>标签，语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 推荐<ins>标签，语义更强烈 |
1.5<div>和<span>标签
HTML中的“盒子”，用于嵌套布局
<div>（division）：独占一行。大盒子。
<span>（span）：一行可以放多个。小盒子。
1.6图像标签<img>
<img src="space_station.jpg" alt="一张太空站图片" title="太空站" width="100" height="100" border="2"/>| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示时，显示一个破碎的图片和替换文本 |
| title | 文本 | 提示文本。鼠标放到图像上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度。 |
| border | 像素 | 设置图像的边框粗细 （废弃，用CSS代替） |
height和width属性两者只需要一个，图片会根据比例自动缩放。
HTML中将 key=”value”的形式称为键值对。
注意：
属性值可以不按顺序写
别忘了最后面的“/”
两个键值对之间有空格分开
1.7文件及文件路径
目录包括目录文件夹和根目录。
路径包括绝对路径和相对路径。
| 相对路径分类 | 符号 | 举例 |
|---|---|---|
| 同一级路径 | ./（可省） | image.png |
| 下一级目录 | / | images/image.png |
| 上一级目录 | ../ | ../image.png #上上级：../../image.png |
绝对路径是“\”，相对路径与网址是“/”。
1.8超链接标签<a>
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>a是anchor（锚）的缩写
| 链接类型 | 描述 |
|---|---|
| 外部链接 | http(s): //网址 |
| 内部链接 | 网站内部页面之间的相互链接，类似于文件的相对路径 |
| 空链接 | href=”#” |
| 下载链接 | 地址链接的是文件.exe或.zip等压缩包格式 |
| 锚点链接 | 跳转到页面指定区域 |
特别的链接：锚点链接
<h1 id="index1">标题</h1> <!--设置锚点-->
<a href="#index1">回到顶部</a> <!--设置链接-->属性target 默认值 _self 在当前页面打开链接 _blank在新标签页打开链接
1.9注释标签和特殊字符
<!--注释标签-->| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | &plusnm; |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 上标2 | ² |
| ³ | 上标3 | ³ |
1.10表格
1.基本使用
<table>
<tr><th>表头1</th><th>表头2</th><th>表头3</th></tr>
<tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr>
<tr><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr>
</table>表格用于显示数据。
- thead：表头部分，将th包括起来
- tbody：表格部分，包括表格主体
- table：定义表格
- tr：一行
- th：表头，字体加粗居中
- td：单元格
<table>属性 （多用CSS设置）
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | “1”或”” | 规定表格单元是否有边框，默认为””，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
| height | 像素值或百分比 | 规定表格的高度 |
2.合并（扩大）单元格
理解为扩大单元格更合理
跨行合并
属性：rowspan=”要合并的单元格个数”
最上侧单元格为目标单元格，写合并代码
跨列合并
属性：colspan=”要合并的单元格个数”
最左侧单元格为目标单元格，写合并代码
三步曲
- 确定跨行还是跨列
- 找到相应的单元格写上属性，如
<td colspan="2"></td> - 删除多余的单元格
1.11列表
作用：布局
列表包括无序列表（ul）、有序列表（ol）和自定义列表（dl）。
1.无序列表
<ul>
<li>列表内容一</li>
<li>列表内容二</li>
</ul>显示效果：
- 列表内容一
- 列表内容二
<ul>中只能包括<li>标签，<li>标签中可以有其他标签
2.无序列表
<ol>
<li>列表内容一</li>
<li>列表内容二</li>
</ol>显示效果：
- 列表内容一
- 列表内容二
重点与无序列表相同
3.自定义列表
<dl>
<dt>联系方式</dt>
<dd>QQ</dd>
<dd>微信公众号</dd>
<dd>新浪微博</dd>
</dl>dt：小标题
dd：内容
重点与无序列表相同
1.12表单
作用：收集用户信息
一个完整的表单由表单域、表单控件（表单元素）和提示信息组成。
1.表单域
<form></form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 制定接收并处理表单数据的服务器地址 |
| method | get/post | 设置表单数据的提交方式 |
| name | 名称 | 指定表单的名称 |
2.input标签
<input />
input：
name： 单、复选框如果是一组，我们必须给他们命名相同的名字 name；同时以此实现radio的单选功能。
value： 一个值，供后台人员使用。
placeholder： 表单提示
checked=”checked”： 添加上之后，单复选框默认为选中状态。
maxlength： 规定字段中字符的最大长度。
submit、reset、button： value=”按钮上的字”
点击了提交按钮，可以把表单form里的值提交给后台服务器
3.Label标签
<label></label>
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
通过属性for与id进行绑定。
第一种
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
第二种
<label for="sex">男</label>
<input type="radio" name="user_sex" id="sex">4.Textarea标签（文本域）
<textarea>默认文本域中显示的内容</textarea>
属性：
cols=”每行中的字符数”
rows=”显示的行数”
5.Select标签（下拉列表）
<form>
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项二</option>
……
</select>
</form>在一个option标签中定义selected =”selected”属性以设为默认选项。