前端体系梳理

entner 发布于2019-08-02 10:23 / 1424人阅读

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

一、开篇

很久以前我们对于前端的理解就是开发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标签的变化

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
        
    
    
    
        有序列表
        采集信息：
        
            姓名
            年龄
            
                主修课成绩
                
                    数学
                    英语
                    计算机
                
            
        
    
    
    
        自定义列表
        电影后来的我们相关内容
        
            导演：
            刘若英
            演员：
            周冬雨
            井柏然

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，方便搜索引擎或其他网站获取相关的格式化信息

2.5 web无障碍
参考：
WCAG(web content Accessibility Guidelines)2.0
ARIA(Accessible Rich Internet Applications)

提升无障碍的方式：

设置img的alt属性

noscript

input与label对应

图形验证码与语音验证码

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

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

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

专线服务服务器托管梳理多云管理平台调研,流程梳理运营体系认证体系

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52320.html

前端体系梳理

摘要：交互元素用于与用户交互的元素元数据元素被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素。一、开篇很久以前我们对于前端的理解就是开发web网页的，并且在PC上的浏览器进行展示；后来，随着响应式布局和智能手机的兴起，web网页更多的出现在了移动端的浏览器中；再后来，随着技术的不断发展，web页面逐渐出现在了PC、Android、Iphone的applicati...

widuu 2019-08-22 17:04 评论0 收藏0
前端体系梳理

摘要：交互元素用于与用户交互的元素元数据元素被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素。一、开篇很久以前我们对于前端的理解就是开发web网页的，并且在PC上的浏览器进行展示；后来，随着响应式布局和智能手机的兴起，web网页更多的出现在了移动端的浏览器中；再后来，随着技术的不断发展，web页面逐渐出现在了PC、Android、Iphone的applicati...

DataPipeline 2019-08-29 15:19 评论0 收藏0
前端体系梳理

摘要：交互元素用于与用户交互的元素元数据元素被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素。一、开篇很久以前我们对于前端的理解就是开发web网页的，并且在PC上的浏览器进行展示；后来，随着响应式布局和智能手机的兴起，web网页更多的出现在了移动端的浏览器中；再后来，随着技术的不断发展，web页面逐渐出现在了PC、Android、Iphone的applicati...

lscho 2019-08-05 13:47 评论0 收藏0
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

摘要：前言见解有限，如有描述不当之处，请帮忙指出，如有错误，会及时修正。为什么要梳理这篇文章最近恰好被问到这方面的问题，尝试整理后发现，这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目。前言见解有限，如有描述不当之处，请帮忙指出，如有错误，会及时修正。为什么要梳理这篇文章？最近恰好被问到这方面的问题，尝试整理后发现，这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目...

kel 2019-08-22 15:18 评论0 收藏0
前端开发收集 - 收藏集 - 掘金

摘要：责编现代化的方式开发一个图片上传工具前端掘金对于图片上传，大家一定不陌生。之深入事件机制前端掘金事件绑定的方式原生的事件绑定方式有几种想必有很多朋友说种目前，在本人目前的研究中，只有两种半两种半还有半种的且听我道来。 Ajax 与数据传输 - 前端 - 掘金背景在没有ajax之前，前端与后台传数据都是靠表单传输，使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面，用...

ygyooo 2019-08-20 17:15 评论0 收藏0