前端体系梳理

一、开篇

很久以前我们对于前端的理解就是开发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键进行页面内容选中切换)

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

相关推荐