原 Blog 链接：HTML基础学习笔记
自学 html 基础笔记
Web 前端简单介绍
web 前端包含：
- pc 端页面
- 移动端页面
web 前端首先要解决用户体验的问题
认识网页
网页的组成
网页主要由文字、图片和按钮等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及 Flash 等。
Web 标准
1：w3c 万维网联盟组织：用来制定 web 标准的机构（组织）
2：web 标准：制作网页要遵循的规范
3：web 标准规范的分类：结构标准；表现标准；行为标准
- 结构标准：html（用来制作网页的）
- 表现标准：css（对网页进行美化的）
- 行为标准：javascript（让网页动起来，具有生命力）
4：web 标准总结：
- 结构标准：相当于人的身体
- 表现标准：相当于人的衣服
- 行为标准：相当于人的动作
浏览器介绍
浏览器是网页运行的平台，常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari 和 Opera 等。
浏览器内核：也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内 ，容以及页面的格式信息。
| IE | Google/Opera | FireFox | Safari |
|---|---|---|---|
| trident | blink | gecko | webkit |
浏览器与服务器
1：浏览器向服务器发送请求（通过http协议）
2：http协议：超文本传输协议，也就是浏览器和服务器端的网页传输数据的约束和规范
3：https：加密处理
4：url协议:平时我们写的网址就是 url 地址
url协议：规定 url 地址的格式
协议规定格式： scheme://host.domain:port/path/filename
scheme: 定义因特网服务的类型。常见的就是http
host: 定义域主机（http 的默认主机是www）
domain: 定义因特网域名 比如：w3school.com.cn
:port 定义端口号（网页默认端口 :80）
path: 网页所在服务器上的路径
filename: 文件名称
认识 html
概念
html (Hyper Text Markup Language ) 中文译为 超文本标记语言，主要是通过 html 标记对网页中的文本，图片，声音等内容进行描述。
HTML 之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的 超级链接，通过超链接可以实现网页的跳转。从而构成了丰富多彩的 Web 页面。
html 结构
基本结构如下：
<! Doctype html>
<html lang="en">
<head>
<title></title>
</head>
<body></body>
</html>
各部分的含义：
<!-- 文档类型 -->
<! Doctype html>
<!-- 根标签 -->
<html></html>
<html></html>用于告知浏览器其自身是一个 HTML 文档，</html>标记标志着 HTML 文档的开始，</html>标记标志着 HTML 文档的结束，在他们之间的是文档的头部和主体内容。
<!-- <html lang="en"> 向搜索引擎表示该页面是html语言，并且语言为英文网站 -->
<html lang="en">
这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对 html 页面本身不会有影响。
<!-- html文档头部分 -->
<head></head>
主要用来封装其他位于文档头部的标记。一个 HTML 文档只能含有一对
<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
<!-- 网页的标题 -->
<title></title>
<title>标记用于定义HTML页面的标题，<title></title>之间的内容将显示在浏即给网页取一个名字，必须位于<head>标记之内。一个HTML文档只能含有一对<title></title>标记，将显示在浏览器窗口的标题栏中。
<!-- html结构的主体部分 -->
<body></body>
<body>标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。一个HTML文档只能含有一对
<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后。
标签的分类
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
<html>； - HTML 标签通常是成对出现的，比如
<b>和</b>； - 标签对中的第一个标签是开始标签，第二个标签是结束标签；
- 开始和结束标签也被称为开放标签和闭合标签；
HTML标记—双标记
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名></标记名>
<!-- 例如： -->
<body></body>
该语法中 <标记名> 表示该标记的作用开始，一般称为 开始标记（start tag），</标记名> 表示该标记的作用结束，一般称为 结束标记（end tag）。和开始标记相比，结束标记只是在前面加了一个关闭符 /。
HTML标记—单标记
单标记也称空标记，只有开始标签没有结束标签：
<标记名>
<!-- 例如： -->
<! doctype html>
标签关系
- 嵌套关系：类似父亲和儿子之间的关系
<html>
<head>
<title></title>
</head>
<body></body>
</html>
- 并列关系：类似与兄弟之间的关系
<head></head>
<body></body>
html 标签介绍
单标签
文本注释标签
<!-- 文本注释标签 Ctrl+/ -->
文本换行标签
你好<br>我来自中国
效果演示：
你好
我来自中国
横线标签
<hr>
效果演示：
双标签
段落标签
<p>
这是一行文字
</p>
<p>
这也是一行文字
</p>
标题标签
注意：标题标签只能取到数字 1-6
<h1>这是一个标题1</h1>
<h2>这是一个标题2</h2>
<h3>这是一个标题3</h3>
<h4>这是一个标题4</h4>
<h5>这是一个标题5</h5>
<h6>这是一个标题6</h6>
文本标签
<font></font>
例如：
<font size="10" color="red">
优美的文字
</font>
文本格式化标签
文字加粗显示
<strong>
该减肥了！
</strong>
文字斜体
<em>这行字是斜的</em>
文字下横线
<ins>文字下横线</ins>
<u>文字下横线</u>
文字删除线
<del>删除线</del>
<s>删除线</s>
图片标签
<img>
| 属性 | 描述 |
|---|---|
| src | 设置显示图片（图片名称或者图片路径） |
| title | 用来设置鼠标放在图片上显示的文字 |
| alt | 当图片无法正常显示的时候，对图片的描述 |
| width | 用来设置图片宽度 |
| height | 用来设置图片的高度 |
<!-- 下图来自百度图片 -->
相对路径
- 当图片和文件（html）在同一个文件夹中时，src 属性中直接写上图片名称即可。
- 当图片在文件（html）的下一级目录中时，src 属性中写上图片所在的文件夹名 +“/” + 图片名称
- 当图片在文件（html）的上一级目录中时，src 属性中写上 ../图片所在文件夹名 + “/” + 图片名称
绝对路径
凡是带有 磁盘路径 的都是绝对路径，或者带有 网站地址 的也是绝对路径。
超链接
在HTML中创建超链接非常简单，只需用 <a></a> 标记环绕需要被链接的对象即可，其基本语法格式如下：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 描述 |
|---|---|
| href | 用于指定链接目标的 url 地址，当为 <a> 标记应用 href 属性时，它就具有了超链接的功能。 |
| target | 用于指定链接页面的打开方式，其取值有 _self 和 _blank 两种，其中 _self 为默认值， _blank 为在新窗口中打开方式。 |
在 <head> 标签中使用 <base> 标签可以设置网页整体链接的打开状态。
<head>
<base target="_blank">
</head>
实例：
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.renkaigis.com" target="_blank">Kai's Blog</a>
注意:
（1）暂时没有确定链接目标时，通常将
<a>标记的 href 属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。（2）不仅可以创建文本超链接，在网页中各种网页元素，如
图像、表格、音频、视频等都可以添加超链接。
锚链接
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
- 使用 “
<a href="#id名">链接文本</a>” 创建链接文本； - 使用相应的 id 名标注跳转目标的位置。
<!-- 例如在网页顶部写个你好 -->
<p id="db">你好</p>
<!-- 给 a 标签设置 href 属性 "#id名称" -->
<a href="#db">返回顶部</a>
特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方（上标2） | ² |
| ³ | 立方（上标3） | ³ |
列表
无序列表（ul）
<ul>
<li></li> 列表项
<li></li>
......
</ul>
例如：
大家喜欢吃什么水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>水蜜桃</li>
<li>菠萝</li>
</ul>
属性：type
（默认值）实心圆点：disc
实心方块：square
空心圆圈：circle
实例：
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
</ul>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
</ul>
有序列表（ol）
<ol>
<li></li>
<li></li>
</ol>
属性：type
A（ABCD排序），a（abcd排序），i（小写的罗马数字），I（大写的罗马数字）
属性：start="3"，表示从第几个数开始
把大象放冰箱分几步？
<ol type="a" start="3">
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
自定义列表（dl）
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt></dt> 小标题
<dd></dd> 列表项
<dd></dd>
<dd></dd>
</dl>
一般用于网页的底部，例如：
<!-- 自定义列表 -->
<dl>
<dt>售后服务</dt>
<dd>收货地址</dd>
<dd>在线支付</dd>
<dd>联系客服</dd>
</dl>
小补充
页面背景音乐
<embed src="1.mp3" hidden="true">
属性：
- src：设置音乐路径
- hidden：隐藏播放按钮，true 隐藏，false 显示
页面滚动效果
<!-- 中间的内容可以为 文字、图片，也可以是由程序生成的文字或图片 -->
<marquee>
...
</marquee>
| 属性 | 描述 |
|---|---|
| height | 设置高度 |
| width | 设置宽度 |
| bgcolor | 设置背景颜色 |
| behavior | 设定滚动的方式： alternate：表示在两端之间来回滚动； scroll：表示由一端滚动到另一端，会重复； slide：表示由一端滚动到另一端，不会重复。 |
| direction | 设定滚动的时间： down：向下滚动； left：向左滚动； right：向右滚动； up：向上滚动。 |
| loop | 设置滚动次数，-1 表示一直滚下去 |
Meta标签和Link标签
Meta 标签
meta 的属性有两种：name 和 http-equiv。
name 属性
主要用于描述网页，对应于 content（网页内容）。
- 1、用来说明网页使用的字符集，即编码格式
<meta charset="utf-8">
- 2、用以说明生成工具（如Microsoft FrontPage 4.0）等；
<meta name="generator" contect="">
- 3、向搜索引擎说明你的网页的关键词；
<meta name="keywords" contect="">
- 4、告诉搜索引擎你的站点的主要内容；
<meta name="description" contect="">
- 5、告诉搜索引擎你的站点的制作的作者；
<meta name="author" contect="你的姓名">
- 6、有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是
The Robots META标签。
<meta name="robots" contect= "all|none|index|noindex|follow|nofollow">
robots其中的属性说明如下：设定为
all：文件将被检索，且页面上的链接可以被查询；设定为
none：文件将不被检索，且页面上的链接不可以被查询；设定为
index：文件将被检索；设定为
follow：页面上的链接可以被查询；设定为
noindex：文件将不被检索，但页面上的链接可以被查询；设定为
nofollow`：文件将不被检索，页面上的链接可以被查询。
http-equiv 属性
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
- 网页重定向，表示的是
5秒后网页自动跳转到指定网址。
Link 标签
<link rel="icon" href="favicon.ico">
给网页 titile 中放置小图标
<link rel="stylesheet" href="1.css">
引入外部样式表
表格（table）
表格基本结构
在 HTML 语言中，表格至少由 <TABLE> 标签、<TR> 标签和 <TD> 标签这 3 对标签组成。
1.<table>
<table>...</table> 标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格，用 <td>...</td> 标签定义。
2.<tr>
表格行用 <tr> 标签定义，由单元格构成。多个行结合在一起就构成一个表格，这反映在用于创建表格的HTML语法中。表格的每一行都用 <tr> 标签表示，并用相应的 </tr> 结束.
3.<td>
表格的每一行又有若干表格单元格，用 <td>...</td> 标签表示。td 是"表格数据(Table Data)”的英文缩写。<td> 标签定义一个列，嵌套于 <tr> 标签内。
border 属性是最常用的属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。
基本语法：
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>职业</td>
<td>籍贯</td>
</tr>
</table>
属性介绍：
- bord：设置表格边框的厚度
- width：设置表格宽度
- height：设置表格高度
- cellspacing：设置单元格之间的距离
- cellpadding：文字距离单元格边框的距离
- bgcolor="red"：设置背景颜色
- align="center" | left | right：给 tr 或者 td 设置让文字居中，给 table 设置让表格居中
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置边框，默认为0，没有边框 | 单位为 px 像素值 |
| cellspacing | 设置单元格与单元格之间的距离 | 单位为 px 像素值，默认为 2px |
| cellpadding | 设置文字与单元格之间的距离 | 默认 1px |
| width | 设置表格的宽度 | 单位 px |
| height | 设置表格的高度 | 单位 px |
| align | 设置表格在网页中的对其方式 | left 左 rigth 右 center 居中 |
| bgcolor | 设置背景颜色 | white，red，green等 |
设置表格表头，用法和 td 一样
表头一般位于表格的第一行或第一列，其文本加粗居中。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>籍贯</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>码农</td>
<td>江苏</td>
</tr>
</table>
表格属性设置示例：
<table border="1" width="200" height="300" cellspacing="0" cellpadding="20" bgcolor="red">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>籍贯</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>码农</td>
<td>江苏</td>
</tr>
</table>
设置表格标题：
caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
<table>
<!-- 设置表格标题 -->
<caption> <h3>人员信息表</h3></caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>籍贯</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>码农</td>
<td>江苏</td>
</tr>
</table>
表格结构
<table>
<thead></thead> 头
<tbody></tbody> 身体
<tfoot></tfoot> 脚
</table>
在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体如下所示：
-
<thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。 -
<tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<thead></thead>标记之后，一般包含网页中除头部和底部之外的其他内容。 -
<tfoot></tfoot>：用于定义表格的页脚，位于<table></table>标记中<tbody></tbody>标记之后，一般包含网页底部的企业信息等。
补充知识：单元格的合并
横向合并
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
实例展示：
<!-- 实例展示 -->
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<th>姓名</th>
<th colspan="2">年龄</th>
<!--<th>职业</th>-->
<th>籍贯</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>码农</td>
<td>江苏</td>
</tr>
</table>
纵向合并
<tr>
<td></td>
<td rowspan="2"></td> <!-- 纵向合并 -->
<td></td>
</tr>
<tr>
<td></td>
<!--<td></td>-->
<td></td>
</tr>
实例展示：
<!-- 实例展示 -->
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>籍贯</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td rowspan="2">码农</td> <!-- 纵向合并 -->
<td>江苏</td>
</tr>
<tr>
<td>小白</td>
<td>21</td>
<!--<td>前端</td>-->
<td>北京</td>
</tr>
</table>
表单（form）
表单介绍
表单的作用：主要负责数据采集功能。
对于表单构成中的表单控件、提示信息和表单域，对他们的具体解释如下：
- 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
- 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
- 表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
基本语法：
<form name="form_name" action="url" method="get|post">…</form>
属性介绍：
- Name ：定义表单的名称；
- Action ：用来指定表单处理程序的位置（服务器端脚本处理程序）；
- Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get。
get数据提交：① 通过地址栏的方式进行数据提交，将用户输入的信息显出来；② get提交安全性差。
post提交：① 数据通过后台进行提交，不会将用户信息显示出来；② 安全性比较好。
表单域
<form action="">
…
</form>
容纳表单空间和提示信息的一个区域。
表单控件
input 控件
语法：
<input type=“控件类型”>
在上面的语法中，<input> 标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input> 标记还可以定义很多其他的属性，其常用属性如下表所示。
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text password radio checkbox button submit reset image hidden file |
单行文本输入框 密码输入框 单选按钮 复选框 普通按钮 提交按钮 重置按钮 图像形式的提交按钮 隐藏域 文件域 |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input 控件中的默认文本值 |
| size | 正整数 | input 控件在页面中的显示宽度 |
| readonly | readonly | 该控件内容为只读（不能编辑修改） |
| disabled | disabled | 第一次加载页面时禁用该控件（显示为灰色） |
文本输入框
<!-- 文本输入框 -->
用户名：<input type="text" maxlength="6" name="username" value="1234" >
属性:
- maxlength：设置文本输入框最多能输多少字符
- readonly="readonly"：设置文本输入框为只读（不能编辑）
- disabled+"disabled"：控件属于非激活状态
- name="username"：给输入框设置名称
- value：设置默认显示的值
密码输入框
<!-- 密码输入框 -->
密码：<input type="password" name="pwd" value="123">
属性用法与文本输入框的用法一样。
单选按钮
<!-- 单选按钮 -->
性别：
<input type="radio" name="xb" checked="checked" value="nan">男
<input type="radio" name="xb" value="nv" >女
注意：实现单选效果一定要给控件设置相同的名称
属性：
- checked="checked"：设置默认选中项
多选控件
兴趣爱好：
<input type="checkbox" checked="checked">抽烟
<input type="checkbox" checked="checked">喝酒
<input type="checkbox" checked="checked">烫头
属性：
- checked="checked"：设置默认选中项
图片上传控件
头像：
<input type="file">
表单提交按钮
<!-- 表单提交按钮 -->
<input type="submit" value="登录">
普通按钮
<!-- 普通按钮 -->
<input type="button" value="普通按钮">
注意：该按钮不能进行表单提交。通常和 js 代码配合使用。
重置按钮
清空所有表单数据，恢复到初始状态
<!-- 重置按钮 -->
<input type="reset">
图片按钮
<!-- 图片按钮 -->
<input type="image" src="按钮.jpg">
select 控件
在 HTML 中，要想制作下拉菜单，就需要使用select控件。
下拉列表
出生地：
省：
<select multiple="multiple">
<option>山东</option>
<option>山西</option>
<option>河南</option>
<option>河北</option>
<option selected="selected">北京</option>
</select>
属性：
- selected="selected"：设置默认选中项
- multiple="multiple"：可以实现多选效果
下拉列表分组显示
市(区)：
<select id="name">
<optgroup label="北京市">
<option>西城区 </option>
<option>东城区</option>
<option>海淀区</option>
<option>昌平区</option>
</optgroup>
<optgroup label="上海市">
<option>黄浦区 </option>
<option>松江区</option>
<option>浦东新区</option>
<option>静安区</option>
</optgroup>
</select>
textarea 控件
如果需要输入大量的信息，就需要用到 <textarea></textarea> 标记。通过 textarea 控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
属性：
- cols：相当于宽度
- rows：相当于高度
自我介绍：
<textarea cols="30" rows="5">
</textarea>
组合表单
fieldset 用于表单分组。
语法：
<fieldset>
<legend>用户注册</legend>
</fieldset>
举例：
<fieldset>
<legend>用户注册</legend>
用户名：<input type="text" maxlength="6" name="username" value="" >
<br>
<br>
密码：<input type="password" name="pwd" value="123">
</fieldset>
表单补充
判断网址
<!-- 判断网址 -->
<input type="url">
<input type="submit">
判断邮箱
<!-- 判断邮箱 -->
<input type="email">
<input type="submit">
日期控件
<!-- 日期控件 -->
<input type="date">
<input type="submit">
时间控件
<!-- 时间控件 -->
<input type="time">
<input type="submit">
带有 spinner 控件的数字字段
<!-- 带有 spinner 控件的数字字段 -->
<input type="number">
<input type="submit">
属性：
- step：表示每次加减的值（即步长）
带有 slider 控件的数字字段
<!-- 带有 slider 控件的数字字段 -->
<input type="range">
<input type="submit">
属性：
- max：最大值
- min：最小值
- step：每次加减的值（即步长）
定义拾色器
<!-- 定义拾色器 -->
<input type="color">
<input type="submit">
标签语义化
- 标签语义化概念：
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
- 标签语义化意义：
1: 网页结构合理
2: 有利于 SEO :和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3: 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）;
4: 便于团队开发和维护.
- 标签语义化（注意事项）
1：尽可能少的使用无语义的标签 div 和 span ；
2：在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u 等，改用 css 设置。
4：需要强调的文本，可以包含在 strong 或者 em 标签中。strong 默认样式是加粗（不要用b），em 是斜体（不用 i ）；
总结
我的 html 基础学习是跟着传智播客2016年的视频课程学习的，基础就这些内容，特别整理下来以加深记忆。内容或多或少会与网络上的内容有些许出入。总的来说 html 很简单，很容易上手。但这只是基础，html + css + javascript 才能做出真正漂亮的网页。
千里之行，始于足下，接下来的路，加油！
原 Blog 链接：HTML基础学习笔记
