HTML 标签语言
概念
超文本标记语言，是一种用于创建网页的标记语言。
ps：
不是编程语言，是利用标签来描述网页的。
扩展名：.html .htm
语法规范
- 标签不区分大小写，推荐小写。
- 双标签必须写完整（浏览器不会报错，而且自动补全，但是最终效果很大可能性影响整体布局）。
- 不用标签形式的内容会以完整的原内容进行展示。
- 合理的注释："<!--注释内容-->"和缩进增加代码的可读性
文档结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>
属性说明
<!DOCTYPE html>：声明为HTML5文档
<html></html>：是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部(head)和主体(body)
<head></head>：定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
<title></title>：定义了网页标题，在浏览器标题栏显示
<body></body>：之间的文本是可见的网页主体内容
标签的分类
分类一
自闭合标签：单标签。
闭合标签：双标签
分类二
块级标签：就是独占一行，可以自行设置宽高。ps：div，p，h1-h6。
内联标签：按内容占位，高度和广度是由自己的内容填充的。ps：a，br，img。
判断块级标签和内联标签的方法：
- 是否单独占一行（可以通过设置背景颜色去判断）。
- 是否可以单独为元素设置高度和宽度。
标签关系
标签嵌套会产生 祖先 和 后代，父子，兄弟关系。
父子关系
外层：父元素，内层：子元素。
在使用嵌套的时候，推荐使用父子结构来实现下拉菜单效果。
祖先和后代
外层所有元素统称为：祖先元素。
内层元素称为：后代元素。
兄弟关系
平级元素之间互为 兄弟元素。
head内的常用标签
meta
设置标签属性：设置字符编码。
<meta charset="utf-8">
title
设置网页标题。
<title>我的网页</title>
style
设置网页的样式。
<style></style>
link
引入外部样式表文件
<link />
script
引入外部 JS 代码用
<script></script>
body内常用标签
基本标签（内联标签）
内联标签不需要另起一行，以文本大小为定义大小。
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <!--换行--> <br /> <span></span>
基本标签（块级标签）
块级标签需要另起一行。
<h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--水平线--> <hr /> <div></div> <p></p>
浏览器默认字体大小为 16px, 渲染的时候 小于12px 的会强制改成 12px。
h1 标签的字体大小为 32px，
h4 标签的字体大小为 16px ，
h6 标签的字体大小为 12px 。
浏览器会对代码文本中的 换行 和 多余的空格 解析成一个空格 ( 因此会导致格式不对应 )。
文本标签样式
默认都是左对齐，此内容可被CSS样式代替。
<h1 align="center/left/right">标题</h1>
div和span的区别
<div></div>：<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
<span></span>：<span>表示了内联行（块级元素），并无实际的意义。主要通过CSS样式为其赋予不同的表现。
ps：
p标签是个特异点，不可以嵌套其他块级标签，嵌套p标签也不行。
字符实体
$lt; < $gt; > $nbsp; 空格 $yen; ￥ 人民币符号 $copy; © 版权符号
特殊标签
图片标签
<img src="图片的路径" alt=''图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高" />
ps：
宽高两个属性只用一个会自动等比缩放。
Windows下，如果 src 属性使用 绝对路径时，需要将所有的反斜线“” 改成 斜线“/”。
路径要补全文件名且加后缀（不加后缀被认为是目录）。
超链接标签
<a href="跳转路径" target="跳转后打开方式">点我</a>
属性详细
- href 属性指定目标网页地址。该地址可以有几种类型：
- 绝对URL： 指向另一个站点（比如 href="http://www.jd.com"）
- 相对URL：指当前站点中确切的路径（href="index.html"）
- 锚URL：指向当前页面中的锚（href="#top"），取值为“#”表示当前页面
- target 属性指定打开方式：
- _blank 表示在新标签页中打开目标网页。
- _self 表示在当前标签页中打开目标网页（默认为此方式）。
锚点实例
创建 a标签，href 加“#”表示跳转（不加“#”被识别为新链接）
创建 a空标签 来实现被跳转（指定内部属性 name 或者 href 为约定词）
<a href="#xxx">跳转到当前页面锚点 xxx位置</a> <a href="abc.html#xxx">跳转到 abc.html 文件的锚点 xxx位置</a> <!--添加锚点--> <a name="xxx"></a> <a href="xxx"></a>
列表
无序（unordered list）
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性：
-
- disc：实心圆点（默认值）
- circle：空心圆圈
- square：实心方块
- none：无样式
有序（ordered list）
<ol> <li>第一项</li> <li>第二项</li> </ol>
type属性：
-
- 1：数字列表（默认值）
- A：大写字母
- a：小写字母
- Ⅰ：大写罗马
- i ：小写罗马
标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格
<table border="1"> <thead> <tr> <td>id</td> <td>name</td> <td>age</td> </tr> </thead> <tbody> <tr> <th>1</th> <th>zhang</th> <th>18</th> </tr> <tr> <th>2</th> <th>xue</th> <th>13</th> </tr> </tbody> </table>
tr/td/th 属性
- tr： 定义表格行标签
- th：填入表格标题首行数据单元格标签，自带加粗和居中
- td：填入表格数据单元格标签
- bgcolor：行背景颜色
- width/height：宽/高
- align：水平方向，文本对齐（默认左对齐）。可取值：left / right / center
table 属性
- border：表格边框粗细
- cellpadding：内边距 文本内容与边框的距离
- cellspacing：外边距 表格内单元格中间的边距
- width：宽 像素单位 百分比（最好通过CSS来设置长宽）
- bgcolor：背景颜色
- rowspan：单元格竖跨多少行
- colspan：单元格横跨多少列（即合并单元格）
valign
垂直防线：文本对齐方式（），可取值：top。
ps：
一般不使用这些属性来处理样式。
但是 结构 相关属性需要重点理解：
合并单元格的时候，不会删除被合并的单元格。
而是将被合并的单元格往后推，会破坏原有结构。
因此，必须手动删除被推出的单元格。
跨列合并：删除当前行多余的单元格。
跨行合并：删除其后行多余的单元格。
tbody / thead / tfoot 不是必填项，浏览器也会帮我们自动添加。
默认所有行自动加入到 tbody 中。
form 表单
概念
表单收集用户信息并向服务器提交，从而实现用户与 web服务器 的交互。
表单属性
- accept-charset：规定在被提交表单中使用的字符集（默认：页面字符集）。
- action：规定向何处提交表单的地址（URL）（提交页面）。
- autocomplete：规定浏览器应该自动完成表单（默认：开启）。
- enctype：规定被提交数据的编码（默认：url-encoded）。
- method：规定在提交表单时所用的 HTTP 方法（默认：GET）。
- name：规定识别表单的名称（对于 DOM 使用：document.forms.name）。
- novalidate：规定浏览器不验证表单（浏览器会自带一个验证功能）。
- target：规定 action 属性中地址的目标（默认：_self）。
input系列标签
text 单行输入文本 <input type=text" /> password 密码输入框 <input type="password" /> date 日期输入框 <input type="date" /> checkbox 复选框 <input type="checkbox" checked="checked" /> radio 单选框 <input type="radio" /> submit 提交按钮 <input type="submit" value="提交" /> reset 重置按钮 <input type="reset" value="重置" /> button 普通按钮 <input type="button" value="普通按钮" /> hidden 隐藏输入框 <input type="hidden" /> file 文本选择框 <input type="file" />
属性说明
name：表单提交时的“键”，目的为提交后端的数据标识符（注意和id的区别）。
value：表单提交时对应项的值。
type="button" / "reset" / "submit" 时，为按钮上显示的文本内容，必填。
type="text" / "reset" / "submit" 时，为输入框的初始值，设置为默认值，不设置也没关系，用户输入可以覆盖默认值作为value传回。
type="checkbox" / "radio" / "file" 时，为输入相关联的值，必填。
checked：radio 和 checked 默认被选中的项。
readonly：text 和 password 设置只读，disabled：禁用。所有input均适用。
ps：
- 当 input 中有 文件 上传的时候，必须要对form表单做以下更改。
<form action="/xxx" method="post" enctype="multipart/form-data"> ... </form>
- 当有 AJAX 提交的时候不要用submit，要用button。
- 一组 radio / checkbox 类型的时候，必须要求name值一样才可以指定 单选 或者 复选。
- 功能按钮 submit / reset，自带value为“提交” / “清空”，且不需要设置name属性，value可以设置自定义显示文本。
select 标签
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </form>
属性说明
- multiple：布尔属性，设置后为多选，否则默认单选。
- disabled：禁用。
- selected：默认选中该项。
- value：定义提交时的选项值。
label标签
label元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当相关元素的 id 属性值相同。
可实现点击label标签的时候自动跳转到 for所指定的标签。实现相同的点击效果。
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username" /> </form>
textarea多行文本
属性说明
- name：名称
- rows：行数
- cols：列数
- disabled：禁用