html部分

1.html标签

标签不区分大小写。

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

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

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

2.行内元素与块元素

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

两者区别：行内元素无法设置height，width，margin，padding。

3.a标签空链接写法

<a href="javascript:;" ></a>

作用：禁止空链接跳转到顶部。

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

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

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标签定义高宽

<img src="data:image/abc.png" width="20" height="19">

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> 标记定义图片

<embed> 标记定义外部的可交互的内容或插件 比如flash

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>

<div 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：同域无效，跨域有效。

Html开发小结的更多相关文章

  1. vue开发小结(下)

    前言 继前几天总结了vue开发小结(上)后,发现还有很多的点没有能列举出来,于是还是打算新建一个下篇,再补充一些vue开发中需要注意的细节,确实还是都是细节的问题,我只是在这里强调下,希望对大家有帮助 ...

  2. pdfjs viewer 开发小结

    此文已由作者吴家联授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1. pdfjs库简介 PDF.js 是由Mozilla 主导推出的可以将PDF文件转换为H5页面进行展示的 ...

  3. Android 即时通讯开发小结（二）

    <Android 即时通讯开发小结>基于IM Andriod 开发的各种常见问题,结合网易云信即时通讯技术的实践,对IM 开发做一个全面的总结. 相关推荐阅读:. Android 即时通讯 ...

  4. Android 即时通讯开发小结（一）

    <Android 即时通讯开发小结>基于IM Andriod 开发的各种常见问题,结合网易云信即时通讯技术的实践,对IM 开发做一个全面的总结. 相关推荐阅读:. Android 即时通讯 ...

  5. 5Spring动态代理开发小结

    5Spring动态代理开发小结 1.为什么要有动态代理? 好处 1.利于程序维护 2.利于原始类功能的增强 3.得益于JDK或者CGlib等动态代理技术使得程序扩展性很强 为什么说使得程序扩展性很强? ...

  6. 移动Web开发小结

    以下是做移动端Web开发过程中小结的几个事项:希望能够帮助到大家,同时也方便自己查看: 1,在移动开发页面中,主体盒子的max-width与min-width的设置原因: ①设置max-width是为 ...

  7. ipad开发小结

    项目小结 :布局的时候最后要用CGRectDivi.. :控制器的生命周期---->(init-->(当self.view==nil调用 loadView viewdidload)--&g ...

  8. redis开发小结

    随着缓存在web服务中用的越来越广泛,redis可以说成为了目前最流行的NoSQL数据库!redis与memcached最大的不同在于redis支持更多的数据类型,包括string.hash.list ...

  9. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

  10. 必应词典UWP版-开发小结

    摘要 必应词典UWP版已经上线2周了!相信有不少用户都已经体验过了吧!得益于Win10全新.强大的API,新版词典在性能上.UI体验上都有了大幅的提升,今天,小编就为大家讲讲必应词典UWP开发的故事. ...

随机推荐

  1. ArrayList集合--关于System.out.print(Object obj);的理解

    1.ArrayList集合中常用的方法 ArrayList<Student> stuArrayList = new ArrayList<>(); //定义一个集合对象 stuA ...

  2. .NET 读取视频文件

    该篇文章 复制别人的文章 在.NET中处理视频是一件痛苦的事情,.NET并没有提供视频处理的类.于是咱们只能找一些第三方的类库或者自己实现,在项目时间比较赶的情况下,自己实现是不可能的了,而且说不定会 ...

  3. 记一次RabbitMq 安装和配置坑

    记一次RabbitMq 安装和配置坑 正常情况下安装 先安装erl ,在安装rabbitmq 这个在windows下的安装没什么技巧,按照默认一路下一步就ok.安装好后可以到cmd测试是否安装好. 测 ...

  4. UVA 1615 Highway 高速公路 （区间选点）

    题意:在一条线段上选出尽量少的点,使得和所有给出的n个点距离不超过D. 分别计算出每个点在线段的满足条件的区间,然后就转化成了区间选点的问题了,按照右端点排序,相同时按照左端点排序,按照之前的排序一定 ...

  5. Processing分形之一——Wallpaper

    之前用C语言实现过一些分形,但是代码比较复杂.而对于天生对绘图友好的Processing,及其方便. 在大自然中分形普遍存在,我们用图形模拟,主要是找到一个贴近的函数. 代码 /** * Wallpa ...

  6. 文本框复制代码，兼容大部分浏览器（ZeroClipboard插件、附件）

    ;;list-style-type:none;} a,img{;} body{font:12px/180% Arial, Helvetica, sans-serif ,"新宋体"; ...

  7. [BZOJ4327]:[JZOI2012]玄武密码（AC自动机）

    题目传送门 题目描述: 在美丽的玄武湖畔,鸡鸣寺边,鸡笼山前,有一块富饶而秀美的土地,人们唤作进香河.相传一日,一缕紫气从天而至,只一瞬间便消失在了进香河中.老人们说,这是玄武神灵将天书藏匿在此.  ...

  8. java第八次作业：课堂上发布的前5张图片（包括匿名对象、单例模式恶汉式、自动生成对象、args[]数组使用、静态关键字）

  9. lua调用java过程

    在cocos2dx框架中,有继承好的luaj文件来方便我们去使用lua调用java底层代码,注意:luaj只能使用在安卓平台下,如果在平台下使用,会出错, 所以使用前需要加平台判断,方法 如下: lo ...

  10. SVN：The working copy is locked due to a previous error （二）

    之前也碰到过这种问题,但是根本问题不同,解决方案不同. 传送门:SVN:The working copy is locked due to a previous error (二) 本次错误如图: 解 ...