HTML/HTML5
Posted Silam Lin
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML/HTML5相关的知识,希望对你有一定的参考价值。
html/HTML5
- src与href的区别
- HTML5的新特性
- Web Worker
- !DOCTYPE的作用、严格模式与混杂模式
- script标签、defer、async
- head标签的作用
- 常见的meta
- img中的srcset
- 块级元素、行内元素、空元素
- HTML5 离线存储
- SEO搜索引擎优化
- title与h1的区别
- b和strong、i和em的区别
- iframe的优缺点
- label标签
- Canvas和SVG的区别
- 渐进增强与优雅降级
src与href的区别
答:
- src是source,即资源,用于img,script和iframe标签,将资源引入并替换当前元素
- href是hypertext reference,即超文本引用,用于a和link标签,使得超文本引用与当前元素建立联系
HTML5的新特性
一、语义化标签
九个语义化标签 ,如:
- < header>
- < footer>
- < nav>
- < section>
- < article>
- < aside>
- < details>
- < summary>
- < dialog>
好处(用正确的标签做正确的事):
- 内容结构化:可读性强,结构清晰,易于团队的维护
- 代码语义化:对机器友好,利于SEO
二、增强型表单type
input表单新增若干个type类型以供选择,能够更好地控制输入内容的类型。
- color 用于选取颜色
- date 选择日期
- datetime 选择日期(UTC)
- datetime-local 选择日期,无时区差异
- email 输入email
- month 输入月份
- number 输入数值
- range 一定范围内的数值取值
- search 搜索域
- tel 输入电话
- time 输入时间
- url 输入url
- week 选择周
三、新增的表单
- < datalist> —— 与 input 元素配合使用该元素,来定义 input 可能的值。
- < keygen> —— 用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。
- < output> —— 定义不同类型的输出,比如脚本的输出。
四、新增的表单属性
- placeholder
- required
- pattern 正则表达式验证Input表单输入的值
- min,max
- height,width 用于image类型 input表单图像的高度和宽度
- step 输入域合法数字间隔
- autofocus
- multiple
五、新增的媒体:视频和音频
- < audio > 播放音频
- < video > 播放视频
六、拖放api
拖放的过程有两个对象:源对象和目标对象。源对象就是即将被拖的元素(任何元素都可以被拖放),目标对象就是拖动之后要放置的目标位置。
- 源对象,可以触发的事件:dragstart(开始拖动)、drag(拖动中)、dragend(拖动结束)。整个拖动的过程:dragstart1 + dragn +dragend*1 ;
- 目标对象,可以触发的事件:dragenter(拖动着进入)、dragover(拖动着悬停)、dragleave(拖动着离开)、drop(放置)。过程有:dragenter1 + dragovern + dragleave1 或 dragenter1 + dragovern + drop1
七、web worker
参考我这篇blog
八、WebStorage
WebStorage分两种:
- localStorage
- sessionStorage
web存储 localStorage和sessionStorage、Cookie
Web Worker
!DOCTYPE的作用、严格模式与混杂模式
- !DOCTYPE声明在文档的第一行
- 告诉浏览器以什么模式来解析文档
- 有两种模式:严格模式(标准模式)和混杂模式(兼容模式)
严格模式与混杂模式
- 严格模式:渲染方式和JS引擎的解析方式以浏览器的最高标准执行
- 混杂模式:向后兼容
script标签、defer、async
浏览器在解析文档,构建DOM Tree时,如果遇到script标签欲加载JS文件,总的来说JS文件会阻塞文档的解析,具体发生步骤:
- 暂停对文档的解析,停止构建DOM Tree
- 将控制权交给javascript引擎
- 待JavaScript文件加载、解析和执行完毕后,再恢复对文档的解析
也就是像图中第一个情况;
所以建议:将script标签放在body标签后部,防止首屏渲染时间过长
defer与async
- defer:遇到script标签时不会暂停对文档的解析。即后续文档的解析与script的加载解析是并行进行(同时、异步)。只不过script的执行,要等到文档解析完成后再执行。
- async:同样也是不会暂停对文档的解析。不过,在script加载解析完毕后,直接执行JS文件。
- 执行顺序:多个defer按照加载顺序执行;多个async不能保证加载的顺序
head标签的作用
- head标签用于定义文档的头部,是所有头部元素的容器
- head中可以包含 base、link、meta、script、style、title,描述文档的各种属性信息
- head包含的信息大多数都不会真正作为内容展示给读者
- head中一定要有title,用于定义文档的标题
常见的meta
meta 用于描述网页文档的属性,譬如编码类型、关键词、页面描述等;
① 描述HTML文档的编码类型
<meta charset="UTF-8" >
② 关键词
<meta name="keywords" content="关键词" />
③ 描述
<meta name="description" content="页面描述内容" />
④ 重定向与刷新
<meta http-equiv="refresh" content="0;url=" />
⑤ 移动端适配
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
content可以取的值:
- width:宽度(数值/device-width)
- height:高度(数值/device-height)
- initial-scale:初始缩放比例
- maximum-scale:最大缩放比例
- minimum-scale:最小缩放比例
- user-scalable:是否允许用户缩放(yes/no)
⑥ 搜索引擎索引方式
<meta name="robots" content="index,follow" />
content可以取的值:
- all:文件将被检索,页面上的链接可以被查询
- index:文件将被检索
- follow:页面上的链接可以被查询
- noindex:文件将不被检索
- nofollow:页面上的链接不可以被查询
- none:文件将不被检索,页面上的链接不可以被查询
img中的srcset
答:
img中的srcset用于响应式页面,根据不同的屏幕密度设置相应的图片
块级元素、行内元素、空元素
一、块级元素 : div、段落、标题、列表、表格、表单
- div
- p
- h1 - h6
- dl \\ ol \\ ul (带有项目和描述的描述列表 \\ 有序列表 \\ 无序列表)
- table
- form
二、行内元素 :span、链接、换行、加粗、斜体、label
- span
- a 链接
- br 换行
- b 加粗 、 strong 逻辑加粗
- i 斜体 、 em 逻辑斜体
- label
三、空元素
- area
- br \\ base
- col \\ colgroup \\ command
- embed
- hr
- img \\ iput
- keygen
- link
- meta
- param
- source
- track
- wbr
HTML5 离线存储
在线时:
- 浏览器若发现html头部有manifest属性,则请求manifest文件
- 若是第一次访问页面,浏览器根据manifest文件的内容去下载相应的资源并进行离线存储
- 若已经访问过且已经将资源进行离线存储,浏览器则使用离线存储的资源进行展示。
- 再对比新的manifest文件与旧的manifest,如果没有差别,就不做任何操作。如果文件改变了,则根据新的manifest文件下载相应资源并离线存储。
离线时:
- 浏览器直接使用离线存储的资源进行展示
<html lang="en" manifest="index.manifest">
// cache.manifest文件
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
- CACHE:表示需要离线存储的资源列表
- NETWORK:表示只能在线访问的资源列表,不进行离线存储
- FALLBACK:若资源访问失败,则访问FALLBACK下的资源进行替代
SEO搜索引擎优化
一、合理使用title、description、keywords
- 强调重点,将重要的放在前面,切记重复堆砌
二、代码语义化
- 使用header、footer、nav、section、article、aside、dialog、summary和details
- 尽可能少使用无语义的div或span
- 尽可能避免用b或者i这种纯样式标签
- 有必要时,使用strong、em
三、img标签使用alt属性
- 在图像无法显示或者用户禁用图像时,alt属性可以代替图像的内容
四、友情链接
- 互相在自己的网站上放对方网站的链接
五、外链
- 在别的网站导入自己的网站链接
六、少用iframe
- 搜索引擎不会抓取iframe的内容
title与h1的区别
title
- 可以作为标签,写在head中
- 可以作为属性,为超链接或者图片添加标题描述(与alt不同,alt是图片失效时代替显示)
b和strong、i和em的区别
- b是视觉加粗,为字体添加了加粗样式,并无其它意义;
- strong是逻辑加粗,除了样式加粗外,表明这是“重点强调”的内容。相比于b更被搜索引擎重视,内容能更容易被抓取
i是视觉斜体,em是逻辑斜体;
iframe的优缺点
优点:
- 可以加载速度较慢的内容(广告)
- 可以并行下载脚本
- 可以解决跨域问题
缺点:
- 产生较多页面,不便管理
- 阻塞页面的onload事件
- 其内容无法被搜索引擎识别
label标签
- 定义表单控件的关系
- 放大表单作用域,提升使用体验
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
<label>Date:<input type="text"/></label>
Canvas和SVG的区别
Canvas
- Canvas是画布,是标量图,通过JavaScript来绘制2D图形,逐像素绘制
- 当位置发生变化则会重新绘制,适合图像密集型的游戏
- 依赖分辨率
- 不支持事件处理器
- 不能被搜索引擎抓取
- 弱的文本渲染能力
- 能用.png,.jpg保存图像
SVG
- SVG是可缩放矢量图形,是矢量图,是基于XML描述2D图形的语言
- 适合做有大型渲染区域的程序(地图),不适合做游戏
- 不依赖分辨率
- 支持事件处理器
- 可以被搜索引擎抓取
渐进增强与优雅降级
- 渐进增强:一开始针对低版本浏览器进行构建,以完成基本功能为首要任务。后续再针对高版本浏览器追加效果、功能,以达更好的体验。(向上兼容)
- 优雅降级:一开始就构建完整的内容、效果和功能,后续再对低版本浏览器作兼容。(向下兼容)
/*渐进增强写法*/
.transition
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
/*优雅降级写法*/
.transition
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
以上是关于HTML/HTML5的主要内容,如果未能解决你的问题,请参考以下文章