前端体系梳理
一、开篇
很久以前我们对于前端的理解就是开发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
<!DOCTYPE html>
1.2 meta标签的变化
<!-- 编码 --> <meta charset="UTF-8"> <!-- 指定HTTP Header --> <meta http-equiv="Content-Security-Policy" content="script-src 'self'"> <!-- SEO 搜索引擎优化 --> <meta name="keywords" content="关键词"> <meta name="description" content="页面介绍"> <!-- 移动设备Viewport --> <meta name="viewport" content="initial-scale=1"> <!-- 关闭iOS电话号码自动识别 --> <meta name="format-detection" content="telphone=no"> <!-- 360浏览器指定内核 --> <meta name="renderer" content="webkit"> <!-- 指定IE渲染模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge">
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中的元素、属性及属性值都拥有某些含义。如<nav>标签就表示导航相关内容、<article>标签表示盛放文章相关内容。
2.2 为什么要语义化
2.2.1 为开发人员提供可读性、可维护性
2.2.2 有利于搜索引擎优化
2.2.3 提升无障碍性,便于读屏软件对页面中的内容进行智能化的解析。
2.3 HTML标签分类
HTML标签分类的很大一个作用就是可以很好的确定嵌套规则,比如在p标签中无法嵌入div标签。
- 流式元素:在应用程序和文档的主体部分中使用的大部分元素
- 标题元素:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hgroup>
- 章节元素:<article>、<aside>、<nav>、<section>
- 段落元素:文档中的文本、标记段落级文本的元素
- 嵌入元素:引用资源插入到文档中其他元素。
- 交互元素:用于与用户交互的元素
- 元数据元素:被用于说明其他内容的表现或行为,或者在当前文档和其他文档之间建立联系的元素。
上面是对标签的分类,下面讲下我们常用的一些标签及其属性:
1、h1~h6
页面中最好将最重要的内容,一般一个页面中只有一个h1标题,即将大的标题设置为h1,并且不要试图设置多个h1,这样不利于SEO搜索引擎优化。针对页面中的包含的多篇文章或者章节,可以根据内容层次使用h2~h6级标题。
2、hr标签
表示段落级别的话题切换,页面会呈现一条水平线
3、列表标签
列表标签包括了:
无序列表标签:ul、li
有序列表标签:ol、li
自定义列表标签:dl、dt、dd
<body> <section> <header>无序列表</header> <p>My favourite fruits are:</p> <ul> <li>apple</li> <li>banana</li> <li>watermallon</li> </ul> </section> <hr> <section> <header>有序列表</header> <p>采集信息:</p> <ol> <li>姓名</li> <li>年龄</li> <li> 主修课成绩 <ol type="a" start="a"> <li>数学</li> <li>英语</li> <li>计算机</li> </ol> </li> </ol> </section> <hr> <section> <header>自定义列表</header> <p>电影<q>后来的我们</q>相关内容</p> <dl> <dt>导演:</dt> <dd>刘若英</dd> <dt>演员:</dt> <dd>周冬雨</dd> <dd>井柏然</dd> </dl> </section> </body>
3、内容结构相关标签
尽量使用语义化的标签,避免使用div和span标签。
4、a标签
a、href省略问题
在a标签的href属性中可省略协议、省略协议和host,浏览器在解析时会补全为完整的的URL,补全的协议和host与当前页面的协议和host一致。
b、相对、绝对路径
省略协议和host后,链接的地址可以使用绝对路径和相对路径:
绝对路径:从根目录开始查找和访问
相对路径:相对于当前页面所在目录进行查找和访问
推荐省略了scheme和host的绝对路径
c、锚点
<a href="#idValue">idValue就是我们要跳转到的标签的id值</a>
d、target属性
target的属性值可以为_self、_blank、_parent、_top或者自定义的名字,当定义自定义的名字时,首次访问时浏览器会打开一个新的窗口,并命名为我们设置的自定义的名字。下次再访问a链接时,凡是target值为该名字的,都在该窗口打开。
<a href="#idValue" target="myPage">idValue就是我们要跳转到的标签的id值</a>
e、alt属性
alt属性必须要有,当图片加载失败时作为替代文字出现,同时也有利于提升无障碍性(为盲人设计的读屏软件获取信息)
f、width和height属性
图片是一个异步加载的,所以有可能页面其他元素已经加载和渲染完成了,图片才加载完成,此时页面会重绘,会出现跳动效果,所以为了防止页面在加载过程中的抖动,可以预先定义好图片的宽度和高度。
5、引用标签
引用标签包括三类,分别是blockquoto、cite和q
blockquoto引用相关的内容,并且可以设置其引用来源;cite标签包含来源;q标签包含引用的内容。
<blockquote cite="https://segmentfault.com/a/1190000014410891">三种遍历方法,很好记,什么时候访问根节点就叫什么方法</blockquote> <p>读了这么多书,还是觉得<cite>小王子</cite>才是我的最爱</p> <p>我昨天见过李明,他说<q>他今天不参加你的生日会了。</q></p>
2.4 HTML扩展性
2.4.1 data-* 和dataset API
通过data-可以自定义属性,同时可以通过dataset.获取属性值
<ul> <li data-num="1">小米</li> <li data-num="2">小花</li> <li data-num="3">小明</li> </ul>
2.4.2 Link标签
<!-- 引入 CSS --> <link rel="stylesheet" href="style.css"> <!-- 浏览器预加载,域名的预解析,都是异步加载的过程,不会阻塞页面正常加载 --> <link rel="dns-prefetch" href="//example.com"> <link rel="prefetch" href="image.png"> <link rel="prerender" href="http://example.com"> <!-- favicon,页面标题栏的小图标 --> <link rel="icon" type="image/png" href="myicon.png"> <!-- RSS --> <link rel="alternate" type="application/rss+xml" href="/feed">
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,方便搜索引擎或其他网站获取相关的格式化信息
<script type="application/ld+json"> { "@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" } } </script>
2.5 web无障碍
参考:
WCAG(web content Accessibility Guidelines)2.0
ARIA(Accessible Rich Internet Applications)
提升无障碍的方式:
- 设置img的alt属性
- noscript
- input与label对应
- 图形验证码与语音验证码
- 文字和背景有足够的对比度
- 键盘可操作(e.g:使用tab键进行页面内容选中切换)
未完待续、持续更新....................