How to learn HTML
2016-09-25 本文已影响908人
唐紫依
前言
本人垃圾，害人无数。近来入前端坑的同学不少，特此奉上一篇HTML学习分享文章，望批评指正，不胜感激。
零、语言介绍及运行环境
1 编译型语言&解析型语言
- 编译型语言：如C 语言或者Java等其他编译型语言来说，编译生成了目标文件，而这个目标文件是针对特定的 CPU 体系的（不同CPU之间无法共同使用）。通常情况下，编译型语言的执行效率会比解析型语言高。
- 解析型语言：如HTML、CSS、JavaScript等解析型语言，同样也可能存在某种编译过程，但他们编译生成的通常是一种平台无关的中间代码，这种代码一般不是针对特定的 CPU 平台，他们是在运行过程中才被翻译成目标 CPU 指令的（拥有跨平台的优势）。
2 HTML语言介绍
- HTML全称“HyperText Markup Language”，即超文本标记语言。标记语言最大的特点便是，什么样的标记对应什么样的运行效果（通过浏览器引擎进行解析）。如下示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h1>This is a heading.</h1>
</body>
</html>
运行效果图
- 如上效果图，
<title></title>标签即对应浏览器的标题属性；<h1></h1>即对应浏览器正文部分的一级标题。 - 总结：通过以上示例，总结出一点，学习文本标记语言就像背单词，只需记住特定标签对应什么样的效果即可。
- 在此推荐 w3school，内有HTML标签及属性参考手册，可查看对应标签属性的效果，且有在线编辑器，对初学者特别友好。（与w3school类似的网站还有 菜鸟教程）
一、文档结构
- HTML在前端三剑客（HTML、CSS、JavaScript）里边主要扮演管理页面结构的角色。基本的文档结构如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
<!-- 这是一个表格 -->
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
</body>
</html>
运行效果图
- 整个html文件包含在
<html></html>标签里面，向浏览器声明此标签内为html代码。 -
<head></head>标签用于定义文档的头部，它是所有头部元素的容器。<head></head>元素中可以引用脚本（<script></script>）、引用样式表（<link />）、提供元信息（<meta />）、描述文档的各种属性（如文档的标题<title></title>，在Web中的位置<base />及与其他文档之间的关系等）。然后，绝大多数文档头部包含的数据不会真正作为内容呈现给读者。 -
<body></body>标签定义文档的主体，包含文档的所有内容。比如文本、链接、图片、输入框、表格、列表等。
二、标签（tag）
- 一般的元素分为三部分，即开始标签
<code>，内容coding here ...和结束标签</code>，如下图所示：
HTML元素剖析图
-
当然，也存在没有结束标签的空元素，比如
<br/>，<img src="" />，<input type="" />等。 -
如上所说，对应的标签有对应的运行效果，所以学习HTML中只需记住对应的标签对应的效果。此外，在HTML中，标签的嵌套是很常见的。比如常见的
<table></table>标签：
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
- 或者，比如在文本标签
<p></p>中嵌入跳转链接标签<a></a>：
<p>You can read more <a href="http://www.baidu.com">here</a></p>
运行效果图
三、属性（attribute）
- 起始标签可能包含一些信息，这些信息叫做元素的特性，即属性。属性的语法为常见的哈希结构
name = "value"，如下图所示：
结构示意图
- 以上
href属性名指定链接地址，后边的属性值http://www.baidu.com即具体的链接地址。<p color="red"> red paragraph </p>指定该段落内容的颜色属性为红色。
四、DOM树
- DOM是“document object model”的简称，表示和操作HTML和XML文档内容的基础API，下面通过以下代码的DOM树结构图进行分析：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My title</title>
</head>
<body>
<a href="">My Link</a>
<h1>My header</h1>
</body>
</html>
DOM树结构图
- 图中包含3种不同类型的节点。树形的根部是Document节点，它代表整个文档。代表HTML元素的节点是Element节点，代表文本的节点是Text节点。
- 其他与树结构相关的理论基本适用于DOM树，如子节点、父节点等。
五、编辑器
- Sublime Text3 在功能和速度方面良好 ，在界面美观上不输给任何其他编辑器，扩展包安装，自定制配置和快捷键等最实用的技巧也方便了开发。
- 具体使用方法可参考 慕课网教程 。
六、调试工具
- Chrome浏览器按F12会出现如下界面：
Elements模块
- 在Elements模块会出现源代码，且会根据操作实时更新。鼠标放在特定代码块，浏览器主体内容对应的地方会有标识；也可以点击左上角的“箭头”图标再点击对应的浏览器主体内容，Elements模块会显示对应代码块。
- 左上角的手机图标可以看到网页在移动端的运行效果，方便做兼容性调试
七、推荐学习资料
- 工具书：《HTML5权威指南》
