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. 就来推荐一本2018年研究的Web书《移动Web前端高效开发实战》

    一线互联网公司Web前端团队实战经验总结,涵盖移动Web前端开发各个关键技术环节,包括移动开发核心技术.常用布局方案.MV*类新时代框架.预编译技术.性能优化.开发调试.混合式应用.单元测试.工程化等

  2. C++运算符重载讲解与经典实例

    最近在学C++,找到一篇详细讲解运算符重载的文章,贴在这里分享和收藏. C++中预定义的运算符的操作对象只能是基本数据类型,实际上,对于很多用户自定义类型,也需要有类似的运算操作.例如: class  ...

  3. equals()方法详解

    Java语言中equals()方法的使用可以说比较的频繁,但是如果轻视equals()方法,一些意想不到的错误就会产生.哈哈,说的有点严重了~ 先谈谈equals()方法的出身.equals()方法在 ...

  4. redmine安装详解

    1.Linux:centos6.4(32位)2.Gcc的编译环境.使用make命令编辑.yum install gcc-c++ 3.PCRE PCRE(Perl Compatible Regular ...

  5. 卓越管理的实践技巧（1）如何进行有效的指导 Guidelines for Effective Coaching

    Guidelines for Effective Coaching 前文卓越管理的秘密(Behind Closed Doors)最后一部分提到了总结的13条卓越管理的实践技巧并列出了所有实践技巧名称的 ...

  6. springmvc 的原理分析

    1. 用户发送请求至前端控制器(DispatcherServlet) 2.DispatcherServlet 将受到的请求调用HandlerMapping 处理映射器 3.处理器映射器根据配置注解找到 ...

  7. vue 中根据地址名称获取实际经纬度方法

    <div id="container" class="map" style="margin-top:30px; width: 1200px;he ...

  8. SSH程序框架之Spring与HIbernate整合

    spring整合hibernate 有两种方式 1.注解方式 2.xml方式实现 Spring整合Hibernate有什么好处? 1.由IOC容器来管理Hibernate的SessionFactory ...

  9. 01_2_模拟spring装载bean

    01_2_模拟spring装载bean 1. xml配置文件内容 beans.xml <beans> <bean id="u" class="com.w ...

  10. IOS7的变化

    API变化: 1.弃用 MKOverlayView 及其子类,使用类 MKOverlayRenderer: 2.弃用 Audio Toolbox framework 中的 AudioSession A ...