HTML基础
一、HTML简介
1.HTML是什么？
- 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名：.html或.htm
2.什么是标签？
- 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
- 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
- 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
- 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/><hr/><input/><img/>
- 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
3.标签的属性
- 通常是以键值对形式出现的. 例如 name="nick"
- 属性只能出现在开始标签 或 自闭标签中.
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="nick"
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
4.HTML5基本结构
- <!DOCTYPE html>声明为HTML5文档。
- <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
- <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
- <title>、</title>定义了网页标题，在浏览器标题栏显示。
- <body>、</body>之间的文本是可见的网页主体内容。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，
则你需要设置为 <meta charset="gbk">。
HTML5支持的两种指定页面使用的字符集的方式:
- 使用Content-Type指定字符集 <meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
- 直接使用charset指定字符集 <meta charset="UTF-8">
5.HTML标签格式
- HTML标签是由尖括号包围的关键字，如<html>, <div>等
- HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
- 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
- 标签里面可以有若干属性，也可以不带属性。
标签的语法：
- <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
几个很重要的属性：
- id：定义标签的唯一ID，HTML文档树中唯一
- class：为html元素定义一个或多个类名（classname）(CSS样式类名)
- style：规定元素的行内样式（CSS样式）
6.HTML注释
<!--注释内容-->
7.<!DOCTYPE>标签
- <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
- <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
二、head标签
1.head内常用标签
a.<title></title> 定义网页标题 b.<meta/> 定义网页原信息 c.<link/> 引入外部样式表文件 d.<style></style> 定义内部样式表 e.<script></script> 定义JS代码或引入外部JS文件 f.<base> 标签为页面上的所有链接规定默认地址或默认目标
2.meta标签详解
- <meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
- <meta>标签位于文档的头部，不包含任何内容。
- <meta>提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
(1)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
- Content-Type（浏览器接受的文档类型，一般是text/html）
- refresh（网页刷新，以秒为单位）
- expires（设定网页到期时间，一旦过期，必须到服务器上重传）
- x-ua-compatible （设定IE以最高级模式渲染文档）
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/> <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> <meta http-equiv="expires" content="6 Jun 2016"/> <meta http-equiv="x-ua-compatible" content="IE=edge">
(2)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
- keywords（搜索关键字，用于搜索引擎抓取信息的显示）
- description（搜索到网站后显示的网页内容简描述）
- author（站点制作者信息）
- generator（用以说明生成工具）
- name也可以根据特定的功能自定义，在新浪网中有使用360认证和搜狐认证（<meta name="360-site-verification"content="63349**********"/>、<meta name="sogou_site_verification"content="BVI*******"/>）。
<meta name="keywords" content="搜索关键字"> <meta name="description" content="简要描述"> <meta name="author" content="http://www.cnblogs.com/Felix-DoubleKing/"> <meta name="generator" content="用以说明生成工具">
3.link标签详解
引用外部文档，常见于引用外部样式。重要属性有三个：rel、href、type
- rel 规定文档与被链接文档之间的关系。
rel="dns-prefetch" 预先解析缓存文档中使用的域名，目的是为了提高网页访问速度。使用场景：在一个网页频繁使用其他域名资源时。 rel="shortcut icon"或rel="icon" 在收藏和标题栏上用于显示的图标。示例：<link rel="icon" href="http://test.com/icon.png">。注意：IE浏览器只支持ico格式，为了兼容IE，图片文件采用ico格式。 rel="stylesheet" 引用外部样式表。 rel="nofollow" 用于指示搜索引擎不要追踪（爬虫抓取），减少垃圾链接。用于<a>标签，使用场景：网页不被信任或是不希望呗搜索引擎录入的网站。
- href 资源的路径（相对路径/绝对路径）。
- type 规定被连接文档的MIME类型，用于明确文件的打开方式。例如：.ico文件 image/x-icon。
4.base标签
标签为页面上的所有链接规定默认地址或默认目标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<base href="http://www.baidu.com/123.png"/>
<base target="_blank" />
</head>
<body>
<img src="o_s.png" alt="图片加载失败。。。"/>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
# 上面这段代码中，<img>标签的src属性是一个相对路径，因为<head>中通过base标签设置了链接的默认地址，
所以img的src实际的地址是“http://www.baidu.com/123.png”。
同样的，<a>中只是指定了href，并未指定target属性，所以也会使用base中设置的target属性的值。
三、body标签
1.块级标签和内联标签
块级标签：
- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
- 宽度没有设置时，默认为100%
- 可以包含某些块级元素和内联元素
内联标签：
- 内联元素允许其他内联元素与其位于同一行
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变
- 宽高就是内容的高度，不可以改变
- 只能内联元素，不能包含块级元素
块级元素主要有： <address> 定义地址 <caption> 定义表格标题 <dd> 定义标题列表中定义条目 <div> 定义文档中的分区或节 <dl> 定义标题列表 <dt> 定义标题列表中的项目 <fieldset> 定义一个框架集 <form> 创建表单元素 <h1><h2><h3><h4><h5><h6> 标题元素 <hr> 水平线 <legend> 给fieldset元素定义标题 <li> 定义列表项目 <noframes> 为那些不支持框架的浏览器显示文本，放置于frameset标签内 <noscript> 为那些不支持脚本的浏览器显示文本 <ol> 有序列表 <ul> 无序列表 <p> 定义段落 <pre> 定义预格式化文本 <table> 定义表格 <tbody> 定义表格主体 <td> 表格中的标准单元格 <tr> 表格中的行 <tfoot> 表格中的页脚 <th> 定义表头单元格 <thead> 定义表格的表头
内联元素主要有： <a> 可定义锚以及超链接 <abbr> 表示一个缩写形式 <acronym> 表示只取title中首字母的缩写形式 <b> 字体加粗 <bdo> 可覆盖默认的文本方向 <big> 大号字体加粗 <br> 换行 <cite> 引用进行定义 <code> 定义计算机代码文本 <dfn> 定义一个定义项目 <em> 定义为强调的内容 <i> 斜体文本效果 <img> 向网页中嵌入一张图像 <input> 输入框 <kbd> 定义键盘文本 <label> 为input进行标记/标注 <q> 定义短的引用 <s> 表示不准确不相关，却不应当给予删除的内容 <samp> 定义样本文本 <select> 定义单选或者多选菜单 <small> 呈现小号字体效果 <span> 组合文档中的行内元素 <strong> 语气更强的强调内容 <sub> 定义下标文本 <sup> 定义上标文本 <textarea> 多行文本输入控件 <tt> 打字机或者等宽的文本效果 <var> 定义变量 <input>和<img>都是行内元素，但是它们是可以设置宽和高的。这里就涉及到可替换元素和不可替换元素。 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。 html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如： <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。 不可替换元素 html 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。 例如： <p>段落的内容</p> 段落<p>是一个不可替换元素，文字“段落的内容”全被显示。
2.特殊符号
3.<a> 超链接标签(锚标签)
重要属性有三个：href、target、name
- href 超链接地址：可以是Web上任意资源，包括图片，网页，样式，脚本文件等。href="#"时，表示被链接页面就是当前页面。
-
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
-
相对URL - 指当前站点中确切的路径（href="index.htm"）
-
锚URL - 指向页面中的锚（href="#top"）
-
- target 文档打开时要显示的目标位置：_blank（新窗口中打开）、_self（默认，在超链接所在的容器中打开）、_parent（在超链接的父容器中打开）、_top（整个容器中打开）、name（框架名称）。
- name 锚记名称。作用：跳转到文档的某个地方。返回首页。用于跳转 href : #id.（锚）
# 跳转网页 <a href="http://cnblogs.com/suoning" target="_blank">Nick Blogs</a> # 跳转锚记书签名称 <a name="top"><h3>Top！</h3></a> <div style="height: 800px"></div> <a href="#top">top</a>
1.标签最简式 <a href="mailto:xxx@xx.com">邮件联系</a> 2.标签帮你填抄送地址 <a href="mailto:xxx@xx.com?cc=xxxx@xx.com">邮件联系</a> 3.标签帮你填暗送地址 <a href="mailto:xxx@xx.com?bcc=xxxx@xx.com">邮件联系</a> 4.暗,抄 <a href="xxxxx@xx.com">邮件联系</a> 5.标签帮你填主题 <a href="mailto:xxx@xx.com?subject=这是主题">邮件联系</a> 6.填邮件内容 <a href="mailto:xxx@xx.com?body=这是内容">邮件联系</a> 7.多址发送 <a href="mailto:xxx@xx.com,xxxx@xx.com">邮件联系</a>
# http://shang.qq.com/v3/widget.html <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=306645618&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:306645618:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
4.<img> 图形标签
行级标签，用来显示图片。重要属性有：src、title、alt、width、height、align。
src 图片地址。 title 鼠标悬浮在图片上的文字。 alt 图片找不到时要替换的文字。如果图片资源使用的是外网资源，则不会显示要替换的文字。如果使用的是本网站的资源（相对路径给出），则找不到图片时会显示替换的文字，并保留图片设置的宽高结构。 align 图片周围文字的垂直对齐情况。常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、bottom（默认，与图片的底部对齐）。 width 图片的宽 height 图片的高 (宽高两个属性只用一个会自动等比缩放.)
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
5.列表标签
列表标签分为无序列表<ul>、有序列表<ol>和标题列表<dl>。而<li></li> 表示无序列表和有序列表的某一项；<dt>表示标题名称，<dd>表示内容
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> type属性： disc（实心圆点，默认值） circle（空心圆圈） square（实心方块） none（无样式）
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol> type属性： 1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl> 说明： <dt> 列表标题 <dd> 列表项
6.<table> 表格标签
table属性：
- border:（表格边框）
- align（水平对齐方式）
- bgcolor（背景颜色）
- cellpadding（内边距，单元格与内容之间的距离）
- cellspacing（外边距，单元格的间距，设置为0时，表格变为实线表格）
- width（表格的宽度，可以用%或者像素，最好通过css来设置长宽）
<caption> 表格的标题
<tr> 表格的数据行，table row
<th> 表格的表头名称，与<td>不同在于文字采用加粗居中的形式显示，table head cell
<td> 单元格，用来显示表格内容，table data cell
<thead> 表格头部，使结构更加分明
<tbody> 表格主体部分，使结构更加分明
rowspan 单元格竖跨多少行，作用在th或者td上
colspan 单元格横跨多少列（即合并单元格），作用在th或者td上
<table border="1" bgcolor="#7fff00" cellpadding="1" cellspacing="1" width="300" >
<caption>人员名单</caption>
<thead>
<tr>
<th >序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td align="center">felix</td>
<td align="center">18</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">alina</td>
<td align="center">16</td>
</tr>
</tbody>
</table>
7、表单标签 <form>
HTML 表单用于接收用户不同类型的输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。<form>表单标签, 要提交的所有内容都应该在该标签中。
(1)<form>标签属性：
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 表单要提交的地址，用于处理表单的内容
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
method 提交的方法，默认是get方式提交。
enctype 对表单数据进行编码，默认都是要编码的。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 不对输入的内容做检测是否符合要求
target 规定 action 属性中地址的目标（默认：_self）。
备注：
method 提交的方法，默认是get方式提交。
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
enctype 对表单数据进行编码，默认都是要编码的。
格式为：application/x-www-form-urlencoded（表单默认的编码格式，表单发送前对所有字符进行编码。编码规则：空格转换为“+”号，特殊符号转换为ASC HEX值）。
提交普通的文本内容到服务器就可以采用这种默认的编码方式。
当你需要提交的是一个文件时，编码就需要采用另一种格式：multipart/form-data（不对字符编码，文件上传时使用）。
text/plain（是一种纯文本编码，空格转换为“+”号，但是不对特殊字符进行编码）。
表单元素包含：input元素(文本框、密码框、单选按钮、多选按钮、文件域、提交按钮、隐藏字段、日期等)
select(下拉菜单，单选、多选和分组)
label(把元素和文本结合起来)
fieldset(对表单中的相关元素进行分组)
<input> 元素常用属性：
id
type 用户输入的数据类型，如文本、密码、文件、按钮
name 表单提交项的key
value 向服务器提交的name的值
checked 默认选项，通常与单多选按钮一起使用
required 必填项目
placeholder 占位符
readonly 只读
(2)<input> 元素会根据不同的 type 属性，变化为多种形态。
text 文本框输入（默认text文本框类型）。
placeholder 框内预置内容(灰色)，写上内容时才消失
autocomplete（自动完成输入的内容，要求表单元素要有name属性才有自动完成的效果，off表示自动完成不可用，on表示自动完成可用）
disabled（设置或者获取控件的状态，默认是false即可用，等于true时不可用，不能输入内容）
password 密码框。（以下属性text和password共有）
size（指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，对于其他元素，宽度以像素为单位）
maxlength（type为text或password时，表示输入的最大字符数），有利于防止sql的注入攻击
readonly 只读.
placeholder 框内预置内容(灰色)，写上内容时才消失
radio 单选按钮。属性：
name（将name的值设置为相同值，才表示一组数据，才能实现单选功能）
value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）
checked（是否被选中的状态）
checkbox 复选框。
name（名字一定要一样一样的，才表示是一组数据，添加到同一value值列表提交到服务器）
value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）
checked（是否被选中的状态）
file 文件域，上传文件（不同的浏览器表现形式不同）
submit 提交按钮。用于提交表单。
reset 重置按钮。清空表单的输入，恢复到表单默认的状态。
button 普通按钮。一般结合javascript使用。
image 图片按钮，用来提交表单，与submit是一样的效果。src（图片路径）
hidden 隐藏字段。value（隐藏的内容）
color 颜色标签。value指定颜色值（采用#十六进制数表示）。
date 日期。value值指定默认的日期，格式为****-**-**（年月日）。
datetime-local 显示本地时间，value值指定默认的时间，格式为2016-05-20T11:10:10（年月日T时分秒）。
number 数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。
range 滑动标签。min（指定最小值）、max（指定最大值）、value（指定当前默认值）。
week 每年的周数。value指定哪一年第几周，格式为2016-W25（2016年第25周）。
(3)textarea 文本域标签,默认表现形式是可以输入很多行文本的文本框。
属性：
-
name （表单提交项的key）
-
cols（设置文本域宽度）
-
rows（设置文本域高度，即行数）
(4)<select>下拉标签，使用时要结合<option>子标签一起使用。
name:表单提交项的key multiple：布尔属性，设置后为多选，否则默认单选 size：选项个数 disabled：禁用 selected：默认选中该项 value：定义提交时的选项值 <optgroup> 为每一项加上分组 <option> 下拉选中的每一项
(5)<label> 把元素与文本结合起来
定义：<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
(6)<fieldset> 对表单中的相关元素进行分组
<fieldset>
<legend>温馨提示</legend>
<div align="middle">不要忘记点赞哦 ==</div>
</fieldset>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>form表单</title> </head> <body> <h2>用户注册</h2> <!--表单提交地址，methon为post,enctype数据类型（因为有图片和表单数据所以选择multipart/form-data）--> <form action="http://127.0.0.1:8000/upload" method="post" enctype="multipart/form-data" autocomplete="off" > <!--用户提交的数据，文本，必须有name--> <p>用户名： <input name="user" type="text" disabled > </p> <p>用户名： <label for="u1"></label> <input name="user" type="text" id="u1" required > </p> <!--修改时用户名不能更改，加readonly属性，value 默认值--> <p>修改用户名： <input name="user" type="text" readonly value="felix" > </p> <!--输入框里有一个默认值，可以修改--> <p>占位 用户名： <input name="user" type="text" placeholder="felix" > </p> <p>密码： <!--type为password 密文显示--> <input name="passwd"type="password" required placeholder="大小写、数字、特殊字符"> </p> <!--checked 默认选择--> <p>性别1-必须选中圆点才能选中： <!--必须选中选项--> <input name="gender" type="radio" value="1" > 男 <input name="gender" type="radio" value="0"> 女 <input checked name="gender" type="radio" value="2"> 保密 </p> <p>性别2-选中汉字也可选中： <!--选中汉字则选中选项，写法1--> <input id="g1" name="gender2" type="radio" value="1"> <label for="g1">男</label> <!--选中汉字则选中选项，写法2--> <label> <input name="gender2" type="radio" value="0"> 女</label> <input checked name="gender2" type="radio" value="2" id="g2"> <label for="g2">保密</label> </p> <p>出生年月： <input type="date" name="birthday" id="b1"> </p> <p>邮箱： <input type="email" name="email" required> </p> <p>爱好： <input name="hobby" type="checkbox" value="music"> 音乐 <input name="hobby" type="checkbox" value="movie"> 电影 <input name="hobby" type="checkbox" value="movement"> 运动 <input name="hobby" type="checkbox" value="game"> 游戏 <input name="hobby" type="checkbox" value="other"> 其他 <input name="other" type="text" > </p> <p>省（直辖市）-单选： <select name="province1" id="p1"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="cq" selected>重庆</option> <option value="tj">天津</option> <option value="gd">广东</option> </select> </p> <p>省（直辖市）：多选</p> <!--下拉菜单可多选 multiple--> <select name="province2" id="p2" multiple> <option value="bj">北京</option> <option value="sh">上海</option> <option value="cq" selected>重庆</option> <option value="tj">天津</option> <option value="gd">广东</option> </select> <p>区县：</p> <select name="area" id="a1"> <optgroup label="北京"> <option value="cp">昌平</option> <option value="hd">海淀</option> <option value="ft">丰台</option> </optgroup> <optgroup label="上海"> <option value="pdq">浦东新区</option> <option value="hpq">黄浦区</option> <option value="mh">闵行区</option> </optgroup> <optgroup label="重庆"> <option value="yzq">渝中区</option> <option value="jbq">江北区</option> <option value="ybq" selected>渝北区</option> </optgroup> </select> <p>上传头像 <input type="file" name="" id=""> </p> <p>个人简介:<br><textarea name="personinfo" id="info" cols="30" rows="5" ></textarea></p> <!--注意没有value值时，不同的浏览器显示submit文字不一样，chrome显示中文“提交”，ie浏览器显示 "Submit Query"--> <!--有value值时，不同的浏览器都显示一样的内容--> <p><input type="reset" value="重置"></p> <p><input type="button" value="button"></p> <p><input type="submit" value="提交"></p> <!--<p><input type="image" value="提交" src="IMG_1390.JPG"></p>--> <p><input type="hidden" name="hidden" ></p> <p><input type="color" name="文字颜色" value="">文字颜色</p> <p><input type="number" name="num" min="1" max="31" >数字</p> <p><input type="range" name="num1" min="1" max="12" >滑动数字</p> </form> </body> </html>
