最近关注winter的“重学前端”系列文章,也想把已知的前端知识体系梳理一遍,夯实基础的同时,总结提升。接下来会从HTML、CSS、JS、性能、网络安全、框架通识进行分类总结。
<!DOCTYPE>
声明位于HTML文档的第一行,处于<html>
之前。<!DOCTYPE>
声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。Doctype不存在或者格式不正确都会导致文档以兼容模式/混杂模式呈现。<!DOCTYPE HTML>
?HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们该有的方式来运行) 而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
总体上应该分为三类: HTML5
,HTML4.01
,XHTML
。
HTML5模式是目前最常用的模式。直接在DOCTYPE后面添加html即可。
<!DOCTYPE html>
分为三种模式:严格模式(strict)、过度模式(transitional)、Frameset模式。区别在于是否允许使用展示性和弃用元素,以及是否允许使用框架集。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
font
、color
等),不允许使用框架集。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML是一种比较严格的模式,所有元素必须以XML格式编写。分类和HTML4.01比较类似,分为严格模式、过渡模式、Frameset模式,同时添加了1.1模式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
最后附上各种文档类型支持的元素列表:HTML5/HTML 4.01/XHTML 元素和有效的 DTD
XHTML要求编写符合XML的语法。主要区别在于:
<html>
、<body>
等都用大写或大小写混用如<HTML>
、<BODY>
或<Html>
、<Body>
”排版,但是XHTML统一要求需要用<html>
、<body>
小写。img
标签里都可加可不加alt
属性,但是现在xhtml要求必须加上alt
属性,不然xhtml验证将提示错误,哪怕alt
的值为空都可以。<meta>
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta>
标签位于文档的头部,不包含任何内容。<meta>
标签的属性定义了与文档相关联的名称/值对。
常用列表如下:
<!DOCTYPE html> <!-- H5标准声明,使用 HTML5 doctype,不区分大小写 -->
<head lang="en"> <!-- 标准的 lang 属性写法 -->
<meta charset="utf-8"> <!-- 声明文档使用的字符编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 优先使用 IE 最新版本和 Chrome -->
<meta name="description" content="不超过150个字符"/> <!-- 页面描述 -->
<meta name="keywords" content=""/> <!-- 页面关键词 -->
<meta name="author" content="name, email@gmail.com"/> <!-- 网页作者 -->
<meta name="robots" content="index,follow"/> <!-- 搜索引擎抓取 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- 为移动设备添加 viewport -->
<!-- 设置页面不缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
在移动端开发,最常看到head里面设置了下面这个属性:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >
常用的6个属性:
"width-device"
特殊说明:(IE6,7,8)支持,需要使用css3mediaqueries.js
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]>
深入了解,移步至:移动前端开发之viewport的深入理解
http-equiv顾名思义,相当于http的文件头作用。把 content 属性关联到 HTTP 头部。 http-equiv属性主要有以下几种参数:
说明:用于设定网页字符集,便于浏览器解析与渲染页面举例:
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> <!--旧的HTML,不推荐 -->
<meta charset="utf-8"> <!-- HTML5设定网页字符集的方式,推荐使用UTF-8 -->
说明:用于告知浏览器以何种版本来渲染页面。(一般都设置为最新模式,在各大框架中这个设置也很常见。)举例:
<meta http-equiv="X-UA-Compatibel" conent="IE=edge,chrome=1" > <!-- 指定IE和Chrome使用最新版本渲染当前页面 -->
说明:指定浏览器如何缓存某个响应以及缓存多长时间。举例:
<meta http-equiv="cache-contorl" conent="no-cache">
共有以下几种用法:
- no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
- no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)
- public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果。
- private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)
- maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。
关于浏览器缓存,可移步至:浏览器缓存机制
说明:用于设定网页的到期时间,过期后网页必须到服务器上重新传输。举例:
<meta htttp-equiv="expires" content="Sunday 26 October 2019 01:00 GMT">
说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出 。举例:
<meta http-equiv="pragma" content="no-cache">
说明:如果网页过期。那么这个网页存在本地的cookies也会被自动删除。举例:
<meta http-equiv="Set-Cookie" content="name, date"> <!-- 格式 -->
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> <!-- 具体范例 -->
说明:网页将在设定的时间内,自动刷新并调向设定的网址。举例:
<meta http-equiv="refresh" content="2;URL=https://segmentfault.com/u/clearlove07"> <!-- 意思是2秒后跳转向我的博客 -->
根据内容的结构,选择合适的标签(代码语义化)恰当地表示文档结构,便于开发者阅读的同时让浏览器的爬虫和机器很好地解析。
title
、alt
用于解释名词或解释图片信息、label
标签的活用。在 HTML5 中,就引入了这个表示 ruby 的标签,它由ruby、rt、rp 三个标签来实现。用于注音或者意思的注解。
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
比如当没有上下文时,如何消除歧义呢?这就要用到我们的 em 标签,em 表示重音:
今天我吃了一个 <em> 苹果 </em>。
今天我吃了 <em> 一个 </em> 苹果。
实际上,不仅仅是读音,这里的意思也发生了变化。前一段中,表示我今天吃的是苹果,而不是别的什么东西,后一段中,则表示我今天只吃了一个苹果,没有多吃。
语义化的 HTML 能够支持自动生成目录结构,HTML 标准中还专门规定了生成目录结构的算法,即使我们并不打算深入实践语义,也应该尽量在大的层面上保证这些元素的语义化使用。例如:
<section>
<h1>HTML 语义 </h1>
<p>balah balah balah balah</p>
<section>
<h1> 弱语义 </h1>
<p>balah balah</p>
</section>
<section>
<h1> 结构性元素 </h1>
<p>balah balah</p>
</section>
......
</section>
随着越来越多的浏览器推出“阅读模式”,以及各种非浏览器终端的出现,语义化的 HTML 适合机器阅读的特性变得越来越重要。 应用了语义化结构的页面,可以明确地提示出页面信息的主次关系,它能让浏览器很好地支持“阅读视图功能”,还可以让搜索引擎的命中率提升,同时,它也对视障用户的读屏软件更友好。例如:
<body>
<header>
<nav>
……
</nav>
</header>
<aside>
<nav>
……
</nav>
</aside>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>
<address>……</address>
</footer>
</body>
div
和span
。div
或者p
时,尽量用p
, 因为p
在默认情况下有上下间距,对兼容特殊终端有利。b
、font
、u
等,改用css设置。caption
,表头用thead
,主体部分用tbody
包围,尾部用tfoot
包围。表头和一般单元格要区分开,表头用th
,单元格用td
。fieldset
标签包起来,并用legend
标签说明表单的用途。input
标签对应的说明文本都需要使用label
标签,并且通过为input
设置id
属性,在lable
标签中设置for=someld
来让说明文本和相对应的input关联起来。注意不要因为html5新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用div
的,就是因为div
没有任何意义的元素,他只是一个标签,仅仅是用来构建外观和结构。因此是最适合做容器的标签。
header
元素代表“网页”或section
的页眉。
通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。
<header>
<hgroup>
<h1>网站标题</h1>
<h2>网站副标题</h2>
</hgroup>
</header>
header
使用注意:
footer
元素代表“网页”或section
的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果footer
元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。
<footer>
COPYRIGHT@clearlove07
</footer>
footer
使用注意:
hgroup
元素代表“网页”或section
的标题,当元素有多个层级时,该元素可以将h1
到h6
元素放在其内,譬如文章的主标题和副标题的组合。
<hgroup>
<h1>this is main title</h1>
<h2>this is sub title</h2>
</hgroup>
hgroup
使用注意:
nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
<nav>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</nav>
nav
使用注意:
nav
元素。aside
元素被包含在article
元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。(特殊的section)
在article
元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。
<article>
<p>this is content</p>
<aside>
<h1>author decalation</h1>
<p>i'm a font-end</p>
</aside>
</article>
aside
使用总结:
aside
在article
内表示主要内容的附属信息。article
之外则可做侧边栏,没有article
与之对应,最好不用。section
元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。
section
通常还带标题,虽然html5
中section
会自动给标题h1-h6
降级,但是最好手动给他们降级。如下:
<section>
<h1>section是啥?</h1>
<article>
<h2>关于section</h1>
<p>section的介绍</p>
<section>
<h3>关于其他</h3>
<p>关于其他section的介绍</p>
</section>
</article>
</section>
section
使用注意:
article
、nav
、aside
可以理解为特殊的section
,所以如果可以用article
、nav
、aside
就不要用section
,没实际意义的就用div
。article
元素最容易跟section
和div
容易混淆,其实article
代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget
小工具。(特殊的section)
<article>
<h1>一篇文章</h1>
<p>文章内容..</p>
<footer>
<p><small>版权:html5jscss网所属,作者:小北</small></p>
</footer>
</article>
article
使用注意:
article
。section
。div
。address
标签定义文档作者/所有者的联系信息。
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
address
使用注意:
address
标签来描述邮政地址,除非这些信息是联系信息的组成部分。address
元素通常被包含在 footer
元素的其他信息中。header
、footer
、nav
、aside
、article
、section
等)audio
、video
)Canvas
)APIGeolocation
) APIlocalStorage
和sessionStorage
manifest
Notifications
date
、time
、url
、search
、email
、calendar
等Web Worker
Web Socket
History
visibilitychange
PostMeaage
document.querySelector
、document.querySelectorAll
basefont
、big
、center
、font
、s
、u
、tt
、strike
frameset
、frame
、noframes
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]>
用户在线时,保存更新用户机器上的缓存文件;当用户离线时,可以正常访离线储存问站点或应用内容
html
标签设置 manifest
属性,如 manifest="/offline.appcache"
manifest
文件,manifest
文件的命名建议:xxx.appcache
MIME-type
,即 text/cache-manifest
<!DOCTYPE html>
<html manifest="cache.manifest">
....
</html>
cache.manifest文件的书写方式,就像下面这样:
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
CACHE
:表示需要离线存储的资源列表,由于包含manifest
文件的页面将被自动离线存储,所以不需要把页面自身也列出来。NETWORK
:表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE
和NETWORK
中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE
的优先级更高。FALLBACK
:表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问offline.html
。html
标签有 manifest
属性,它会请求 manifest
文件manifest
文件的内容下载相应的资源并且进行离线存储manifest
文件与旧的 manifest
文件,如果文件没有发生改变,就不做任何操作。如果文件改变了,那么就会重新下载文件中的资源并进行离线存储manifest
文件之后这些资源才能被浏览器重新下载,如果只是更新了资源而没有更新manifest
文件的话,浏览器并不会重新下载资源,也就是说还是使用原来离线存储的资源。manifest
文件进行缓存的时候需要十分小心,因为可能出现一种情况就是你对manifest
文件进行了更新,但是http的缓存规则告诉浏览器本地缓存的manifest
文件还没过期,这个情况下浏览器还是使用原来的manifest
文件,所以对于`manifest文件最好不要设置缓存。manifest
文件中的资源的时候,它会一次性下载所有资源,如果某个资源由于某种原因下载失败,那么这次的所有更新就算是失败的,浏览器还是会使用原来的资源。window.applicationCache.swapCache()
方法来使之生效,出现这种现象的原因是浏览器会先使用离线资源加载页面,然后再去检查manifest是否有更新,所以需要到下次打开页面才能生效。关于Page Visibility
的原理和应用场景,请移步至阮大神的:Page Visibility API 教程
WebSocket
是一种在单个TCP
连接上进行全双工通信的协议。
HTTP 协议有一个缺陷:通信只能由客户端发起。 这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步JavaScript和XML(AJAX)请求实现长轮询。轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。
关于WebSocket的使用介绍,请移步至软大神的:WebSocket 教程
src
用于替换当前元素,href
用于在当前文档和引用资源之间确立联系。
src
是source
的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src
资源时会将其指向的资源下载并应用到文档内,例如js
脚本,img
图片和frame
等元素。
<script src ="js.js"></script>
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href
是Hypertext Reference
的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加:
<link href="common.css" rel="stylesheet"/>
那么浏览器会识别该文档为css
文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link
方式来加载css
,而不是使用@import
方式。
两者都是外部引用CSS的方式,但是存在一定的区别:
link
是XHTML
标签,除了加载CSS
外,还可以定义RSS
等其他事务;@import
属于CSS
范畴,只能加载CSS
。link
引用CSS
时,在页面载入时同时加载;@import
需要页面网页完全载入以后加载。link
是XHTML
标签,无兼容问题;@import
是在CSS2.1
提出的,低版本的浏览器不支持。link
支持使用Javascript
控制DOM
去改变样式;而@import
不支持。iframe
能够原封不动的把嵌入的网页展现出来。iframe
,那么你只需要修改iframe
的内容,就可以实现调用的每一个页面内容的更改,方便快捷。iframe
来解决。不容易管理
。iframe
框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差
。不利于搜索引擎优化
。设备兼容性差
。增加服务器的http请求
,对于大型网站是不可取的。分析了这么多,现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发
。
从搜索引擎角度来说,title
标签是用来描述这个页面的主题的,是一个网页权重的最高点。但title
标签并不出现在文章的正文中。而h1
标签一般出现在文章的正文中,是展示给访问者的文章的标题。所以说这两个标签不仅不冲突的,而是合作的关系。一篇文章既要有title
又要有h1
标签,既突出了文章的主题,又突出了标题和关键字,达到双重优化网站的效果。
一般会把title
和h1
标签的内容写成一样,而且一般情况下一篇文章最好只用一个h1
标签,过多的h1
标签反而会让搜索引擎迷糊,认不清文章的主题。也就是说,从网站角度看,title
更重于网站信息。title
可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的。
从文章角度看,h1
则是用于概括文章主题。用户进入内容页,想看到的当然就是文章的内容,h1
文章标题就是最重要的。文章标题最好只有一个,多个h1
会导致搜索引擎不知道这个页面哪个标题内容最重要,导致淡化这个页面的标题和关键词,起不到突出主题的效果。
区别:
h1
突出文章主题,面对用户,更突出其视觉效果。而title
突出网站标题或关键字用。seo
看,title
权重比h1
高,适用性比h1
广。一个好的网站是h1
和title
并存,既突出h1
文章主题,又突出网站主题和关键字。达到双重优化网站的效果。
它们的区别就再于一个是物理元素,一个是逻辑元素。
物理元素所强调的是一种物理行为,比如说我把一段文字用b
标记加粗了,我的意思是告诉浏览器应该给我加粗了显示这段文字,从单词的语义也可以分析得出,b
是Bold
(加粗)的简写,所以这个B
标记所传达的意思只是加粗,没有任何其它的作用。
而Strong
我们从字面理解就可以知道他是强调的意思,所以我们用这个标记向浏览器传达了一个强调某段文字的消息,而这个Strong
就是我们所说的逻辑元素,他是强调文档逻辑的,并非是通知浏览器应该如何显示。
也就是说,这两对标签最大区别就是一个给搜索引擎看的,一个是给用户看的。就用b
和strong
标签做例子吧。
b
标签和strong
标签给我们的主观感受都是加粗,但对搜索引擎来说b
标签和普通的文字并没有什么区别,而strong
标签却是起强调作用的。也就是说如果你想让搜索引擎认为你的某句话很重要时那就用strong
标签。如果只是想让用户看到加粗的效果,那就用b
标签。
同理如em
标签也是针对搜索引擎来起作用的,i
标签只是让用户看到展示的是斜体。
a
、b
、span
、img
、input
、strong
、select
等div
、ul
、li
、ol
、dl
、dd
、dt
、h1-h6
等br
hr
img
input
link
meta
等label
标签用来定义表单控件的关系:当用户选择label
标签时,浏览器会自动将焦点转到和label
标签相关的表单控件上。
<!-- 方法一 -->
<labek for="moible">Mobile: </for>
<input type="number" id="mobile" placeholder="请输入电话号码" />
<!-- 方法二 -->
<label>
name: <input tpye="text" placeholder="请输入你的名字" />
</label>