HTML简介
网页
网页
网站：利用前端技术制作的网页汇合。
网页：形成网站的根本元素，通常是 HTML 格局的文件（.htm 或 .html），必须通过浏览器来浏览。
HTML
超文本：由图片、声音、动画、视频等形成且能够互相链接的文本。
HTML：超文本标记语言（HTML 不是编程语言，而是由一套标记标签形成的标记语言）。
网页的造成
- 前端代码开发
- 浏览器解析、渲染代码
- 出现 Web 页面
浏览器
五大罕用浏览器
Chrome、Firefox、Safari、Opera、 Edge
四大浏览器内核
- IE（
Trident） - Firefox（
Gecko） - Safari（
Webkit） - Chrome / Opera / Edge（
Blink属于 Webkit 的分支，Blink 兼容 Webkit）
注：目前国内浏览器个别都采纳 Webkit / Blink 内核。
Web规范
W3C： 万维网联盟，国内最驰名的标准化组织之一。
Web规范：W3C 组织和其余标准化组织为 Web 开发制订的一系列规范的汇合。
Web规范形成
- 构造：用于对网页元素进行整顿和分类，现阶段次要指的是
HTML - 体现：用于设置网页元素的版式、大小、色彩等外观款式，次要指
CSS - 行为：网页模型的定义及交互方式的编写，现阶段次要指的是
JavaScript
HTML标签
语法标准
标签
HTML 标签是由尖括号突围的关键字词，例如：<html>。
双标签
HTML 标签通常是成对呈现的，例如：<html> 和 </html>，咱们称为双标签。标签对中的第一个标签是开始标签，第二个标签是完结标签。
单标签
有些非凡的标签必须是单个标签，例如：<br />，咱们称为单标签。
留神：/ 之前有一个空格（Coding Style 编码格调）。每个标签原则上都应该有结束符，即： /。所以单标签的最初要加 / 以示意完结，当然不加也是能够被浏览器失常解析的。
备注：
- HTML5 标准中明确阐明单标签
/是能够疏忽的，理论开发中倡议不要给单标签增加斜线。 - 任何标签都倡议不要大写，即使是
<!doctype html>标签。
标签关系
蕴含关系
<head> <title></title></head>并列关系
<head></head><body></body>
根底构造标签
每个网页都会有一个根底的构造标签（骨架标签：4组），页面内容也是在这些根底标签上书写的。
HTML 页面也称为 HTML 文档。
<html> <head> <title></title> </head> <body> </body></html>| 标签名 | 定义 | 阐明 |
|---|---|---|
<html> </html> | 根标签 | 页面中最大的标签（最根底的标签） |
<head> </head> | 头部标签 | 在 head 标签中咱们必须要设置 title 标签 |
<title> </title> | 题目标签 | 页面本人的网页题目 |
<body> </body> | 主体标签 | 蕴含文档的所有内容 |
文档类型申明标签 doctype
<!doctype> 文档类型申明，作用是通知浏览器应该应用哪种 HTML 版本来解析渲染网页。
<!doctype html><!-- 以后页面采纳 HTML5 版本 -->留神：
<!doctype>申明位于文档最后面的地位，处于 <html> 标签之前<!doctype>文档类型申明标签，不属于 HTML 标签- 请默认对立指定 HTML5 版本
<!doctype html>
语言品种 lang
用来定义以后网页显示的主语言，书写在 <html> 标签内。
语言的设置是为了不便 浏览器搜寻举荐 以及触发 浏览器翻译性能，并不是说设置了某类主语言后网页中就不能存在其余类型的语言了。
<html lang="zh-CN"> </html>en-GB 英文（英国）
en-US 英文（美国）
zh-CN 中文（简体，中国大陆）
zh-SG 中文（简体，新加坡）
zh-HK 中文（繁体，香港）
zh-MO 中文（繁体，澳门）
zh-TW 中文（繁体，台湾）
字符集 charset
多个字符的汇合，以便计算机可能辨认和贮存各种文字。
在 <head> 标签内，能够通过 <meta> 标签的 charset 属性来规定 HTML 文档应该应用哪种字符编码。
<meta charset="UTF-8">charset 罕用的值有：GB2312、BIG5、GBK、UTF-8，其中 UTF-8 也被称为：万国码，根本蕴含了全世界所有国家须要用到的字符。
留神：字符设置是必须的，否则极大可能引起网页乱码。个别状况下，对立应用 "UTF-8" 编码，尽量对立写成规范的 UTF-8，不要写成 "utf8" 或 "UTF8"。
规范骨架
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body></html>IE 兼容模式
IE 反对通过特定的 <meta> 标签来确定绘制以后页面所应该采纳的 IE 版本。除非有强烈的非凡需要，否则最好是设置为 edge mode，从而告诉 IE 采纳其所反对的最新的绘制模式。
<head> <meta http-equiv="x-ua-compatible" content="ie=edge"></head>罕用标签
题目标签
作为题目应用，并且根据重要性递加。
HTML 提供了 6 个等级的网页题目，即：<h1> 到 <h6>。
<h1>一级题目</h1><h2>二级题目</h2><h3>三级题目</h3><h4>四级题目</h4><h5>五级题目</h5><h6>六级题目</h6>特点：
- 加了题目的文字会主动加粗，字号也会顺次变大
- 一个题目就独占一行，同一行题目后不会再搁置其余任何内容（前期能够通过 CSS 批改）
- 级别越大的题目标签，对网页元素的强调性越强，同时也和浏览器 SEO 优化无关。
段落和换行标签
<p> 标签用于定义段落，它能够将整个网页分为若干个段落。
<p>我是一个段落标签</p>特点：
- 文本在一个段落中会依据浏览器窗口的大小主动换行。（对于中文段落来说无论如何都会主动换行，然而对于英文段落来说如果字母是间断的（aaa...），那么浏览器会认为该段落整体都是一个字母不会主动换行，要想英文段落主动换行字母之间得有空格。）
- 段落和段落之间保有空隙（段间距）
- 同一段落里的不同行文字之间也有肯定的空隙（行间距）
在 HTML 中，一个段落中的文字会从左到右顺次排列，直到浏览器窗口的右端，而后才主动换行。
换行标签
如果心愿某段文本强制换行显示，就须要应用换行标签 <br>强制换行。
<br>特点：
<br>是个单标签<br>标签只是简略地开始新的一行，跟段落不一样，所以不会产生段间距
分割线标签
某些时候须要对内容块进行宰割时会用到分割线标签<hr>
<hr>留神：理论开发中并不罕用 hr 作为分割线，而是应用 CSS 盒子模型中的边框来实现分割线成果，或是利用一个空盒子设置长宽高及背景色彩来实现分割线成果。
文本格式化标签
在网页中，有时须要为文字设置粗体、斜体或下划线等成果，这时就须要用到 HTML 中的文本格式化标签，使文字以非凡的形式显示。
标签语义：突出重要性，比一般文字更重要。
| 语义 | 标签 |
|---|---|
| 加粗 | <strong> </strong> 或 <b> </b> |
| 歪斜 | <em> </em> 或 <i> </i> |
| 删除线 | <del> </del> 或 <s> </s> |
| 下划线 | <ins> </ins> 或 <u> </u> |
备注：介于可读性、搜索引擎优化及屏幕阅读器适配，举荐应用前者。
div和span标签
<div> 和 <span> 是没有语义的，它们就是两种盒子，用来对网页进行布局和装其余内容。
<div>这是头部</div><span>今日价格</span>特点：
- div 是 division 的缩写示意：宰割、分区。一行只能放一个
<div>，大盒子 - span 意为：跨度、跨距。一行上能够放多个
<span>，小盒子
拓展： span 标签不单单是用于布局，对于一些须要独自润饰和设置的元素，能够将其用 span 标签嵌套起来，而后就能够独自对其进行设置。
图像标签
在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
<img src="图像URL">src 是 <img> 标签的必须属性，它用于指定图像文件的门路和文件名。
URL 是 对立资源定位符（艰深了解：地址、网址）。
| 属性 | 属性值 | 阐明 |
|---|---|---|
src | 图片门路 | 必须属性 |
alt | 文本 | 替换文本，图像显示失败时显示（为了进步 SEO 及适配屏幕阅读器，倡议都把 alt 写上） |
title | 文本 | 提醒文本，鼠标放到图片上，显示的提醒文字 |
width | 像素 | 设置图像的宽度（理解，前面通过 CSS 设置） |
height | 像素 | 设置图像的高度（理解，前面通过 CSS 设置） |
border | 像素 | 设置图像的边框粗细（理解，前面通过 CSS 设置） |
留神：
- 设置图像的宽度与高度时：个别设置其中之一便可，另外一个会主动按比例适配
- 设置宽高时，能够应用百分数作为值，此时图片大小会以以后父元素的大小为根底进行比例缩放，这样做的益处在于当父元素扭转大小时，图片也会随比例等同缩放
门路
相对路径：以援用文件所在位置为参考根底，而建设出目录门路。
| 相对路径分类 | 符号 | 阐明 |
|---|---|---|
| 同一级门路 | . | 如：<img src="baidu.png" /> |
| 下一级门路 | / | 如：<img src="image/baidu.png" /> |
| 上一级门路 | ../ | 如：<img src="../image/baidu.png" /> |
绝对路径：指目录下的相对地位，间接达到目标地位，通常是从盘符开始的门路。如D:\web\img\logo.png
网络地址：https://blog.itxiaoma.cn/img/...
留神：理论开发中倡议应用相对路径或网络地址
超链接标签
在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
<a href="跳转指标" target="指标窗口的弹出形式">文本、图像或其余内容</a>| 属性 | 作用 |
|---|---|
href | 用于指定链接指标的 url 地址，（必须属性）当标签利用 href 属性时，它就具备了超链接的性能 |
target | 用于指定链接页面的打开方式，其中 _self 在以后页面关上的形式（为默认值），_blank 在新窗口中关上的形式 |
链接分类:
- 内部链接：例如：
<a href="http://www.baidu.com">百度</a> - 外部链接：网站外部页面之间互相链接，间接链接外部页面名称即可，例如：
<a href="index.html">首页</a> - 空链接：如果过后没有确定链接指标时，
<a href="javascript:void(0)">首页</a>"，当用户点击链接时，void(0) 计算为 0，但 Javascript 上没有任何成果 - 下载链接：如果 href 外面地址是一个文件或者压缩包（前提：门路蕴含文件类型后缀名，如：
.exe、.zip等），便会下载这个文件 - 网页元素链接：在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都能够增加超链接
锚点链接：点击链接，能够疾速定位到以后页面中的某个地位
- 在链接文本的 href 属性中，设置属性值的
#名字的模式，如：<a href="#two">第2集</a> - 找到指标地位标签（此处以 h3 标签为例），外面增加一个
id属性="方才的名字"，如：<h3 id="two">第2集介绍</h3> <a href="#"></a>默认定位到页面顶部
- 在链接文本的 href 属性中，设置属性值的
正文
如果须要在 HTML 文档中增加一些便于浏览和了解但又不须要显示在页面中的文字，就须要应用正文标签。
HTML 中的正文以：<!-- 结尾，以 --> 完结。
<!-- 正文语句 -->特殊字符
在 HTML 页面中，一些非凡的符号很难或者不不便间接应用，此时咱们就能够应用上面的字符来代替。
| 特殊字符 | 形容 | 字符的代码 |
|---|---|---|
| 空格符 | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 上标 | ² |
留神：下标请应用：<sub>2</sub>，同时上标也倡议应用：<sup>2</sup>。
表格标签
表格次要用于显示、展现数据。因为它能够让数据显示得十分的规整，可读性十分好。
留神：表格不是用来布局页面的，而是用来展现数据的。表格罕用于表单数据的布局。
<table> <tr> <td>单元格</td> ... </tr> ...</table><table></table>是用于定义表格的标签<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中- 字母 td 指表格数据（table data），即：数据单元格的内容
- 单元格 td 外面能够放任何的元素
表头标签
个别表头单元格位于表格的第一行或第一列，作用是：突出重要性，表头单元格外面的文本内容默认加粗居中显示。
<th> 标签示意 HTML 表格的表头局部（table head 的缩写）。
<table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> ... </tr> ...</table>表格属性
留神：表格标签的属性在理论开发中并不罕用，而是通过前面的 CSS 来设置，这里理解即可。
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240"> ...</table>| 属性名 | 属性值 | 形容 |
|---|---|---|
align | left、center、right | 规定表格绝对四周元素的对齐形式（默认 left），留神指的是整个表格的对齐形式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐形式（单元格内容对齐能够通过：style="text-align: center;" 设置）（理解） |
border | 1 或 "" | 规定表格单元是否领有边框，默认为 ""，示意没有边框（理解） |
cellpadding | 像素值 | 规定单元边际与其内容之间的空白，默认 1 像素（理解） |
cellspacing | 像素值 | 规定单元格之间的空白，默认 2 像素（理解） |
width | 像素值 或 百分比 | 规定表格的宽度（理解） |
height | 像素值 或 百分比 | 规定表格的高度（理解） |
表格构造标签
因为表格可能很长，为了更好的示意表格的语义，能够将表格宰割成：表格头部 和 表格主体 两大部分。
<thead></thead>：用于定义表格的头部，<thead>外部必须领有<tr>标签，个别是位于第一行，且个别<tr>标签中举荐搁置<th>标签<tbody></tbody>：用于定义表格的主体，次要用于放数据本体- 以上标签都是放在
<table></table>标签中
<table> <!-- 头部区域 --> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> ... </tr> </thead> <!-- 主体区域 --> <tbody> <tr> <td>周吉瑞</td> <td>男</td> <td>18</td> ... </tr> ... </tbody></table>合并单元格
- 跨行合并（高低合并）：
rowspan="合并单元格的个数" - 跨列合并（左右合并）：
colspan="合并单元格的个数"
<body> <table width="500" height="249" border="1" cellspacing="0"> <tr> <td></td> <td colspan="2"></td> <!-- <td></td> --> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> --> <td></td> <td></td> </tr> </table></body>列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是：参差、整洁、有序、它作为布局会更加自在和不便。
在理论开发中但凡遇到排列参差的简洁内容，都能够应用列表来进行布局。
| 标签名 | 定义 | 阐明 |
|---|---|---|
<ul> </ul> | 无序标签 | 外面只蕴含 li，没有程序，应用较多，li 外面能够蕴含任何标签 |
<ol> </ol> | 有序标签 | 外面只蕴含 li，有程序，应用绝对较少，li 外面能够蕴含任何标签 |
<dl> </dl> | 自定义标签 | 外面只能蕴含 dt 和 dd，dt 和 dd 外面能够放任何标签，dd 个别作为对 dt 的细分形容 |
无序列表
<ul> 标签示意 HTML 页面中我的项目的无序列表，个别会以我的项目符号出现列表项，而列表项应用 <li> 标签定义（开发中常常应用）。
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...</ul>- 无序列表的各个列表项之间没有程序级别之分，是并列的
<ul></ul>中只能嵌套<li></li>，间接在<ul></ul>标签中输出其余标签或者文字的做法是不被容许的，列表中的任何内容都应该放在li中<li>与</li>之间相当于一个容器，能够包容所有的元素- 无序列表会带有本人的款式属性（比方圆点），但在理论开发中，咱们会应用 CSS 来设置
有序列表
有序列表即为有序排列程序的列表，其各个列表项会依照肯定的顺序排列定义（开发中不太罕用）。
在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且应用 <li> 标签来定义列表项。
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...</ol><ol></ol>中只能嵌套<li></li>，间接在<ol></ol>标签中输出其余标签或者文字的做法是不被容许的<li>与</li>之间相当于一个容器，能够包容所有的元素- 有序列表会带有本人款式属性（比方序号），但在理论应用时，咱们会应用 CSS 来设置
自定义列表
自定义列表罕用于对术语或名词进行解释、形容和开展，定义列表的列表项前没有任何我的项目符号（开发中罕用）。
在 HTML 标签中，<dl> 标签用于定义形容列表（或定义列表），该标签会与 <dt>（定义我的项目/名字）和 <dd>（形容每一个我的项目/名字）一起应用。
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd></dl><dl></dl>外面只蕴含<dt>、<dd><dt>和<dd>个数没有限度，常常是一个<dt>对应多个<dd>
表单标签
在网页中，须要跟用户进行交互，收集用户材料，此时就须要表单。
在 HTML 中，一个残缺的表单通常由 表单域、表单控件（也称为表单元素）和 提示信息 3 个局部形成。
表单域
在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form action="url地址" method="提交形式" name="表单域名称"> <!-- 各种表单元素控件 --></form>| 属性名 | 属性值 | 作用 |
|---|---|---|
action | url 地址 | 用于指定接管并解决表单数据的服务器程序的 url 地址 |
method | get / post | 用于设置表单数据的提交形式，其取值为 get 或 post |
name | 名称 | 用于指定表单的名称，以辨别同一个页面中的多个表单域 |
表单控件（表单元素）
input
<input type="属性值" />| 属性值 | 形容 |
|---|---|
button | 定义可点击按钮（少数状况下，用于通过 JavaScript 启动脚本） |
checkbox | 定义复选框，即：多选框，在一组多选中，要求它们必须领有雷同的 name |
file | 定义输出字段和 “浏览” 按钮，供文件上传 |
hidden | 定义暗藏的输出字段 |
image | 定义图像模式的提交按钮 |
password | 定义明码字段，该字段中的字符被掩码 |
radio | 定义单选按钮，在一组单选按钮中，要求它们必须领有雷同的 name |
reset | 定义重置按钮，重置按钮会革除表单中的所有数据 |
submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
text | 定义单行的输出字段，用户可在其中输出文本，默认宽度为 20 个字符 |
除 type 属性外，<input> 标签还有很多其余属性，其罕用属性如下：
| 属性名 | 属性值 | 形容 |
|---|---|---|
name | 由用户自定义 | 定义 input 元素的名称 |
value | 由用户自定义 | 规定 input 元素的值，也就是提交到服务器的值 |
checked | checked | 规定此 input 元素首次加载时该当被选中 |
maxlength | 正整数 | 规定输出字段中的字符的最大长度 |
name和value是每个表单元素都有的属性值，次要给后盾人员应用name表单元素的名字，要求：单选按钮和复选框要有雷同的 name 值checked属性次要针对于单选按钮和复选框，次要作用：关上页面时默认选中某个表单元素maxlength是用户能够在表单元素输出的最大字符数，个别很少应用
select
在页面中，如果有多个选项让用户抉择，并且想要节约页面空间时，咱们能够应用 <select> 标签控件定义下拉列表。
<select> <option>选项1</option> <option>选项2</option> <option selected="selected">默认选中</option> ...</select>- 每个
<option>元素都应该有一个 value 属性，其中蕴含抉择该选项时要提交给服务器的数据值。 - 如果不蕴含 value 属性，则 value 默认为元素内蕴含的文本。
- 能够在
<option>元素上蕴含 selected 属性，以使其在页面首次加载时默认选中。
textarea
<textarea> 标签是用于定义多行文本输出的控件。
<textarea rows="3" cols="20"> 文本内容</textarea>cols="每行中的字符数"，rows="显示的行数"，咱们在理论开发中不会应用，都是用 CSS 来扭转大小- 如果要禁止拉伸文本框大小，则：
style="resize: none"
内联框架
一个内联框架被用来在以后 HTML 文档中嵌入另一个文档。
通过应用框架，你能够在同一个浏览器窗口中显示不止一个页面。
<iframe src="URL"></iframe>属性默认以像素为单位，然而你能够指定其按比例显示（如："70%"）。
<iframe height="500px" src="https://www.bilibili.com/" width="70%"></iframe>提醒：把须要的文本搁置在 <iframe> 和 </iframe> 之间，以应答不反对 <iframe> 的浏览器。
暗藏 <iframe> 滚动条
<div style="width: 400px; overflow: hidden"> <iframe height="480" src="https://www.runoob.com" width="415">您的浏览器不反对</iframe></div>SEO优化
SEO（Search Engine Optimization）：搜索引擎优化。利用搜索引擎的规定进步网站在无关搜索引擎内的天然排名。目标是让其在行业内占据领先地位，取得品牌收益。
外链：链接到内部网页的链接，外链不是越多越好，而是外链的品质越高、越正当、越不便越好。
反链：被其余页面链接，反链的源头品质越高、链接次数越高越好。
参考
黑马程序员pink老师前端入门教程
HTML CSS