html技术分类,前端体系梳理

一、开篇

很久以前我们对于前端的理解就是开发web网页的，并且在PC上的浏览器进行展示；后来，随着响应式布局和智能手机的兴起，web网页更多的出现在了移动端的浏览器中；再后来，随着技术的不断发展，web页面逐渐出现在了PC、Android、Iphone的application(APP)中。从上面的发展可以看出，前端涉及的面越来越广，未来前端技术也会越来越重要，前端工程师们加油哇！

下面我将一点点完善整个前端结构，由于无法一次写完，所以这篇文章会不断更新，如果大家觉得还可以就先关注一波，以便及时查看更新内容。

二、什么是前端

1、前端主要包括下面三个部分：

1.1 web标准技术

HTML、CSS、JavaScript、SVG、HTTP、WebGL等

1.2 运行环境

PC端浏览器、移动端浏览器、PC端桌面应用、移动端桌面应用等

1.3 界面与交互

界面的设计、用户的交互设计等问题，比如需要考虑web无障碍性(e.g:盲人或者色盲无法正常浏览页面，此时应该怎样进行界面和交互的设计以满足该类人群的需要呢？)

2、前端开发时需要考虑的问题

三、HTML

什么是html呢？html就是使用标签来描述页面的内容和结构。

1、HTML5的变化

目前最新的HTML标准是html5，那html5相比以前的标准有哪些变化呢？

1.1 doctype声明更加简洁

1.1.1、Doctype的作用

a、 指定文档使用的标准和版本

html到现在已经经历了很多个版本，最新的是HTML5，声明Doctype可以指定该文档遵循的标准。

b、 浏览器根据Doctype决定使用哪种渲染模式

浏览器的渲染模式分为怪异模式、标准模式、部分怪异(准标准)模式，在不同模式下浏览器对于同一个文档的渲染方式是不同的。最突出的一个影响就是在标准模式下和怪异模式下的盒模型不同。上面的是标准盒模型，下面的是怪异模式下的盒模型。

1.1.2 如何声明doctype

1.2 meta标签的变化

content="script-src 'self'">

1.3 新增了许多语义化的标签和属性，例如：标签有header、nav、article、main、footer等，属性有readonly、disabled、hidden等。

1.4 去掉纯展示性标签，例如：stricke、font、s等标签。

1.5 增加了很多富应用化的东西，例如canvas、video、audio、离线、本地存储、拖拽等。

2、HTML语义化

2.1 什么是语义化

HTML中的元素、属性及属性值都拥有某些含义。如标签就表示导航相关内容、标签表示盛放文章相关内容。

2.2 为什么要语义化

2.2.1 为开发人员提供可读性、可维护性

2.2.2 有利于搜索引擎优化

2.2.3 提升无障碍性，便于读屏软件对页面中的内容进行智能化的解析。

2.3 HTML标签分类

HTML标签分类的很大一个作用就是可以很好的确定嵌套规则，比如在p标签中无法嵌入div标签。

流式元素：在应用程序和文档的主体部分中使用的大部分元素

标题元素：

、

、

、

、

、

、

章节元素：、、、

段落元素：文档中的文本、标记段落级文本的元素

嵌入元素：引用资源插入到文档中其他元素。

交互元素：用于与用户交互的元素

元数据元素：被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素。

上面是对标签的分类，下面讲下我们常用的一些标签及其属性：

1、h1~h6

页面中最好将最重要的内容，一般一个页面中只有一个h1标题，即将大的标题设置为h1，并且不要试图设置多个h1，这样不利于SEO搜索引擎优化。针对页面中的包含的多篇文章或者章节，可以根据内容层次使用h2~h6级标题。

2、hr标签

表示段落级别的话题切换，页面会呈现一条水平线

3、列表标签

列表标签包括了：

无序列表标签：ul、li

有序列表标签：ol、li

自定义列表标签：dl、dt、dd

无序列表

My favourite fruits are：

• apple
• banana
• watermallon

---

有序列表

采集信息：

1. 姓名
2. 年龄

3. 主修课成绩

   1. 数学
   2. 英语
   3. 计算机

---

自定义列表

电影后来的我们相关内容

导演：

刘若英

演员：

周冬雨

井柏然

3、内容结构相关标签

尽量使用语义化的标签，避免使用div和span标签。

4、a标签

a、href省略问题

在a标签的href属性中可省略协议、省略协议和host，浏览器在解析时会补全为完整的的URL，补全的协议和host与当前页面的协议和host一致。

b、相对、绝对路径

省略协议和host后，链接的地址可以使用绝对路径和相对路径：

绝对路径：从根目录开始查找和访问

相对路径：相对于当前页面所在目录进行查找和访问

推荐省略了scheme和host的绝对路径

c、锚点

idValue就是我们要跳转到的标签的id值

d、target属性

target的属性值可以为_self、_blank、_parent、_top或者自定义的名字，当定义自定义的名字时，首次访问时浏览器会打开一个新的窗口，并命名为我们设置的自定义的名字。下次再访问a链接时，凡是target值为该名字的，都在该窗口打开。

idValue就是我们要跳转到的标签的id值

e、alt属性

alt属性必须要有，当图片加载失败时作为替代文字出现，同时也有利于提升无障碍性(为盲人设计的读屏软件获取信息)

f、width和height属性

图片是一个异步加载的，所以有可能页面其他元素已经加载和渲染完成了，图片才加载完成，此时页面会重绘，会出现跳动效果，所以为了防止页面在加载过程中的抖动，可以预先定义好图片的宽度和高度。

5、引用标签

引用标签包括三类，分别是blockquoto、cite和q

blockquoto引用相关的内容，并且可以设置其引用来源；cite标签包含来源；q标签包含引用的内容。

三种遍历方法，很好记，什么时候访问根节点就叫什么方法

读了这么多书，还是觉得小王子才是我的最爱

我昨天见过李明，他说他今天不参加你的生日会了。

2.4 HTML扩展性

2.4.1 data-* 和dataset API

通过data-可以自定义属性，同时可以通过dataset.获取属性值

• 小米
• 小花
• 小明

2.4.2 Link标签

2.4.3 JSON—LD

JSON-LD 是 JavaScript Object Notation for Linked Data的缩写，是一种基于JSON表示和传输互联数据(Linked Data)的方法，其实就是用我们熟悉的JSON物件{}把LD包起来。

使用结构化数据的目的是为了能够构建一个更加语义化的网络。语义化网络由哪些好处呢？a、搜索引擎可以获取更多网页相关资料，更有效的整合相关服务，以便开发更多的应用；b、为website提高SEO，带来更多精准流量；c、用户可以获得更优质的体验，搜索的结果有更佳的深度与广度。

可以在页面中保存一段独立的数据JSON-LD，方便搜索引擎或其他网站获取相关的格式化信息

{

"@context": "http://schema.org",

"@type": "Person",

"name": "John Doe",

"jobTitle": "Graduate research assistant",

"affiliation": "University of Dreams",

"additionalName": "Johnny",

"url": "http://www.example.com",

"address": {

"@type": "PostalAddress",

"streetAddress": "1234 Peach Drive",

"addressLocality": "Wonderland",

"addressRegion": "Georgia"

}

}

2.5 web无障碍

参考：

WCAG(web content Accessibility Guidelines)2.0

ARIA(Accessible Rich Internet Applications)

提升无障碍的方式：

设置img的alt属性

noscript

input与label对应

图形验证码与语音验证码

文字和背景有足够的对比度

键盘可操作(e.g:使用tab键进行页面内容选中切换)

未完待续、持续更新....................