什么是HTML
HTML 是用来描述网页的一种语言。
长什么样子
HTML文件的后缀
.html.htm
结构
HTML由标签组成，标签是由尖括号围起来的关键词，如<html>
HTML标签一般成对存在，如<b>和</b>，其中第一个为开始标签，第二个为结束标签
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset=”utf-8″> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
HTML基础
标题
<h1>这是一个标题</h1>
<h2>标题可以从h1--h2</h2>段落
<p>这是一个段落</p>链接
<a href="https://goblog.top">这是一个网页链接</a>图像
<img decoding="async" arc"/images/logo.png" width="258" height="39" />HTML元素
HTML元素由开始标签起始，结束标签终止，元素的内容是这两个标签之间的内容；
没有内容的HTML元素被称为空元素，空元素没有关闭标签；
关闭空元素的正确方法是在开始标签中添加斜杠，比如<br/>
HTMl不区分大小写，但万维联盟在HTML4中推荐使用小写
HTML属性
属性是HTML元素提供的附加信息，一般在开始标签中被描述，一般是键值对
使用与大多数HTML元素的属性：
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
HTML标题和段落
标题
<h1>这是一级标题</h2>
<h2>这是二级标题</h2>水平线
<p>这是一个段落</p>
<hr>
<p>这是一个段落</p>注释
<!-- 这是一个注释 -->段落
<p>这是一个段落</p>折行
<p>这是第一行<br>这是第二行<br>这是第三行，但都属于一个段落</p>HTML文本格式化
HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
HTML “计算机输出” 标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目。 |
HTML链接
HTML使用标签 <a> 来设置超文本链接
<a href="url">链接文本</a>HTML链接的id属性
id属性可用于创建一个HTML文档书签，但书签不会显示在页面中
<!-- 在HTMl文档中插入ID： -->
<a id="tips">有用的提示部分</a>
<!-- 在HTML文档中船舰一个链接到“有用的提示部分（id="tips"）”： -->
<a href="#tips">访问有用的提示部分</a>
<!-- 或者从另一个页面创建一个链接到“有用的提示部分（id="tips"）”： -->
<a href="https://goblog.top/html/html-links.html#tips">
访问有用的提示部分</a>HTML头部
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
使用 <title> 标签定义HTML文档的标题
使用 <base> 定义页面中所有链接默认的链接目标地址。
使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。
使用 <script> 标签加载脚本文件
使用 <link> 标签定义文档与外部资源之间的关系，通常用于连接到样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>使用 <style> 元素定义HTML文档的样式文件引用地址，在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
</head>使用 <meta> 元素描述一些基本的元数据，元数据不会显示，但会被浏览器解析，通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据；还可以适用于浏览器（如何显示内容或加载页面），搜索引擎（关键词），或其他web服务。<meta>一般放置于<head>区域
<!-- 为搜索引擎定义关键词： -->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!-- 为网页定义描述内容： -->
<meta name="description" content="免费 Web & 编程 教程">
<!-- 定义网页作者： -->
<meta name="author" content="Goblog">
<!-- 每30秒钟刷新当前页面： -->
<meta http-equiv="refresh" content="30">HTML样式-CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用”style” 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 – 使用外部 CSS 文件
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。在标签中使用样式属性定义内联样式
<!-- 改变段落的颜色和左外边距 -->
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
<!-- 定义元素的背景色 -->
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
<!-- 我们可以使用font-family(字体)，color，和font-size属性来定义字体的样式 -->
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<!-- 使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式 -->
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。在<head>内部使用<style>标签定义内部样式
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>HTML图像
图像标签
图像由<img>标签定义，<img>标签是一个空标签，不需要闭合标签
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">图像标签属性
<!-- src源属性的值是图像的URL地址 -->
<!-- alt属性用来为图像定义遗传可替换的文本，当图像无法被加载时，由该文本替换 -->
<!-- width，height属性用于设置图像的高度与宽度，默认单位为像素 -->
<img> <!-- 定义图像 -->
<map> <!-- 定义图像地图 -->
<area> <!-- 定义图像地图中的可点击区域 -->HTML表格
表格由 <table> 标签定义。表格的行由 <tr> (table raw)定义，每行中的单元格由 <td> (table data)定义。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>HTML表格和边框属性
如果不定义边框属性，则表格将不会显示边框
<!-- 使用边框属性来显示一个带有边框的表格 -->
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>HTMl表格表头
表格的表头使用 <th> (table head)标签进行定以
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>HTML 表格标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
HTMl列表
HTML支持有序、无序和定义列表
无序列表
<ul></ul>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>有序列表
<ol></ol>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>自定义列表
<dl></dl>
<!-- 自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始 -->
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>HTML区块
HTML可以通过<div>和<span>将元素组合起来
HTML区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
HTML内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML<div>元素
<div>元素是块级元素，它可用于组合其他HTML元素的容器，没有特殊的含义
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
HTML<span>元素
<span>元素是内联元素，可用作文本的容器，也没有特殊的含义
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
HTML表单和输入
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>HTML表单
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容的区域，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。
我们可以使用<form>标签来创建表单
<form>
.
input 元素
.
</form>输入元素
多数情况下用到的表单标签是输入标签<input>
输入类型是由type属性定义的
下面由集中常用的输入类型
文本域
文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时就会用到文本域
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>注意：表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度时20个字符
密码字段
密码字段通过标签 <input type="password"> 来定义
<form>
Password: <input type="password" name="pwd">
</form>注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代
单选按钮
<input type="radio">标签定义了表单的单选框选项
<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>复选框
<input type="checkbox">定义了复选框，复选框可以选取一个或多个选项
<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>提交按钮
<input type="submit">定义了提交按钮
当用户单击确认按钮时，表单内容就会被发送到服务器。表单的动作属性action定义了服务端的文件名（就是说表单会被发送到action指定的文件，并由该文件去解析表单）
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>以上示例中有一个method属性，它用于定义表单数据的提交方式，可以是以下两个值：
- post：HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
- get：默认值，HTTP GET方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://goblog.top/?page=1，这里的 page=1 就是 get 方法提交的数据。
HTML表单标签
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist>New | 指定一个预先定义的输入控件选项列表 |
| <keygen>New | 定义了表单的密钥对生成器字段 |
| <output>New | 定义一个计算结果 |
注：New事HTML5中定义的新标签
HTML框架
通过使用框架，可以在用一个浏览器窗口中显示不止一个页面
iframe标签
<!-- 语法，这里的URL指向不同的网页 -->
<iframe src="URL"></iframe>
<!-- 通过height和width属性定义iframe标签的高度和宽度（默认单位为像素，也可以按器比例显示(如："80%")）
<!-- 使用frameborder属性移除边框 -->
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
<!-- 使用iframe来显示目标链接页面 -->
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://goblog.top" target="iframe_a" rel="noopener">GoBlog</a></p>HTML颜色
HTML颜色由红、绿、蓝混合而成
颜色值
颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
列如：rgb(0,216,255)
颜色名
HTML颜色名参考 RUNOOB.COM
HTML脚本
JavaScript 使 HTML 页面具有更强的动态和交互性
<script>标签
<script> 标签用于定义客户端脚本，比如 JavaScript
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件
<script>
document.write("Hello World!");
</script><noscript>标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>HTML字符实体
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
HTML实体
在HTML中有些字符是预留的，比如 < 和 > 符号，我们不能使用这个符号，否则会被浏览器误认为是标签。
如果我们想使用这些预留字符，就需要使用字符实体，例如（< == < == $#060;）这些都是小于号 < 的实体
字符实体一般类似这样
&entity_name;或&#entity_number;
提示：有些浏览器可能对实体名<不支持，就需要使用都实体数字<
不间断空格（Non-breaking Space）
HTMl中常用字符实体是不间断空格
浏览器会截短页面中的空格（就是说浏览器会把多个连续的空格变成一个空格），如果需要在页面中使用多个连续的空格，就需要使用
字符实体
结合音标符
发音符号是加到字母上的一个”glyph(字形)”。
| 音标符 | 字符 | Construct | 输出结果 |
|---|---|---|---|
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
HTML字符实体
注：字体名称对大小写敏感
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| “ | 引号 | " | " |
| ‘ | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
HTML URL
HTML统一资源定位器(Uniform Resource Locators)即URL
URL是一个网页地址
URL – 统一资源定位器
Web浏览器通过URL从Web服务器请求页面
语法规则
scheme://host.domain:port/path/filename说明:
- scheme – 定义因特网服务的类型。最常见的类型是 http
- host – 定义域主机（http 的默认主机是 www）
- domain – 定义因特网域名，比如 runoob.com
- :port – 定义主机上的端口号（http 的默认端口号是 80）
- path – 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename – 定义文档/资源的名称
常见的 URL Scheme
| Scheme | 访问 | 用于… |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页，加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
URL 字符编码
URL只能使用 ASCII字符集
URL编码使用
%其后跟随两位的十六进制数来替换非ASCII字符URL不能包含空格，URL编码通常使用
+来替换空格
结语
至此，您已经完成了HTML基础的学习，接下来您可以继续学习HTML5的知识，也可以去学习CSS，JavaScript来美化您的网页
下面是HTML的速查列表和标签简写及全程对照表，方便您记忆和使用
HTML速查列表 – GoBlog
HTML 标签简写及全称 – GoBlog
