How to learn HTML

前言

本人垃圾，害人无数。近来入前端坑的同学不少，特此奉上一篇HTML学习分享文章，望批评指正，不胜感激。

零、语言介绍及运行环境

1 编译型语言&解析型语言

• 编译型语言：如C 语言或者Java等其他编译型语言来说，编译生成了目标文件，而这个目标文件是针对特定的 CPU 体系的（不同CPU之间无法共同使用）。通常情况下，编译型语言的执行效率会比解析型语言高。
• 解析型语言：如HTML、CSS、JavaScript等解析型语言，同样也可能存在某种编译过程，但他们编译生成的通常是一种平台无关的中间代码，这种代码一般不是针对特定的 CPU 平台，他们是在运行过程中才被翻译成目标 CPU 指令的（拥有跨平台的优势）。

2 HTML语言介绍

• HTML全称“HyperText Markup Language”，即超文本标记语言。标记语言最大的特点便是，什么样的标记对应什么样的运行效果（通过浏览器引擎进行解析）。如下示例代码：

    
    


    
This is a heading.

运行效果图

• 如上效果图，标签即对应浏览器的标题属性；
  即对应浏览器正文部分的一级标题。
• 总结：通过以上示例，总结出一点，学习文本标记语言就像背单词，只需记住特定标签对应什么样的效果即可。
• 在此推荐 w3school，内有HTML标签及属性参考手册，可查看对应标签属性的效果，且有在线编辑器，对初学者特别友好。（与w3school类似的网站还有 菜鸟教程）

一、文档结构

• HTML在前端三剑客（HTML、CSS、JavaScript）里边主要扮演管理页面结构的角色。基本的文档结构如下代码所示：

    
        
        
    
    
        
This is a heading.
        
This is a paragraph.
        
        

            

                
1-1
                
1-2
                
1-3
            
            

                
2-1
                
2-2
                
2-3
            
        
    

运行效果图

• 整个html文件包含在标签里面，向浏览器声明此标签内为html代码。
• 标签用于定义文档的头部，它是所有头部元素的容器。 元素中可以引用脚本（）、引用样式表（）、提供元信息（）、描述文档的各种属性（如文档的标题 ，在Web中的位置 及与其他文档之间的关系等）。然后，绝大多数文档头部包含的数据不会真正作为内容呈现给读者。
• 标签定义文档的主体，包含文档的所有内容。比如文本、链接、图片、输入框、表格、列表等。

二、标签（tag）

• 一般的元素分为三部分，即开始标签 ，内容 coding here ... 和结束标签 ，如下图所示：

HTML元素剖析图

• 当然，也存在没有结束标签的空元素，比如
， ， 等。

• 如上所说，对应的标签有对应的运行效果，所以学习HTML中只需记住对应的标签对应的效果。此外，在HTML中，标签的嵌套是很常见的。比如常见的

  标签：

            
                1-1
                1-2
                1-3
            
            
                2-1
                2-2
                2-3
            

• 或者，比如在文本标签
  中嵌入跳转链接标签 ：

You can read more here

运行效果图

三、属性（attribute）

• 起始标签可能包含一些信息，这些信息叫做元素的特性，即属性。属性的语法为常见的哈希结构 name = "value" ，如下图所示：

结构示意图

• 以上 href 属性名指定链接地址，后边的属性值 http://www.baidu.com 即具体的链接地址。

  red paragraph

  指定该段落内容的颜色属性为红色。

四、DOM树

• DOM是“document object model”的简称，表示和操作HTML和XML文档内容的基础API，下面通过以下代码的DOM树结构图进行分析：

  
    
  
  
    My Link
    
My header
  

DOM树结构图

• 图中包含3种不同类型的节点。树形的根部是Document节点，它代表整个文档。代表HTML元素的节点是Element节点，代表文本的节点是Text节点。
• 其他与树结构相关的理论基本适用于DOM树，如子节点、父节点等。

五、编辑器

• Sublime Text3 在功能和速度方面良好 ，在界面美观上不输给任何其他编辑器，扩展包安装，自定制配置和快捷键等最实用的技巧也方便了开发。
• 具体使用方法可参考 慕课网教程 。

六、调试工具

• Chrome浏览器按F12会出现如下界面：

Elements模块

• 在Elements模块会出现源代码，且会根据操作实时更新。鼠标放在特定代码块，浏览器主体内容对应的地方会有标识；也可以点击左上角的“箭头”图标再点击对应的浏览器主体内容，Elements模块会显示对应代码块。
• 左上角的手机图标可以看到网页在移动端的运行效果，方便做兼容性调试

七、推荐学习资料

• 工具书：《HTML5权威指南》