HTML
一、HTML介绍
二、常用标签
HTML介绍
HTML是什么？
超文本标记（标签）语言，一套规则，浏览器可识别
浏览器渲染顺序：从上到下，从左到右，不同浏览器对同一标签可能有完全不同的解释（兼容）
HTML不是什么
不是编程语言，是一种标记语言，通过标记标签描述网页
HTML结构
html
|--head
| |--meta
| |--title
|
|--body
|
<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
<title></title>定义网页标题，在浏览器标题栏显示。
<body></body>之间的文本是可见的网页主体内容
HTML标签格式
1.HTML标签是由尖括号包围的关键词
2.HTML标签通常是成对出现
3.标签不区分大小写
4.标签分为两部分：开始标签和结束标签，两个标签之间的部分我们叫做标签体；只有一个标签的标签叫做自闭和标签
5.标签可以有若干的属性，也可以不带属性
6.标签可以嵌套，不可以交叉嵌套
常用标签
DOCTYPE标签
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
head内常用标签
meta标签
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的
name属性：
网站关键词：
<meta name="keyword" content="程序员">
网站描述内容：
<meta name="description" content="程序员是一种特殊物种">
http-equiv属性：
响应头,3秒跳转（没有地址，3秒刷新）:
<meta http-equiv="refresh" content="3;www.baidu.com">
响应体使用的编码为UTF-8:
<meta http-equiv="content-type" charset="UTF-8">
非meta标签
link标签：
页签图标
<link rel="icon" href="//www.xxx.com/img.ico">
其他标签：
<link>
<script></script>
body内常用标签
基本标签
常用标签：
<h1></h1> # （独占一行）
...
<h6></h6>
<p></p> # （独占一行）
<br> # 换行（该占几行占几行）
<b></b> <strong></strong> # 加粗
<strike> # 文字加中线
<em> # 斜体
<sub> # 下角标
<sup> # 上角标
<hr> # 水平线
标签分类：
块级标签（block） # 独占一行
內联标签（inline） # 根据内容而定
div
块级标签，没有任何样式
span
內联标签，没有任何样式
img
图片
<img src="xxx.jpg" alt="加载失内容" width="200px" height="300px" title="图片悬浮内容">
a标签
超链接
<a href="url:...">click</a>
锚
<p id="part1">第一章</a>
<a href="#part1">back top</a> : ‘#‘寻找id
列表标签
无序列表(unorder list)
<ul>
<li>123</li>
<li>123</li>
</ul>
有序列表(order list)
<ol>
<li>123</li>
<li>123</li>
</ol>
定义列表(define list)
<dl>
<dt>123</dt> #dt:define title
<dd>123</dd> #dd:define data
<dd>123</dd>
</dl>
表格标签（table）
<table broder="2px" cellpadding="10px" cellspacing=“3px” rowspan> # broder边框 cellpadding内边距 cellspacing外边距
<tr> # tr:table row （行）
<th>123</th> # th:table head （列头）
<th>123</th>
<th>123</th>
</tr>
<tr>
<td rowspan="2">123</td> # td:table data （列）rowspan行合并2单行
<td colspan="2">123</td> # colspan列合并2单列
<!--<td>123</td>-->
</tr>
<tr>
<!--<td>123</td>-->
<td>123</td> # td:table data （列）
<td>123</td>
</tr>
</table>
form表单标签
功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互
form标签
action属性：
method属性：
数据发送方式post／get
input标签
自闭和标签
type属性：
text：输入框
password：密码输入
checkbox:复选框，需要value属性配合使用，checked默认选中
radio:单选框，需要name相同来互斥
subimt：发送数据按钮，自带事件
button:只是按钮，可以绑定事件
file：上传文件
hidden：不用于显示，默认给server的数据
name属性：
接收输入内容，组成键值对
input标签都需要有name属性，否则无法组成键值对
value属性：
值
<h1>注册</h1>
<from method="post">
<p>姓名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p>爱好：篮球<input type="checkbox" name="hobby" value=“basketball” checked>
足球<input type="checkbox" name="hobby" value=“football”></p>
<p>性别：男<input type="radio" name="sex" value="male">
女<input type="radio" name="sex" value="female">
其他<input type="radio" name="sex" value="other"></p>
<p><input type="file" name="filename"></p>
<p><input type="hidden" name="hiddendate" value="20170101"></p>
<p><input type="submit" value="提交"></p>
</from>
selsect标签
下拉选项
option标签：下拉选择每一项
optgroup标签：为每一项加上分组
size属性：默认显示数量
multiple：多选
selected：默认选中
<select name="province" size=“3” multiple>
<optgroup label='china'>
<option value="None">请选择</option>
<option value="hebei" selected>河北省</option>
<option value="shanxi">陕西省</option>
</optgroup>
</select>
textarea多行文本框
rows:行
cols：列
<p>
简介<textarea name="" rows="4" cols="32"></textarea>
</p>
label标签
<label for="username"></label>
<input type="text" name="username" id="username">
fieldset标签
<fieldset>
<legend>登录</legend>
<input type="text">
</fieldset>
