前端小知识-html5

一、伪类与伪元素

为什么css要引入伪元素和伪类：是为了格式化文档树以外的信息，也就是说，伪类和伪元素是用来修饰不在文档树中的部分

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如：hover，虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式，比如:before在一个元素前添加一些文本，并为这些文本添加样式，虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

举个例子：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

如果想改变第一li的样式，一般会在li标签上设置一个class类，这时可以换一种写法，用伪类实现

li:first-child{

}

另外一个伪元素的例子：

<p>hello world，and best wishes for you</p>

如果我们想实现改变上面文本中第一个字母的样式，我们可以使用<span class="first">h</span>来进行修改，还可以用伪元素的方法实现

p:first-letter{

}

比较上面两个例子可以得出：伪类操作的对象是文档树中已有的元素，而伪元素是创建一个文档树外的元素

二、Meta标签

Meta标签是什么

Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。

即元数据是数据的信息

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务调用。

它内部可填写的属性如下：

属性	值	描述
charset (HTML5)	character_set	定义文档的字符编码。
content	text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-type、default-style、refresh	把 content 属性关联到 HTTP 头部。
name	application-name、author、description、generator、keywords	把 content 属性关联到一个名称。
scheme	format/URI	HTML5不支持。 定义用于翻译 content 属性值的格式。

 

申明文档使用的字符编码

第一种：

<meta charset='utf-8'>

第二种：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

当指定的content值为IE=edge,chrome=1时，优先使用 IE 最新版本和 Chrome

禁止浏览器从本地计算机的缓存中访问页面内容

<meta http-equiv="Pragma" content="no-cache">

转码申明

用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta。

<meta http-equiv="Cache-Control" content="no-siteapp" />

便于搜索引擎优化

（1）页面关键词

标记内容太短，则搜索引擎可能不会认为这些内容相关。

<meta name="keywords" content="李先生,老司机,何首污,MR_LP" />

一般这个东西，推荐大家设置 5 ~ 10 组词，当然这些词必须要有代表性，而且不能太长。一般来说不应超过 874 个字符。

 页面描述

每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

<meta name="description" content="我每天都承受着这个年纪不应该有的帅气，我好累" />

关于页面描述一般来说，都是写 120 字 ~ 150 字，这段话尽量要流畅完整，并且能体现出当前网页的作用。

Expires网页过期时间

设定网页的到期时间，一旦过期则必须到服务器上重新调用。

需要注意的是必须使用GMT时间格式，或直接设为0(不缓存)。

使用方法如下：

<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />

移动端设置中使用 Meta 标签

viewport

能优化移动浏览器的显示。

如果不是响应式网站，不要使用initial-scale或者禁用缩放。

除此之外，还需要注意不同设备之间的尺寸问题。

• 大部分4.7-5寸设备的viewport宽设为360px；
• 5.5寸设备设为400px；iphone6设为375px；
• ipone6 plus设为414px。

<meta name="viewport" content="width=device-width,

 

                               initial-scale=1.0,

 

                               maximum-scale=1.0,

 

                               user-scalable=no"/><!--

 

若设置宽度为屏幕宽度 width=device-width

 

会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

 

需要注意

 

-->

属性名	属性含义
width	宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
height	高度（数值 / device-height）（范围从223 到10,000）
initial-scale	初始的缩放比例 （范围从>0 到10）
minimum-scale	允许用户缩放到的最小比例
maximum-scale	允许用户缩放到的最大比例
user-scalable	用户是否可以手动缩 (no,yes)
minimal-ui	可以在页面加载时最小化上下状态栏。（已弃用）

但是需要注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。

如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

 

而且，实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度。

 

body {

 

    min-width: 320px;

}

 

WebApp全屏模式

 

伪装app，离线应用。

 

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

 

隐藏状态栏/设置状态栏颜色

只有在开启WebApp全屏模式时才生效。

content的取值范围：

• default
• black
• black-translucent

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

 

添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">

 

忽略数字自动识别为电话号码

<meta content="telephone=no" name="format-detection" />

忽略识别邮箱

<meta content="email=no" name="format-detection" />

添加智能 App 广告条 Smart App Banner

告诉浏览器这个网站对应的app，并在页面上显示下载banner。

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

 

其他一些小东西

这里不做更多说明啦。

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --><meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 --><meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 --><meta name="full-screen" content="yes">

<!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true">

<!-- UC应用模式 --><meta name="browsermode" content="application">

<!-- QQ应用模式 --><meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 --><meta name="msapplication-tap-highlight" content="no">

 

 三、web缓存

1、什么是Web缓存？

Web缓存是介于服务器和客户端之间，监控请求，并且把请求输出的内容（例如html页面、图片和文件）（统称为副本）另存一份；

然后，如果下一个请求是相同的URL，则直接请求保存的副本，而不用再次请求服务器了。

举个例子:缓存，顾名思义，就是缓慢的存钱。为什么要缓慢的存钱呢，因为工资卡都上交老婆了，为了积攒点零花钱又不能被老婆发现，只能缓慢的存了。那缓存有什么用呢？你想啊，自己有点小钱，做事情就方便快捷了，比方说我想买个鱼竿，就不要去向老婆要（给不给先不谈），自己从自己这边取，大大提高了执行的速度。

那什么时候可以存什么时候不能存呢？老婆给零花钱的时候，可能会有过期时间头，例如，周一甩了100块钱，拿去，这是一周的伙食！这个一周就是过期时间头（Expires Header），在这个时间内，你的钱可以从缓存，也就是自己这里取。。。

2.为什么要使用缓存？

（1）减少冗余的数据传输，节省流量

（2）缓解了带宽瓶颈问题，不需要更多的带宽就能更快加载页面

（3）缓解了瞬间拥塞，降低了对服务器的要求

（4）降低了距离的延时

3、缓存的分类

（1）浏览器缓存

（2）服务器端缓存

          《1》代理服务器缓存（共享缓存，解决方案:Squid，Nginx，Apache）

          《2》网关缓存 （CDN缓存也叫反向代理缓存）

（3）数据库缓存  （解决方案：memcached,redis）

（4）Web应用层缓存

4、Web缓存是如何工作的？

（1）响应头明确说明，偶不想被缓存，则不会被缓存；

（2）如果请求信息是需要认证或者安全加密的(如, HTTPS)，相应内容也不会被缓存；

（3）缓存如果有以下表现，则认为是fresh新鲜的（无需检查源服务器，直接发送给客户端）：

          含有完整的过期时间和寿命控制头信息，并且内容仍在保鲜期内，或者混存最近已展现，并且在不久前修改。

（4）内容缓存直取，绕过源服务器。

（5）若内容陈旧，则会要求源服务器做验证 validate ，或者告诉缓存其拷贝副本是否是OK的。

（6）特定情况下——例如，断网了，之前有过的响应缓存直取而不检查源服务器。

 

5、缓存的特点

缓存并不是所有的数据都被缓存或需要缓存，它是为解决20%数据被80%的人频繁访问的问题而生的

它具备以下两个特点：（1）时间局部性

（2）空间局部性

 

6、浏览器不使用缓存

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">  

<script type="text/javascript" src="/js/myjs.js"></script>

// 修改为

<script type="text/javascript" src="/js/myjs.js?randomId=<%=Math.random()%>"></script>

7、H5缓存：

http-equiv属性向浏览器传回一些有用的信息，帮助浏览器更准确的显示网页内容， 与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 

语法格式： ＜meta http-equiv="参数" content="参数变量值"＞ 

http-equiv有以下类型参数

（1）Expires(期限)

     注：时间必须是GMT格式（格林威治时间）

<meta http-equiv="expires" content="Wed, 20 Jun 2017 22:33:00 GMT">

（2）Pragma（cache模式）

是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出

注：这样设定，访问者将无法脱机浏览

<meta http-equiv="Pragma" content="no-cache">

（3）Refresh（刷新）

自动刷新并指向新页面

注：其中的2是指停留2秒钟后自动刷新到URL网址

 

 ＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞

（4）Set-Cookie（cookie设定）

  如果网页过期，那么存盘的cookie将被删除。

 

  ＜meta http-equiv="Set-Cookie" content="cookievalue=哈哈我是崔卉;expires=Tue, 20-Jun-2017 22:33:00 GMT； path=/"＞

 

（5）Window-target(显示窗口的设定)

说明：强制页面在当前窗口以独立页面显示。 

注：用来防止别人在框架里调用自己的页面

＜meta http-equiv="Window-target" content="_top"＞

（6）content-Type（显示字符集的设定）

设定页面使用的字符集

 

＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞

（7）Pics-label（网页等级评定）

在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。 

 

<meta http-equiv="Pics-label" contect="">

（8）Page_Enter 、page_Exit

设定进入页面时的特殊效果

 

<meta http-equiv="Page-Enter"    content="revealTrans(duration=1.0,transtion=    12)">

 

<meta http-equiv="Page-Exit"    content="revealTrans(duration=1.0,transtion=    12)">

Duration的值为网页动态过渡的时间，单位为秒。  
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：  

0    盒状收缩    1    盒状放射  

2    圆形收缩    3    圆形放射  

4    由下往上    5    由上往下  

6    从左至右    7    从右至左  

8    垂直百叶窗    9    水平百叶窗  

10    水平格状百叶窗    11垂直格状百叶窗  

12    随意溶解    13从左右两端向中间展开  

14从中间向左右两端展开    15从上下两端向中间展开  

16从中间向上下两端展开    17    从右上角向左下角展开  

18    从右下角向左上角展开    19    从左上角向右下角展开  

20    从左下角向右上角展开    21    水平线状展开  

22    垂直线状展开    23    随机产生一种过渡方式  

（9）清除缓存（再访问这个网站要重新下载）

 

<meta http-equiv="cache-control" content="no-cache">

 

 (10)设定网页的到期时间

 

<meta http-equiv="expires" content ="0">

 

 (11)关键字，给搜索引擎用的

 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

 

(12)页面描述

 

<meta http-equiv="description" content="this is my page">

 

 Cache-Control(或Expires)和Last-Modified(或Etag)

 

 四、input标签

1、onchange事件与onpropertychange事件的区别： 

onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。 

 

2、oninput事件与onpropertychange事件的区别： 

oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；onpropertychange事件是任何属性改变都会触发的，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离） 

 

3、oninput与onpropertychange失效的情况： 

（1）oninput事件：a). 当脚本中改变value时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。 

（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。

 

input标签中id和name作用和区别

id：作为标签的唯一标识

name：作为可与服务器交互数据的HTML元素的服务器端的标示

 

html5带来的表单数据内容的变化

1.表单类型的增加

（1）url----网址

（2）email----电子邮件

（3）date----日期专用[date,month,week,time,datetime,datetime-local]

（4）range----滑动条（表示区间、范围）

（5）search----搜索框

（6）color----颜色

（7）telephone----电话类型

2、表单的属性和验证方式的进化

（1）必填属性 required

（2）占位属性placeholder

（3）数字类型控件提供的max、min属性

（4）data属性，可外链数据源

（5）正则表达式属性pattern

（6）自动完成属性autocomplete，属性值两个on、off

（7）步长设定属性step，该属性可以限定输入的数字，step是每一步之间的间隔

3、文件上传支持多个文件和自定义文件类型

 

 五、svg中如何是文本换行

 

<svg xmlns="http://www.w3.org/2000/svg" style="outline: 1px solid red;margin: 50px;">
    <switch>
        <foreignObject x="20" y="0" width="150" height="200" style="outline: 1px solid blue;">
            <p xmlns="http://www.w3.org/1999/xhtml">Text goes here, Text goes here, Text goes here, Text goes here</p>
        </foreignObject>

        <text x="20" y="20">Your SVG viewer cannot display html.</text>
    </switch></svg>

获取text元素中的文本