HTML
1
1、前端技术简介
（1）从Web1.0到Web2.0，网页制作已经变成前端开发了。对于前端开发来说，你要学的并不是什么“网页三剑客”，而是“新三剑客”：HTML+CSS+JavaScript。
（2）前端最核心的技术是HTML、CSS和JavaScript，不过要想达到真正的前端开发工程师水平，我们还得学习更多前端技术，包括HTML5、CSS3、ES6、Vue.js等知识。
（3）使用前端技术只能开发静态页面。这里要注意一点，即使你使用了JavaScript，做出来的也是静态页面，因为你没有跟服务器进行数据交互。动态页面与静态页面最大的区别在于：是否与服务器进行数据交互。
（4）如果想要开发一个用户体验更好、功能更强大的网站，我们就需要用到后端技术。常见的后端技术有PHP、Java、ASP.NET、Node.js等。
（5）学习路线：HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js。
2
2、HTML简介
（1）学习HTML就是学习各种“标签”，然后针对你想显示什么内容来使用相应的标签；
（2）在HTML中，元素即标签，例如“p元素”指的就是“p标签”；
3
第3章 基本标签
1、HTML结构
（1）HTML标签
在HTML中，一个网页是从< html>开始，然后到< /html>结束的。
（2）head标签
在HTML中，head标签表示页面的“头部”，这里用于定义网页的“特殊内容”。这些内容都是“不可见”的，一般用于告诉搜索引擎这个页面是干什么的。
head标签的“内部标签”
标签 说明
title 定义网页的标题
meta 定义网页的信息（供搜索引擎查看）
style 定义CSS样式
script 定义JavaScript代码
base 直接忽略即可
head标签的“内部标签”也非常重要，不过在学习初期只需要感性认知即可，不需要深入。
（3）body标签
在HTML中，body标签表示页面的“身体”，这里用于网页的“展示内容”。这些内容都是“可见”的，一般用于给用户展示这个页面是干什么的。
一句话概括head标签和body标签的区别就是：head标签内定义的内容是给“搜索引擎”看的，body标签内定义的内容是给“用户”看的。
2、HTML注释
在HTML中，注释是为了代码更加容易阅读和理解。其中，注释的内容不会在浏览器中显示出来。
语法：
< !–注释的内容–>
4
第4章 文本
1、标签总结
文章标签
标签 语义 说明
h1~h6 header 标题
p paragraph 段落
br break 换行
hr horizontal rule 水平线
div division 区块（块元素）
span span 区块（行内元素）
文本标签
标签 语义 说明
strong strong 粗体
em emphasized 斜体
sup superscripted 上标
sub subscripted 下标
2、自闭合标签
HTML标签分为2种：①一般标签；②自闭合标签，它们有以下的区别。
（1）一般标签有开始符号和结束符号，但自闭合标签只有开始符号。
（2）一般标签可以在内部插入文字或其他标签，而自闭合标签不可以。
3、块元素和行内元素
HTML根据元素在浏览器的效果，可以分为2类：①块元素；②行内元素。
常见块元素有h1~h6、p、div等，块元素具有以下2个特点。
（1）独占一行， 排斥其他元素与其位于同一行（包括块元素和行内元素）。
（2）块元素内部可以容纳其他块元素或行内元素。
常见的行内元素有strong、em、span等，行内元素具有以下2个特点。
（1）可以与其他行内元素位于同一行。
（2）行内元素内部可以容纳其他行内元素，但不可容纳块元素，不然会出现无法预知的效果。
4、特殊符号
我们只需要记住“  ;”（牛逼SP）这一个就可以了。
5
第5章 列表
1、HTML列表
3种列表
标签 语义 说明
ol ordered list 有序列表
ul unordered list 无序列表
dl definition list 定义列表
对于有序列表和无序列表，我们可以使用type属性来定义列表项符号。此外，定义列表用得较少，了解一下即可。
2、HTML语义化
学习HTML目的在于：在需要的地方，使用正确的标签。（语义化）
HTML语义化的作用有2个：① 提供可读性和可维护性；② 利于搜索引擎优化（SEO）。
6
第6章 表格
1、HTML表格
表格标签
标签 说明
table 表格
caption 标题
thead 表头（语义划分）
tbody 表身（语义划分）
tfoot 表脚（语义划分）
tr 行
th 表头单元格
td 表行单元格
语法：
< table>
< caption>表格标题< /caption>
< thead>
< tr>
< th>表头单元格1< /th>
< th>表头单元格2< /th>
< /tr>
< /thead>
< tbody>
< tr>
< td>表行单元格1< /td>
< td>表行单元格2< /td>
< /tr>
< tr>
< td>表行单元格3< /td>
< td>表行单元格4< /td>
< /tr>
< /tbody>
< tfoot>
< tr>
< td>表行单元格5< /td>
< td>表行单元格6< /td>
< /tr>
< /tfoot>
< /table>
2、合并行与合并列
在HTML中，我们可以使用rowspan属性来合并行，也可以使用colspan属性来合并列。
7
第7章 图片
1、图片标签
在HTML中，我们使用img标签来显示一张图片。
语法：
< img src=”图片路径” alt=”图片描述(供搜索引擎看)” title=”图片描述(供用户看)” />
说明：
对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。
2、图片路径
图片路径分为2种，一种是“绝对路径”，另外一种是“相对路径”。其中我们需要注意一下2点。
（1）绝对路径是图片在你电脑中的位置，而相对路径是图片相对当前页面的位置。
（2）在实际开发中，使用的都是相对路径，极少会使用绝对路径（除非是站外路径或者后端路径）。
3、图片格式
在网页中，图片格式有2种：一种是“位图”，另外一种是“矢量图”。网页中的图片绝大多数是位图，而不是矢量图，因此我们只需要掌握位图即可。
在实际开发中，最常见的的位图格式有3种：jpg、png、gif，它们之间的区别如下。
（1）jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。
（2）png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，但不适合存储颜色丰富的图片。
（3）gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ发的动图都是gif格式的。
8
第8章 超链接
1、a标签
在HTML中，我们可以使用a标签来实现超链接。
语法：
< a href=”链接地址” target=”_blank”>文字或图片< /a>
说明：
对于target属性，我们只需要掌握“_blank”这一个就可以了。
2、链接类型
超链接可以分为2种，一种是“外部链接”，另外一种是“内部链接”。其中锚点链接是一种特殊的内部链接。
9
第9章 表单
我们常说的表单，指的是文本框、按钮、单选框、复选框、下拉菜单等的统称。在HTML中，所有表单元素都必须放在form标签中。
表单标签共有4个：input、textarea、select和option。其中，select和option是配合一起使用的。
几乎所有的表单标签都有一个value属性，这个属性一般都是为了方便JavaScript或者服务器操作数据用的。
1、input标签
在HTML中，大部分表单都是使用input标签来实现的，其中input属性取值如下表所示：
type属性取值
属性值 浏览器效果 说明
text
单行文本框
password
密码文本框
radio
单选框
checkbox
多选框
button或submit或reset
按钮
file
文件上传
2、textarea标签
HTML有3种文本框：单行文本框、密码文本框、多行文本框。其中，单行文本框和密码文本框使用的都是input标签，多行文本框使用的是textarea标签。
语法：
< textarea>< /textarea>
3、select标签和option标签
在HTML中，下拉列表由select和option这2个标签一起配合使用来实现的。
语法：
< select>
< option>选项内容< /option>
……
< option>选项内容< /option>
< /select>
__END__
文章出处：HTML学习笔记
作者签名：简单地活着, 肆意又精彩.
关于主题：Hexo - Live For Yourself
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处