一、Html简介
HTML是描述网页的一种语言，它不是编程语言，而是一种标记语言。由标记标签构成，HTML使用标记标签来描述页面。HTML标签是由尖括号包围的关键词，如，标签一般是成对出现的，前一个是开始标签，后一个是结束标签。也有一种标签是单个的，这种标签称为自闭和标签。
基础结构如下：
DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> body> html>
二、基本标签介绍
基本标签如div、span等模块标签，标题标签、段落标签等服务于文字的，input等输入数据的标签等等。一般是放在html页面的标签中的。
1、段落标签
p标签就是段落标签，用于展现网络页面中的文字段落，一般和换行标签配合使用。下面的代码就是其基础使用方法。
DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <p>来看看段落标签，如果我加了<br><br>后面跟的这句话就会自动换行p> body> html>
在网页上呈现效果如下：
来看看段落标签，如果我加了<br>
后面跟的这句话就会自动换行
其中<和>配合可以呈现出尖括号的效果，直接使用尖括号在html文件中会被识别为标签，无法展示在网页上，所以需要用<和>来表现尖括号。
2、
标题标签顾名思义，专门用于标题。标题的大小是不同的，展现出来的效果也是不同的。标题标签的基础使用方法如下：
DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <h1><h1>标题标签h1> <h2><h2>标题标签h2> <h3><h3>标题标签h3> <h4><h4>标题标签h4> body> html>
在网页上的呈现效果如下：
3、块级标签
块级标签，会占满整行，是HTML页面中比较常出现的标签，本身没有任何属性，可以通过CSS进行装饰后成为任何一种。其基础使用方法如下：
DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div>div是伪白班标签，有一个将其变为块级标签的属性，也是可以通过修饰变成其他标签div> body> html>
展示的效果如下：
可以看到即使这行文字并没有占满整行，检查元素时可以看到其实整行都属于div块状标签的范围。
4、行内标签
行内标签也是什么属性都不带，可以通过CSS装饰变成其他标签。其相比于div标签的区别就是，其占用范围就是文字范围，不会占满整行。基础使用方法如下：
DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <span>span是行内标签，也是可以通过修饰变成其他标签span> body> html>
在界面上的展示效果如下：
5、文本框标签
文本框标签包含多个属性，如text、password、button、CheckBox、radio、file、submit、reset等等。可以表现文本输入框、密码输入框、按钮、勾选框、单选框、选择文件、提交和重置等功能。基础使用方法如下：
DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <input type="text" placeholder="请输入用户名" name="username" value="admin"> <input type="password" placeholder="请输入密码" name="password"> <span>是否记住登录span><input type="checkbox" name="checkbox" checked="checked"> <div>性别div> <span>男span><input type="radio" checked="checked" name="sex"> <span>女span><input type="radio" name="sex"> body> html>
以上代码在网页界面上的呈现效果如下：
注1：可以看到第一个文本输入框中有默认值“admin”，这是因为在input标签中增加了属性value="admin"这样就设置了默认值。
注2：第二个密码输入框中，有提示文字，是通过属性placeholder="请输入密码"实现的，而且因为其type=password，输入的密码会自动隐藏。
注3：是否记住登录中是默认勾选状态，这是因为在input标签中增加了属性checked="checked"，使其处于被勾选状态。
注4：性别只能二选其一，所以在input标签中增加了属性name="sex"，这样就会自动识别，此类添加了这个标签的radio只能选择其中一个。
6、表单标签
表单标签可以理解为载体，承载着向后端提交数据的功能。一般和input连用，得到文本标签获取到的输入信息后，向后端传输。表单标签提交数据分为get型提交和post型提交，get提交会在url上面挂参数，post提交会在body上挂参数。使用方法如下：
DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <form action="/login" method="post"> <input type="text" placeholder="请输入用户名" name="username" value="admin"> <input type="password" placeholder="请输入密码" name="password"> form> body> html>
7、标题标签
标题标签也是一般和input标签连用，利用label标签中的for="username"和input标签中的id="username"进行关联，label标签可用于说明这个文本标签代表什么含义，也可以增加input的点击范围，只需要点击文字就可以输入数据。其基础使用方法如下：
DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <label for="username">用户名：label> <input id="username" type="text" placeholder="placeholder属性"/> body> html>
在网页上的展示效果如下：
8、多行标签
多行文本标签会自动将标签间的数据展示在一个文本框中，会自动换行。基础使用方法如下：
DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <textarea name="more">此处填写多行文本标签中的数据，数据会自动转行，也可以展示其他格式的数据，如just do it英文，和1234数字等等textarea> body> html>
其展示在网页上的效果如下：
使用鼠标点击其右下角不放，移动鼠标，可以调整多行文本框的格式。
9、下拉框标签
①select&option
select option是下拉框标签。option标签中的value是定义送往服务器的值不用于排序，默认选择在option上增加select="selected"，multiple用以定义显示多个数据,size属性用于定义展示数据超过多少个就出现滚动条。其基础使用方法如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h5 style="display: inline">单选h5>
<select name="city">
<option value="1">黑龙江option>
<option value="2" selected="selected">辽宁option>
<option value="3">北京option>
<option value="4">四川option>
select>
<h5 style="display: inline">多选h5>
<select name="city" multiple="multiple">
<option value="1">黑龙江option>
<option value="2" selected="selected">辽宁option>
<option value="3">北京option>
<option value="4">四川option>
select>
<h5 style="display: inline">超过4个就出滚动条h5>
<select name="city" size="4">
<option value="1">黑龙江option>
<option value="2" selected="selected">辽宁option>
<option value="3">北京option>
<option value="4">四川option>
<option value="5">吉林option>
<option value="6">漠河option>
select>
body>
html>
在网页界面上的展示效果如下：
②select&optgroup
select和optgroup的配合可以对下拉选项进行分组操作，其中optgroup中的属性label用于定义组，不可被选择，其基础使用方法如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div><h4>分组的下拉选择框，黑龙江省&四川省属于label无法被选择h4>div>
<select name="city" size="12" multiple="multiple">
<optgroup label="黑龙江省">
<option value="1">哈尔滨option>
<option value="2">牡丹江option>
<option value="3">宁安option>
<option value="4">林口option>
<option value="5">古城option>
optgroup>
<optgroup label="四川省">
<option value="1">成都option>
<option value="2">绵阳option>
optgroup>
select>
body>
html>
在网页界面上的展示效果如下：
10、超链接标签
超链接用于在网页展示链接地址，可以点击链接跳转到目标界面，a标签中的href属性为跳转的地址；target属性定义用什么方式跳转，比如target="_blank"指不在当前界面跳转而是打开一个新的tab页。
同时a标签还可以做锚点，通过id进行对应关系的映射，超链接默认带有下划线，可以通过属性text-decoration:none来实现。
超链接标签的基础使用方法如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div><a href="http://www.imdsx.cn" target="_blank" style="text-decoration:underline">大师兄博客a>div>
<div><a href="http://www.baidu.com" target="_blank" style="text-decoration:none">百度一下a>div>
body>
html>
以上代码在网页上的呈现效果如下，都可以点击文字进入新的网页：
11、图片标签
图片标签是一个自闭和标签，可以在网页上展示图片，因为图片大小不一定适合直接放在页面上，还可以对展示方法进行设置。
- src：图片的位置，可以是一个链接也可以是本地的绝对路径；
- alt：设置文案，当图片加载失败时，展示这个文案
- title：定义鼠标悬浮在图片上时展示的文字
如果要对图片的展示方法进行设置，可以使用div标签开辟一个模块，将图片展示在该模块中，然后通过overflow属性来进行控制。
- overflow:auto自适应，如果图片较大则外框加载滚动条，如果图片较小则直接显示
- overflow:hidden如果图片较大则将大于外框的部分直接剪裁掉
- overflow:scroll不论图片大小，外框都加载滚动条
其基础使用方法如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="width: 201px;height: 201px;border: 1px red solid;overflow: auto">
<img src="http://www.nnzhp.cn/wp-content/themes/QQ/images/logo.jpg" style="height: 200px;width: 200px;" alt="加载失败时出现" title="鼠标悬停在图片上时出现的文字">div>
body>
html>
以上代码在网页上的呈现效果如下：
12、ul/ol/dl列表标签
列表标签用于在网页上展示列表数据。分为ul&li模式、ol&li模式以及dl&dt&dd模式。前两种是单纯的列表，后一种有分层模式。其基础使用方法如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div class="ul-css" style="top: 10px;left: 10px">
<div><h4>列表 ul li · 形式的列表h4>div>
<div style="display: inline-block">
<ul>
<li>第一列li>
<li>第二列li>
ul>
div>
div>
<div class="ul-css">
<div><h4 style="display: inline-block">列表 ol li 数字形式的列表h4>div>
<div style="display: inline-block">
<ol>
<li>第一列li>
<li>第二列li>
ol>
div>
div>
<div style="padding-left: 20px">
<div><h4>分层列表 dl dd内层 dt外层h4>div>
<div>
<dl>
<dt>黑龙江dt>
<dd>哈尔滨dd>
<dd>牡丹江dd>
dl>
<dl>
<dt>北京dt>
<dd>北京dd>
dl>
div>
div>
body>
html>
以上代码在网页上的展示效果如下：
13、
表格标签就是在界面上展示表格。th为表头，tbody为内容，tr为行数据，td为列数据，boder用于定义表格的边框。cosplan可以用来定义这个数据占几列，rowspan可以用来定义这个数据占几行，类似于单元格合并展示同一个数据。其基础的使用方法如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>
<table border="1" >
<thead>
<tr>
<th>IDth>
<th>用例名称th>
<th>执行人th>
<th colspan="2">编辑th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>table表格测试td>
<td rowspan="4">大师兄td>
<td><a href="tmp.html">详情a>td>
<td><a href="edit.html">编辑a>td>
tr>
<tr>
<td>2td>
<td>table表格测试td>
<td><a href="tmp.html">详情a>td>
<td><a href="edit.html">编辑a>td>
tr>
<tr>
<td>3td>
<td rowspan="2">table表格测试td>
<td><a href="tmp.html">详情a>td>
<td><a href="edit.html">编辑a>td>
tr>
<tr>
<td>4td>
<td><a href="tmp.html">详情a>td>
<td><a href="edit.html">编辑a>td>
tr>
tbody>
table>
div>
body>
html>
以上代码在页面上的展示效果如下：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h5 style="display: inline">单选h5>
<select name="city">
<option value="1">黑龙江option>
<option value="2" selected="selected">辽宁option>
<option value="3">北京option>
<option value="4">四川option>
select>
<h5 style="display: inline">多选h5>
<select name="city" multiple="multiple">
<option value="1">黑龙江option>
<option value="2" selected="selected">辽宁option>
<option value="3">北京option>
<option value="4">四川option>
select>
<h5 style="display: inline">超过4个就出滚动条h5>
<select name="city" size="4">
<option value="1">黑龙江option>
<option value="2" selected="selected">辽宁option>
<option value="3">北京option>
<option value="4">四川option>
<option value="5">吉林option>
<option value="6">漠河option>
select>
body>
html>