Hyper text markup language 超文本标签语言。不是一种编程语言，而是一种标记语言标记语言是一套标记标签
目录
开发工具
- chrome
- subline
- vscode
- photoshop
浏览器内核
| IE内核 |
Trident |
| Firefox |
Gecko |
| Safari苹果浏览器 |
Webkit |
| Chrome |
Chromium/blink |
| Operapresto |
presto |
html骨架
- HTML标签：所有html标签中的根节点
- Head标签：文档头部，描述文档的各种属性和信息。包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。如<！DOCTYPE>声明了htm版本为html5版本
- Title标签：文档的标题
- Body标签：文档的主体，素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
html标签分类
html标签分类分为双标签和单标签，双标签具有嵌套关系、并列关系，如<div></div>；单标签有：<input/>、<img/>
html标签
特殊标签
-
<meta>：定义了与文档相关联的名称/值对。提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部
<meta name="keywords" content="HTML,ASP,PHP,SQL">
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
//这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
属性
*content some_text——定义与 http-equiv 或 name 属性相关的元信息http-equiv content-type\expires\refresh\set-cookie ——把 content 属性关联到 HTTP 头部。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档name author\description\keywords\generator \revised\others——把 content 属性关联到一个名称。比如"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。scheme some_text——定义用于翻译 content 属性值的格式
排版标签
| 名称 |
语义 |
例子 |
| 标题标签 |
head |
<h1></h1>，<h2></h2>..<h6></h6> |
| 段落标签 |
paragraph |
<p></p> |
| 水平线标签 |
horizon |
<hr/> |
| 换行标签 |
break |
<br/> |
| div标签 |
|
<div> </div> |
| span标签 |
|
<span></span> |
文本格式化标签
| 名称 |
语义 |
例子 |
| 粗体 |
strong |
<b></b> <strong></strong> |
| 斜体 |
|
<i></i> <em></em> |
| 加删除线 |
delete |
<s></s> <delb</del> |
| 下划线 |
underline |
<u></u> <ins></ins> |
图像标签img
| 属性 |
属性值 |
描述 |
| src |
url |
图像路径 |
| alt |
文本 |
图像不能显示时的替换文本 |
| title |
文本 |
鼠标悬停时显示的内容 |
| width |
像素（XHTML不支持%页面百分比） |
图像宽度 |
| height |
像素（XHTML不支持%页面百分比） |
图像高度 |
| border |
数字 |
图像边框宽度 |
链接标签a
| 属性 |
属性值 |
描述 |
| href |
Url |
用于指定链接目标的url地址，Hypertext Reference的缩写。意思是超文本引用 |
| target |
self_blank |
用于指定链接页面的打开方式，其中self为默认值，blank为在新窗口中打开方式。 |
herf
1. 外部链接 需要添加 `http://`
2. 内部链接 直接链接内部页面名称即可 比如 `< a href="index.html"/>`
3. 空连接 `href="#"`
4. 锚点定位
——本页面跳转
1. 给想要跳转的标签添加id名
2. 点击可跳转id名标签所在位置<a href="#id名></a>
——跳转到其他页面的锚点
1. <a id="test">锚</a>
2. <a href="test2.html#test"></a>
特殊字符标签
列表标签
| 类别 |
描述 |
| 无序列表 |
各个列表项之间没有顺序级别之分，是并列的 |
| 有序标签 |
有排列顺序的列表，其各个列表项按照一定的顺序排列定义 |
| 自定义列表 |
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。 |
//无序
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
//有序
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
//自定义
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
注意：
1. <ul>中只能嵌套<li>直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性
表格标签
| 类别 |
描述 |
语法 |
| 表头标签 |
表头一般位于表格的第一行或第一列，其文本加粗居中。 用表头标签替代相应的单元格标签 |
<tr> </tr> <th><th/> ![]() |
| 表头标题 |
caption 元素定义表格标题。 |
<caption></caption> |
| 表格结构 |
表格可划分为头部、主体和页脚 <thead></thead>用于定义表格的头部。必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。 <tbody></tbody>用于定义表格的主体。 位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。 |
<thead><thead/> <tbody><tbody> |
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
<tr>
<th>表头<th/>
</tr>
<table>
<caption>表格标题</caption>
</table>
<table>
<thead><thead/>
<tbody><tbody>
<table/>
| 属性名 |
属性值 |
含义 |
| border |
设置表格的边框（默认border=“0”无边框） |
像素值 |
| cellspacing |
设置单元格与单元格边框之间的空白间距 |
像素值（默认为2像素） |
| cellpadding |
设置单元格内容与单元格边框之间的空白间距 |
像素值（默认为1像素） |
| width |
设置表格的宽度 |
像素值 |
| aline |
设置表格在网页中的水平对齐方式 |
left、center、right |
| rowspan |
数字 |
跨行合并单元格 |
| colspan |
数字 |
跨列合并但管个 |
表单标签
| 类别 |
属性 |
属性值 |
描述 |
| input |
type |
text |
单行文本输入框 |
|
|
password |
密码输入框 |
|
|
radio |
单选按钮 |
|
|
checkbox |
复选框 |
|
|
button |
普通按钮 |
|
|
submit |
提交按钮 |
|
|
image |
图像形式的提交按钮 |
|
|
file |
文件 |
|
name |
由用户自定义 |
控件的名称 |
|
value |
由用户自定义 |
input控件中的默认文本值 |
|
size |
正整数 |
input控件在页面中的显示宽度 |
|
checked |
checked |
定义选择控件默认被选中的项 |
|
maxlength |
正整数 |
控件允许输入的最多字符数 |
| label |
- |
- |
label 标签为 input 元素定义标注（标签）。 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点 |
| textarea |
|
|
|
| select |
|
|
下拉菜单，至少包含一对<option></option>; 在option中定义selected="selected“时，当前项即为默认选中项 |
| form |
action |
url地址 |
|
|
method |
Get/post |
|
|
name |
|
用于指定表单的名称，以区分同一个页面中的多个表单。 |
//label
<form>
<label for="male"</label>
<input id="male" />
</form>
//文本域
<textarea cols="每行字符数" rows="行数"></textarea>
//下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
路径
| 类别 |
描述 |
| 相对路径 |
以网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。 |
| 绝对路径 |
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的 |
- 图像文件和HTML文件位于同一文件夹：
<img src="logo.gif"/>
- 图像文件位于HTML文件的下一级文件夹：
<img src="img/img01/logo.gif" />
- 图像文件位于HTML文件的上一级文件夹：
<img src="../logo.gif" />
D:\web\img\logo.gifhttp://www.itcast.cn/images/logo.gif