基础元素
标签之标题
标题（Heading）是通过<h1>-<h6>标签进行定义的。
<h1>定义最大的标题 <h6>定义最小的标题
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
生成h1~h6快捷键：h$*6
标题标签位置摆放
在标签中添加属性： align="left | center | right" 默认居左
标签之段落、换行、水平线
标签之段落
段落是通过<p>标签定义的
<p>这是一个段落 </p> <p>这是另一个段落</p>
换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>
<br>元素是一个空的 HTML 元素。
<p>这个<br>段落<br>演示了分行的效果</p>
水平线
<hr/>标签在 HTML 页面中创建水平线
<hr color="" width="" size="" align=""/>
属性：
1 color：设置水平线的颜色
2 width：设置水平线的长度
3 size：设置水平线的高度
4 align：设置水平线的对齐方式（默认居中），可取值left|right
标签之图片
网站中最多的元素毋庸置疑，一定是图片
<img>标签定义 HTML 页面中的图像
<img src="" alt="" title="" width="" height="">
注意事项: <img>是单标签，不需要进行闭合操作
属性：
1 src：路径（图片地址与名字）
2 alt：规定图像的替代文本
3 width：规定图像的宽度
4 height：规定图像的高度
5 title：鼠标悬停在图片上给予提示
路径详解
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
比如：E:\itbaizhanCode\1.jpg
<img src="E:\itbaizhanCode\1.jpg">
相对路径
两者相对关系，两者在同⼀路径下可以直接访问
1 ⼦级关系: /
2 ⽗级关系: ../
3 同级关系: ./
网络路径
具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png
标签之超文本链接
超链接描述
HTML使用标签<a>来设置超文本连接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像， 您可以点击这些内容来跳转到新的文档或者当前文档中的某个部 分。
超链接属性
在标签<a>中使用了 href 属性来描述链接的地址 默认情况下，链接将以，以下形式出现在浏览器中： 1 一个未访问过的链接显示为蓝色字体并带有下划线。 2 访问过的链接显示为紫色并带有下划线。 3 点击链接时，链接显示为红色并带有下划线。
<a href="url">链接文本</a>
超链接之锚点
超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个 部分。 跳转到当前文档的某个部分的形式就是“锚点”
锚点实现方式
<a href="#hello">跳转到当前页</a> <p id="hello">文本信息</p>
标签之文本
常用文本标签
特别提示
常用文本标签和段落是不同的，段落代表一段文本，而文本标 签一般表示文本词汇
列表标签之有序列表
有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签。
<ol> <li>学习</li> <li>打游戏</li> </ol>
type属性
<ol>的属性type 拥有的选项
1 表示列表项目用数字标号（1,2,3...）
2 a 表示列表项目用小写字母标号（a,b,c...）
3 A 表示列表项目用大写字母标号（A,B,C...）
4 i 表示列表项目用小写罗马数字标号（i,ii,iii...）
5 I 表示列表项目用大写罗马数字标号（I,II,III...）
有序列表嵌套
列表是可以进行嵌套的
<ol> <li>购物</li> <li> <ol> <li>阿里</li> <li>京东</li> </ol> </li> <li>外卖</li> </ol>
列表标签之无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑 圆圈）进行标记 无序列表始于
<ul>标签。每个列表项始于<li>标签。
<ul> <li>学习</li> <li>打游戏</li> </ul>
type属性
<ul>的属性type 拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
无序列表嵌套
列表是可以进行嵌套的
<ul> <li>购物</li> <li> <ul> <li>阿里</li> <li>京东</li> </ul> </li> <li>外卖</li> </ul>
常见应用场景
1 无序的列表效果
2 导航效果
导航效果
<ul> <li>Xiaomi手机</li> <li>Redmi 红米</li> <li>电视</li> <li>笔记本</li> </ul>
快捷键
快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修 改）
列表标签之自定义列表
自定义列表实现 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每 个自定义列表项的定义以<dd>开始。
<dl> <dt>淘宝</dt> <dd>唯品会</dd> <dt>京东</dt> <dd>阿里</dd> </dl>
标签之表格
表格组成与特点
行、列、单元格
单元格特点：同行等高、同列等宽。
表格标签
表格：<table>
行：<tr>
单元格：<td>
<table> <tr> <td>购物</td> <td>外卖</td> </tr> <tr> <td>阿里</td> <td>京东</td> </tr> </table>
表格属性详解
<table>表格属性
border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度
align：设置表格的水平对齐方式
cellpadding：设置内容距离边框的距离
cellspacing：设置单元格之间的距离
bgcolor：设置表格背景颜色 b
ordercolor：设置边框颜色
background：设置背景图片
<tr>的属性
height：设置一行的高度
bgcolor：设置一行的背景颜色
background：设置一行的背景图片
align：设置行里内容水平对齐方式，取值：left、center、right
valign：设置行里内容垂直对齐方式，取值：top、middle、bottom
<td>的属性
width：设置单元格的宽度，同列等宽
height：设置单元格的高度，同行等高
align：设置单元格内容水平对齐方式
valign：设置单元格内容垂直对齐方式
bgcolor：设置单元格背景颜色
background：设置单元格背景图片
表格单元格合并
单元格合并属性
水平合并：colspan
垂直合并：rowspan
<table align="center" border="" width="500px" height="200px" cellspacing="0"> <tr> <td colspan="3">单元格1单元格2单元格 3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td rowspan="2">单元格6-11</td> <td>单元格7</td> <td rowspan="3">单元格81318</td> <td colspan="2" rowspan="2">单元格 9101415</td> </tr> <tr> <td>单元格12</td> </tr> <tr> <td>单元格16</td> <td>单元格17</td> <td>单元格19</td> <td>单元格20</td> </tr> </table>
Form表单
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的 输入框,提交按钮等，这些输入框,按钮叫做控件,表单就是容器,它能 够容纳各种各样的控件
<form action="url" method="get|post" name="myform"></form>
属性说明
action服务器地址
name表单名称
method中Get和Post的区别
1 数据提交方式，get把提交的数据url可以看到，post看不到
2 get一般用于提交少量数据，post用来提交大量数据
表单元素
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单 按钮
1 表单标签
2 表单域
3 表单按钮
<form> <input type="text"> <input type="submit"> </form>
文本框
文本域通过<input type="text">标签来设定，当用户要在表单中键入字 母、数字等内容时，就会用到文本域
<form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
密码框
密码字段通过标签<input type="password">来定义
<form> Password: <input type="password" name="pwd"> </form>
温馨提示
密码字段字符不会明文显示，而是以星号或圆点替代
单选按钮
<input type="radio">标签定义了表单单选框选项
<form> <input type="radio" name="sex" value="male">Male <br> <input type="radio" name="sex" value="female">Female </form>
复选框
<input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取 一个或若干选项
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
文件
定义文件选择字段和 "浏览..." 按钮，供文件上传
<form> <input type="file" name="img"> </form>
提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单 的动作属性定义了目的文件的文件名。由动作属性定义的这个文件 通常会对接收到的输入数据进行相关的处理
<form name="input" action="url" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
重置按钮
定义重置按钮（重置所有表单值为默认值）
<form name="input" action="url" method="get"> Username: <input type="text" name="user"> <input type="reset"> </form>
按钮
没有任何功能的按钮
<form name="input" action="url" method="get"> <input type="button" value="点我"/> <button>点我</button> </form>
图像图片按钮
定义图像作为提交按钮
<form name="input" action="url" method="get"> <input type="image" src="close.jpg" /> </form>
下拉列表
<select>元素用来创建下拉列表。
<option>标签定义下拉列表中的一个选项（一个条目）
<form name="input" action="url" method="get"> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </form>
多行文本框
<textarea>标签定义一个多行的文本输入控件。文本区域中可容纳无限 数量的文本。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的 办法是使用 CSS 的 height 和 width 属性
<form name="input" action="url" method="get"> <textarea rows="10" cols="30">我是一个文本 框</textarea> </form>
label
<label>标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进 了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是 说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关 的表单控件上。
<label>标签的 for 属性应当与相关元素的 id 属性相同
