一、开篇很久以前我们对于前端的理解就是开发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和qblockquoto引用相关的内容，并且可以设置其引用来源；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—LDJSON-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.0ARIA(Accessible Rich Internet Applications)提升无障碍的方式：设置img的alt属性noscriptinput与label对应图形验证码与语音验证码文字和背景有足够的对比度键盘可操作(e.g:使用tab键进行页面内容选中切换)未完待续、持续更新....................
