适合入门者看的HTML

前端技术近年来迅猛发展，各种框架、语言、工具层出不穷，让我等刚刚接触前端的小白深深的感觉到以自身有限的精力能否追赶上技术的发展。

使用C++好几年了，所使用的库无非是Qt库、STL等，编程IDE也不过是QtCreator、Visual Studio之类的，而语言更是只有C++一种；而Web开发则完全不同，需要学习的语言有html、css、javascript，库、框架则多了去了，可以说和C++相比差了一个数量级，更别说有各种自动化工具了；

面对如此大体量的技能库，我不止一次地感到迷茫；但我相信，技术的初衷是简单的，所以，技术的核心也应该不会复杂，所以，记录下那些真正关键的、核心的内容，才能达到事半功倍的效果，如果刚开始，就被各种细节特性所牵绊，不仅学的痛苦，也许会学到怀疑人生。

比如刚刚看makedown新手指南,比我以前看的教程简单很多，总结来说就是以下几点：

• # 用于标记标题
  
  
• - 用于标记无序列表；
  n. 用于标记有序列表，n为1、2、... 的数字；
  
  
• [文字说明](超链接) 用于表示普通链接;
  
  ![](图片url) 用于链接图片；
  
  
• >用于表示引用；
  
  
• *XXX* 使XXX斜体显示
  
  **XXX** 使XXX粗体显示；
  
  
• ```代码引用```
  
  
• 所有以上所用到的符号如果希望原码显示，直接在其前面添加反斜杠 \ ;

其实，掌握了上述语法，能够编写大多数的文档，根据二八法则，大概前端中80%的技能应该是不常用的，对我们构建整个Web开发技能树影响不大的，那为何要让自己纠结于80%的“鸡肋”功能之上呢，我们完全可以在完成技能树的构建之后，慢慢去消化那80%的知识体系；

html的作用

在学一个技能之前，我们要明白为什么需要这个技能，它与其上下游技能之间的关系是什么，没有这个技能我们该使用这样的手段来替代该技能，该技能与其相似技能的关系等问题；

html用于页面界面的设计；

html结合css、javascript用造房子进行比喻，相当于html是最基础的一个个房间，以及房间内的物品；css相当于这些房间和物品的装饰，通过涂上颜色、修改尺寸，让它们变得更加美观；javascript相当于为这些物品实现智能化，你通过按一个按钮，就能实现让房间的颜色改变，或者为您拉开窗帘等智能功能；

html文件的组成

html文件主要由两大块，head和body，head用于引入css、js文件，定义编码方式、语言、网页过期时间、刷新频率等等。

东西够多吧，其实对于初学者来说，很多都是现阶段不需要掌握的，其实需要记住的就两个。一个是<i><item> title<item></i>，用于设置网页名称，一个是<i><meta charset='utf-8'></i>，用于保证你的页面不显示乱码，其他的内容，等以后真正用到再学也不迟；

鄙人认为，学习的知识是拿来用的，只用经常用的知识，才能深深地嵌入脑海中，也才是对你来说有用的知识，而有的知识，比如github的使用、linux命令行的各种命令等，如果你不用，或者一个月用个一次，感觉学习效果将大大大地打折扣；

html标签的分类

出处：HTML文档标签

1. HTML文档标签

• <!DOCTYPE> : 定义文档类型；
  
  
• html : 定义HTML文档；
  
  
• head : 定义文档头部；主要包括以下内容：
  
  1). meta：定义页面的元信息，如关键字、描述、刷新频率、过期时间；
  
  2). base：定义基url，eg. <base href = "http://www.google.com" >则网页中所有的相对url都以该base url为起始位置，#即表示该url；
  
  3). title：文档标题；
  
  4). link：外部资源链接；
  
  5). style：内部样式；
  
  
• body :定义文档主体
  
  1). script ： 定义客户端脚本；如Javascript；
  
  2). noscript : noscript标签内填写的是普通文本，当script中的代码不起作用时，则noscript中的文本将被显示；
  
  其实script并不一定放置在body中，例如对外部js文件的引用就通常放在head中；

2.布局标签&语义化

• div :块级元素，作为容器，可通过css为其修饰；
• span :行内元素，可作为容器；
• header :页眉，语义化的div；
• hgroup :定义标题组；
• nav :定义导航，语义化的div；
• article :文章，语义化的div；
• section :区段，语义化的div；
• aside :与article相关，但不属于article的内容，语义化的div；
• footer :页脚，语义化的div；
• details :其中包含summary，表示可见部分；其他元素在details中不可见；目前仅chrome、safari支持；
• summary :作为details的可见子元素；
• dialog :定义对话框或窗口；
  
  
  
  语义化的div是指，在html5中，为了使整个页面的逻辑更加清晰，而将div定义为多个类型，但对页面的表现形式没有影响；

3. 表格标签

• table :定义表格；
• caption :定义表格名，显示在表格上方正中间；
• thead :定义表格头，在该标签内的元素将被放在表格首行；
• tr :定义一行；
• th :定义表头，字体将被加粗；
• tbody :定义主体；
• td :定义单元格数据；
• tfoot :定义页脚，在该标签内的元素将被放在表格最底行；

4.表单标签

• form :表单定义;
  
  <p>对表单进行提交时，浏览器将收集对应表单中存在name的输入型表单控件，name和value值形成name/value键值对提交给后端，其中没有name的控件将不被提交；若存在多个submit按钮，只有被点击按钮的name/value对会被提交；</p><p>如果是以GET方式提交，键值对将被放在URL中，如果以POST方式提交，键值对将被放在http数据包中；例如“中国科学”4个字对应的url为:
  “%E4%B8%AD%E5%9B%BD%E7%A7%91%E5%AD%A6”
  则其无论通过get或post传送，都需要传送的字节数为36byte，故通过表单提交汉字的效率非常低；
  
  
  </p>
• input :定义输入域；其type有以下几种：
  
  1). text: 普通的单行文本框；
  2). password: 密码域；
  3). button: 普通按钮；
  4). checkbox: 多选框；
  5). radio: 单选框；多个相同name的单元框为一组，一组中只有一个被选中；
• textarea :多行文本框；
• label :标签，其for属性指定label所绑定的控件id号，当点击该label时，相当于点击了指定id的控件；
• fieldset :将多个元素组合在一个框中，框的名称通过legend标签指定，属于装饰类控件；
• select :下拉列表框，其中的option标签用于指定下拉列表的项；
• option :下拉列表的项；
• optgroup :用于对下拉列表框的选项进行归类，属于装饰类控件；
• button :按钮；
• keygen :定义表单的密钥对生成器字段；
• output :定义不同类型的输出；
  
  
  

注：<input type='button'>与<button>的区别：

1. input是个自闭合标签，而button是个闭合标签；闭合标签可以作为容器放置其他页面元素，而自闭合标签不可以；
   
   
2. input类型的button，其value属性就是要显示的内容，而button实现了value属性和显示内容的分离；
   
   
3. input的按钮可以有button和submit两种type，而button可以有的reset和submit两种type；
   
   
4. <input type="submit" value="Key1" name="submit1" >和<button type="submit" value="Key1" name="submit1" > Key1 </button>是等效的；
   
   

注：元素的id属性和name属性的区别

1. 通常来说name属性与后台相关，http协议封装的键值对信息中，键通常就是对应表单元素的name；id属性与前端相关，css通过id进行精确定位,javascript代码也可以通过id操作控件；
   
   
2. 多个控件的name属性可以相同，而id号不允许相同，经过测试，在chrome浏览器上，多个相同id的元素对css的渲染没有影响,对于javascript代码不会报错，但只对第一个该id的控件进行操作；

5. 列表标签

• ul :无序列表，Unordered List；
• ol :有序列表，Ordered List；
• li :列表项，List Item；
• dl :定义列表，Define List，其中每一条定义都由dt和dd组成；
• dt :定义项名称，Define iTem；
• dd :定义解释，Define Description；

6. 图像标签&连接标签

• img :定义图片，alt属性为图片资源不存在时显示的文字内容；
• a :定义超链接,取anchor(锚)的首字母；
• map :定义一幅图片的热区，使该热区变得可点击，鼠标放在图片热区时，将变为手形；img与map的绑定通过img的usemap属性完成，热区通过map中的area指定；
• area :指定img中的热区及对应的点击动作；
• figure :定义媒介内容的分组；
• figcaption :定义figure元素的标题；

7. 音频&视频

• audio :引入音频内容；
• video :引入视频内容；
• source :用于audio或video中，为音频/视频提供多种格式的源，浏览器工具source提供的type属性自动选择一个可以解析的源；
• track :定义用在媒体播放器中的文本轨道；

8. 框架标签

• iframe :内联框架；被称为“浏览器中的浏览器”，用于在页面中显示另外一个页面；

9. 格式标签

1. 文章标签

• h1-h6 :定义HTML标题(headline)；
• p :定义HTML段落(paragraph)；
• br :换行，即打断一行(break row)；
• hr :水平分隔线(horizontal rule)；
• bdo :指定该标签内文字显示的顺序，通过dir属性进行指定，默认"ltr"表示从左往右显示，“rtl”表示从右往左显示，bdo是(Bi-Direction Override)双向覆盖；
• pre :定义预格式文本(previous)，其中的空格和换行将被保留；
• abbr :缩写(abbreviation)，指定title属性将会出现下划线效果；
• address :定义地址信息，标签内的文本将被斜体化、加粗；
• ins :表示新插入的内容(insert)，在内容下有下划线；
• del :表示删除的内容(delete)，文本上出现删除线；
• time :表示时间，没有具体的显示效果，而是为了实现内容的语义化；

2. 短语元素标签

• em :强调(emphasize)，以斜体方式显示文本，但比i标签多了”强调“的语义；
• strong :标识重要的文本，以粗体方式显示，但比b标签多了”重要”的语义；
• dfn :define instance，可标记对特殊术语或短语的定义，斜体形式显示；
• code :说明标签内的文字为代码，通常放在pre标签中以保持代码的格式；
• samp :sample样本，表示一小段代码样本；
• var :variant变量；
• sup :supscript，上标(写在上面的)，
• sub :subscript，脚注(写在下面的)；
• cite :表示标签内是引用的内容，通常为文章、书籍、论文的标题；
• blockquote :块引用，从其他地方引入一段话；
• q :quote，引用，从其他地方引入一句话；

3. 字体样式标签

• i :italic斜体，无语义化；
• b :bold醒目的，对文本加粗，无语义化；
• big :放大字体,可嵌套使用，对文本多次放大，直到达到上限；
• small :缩小字体，可嵌套使用，对文本多次缩小，直到达到下限；
• mark :需要突出显示的文本，会添加背景色，像是用标记笔涂过一样；

10. 其他

• canvas :图形容器，可通过javascript进行图形绘制；
• meter :计量条，可以设置min属性，图形化显示某范围内的某一个值；
• progress :进度条，无min属性，从0开始，表示某个处理过程的进度，比如文件下载进度；

总结

html的语法非常简单，元素标签也不是很多，所以，把所有的标签都罗列了一遍，其实真正经常用的也就一小部分；可以先把所有标签自己试一遍，观察出现的效果，以后真正用到再去查即可；