了解HTML核心精髓（一）

时间 2019-11-12

标签了解 html 核心精髓栏目 HTML 繁體版

原文原文链接

html部分javascript

1.html标签css

标签不区分大小写。html

如：<!doctype html>与<!DOCTYPE html >vue

<div></div>与<DIV></DIV>html5

PS：建议一概使用小写字母。对于javascript的mvvm框架（vue，react，angularjs）组建标签，会采用大写母开头的标签。java

2.行内元素与块元素node

行内元素：不换行 span, strong, em, br, img , input, label
块元素：会换行 div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, tablereact

二者区别：行内元素没法设置height，width，margin，padding。angularjs

3.a标签空连接写法web

做用：禁止空连接跳转到顶部。

4.特殊符号要用字符实体

如：空格符号要使用 （避免浏览器误认）。

5.邮件html

使用table布局。

不使用style标签，使用css内联，css内联不要写float、position（尽可能少用）。

少用图片。

页面结尾须要加上“若是您没法查看邮件内容，请点击这里查看”。（再作一个html页面）

PS：缘由是大多数邮件系统有过滤机制（用于识别垃圾邮件），因此不能使用div+css这种模式的邮件网页。

6.不用添加<noscript>标签

通常没有不使用js脚本的网站，通常浏览器不会默认禁用js脚本。（通常用户不会手贱设置浏览器禁用js脚本，IE是个特例）

7.后台页面使用iframe与frameset

防止SEO后台页面。

8.响应式iframe

irame自己不能伸缩，因此要加两个个容器去包裹，再来响应式。

如：.wrap{width：500px} /*第一层容器*/

.wrap-iframe{position:relative;} /* 第二层容器*/

iframe{position:aboslute;width:100%;height:100%;} /*iframe标签*/

@media (max-width:500px){.wrap{800px}}

9.img标签订义高宽

PS:定义的做用是为了img标签占位高宽，防止图片没有加载出来的时候影响布局。

若是有固定宽高的图片就定义高宽（不用css去定义）

若是没有固定宽高的图片，如瀑布流的图片墙（就不定义高宽）

补充：若是使用https协议的话，页面加载的资源（如图片，视频等）的url最好改为https协议（采用同源策略），防止浏览器加载不出来。

10. input类型submit和button区别

submit会提交表单（form），按回车提交表单。

button不会提交表单.单纯的按钮功能。能够经过onclick事件触发表单事件。

html5部分

1.建议使用的标签

结构标签

<article> 标记定义一篇文章

<header> 标记定义一个页面或一个区域的头部

<nav> 标记定义导航连接

<section> 标记定义一个区域

<aside> 标记定义页面内容部分的侧边栏

<hgroup> 标记定义文件中一个区块的相关信息

<figure> 标记定义一组媒体内容以及它们的标题

<figcaption> 标签订义 figure 元素的标题。

<footer> 标记定义一个页面或一个区域的底部

多媒体标签

<video> 标记定义一个视频

<audio> 标记定义音频内容

<source> 标记定义媒体资源

<canvas> 标记定义图片

PS：使用以上经常使用html5标签，利于网页布局的改变及提高SEO。

补充：div标签与section标签区别

div标签表示无心义的块元素。

section标签表示区块的元素，经常使用于两处，一是在<article>标签里面包裹区块，二是做为间隔内容区块。

1.html5不使用的标签

纯表现的元素： basefont，big，center，font, s，strike，tt，u。

对可用性产生负面影响的元素： frame，frameset，noframes。

产生混淆的元素： acronym ，applet，isindex，dir。

已经废弃的元素：keygen

PS：html5新特性：

语义化标签，无需指明link的type属性，无需DTD文件，新增html5地理定位，本地存储，拖拽，音视频，图形绘制，表单输入类型API。兼容性提升。

2.html5离线缓存与浏览器缓存区别

html5离线缓存能够缓存整个网站，而浏览器的缓存将只存储你实际上已经访问过的网页缓存。

PS：html5缓存的AppCache（已过期，不推荐使用），建议使用浏览器缓存机制来进行缓存静态资源。

对于一些用户数据，如一些定位信息，请使用localstorage来存储。

4. <time>标签

做用：利于seo的按时间检索。

3.html5 web worker与nodejs区别

web worker浏览器的后台（多线程），nodejs独立的服务端。

4.html5 vedio标签里面使用MP4格式有声无画面

转换成H264编码就能够网页正常播放了。

5.html5 使用data-* 自定义属性

自定义属性规范化，不要随便自定义属性名字。

正确写法：<div data-name="waterman"></div>

6.html5微数据

做用：利于seo优化。

7.利用data-*来存放数据，避免使用<input type="hidden" name="field＿name" value="value">

缘由：规范属性，节省空标签。

PS：IE须要IE 11+以上支持这属性。

8.使用meta标签中dns-prefetch 提升页面载入速度。

做用是告诉浏览器页面加载的时候，先解析这些域名，减小页面资源URL的DNS解析。

如：<link rel="dns-prefetch" href="//img.sroot.com">

PS：同域无效，跨域有效。