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内的常用标签

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：禁用

来源：oschina

链接：https://my.oschina.net/u/4311204/blog/3541709

标签

autocomplete

html5

javascript