HTML 基础
HTML 基础
超文本标记语言 (HTML, HyperText Markup Language) ，是构成网页的最基础的内容，用来创建并以可视化方式来呈现网页，它确定了一个网页的内容而不是功能
HTML 给英文文本加上了标记，超文本指将一个个网页连在一起的链接，它将万维网变成了今天的样子，HTML 还支持图片和其他媒体类型，HTML 是一种描述 Web 文档结构和语义的语言，网页中的内容通过 HTML 元素标记，如 <head>,<title>,<body>,<article>,<section>,<p>,<div>,<span>,<img> 等等，这些元素形成了构建网页的基础
HTML 的基本结构
<!DOCTYPE html>
<html lang="en"> <! -- html根节点，根元素 -->
<head>
<meta charset="utf-8" /> <!-- 设置字符集，可以正常显示中文 -->
<title>A tiny document</title> <!-- 整个html文档的标题 -->
</head>
<body>
<h1>Main heading in my document</h1>
<!-- 注释 -->
<!-- Note that it is "h" + "1", not "h" + the letter "one" -->
<p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>HTML5 中的文档声明：
<!DOCTYPE html>浏览器识别使用的是 HTML 的哪个版本，如果不写，在低版本IE（IE6，7，8）可能会触发怪异模式，文档声明的演变有着复杂深长的历史，但今天的我们只需知道上方的文档声明告诉了浏览器需要遵循 W3C标准 来解析 HTML 和 CSS 代码，且不必尝试去模拟 90 年代的 IE 环境
HTML 4.01 的文档声明有三种：严格型 (strict)、过渡型 (transitional)、框架型 (frameset)
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font），不允许框架集 (Framesets)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[http://www.w3.org/TR/html4/strict.dtd](http://www.w3.org/TR/html4/strict.dtd)">HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font），不允许框架集(Framesets)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">HTML 的标签、元素、属性
HTML 是一种描述 Web 文档结构和语义的语言；它由元素组成，每个元素可以包含属性，标签 (Tag) 的名字不区分大小写，但是 W3C 建议小写 （ XHTML 同样要求使用小写）
标签【tag】
HTML 为由一对尖括号 <> 所括起来的内容给予特定含义，这样的标识称为一个 标签 (tag)
HTML 元素是整个页面的根元素 / 根节点， 所有其他元素皆是此元素的后代
单标签，没有闭合的标签 如：<meta>,<input>，有些网页要求标签全闭合，如：<meta />,<input />
元素【element】
HTML 元素指的是从开始标签 (start tag) 到结束标签 (end tag) 的所有代码
开始标签 | 元素内容 | 结束标签 |
|---|---|---|
<p> | This is a paragraph | </p> |
<a href="default.htm"> | This is a link | </a> |
|
注释：开始标签常被称为开放标签 (opening tag)，结束标签常称为闭合标签 (closing tag)
- HTML 元素以 开始标签 起始
- HTML 元素以 结束标签 终止
- 元素的内容 是开始标签与结束标签之间的内容
- 某些 HTML 元素具有 空内容 (empty content)
- 空元素 在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有 属性
属性【attribute】
HTML 标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息
属性总是以名称 / 值对的形式出现，比如：name="value"
属性总是在 HTML 元素的开始标签中规定
HTML 链接由<a>标签定义，链接的地址在 href 属性中指定：
<a href="http://www.jishu.com">This is a link</a>下面列出了适用于大多数 HTML 元素的属性：
属性 | 值 | 描述 |
|---|---|---|
class | classname | 规定元素的类名 (classname) |
id | id | 规定元素的唯一 id |
style | style_definition | 规定元素的行内样式 (inline style) |
title | text | 规定元素的额外信息（可在工具提示中显示） |
如需更多关于标准属性的信息，请访问：HTML 标准属性参考手册
四大主流浏览器
浏览器最重要或者说核心的部分是 “Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”，负责对网页语法的解释（如标准通用标记语言下的一个应用 HTML、JavaScript 并渲染（显示）网页，所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因
浏览器 | 浏览器内核 | 备注 |
|---|---|---|
Chrome | Blink | 查看 Chrome 内核方式，地址栏输入 chrome://version/，或者按 F12 键出现调试面板 |
Firefox | Gecko | |
IE | Trident | 在win10之后，使用 Edge 替换成默认浏览器，IE 停止升级，最终版本为 IE11 |
Safari | Webkit |
国内的一些浏览器，如 360 浏览器，QQ 浏览器，搜狗浏览器，UC 浏览器，猎豹浏览器等等，都是基于四大主流浏览器的内核所衍生而来的，其中 360 浏览器使用了双内核，在兼容模式下，使用的是 IE 内核 【Trident】，在极速模式下，使用的是 Chrome 内核 【Blink】
现代浏览器一般指的是 IE 9 以上的浏览器，低版本的浏览器往往会存在很多的 BUG，并且不兼容很多 HTML 5 和 CSS 3 的新特性，但是，在全球范围来说，IE 仍占据一定的市场份额，而在我们国家，由于金融业和政府机构需要相对稳定的环境，所以 IE 浏览器仍然是备受青睐
2017 年 3 月全球 & 国内 PC 浏览器市场份额排行榜
全球PC浏览器市场份额排行榜 | 国内PC浏览器市场份额排行榜 |
|---|---|
Chrome 浏览器，全球市场份额为 62.81% | Chrome 浏览器，市场份额为 42.04% |
Mozilla Firefox，市场份额为 14.97% | IE 浏览器，市场份额为 27.79% |
IE 浏览器，市场份额为 9.38% | QQ 浏览器，份额为 6.02% |
Safari 浏览器，市场份额为 5.28% | 2345 加速浏览器，份额为 4.77% |
Edge 浏览器，市场份额为 3.64% | 搜狗高速浏览器，份额为 4.54% |
Opera 浏览器，市场份额为 1.93% | 火狐浏览器，份额为2.04% |
注释：国内 IE 浏览器市场份额中，IE 8 的份额为 12.08%，IE 9 的份额为 10.32%，IE 7 的份额为 3.42%，IE 10 的份额为1.97%，此榜单中没有 360 安全浏览器和 360 极速浏览器，因为其去掉了原本的浏览器特征而表现为 IE、Chrome 等浏览器特征
编辑工具，前端 IED
名称 | 优 / 缺点 |
|---|---|
Sublime Text | 轻量级，占用系统资源较少【集合 emmet 插件】 |
VScode | 占用系统资源较少 |
Hbuilder | 消耗资源大，不太稳定 |
Webstorm | 消耗资源大 |
网页设计的三个层次
名称 | 功能 |
|---|---|
HTML | 超文本标记语言，定义网页的结构，并展示内容，文件后缀名为 .html |
CSS | 层叠样式表，表现网页的形式，外观，布局，文件后缀名为 .css |
JavaScript | 脚本语言，给网页增加动态功能，用户交互，做动画，提高用户体验，文件后缀名为 .js |
基础元素
<meta> 元标签，辅助页面功能定义
meta 元素可提供有关页面的元信息 (meta-information)，比如针对搜索引擎和更新频度的描述和关键词， <meta> 标签位于文档的头部，不包含任何内容，<meta>标签的属性定义了与文档相关联的名称/值对
属性 charset="utf-8" 指定页面的字符集，若不指定，在某些浏览器可能出现乱码
属性一般为键-值对，如：charset="utf-8"，charset 称为键，utf-8 称为值
块元素block-element
定义：块级元素占据其父元素（容器）的整个空间，因此创建了一个块
用法：块级元素只出现在 body 元素内，一般块级元素可以包含行内元素和其他块级元素，这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构
特点：竖直排列，宽度占满整行，100%，另起新行
块元素有：<p>,<div>,<h1>-<h6>,<ul>,<li>,<ol>,<dl>,<dt>,<dd>
行元素 inline-element
定义：一个行内元素只占据它对应标签的边框所包含的空间
用法：一般情况下，行内元素只能包含文本图片和其他行内元素
特点：水平排列，宽度由内容来决定，不会换行
行元素有：<a>,<span>,<img>,<strong>,<em>,<i>
表单元素
定义：指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
表单元素有：<input>,<select>,<option>,<textarea>,<button>
p 段落元素，表示文本的一个段落
该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进，不嵌套其他块元素
<p>年糕是流行于东亚新年的一种传统美食，中文里年糕与“年高”谐音，有年年高的意思</p>div 无语义元素 ，是一个块元素容器，可以嵌套其他标签
它在语义上不代表任何特定类型的内容，可定义文档中的分区或节 (division/section)，可以把文档分割为独立的、不同的部分，也可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组，它应该在没有任何其它语义元素可用时才使用
<div style="color:#00FF00">
<h3>年糕</h3>
<p>年糕是流行于东亚新年的一种传统美食，中文里年糕与“年高”谐音，有年年高的意思</p>
</div>h1-h6 一级到六级标题
标题 (Heading) 元素有六个不同的级别，<h1> 是最高级的，而 <h6> 是最低的，一个标题元素能简要描述该节的主题
- 不要为了减小标题的字体而使用低级别的标题， 而是使用 CSS font-size 属性
- 避免跳过某级标题：始终要从
<h1>开始，接下来使用<h2>等等 - 使用
<section>元素的时候，为了方便起见你应该考虑着去避免重复在一个页面上使用<h1>，<h1>应该用来表示页面的标题，其他的标题当从<h2>开始， 使用 section 的时候，应当每个 section 都使用一个<h2>， 详情请参考 "Defining sections" in Using HTML sections and outlines
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>ul 无序列表
ul 元素，代表多项的无序列表，内容相同或相似重复性高的使用列表，它们在列表中的顺序是没有意义的，在集合 emmet 插件的编辑器里的快捷输入方式：ul>li{list-$}\*4 生成有 4 个 li 的 ul
ul 可以设置属性 type 改变 li 的样式，如 type="circle" 代表空心圆点，type="square" 代表方形
注释：必须配合使用，不能只出现 ul 或者 li，嵌套的原则是，ul 的直接子元素必定是 li
<ul>
<li>年糕</li>
<li>松糕</li>
<li>绿豆糕</li>
<li>马蹄糕</li>
</ul>ol 有序列表
ol 元素，表示多个有序列表项，通常情况下，有序列表中显示在项前面的编号，可以是任何形式的，如数字，字母或罗马数字甚至简单的点，在网页的 HTML 描述中并没有定义编号的样式，但可以用相关的 CSS 定义，使用 list-style-type 属性
<ol>
<li>年糕</li>
<li>松糕</li>
<li>绿豆糕</li>
<li>马蹄糕</li>
</ol>li 列表项
li 元素 (或者 HTML 列表条目元素) 用于表示列表里的条目，它必须被包含在一个父元素里：一个有顺序的列表 <ol>，一个无顺序的列表 <ul>，或者一个菜单 <menu>，在菜单或者无顺序的列表里，列表条目通常用点排列显示，在有顺序的列表里，列表条目通常是在左边有按升序排列计数的显示，例如数字或者字母
dl,dt,dd 定义列表，是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)
定义列表 (Definition List)，dl 的直接子元素只能是 dt，dd
定义标题 (Definition Term)，dt 元素用于在一个定义列表中声明一个术语，该元素仅能作为 dl 的子元素出现，通常在该元素后面会跟着 dd 元素
对定义标题的解释说明 (Definition Description)，dd 元素用来指明一个描述列表 dl 元素中一个术语的描述，这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 dt 元素
<dl>
<dt>简书</dt>
<dd> 是一个将写作与阅读整合在一起的网络产品</dd>
<dt>年糕</dt>
<dd>中华民族的传统食物，属于农历新年的应时食品</dd>
</dl>form 表单元素，用于为用户输入创建 HTML 表单，用来向 web 服务器提交信息
form 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等，还可以包含menus,textarea,fieldset,legend 和 label 元素
注释：placeholder 属性，是 HTML 5 新增加的表单元素属性，IE 9 以下浏览器不支持
form 表单的 method 属性，表示表单提交的方式：get / post，get 表示从地址栏传输数据，明文传输，不传输敏感信息，长度有限制；post 加密传输/大小无限制；action 处理该页面数据的路径
get 方式提交数据的形式，? + 键值对，以 & 分隔
?name=Nian糕&user_pwd=123&color=白色&food=年糕&hobby=reading&city=SZtype 值 | 描述 |
|---|---|
text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符 |
password | 定义密码字段，该字段中的字符被掩码 |
radio | 定义单选按钮，通过指定属性 name 的值来区分分组 |
checkbox | 定义复选框，通过指定属性 name 的值来区分组 |
button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本） |
reset | 定义重置按钮，重置按钮会清除表单中的所有数据，恢复到默认状态 |
submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
image | 定义图像形式的提交按钮 |
hidden | 定义隐藏的输入字段 |
file | 定义输入字段和 "浏览"按钮，供文件上传，当表单出现文件上传的时候，提交方式只能是post |
select 元素，表单控件，可创建单选或多选菜单，select 元素中的 <option> 标签用于定义列表中的可用选项
textarea 元素，定义多行的文本输入控件，内容填充在标签之间，内容前不要出现空格或空行
布尔属性：只需要出现键，值可以为空或其他
属性 | 描述 |
|---|---|
checked | 预先选定复选框或单选按钮 |
selected | 带有预先选定的选项的下拉列表，被预选的选项会显示在下拉列表最前面的位置 |
disabled | 禁用一个 input 元素，被禁用的 input 元素既不可用，也不可点击，可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等），然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用注释：disabled 属性无法与 <input type="hidden"> 一起使用 |
readonly | 把输入字段设置为只读，只读字段是不能修改的，不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本 |
multiple | 表单上传多个文件，设置之后，则用户可以在 <input> 元素中输入一个以上的值，multiple 属性适用于以下输入类型：email 和 file |
autofocus | 自动获取光标，html5 新增属性，设置之后，则当页面加载时， <input> 元素将自动获得焦点 |
label 元素，配合表单控件使用，提示作用
label 元素不会向用户呈现任何特殊效果，不过，它为鼠标用户改进了可用性，如果你在 label 元素内点击文本，就会触发此控件，就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
注释：label 元素的 for 属性应当与相关元素的 id 属性相同，for 属性可把 label 绑定到另外一个元素
直接嵌套文本跟表单控件
<label>密码输入框：<input type="password" name="pwd"></label>通过属性 for 来指定生效的控件
<label for="ensurePassword">确认密码：</label>
<input type="password" id="ensurePassword"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="form.html" method="get">
<div>
你的名字：
<input type="text" name="name" placeholder="请输入你的名字" autofocus="">
</div>
<div>
<label>
密码：
<input type="password" name="user_pwd">
</label>
<label for="ensurePassword">确认密码：</label>
<input type="password" id="ensurePassword">
</div>
<div>
你喜欢的颜色：
<input type="text" name="color" value="白色">
</div>
<div>
你喜欢的食物：
<input type="text" name="food" value="年糕" readonly="">
</div>
<div>
你的性别是：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="unknow" disabled="">未知
</div>
<div>
你的爱好：
<input type="checkbox" name="hobby" value="clibing">爬山
<input type="checkbox" name="hobby" value="playing_game">玩游戏
<input type="checkbox" name="hobby" value="reading" checked="">读书
</div>
<div>
你所在的城市：
<select name="city">
<option value="GZ">广州</option>
<option value="SZ" selected="">深圳</option>
<option value="BJ">北京</option>
</select>
</div>
<textarea>多行文本输入框</textarea>
<div>
上传文件：
<input type="file" multiple="">
</div>
<div>
<p hidden="">这句话将被隐藏</p>
<input type="hidden" name="browser" value="Chrome">
</div>
<div>
<input type="reset">
<input type="submit" value="确定">
</div>
</form>
</body>
</html>
table 元素，表格
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），字母 td 指表格数据 (table data)，即数据单元格的内容，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等，table 布局是在 css 出现前的一种布局方式，现在很少用或不用
定义 rowspan 属性，可以实现单元格跨行；定义 colspan 属性，可以实现单元格跨列，table 的 css 样式 border-collapse: collapse; 可以让表格边框重叠
caption 元素，定义表格标题，必须紧随 table 元素之后，并且只能对每个表格定义一个标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table - 天气预报</title>
<style type="text/css">
table {
border-collapse: collapse;
}
th,td {
border: 2px solid #99b0da;
}
td {
padding: 0 8px;
text-align: center;
}
.blank td {
border: none;
height: 5px;
line-height: 0;
}
table th {
background-color: #dbe3fa;
}
.date_cell {
background-color: #edf0f9;
}
.tem_high {
color: #e54600;
}
.tem_low {
color: blue;
}
</style>
</head>
<body>
<table>
<caption>天气预报</caption>
<tr>
<th colspan="2">日期</th>
<th colspan="2">天气现象</th>
<th>气温</th>
<th>风向</th>
<th>风力</th>
</tr>
<tr>
<td rowspan="2" class="date_cell">22日星期五</td>
<td class="date_cell">白天</td>
<td></td>
<td>晴间多云</td>
<td class="tem_high">高温7℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td class="date_cell">夜间</td>
<td></td>
<td>晴</td>
<td class="tem_low">低温-4℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr class="blank">
<td> </td>
</tr>
<tr>
<td rowspan="2" class="date_cell">23日星期六</td>
<td class="date_cell">白天</td>
<td></td>
<td>晴间多云</td>
<td class="tem_high">高温7℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td class="date_cell">夜间</td>
<td></td>
<td>晴</td>
<td class="tem_low">低温-4℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
</table>
</body>
</html>
a 元素，锚点
用于定义一个超链接到同一页上的某个位置，或者在网络上的任何其它页面，它也创建用于一个锚点——即超链接定位到页面中的内容，因此链接不只是连接到一个页面的顶部（也可以是页面的中部或者底部）
href 属性，这是为锚定义一个超文本链接来源的必需属性，表示链接目标的 url 或 url 片段，页面内的锚点跳转，通过 href 属性，值为所在要跳转到的位置的元素的 id 值 #id，属性 id 在同一个页面，值必须是唯一的，不能重复，可以添加到任一元素
<a href="http://www.jianshu.com"> 简书</a><a href="#p"></a>
<p id="p"></p>注释： 可以使用 top 特殊词来创建一个链接返回到页面顶部
<a href="#top">返回顶部</a>target 属性，指定打开的窗口，默认值为 _self，即在当前窗口打开跳转链接，若想在新窗口打开链接，则使用 _blank
<a href="https://www.baidu.com/" target="_blank">baidu</a>url 地址
<a href="test.html"></a> //表示当前文件所在目录下面的 test.html<a href="test/test.html"></a> //当前文件所在目录下面的 test 文件夹里的 test.html./test.html 当前文件所在目录下面的文件夹里的 test.html../a.txt 返回当前文件所在文件目录的上一级的 a.txtspan 元素
短语内容的通用行内容器，并没有任何特殊语义，应该在没有其他合适的语义元素时才使用它，<span> 与 <div> 元素很相似，但 <div> 是一个块元素，而 <span> 则是行元素
<p><span>Nian糕</span></p>img 元素，图像嵌入
浏览器并不总是显示该元素中的图像，对于非图形浏览器（包括那些有视力障碍的人所使用的）来说就是这种情况，如果用户选择不显示图像，或者如果浏览器无法显示图像，因为它是无效的或不支持的类型，在这些情况下，浏览器会用该元素的 alt 属性定义的文本来替换图像
alt 属性定义了描述图像的替换文本，如果图像的 url 是错误的，该图像不在支持的格式列表中，或者该图像还没有被下载，用户将会看到这个显示
使用说明： 如果这个属性被省略，则表明图像是内容的关键部分，但没有等效的文本可用；如果把这个属性设置为空字符串，表明该图像不是内容的关键部分，非可视化浏览器在渲染的时候可能会忽略它
src 属性是必需的，它的值是图像文件的 url，也就是引用该图像的文件的的绝对路径或相对路径
绝对 url - 指向其他站点，比如 src="http://www.jianshu.com/"
相对 url - 指向站点内的文件，比如 src="img/Nian糕.jpg"
width / height 属性，设置图片宽高，如果不设置，将会使用图片的默认尺寸，一般使用 CSS 来设置
strong 表示强调，样式默认加粗
<strong>Nian糕</strong>em 着重元素，样式斜体
标记出需要用户着重阅读的内容，em 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读
<em>Nian糕</em>i 斜体文本
用于表现因某些原因需要区分普通文本的一系列文本，例如技术术语、外文短语或是小说中人物的思想活动等
<i>Nian糕</i>元素的嵌套规则
① 块元素可以嵌套块元素、行元素以及文本，行元素一般不嵌套块元素，行元素可以嵌套行元素以及文本
② p 元素不嵌套块元素
③ li 的兄弟元素只能是 li，不能是其他元素，父元素只能是 ul / ol，dl 直接子元素只能是 dt 或者 dd，select 直接子元素只能是 option
决定使用什么标签的，由内容决定，而非样式
腾讯云开发者
