前端与HTML介绍

1 HTML 语言简介

HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。

HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。2014 年，HTML 5 发布，这是目前正在使用的版本。

浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页与用户的互动行为。

下面就是一个简单网页的 HTML 源码。

<!DOCTYPE html>
<html lang="en"> 
    <head>
    <meta charset="UTF-8" />
    <title>网页标题</title> 
    </head> 
   <body> 
     <p>Hello World</p> 
   </body>
 </html>

<!doctype html>标记了当前在使用的HTML文件是什么样的HTML版本，浏览器会根据这个去决定使用哪一种渲染模式。

浏览器拿到HTML代码后，回解析得到一个DOM树

1.2 HTML 语法

HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"

DOCTYPE声明不区分大小写

指定字符集编码 meat charset="UTF-8"

可省略标记的元素不允许写结束标记的元素：<br>,<col>,<embed>,<hr>,<img>,<input>,<link>,<tr>,<td>,<th>;

可省略结束标记的元素：<li>,<dt>,<dd>,<option>,<colgroup>,<thead>,<tbody>,<tfoot>,<tr>,<td>,<th>;

可省略全部全部标记的元素:<html>,<head>,<body>,<colgroup>,<tbody>.

省略引号

属性值可以使用双引号，也可以使用单引号

2 语义化

HTML结构语义化，是近几年才提出来的，对比之前的 HTML 结构，大多是一堆没有语义的标签。用的最多的就是 DIV+CSS，为了改变这种现状，开发者们和官方提出了 HTML结构语义化的概念，并且在 HTML5 添加了很多语义化标签。

2.1 语义化的作用

(1) 页面结构清晰

去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。

(2) 支持更多设备

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。

(3) 利于SEO优化

和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

(4) 便于团队开发和维护

在团队中大家都遵循W3C标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

2.2 HTML语义化的方法

（1）根据文档上下文结构合理的选用最适合表达当前语义的标签；

（2）尽可少使用无语义的标签<div>和 <span>；

（3）不要使用带有样式的标签，比如：<b> 、 <u> 、 <font> 等，使用 CSS 设置；

（4）标题标签的使用应该根据重要性逐级递减，没有断层，并且一个页面只能有一个 <h1>

（5）提高关键词密度，如图像的替代文本 alt，提示文本 title；

（6）正确使用内容容器，比如段落<p>，列表 <ul>, <ol>, <li>, <dl>, <dt>, <dd>;

（7）需要强调的文本，可以使用 <strong> 或 <em> 标签（浏览器默认样式，能用 CSS 设置就不用）， <strong> 默认样式是加粗（不用 <b>），<em> 是斜体（不用 <i>）；

（8）表格注意使用，标题 <caption>，表头<thead>，表格主体（正文）<tbody>，表注（页脚）<tfoot>。<tr> 定义表格行，<th> 定义表头，<td> 定义表格单元。

（9）表单域使用<fieldset>标签，并且<legend> 标签为 <fieldset> 定义标题；

（10）每个<input>标签对应的说明文本都需要使用 <label> 标签，通过为 <input> 设置 id 属性，并且在 <lable> 标签中设置 for=id 使说明文本和对应的 <input> 关联。

个人感受

今天是青训营第二天，虽然HTML入门较容易，可以靠自主查阅文档初步掌握，但是一定要勤加练习。第一次认真记笔记，发现自己笔记能力还是有待提高，相信只要坚持不懈，一定会有所收获^^

前端与HTML ｜ 青训营