前端体系梳理

时间 2019-11-07

标签前端体系梳理繁體版

原文原文链接

1、开篇

好久之前咱们对于前端的理解就是开发web网页的，而且在PC上的浏览器进行展现；后来，随着响应式布局和智能手机的兴起，web网页更多的出如今了移动端的浏览器中；再后来，随着技术的不断发展，web页面逐渐出如今了PC、Android、Iphone的application(APP)中。从上面的发展能够看出，前端涉及的面愈来愈广，将来前端技术也会愈来愈重要，前端工程师们加油哇！
下面我将一点点完善整个前端结构，因为没法一次写完，因此这篇文章会不断更新，若是你们以为还能够就先关注一波，以便及时查看更新内容。css

2、什么是前端

一、前端主要包括下面三个部分：
1.1 web标准技术
HTML、CSS、JavaScript、SVG、HTTP、WebGL等
1.2 运行环境
PC端浏览器、移动端浏览器、PC端桌面应用、移动端桌面应用等
1.3 界面与交互
界面的设计、用户的交互设计等问题，好比须要考虑web无障碍性(e.g:盲人或者色盲没法正常浏览页面，此时应该怎样进行界面和交互的设计以知足该类人群的须要呢？)html

二、前端开发时须要考虑的问题
前端

3、HTML

什么是html呢？html就是使用标签来描述页面的内容和结构。
一、HTML5的变化
目前最新的HTML标准是html5，那html5相比之前的标准有哪些变化呢？
1.1 doctype声明更加简洁html5

1.1.一、Doctype的做用
a、指定文档使用的标准和版本
html到如今已经经历了不少个版本，最新的是HTML5，声明Doctype能够指定该文档遵循的标准。
b、浏览器根据Doctype决定使用哪一种渲染模式
浏览器的渲染模式分为怪异模式、标准模式、部分怪异(准标准)模式，在不一样模式下浏览器对于同一个文档的渲染方式是不一样的。最突出的一个影响就是在标准模式下和怪异模式下的盒模型不一样。上面的是标准盒模型，下面的是怪异模式下的盒模型。

1.1.2 如何声明doctypeweb

<!DOCTYPE html>

1.2 meta标签的变化json

<!-- 编码 -->
<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等。canvas

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

1.5 增长了不少富应用化的东西，例如canvas、video、audio、离线、本地存储、拖拽等。浏览器

二、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>
段落元素：文档中的文本、标记段落级文本的元素
嵌入元素：引用资源插入到文档中其余元素。
交互元素：用于与用户交互的元素
元数据元素：被用于说明其余内容的表现或行为，或者在当前文档和其余文档之间创建联系的元素。

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

一、h1~h6

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

二、hr标签

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

三、列表标签

列表标签包括了：
    无序列表标签：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>

三、内容结构相关标签
尽可能使用语义化的标签，避免使用div和span标签。

四、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属性
图片是一个异步加载的，因此有可能页面其余元素已经加载和渲染完成了，图片才加载完成，此时页面会重绘，会出现跳动效果，因此为了防止页面在加载过程当中的抖动，能够预先定义好图片的宽度和高度。

五、引用标签

引用标签包括三类，分别是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键进行页面内容选中切换)

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