Html开发小结
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.特殊符号要用字符实体
如： 空格符号要使用 （避免浏览器误认）。
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开发小结的更多相关文章
- vue开发小结(下)
前言 继前几天总结了vue开发小结(上)后,发现还有很多的点没有能列举出来,于是还是打算新建一个下篇,再补充一些vue开发中需要注意的细节,确实还是都是细节的问题,我只是在这里强调下,希望对大家有帮助 ...
- pdfjs viewer 开发小结
此文已由作者吴家联授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1. pdfjs库简介 PDF.js 是由Mozilla 主导推出的可以将PDF文件转换为H5页面进行展示的 ...
- Android 即时通讯开发小结（二）
<Android 即时通讯开发小结>基于IM Andriod 开发的各种常见问题,结合网易云信即时通讯技术的实践,对IM 开发做一个全面的总结. 相关推荐阅读:. Android 即时通讯 ...
- Android 即时通讯开发小结（一）
<Android 即时通讯开发小结>基于IM Andriod 开发的各种常见问题,结合网易云信即时通讯技术的实践,对IM 开发做一个全面的总结. 相关推荐阅读:. Android 即时通讯 ...
- 5Spring动态代理开发小结
5Spring动态代理开发小结 1.为什么要有动态代理? 好处 1.利于程序维护 2.利于原始类功能的增强 3.得益于JDK或者CGlib等动态代理技术使得程序扩展性很强 为什么说使得程序扩展性很强? ...
- 移动Web开发小结
以下是做移动端Web开发过程中小结的几个事项:希望能够帮助到大家,同时也方便自己查看: 1,在移动开发页面中,主体盒子的max-width与min-width的设置原因: ①设置max-width是为 ...
- ipad开发小结
项目小结 :布局的时候最后要用CGRectDivi.. :控制器的生命周期---->(init-->(当self.view==nil调用 loadView viewdidload)--&g ...
- redis开发小结
随着缓存在web服务中用的越来越广泛,redis可以说成为了目前最流行的NoSQL数据库!redis与memcached最大的不同在于redis支持更多的数据类型,包括string.hash.list ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
- 必应词典UWP版-开发小结
摘要 必应词典UWP版已经上线2周了!相信有不少用户都已经体验过了吧!得益于Win10全新.强大的API,新版词典在性能上.UI体验上都有了大幅的提升,今天,小编就为大家讲讲必应词典UWP开发的故事. ...
随机推荐
- cf519D. A and B and Interesting Substrings(前缀和)
题意 给出$26$个字母对应的权值和一个字符串 问满足以下条件的子串有多少 首尾字母相同 中间字母权值相加为0 Sol 我们要找到区间满足$sum[i] - sum[j] = 0$ $sum[i] = ...
- ABAP日期和时间运算
"日期运算是以天为单位,时间运算以秒为单位.DATA:date1 TYPE d. "服务器当前日期date1 = sy-datum.WRITE: / date1 . "2 ...
- Linux下常用的数据恢复工具
一.数据删除 命令:rm -rf,将任何数据直接从硬盘删除,且没有任何提示 建议做法: 把命令参数放到后面:rm -rfi 将删除的东西通过mv命令移动到系统下的/temp目录下,然后写个脚 本定期执 ...
- Spring的DI（Dependency Injection)
写在之前,作为正在学习的程序员,对于Spring理解比较差,给两个简单的定义大家看一下. 控制反转(Inversion of Control),是一个重要的面向对象编程的法则来削减计算机程序的耦合问题 ...
- 织梦修改文档HTML默认保存路径
\data\config.cache.inc.php $cfg_arcdir = '/a'; 改为 $cfg_arcdir = '/';
- Android 模仿苹果虚拟悬浮按钮（自动靠边、可浮现任何界面上）
由于最近小蔡的手机音量键坏了,调节音量有点麻烦,突发奇想,想自己实现一个快捷键来调节音量.在忘上参考了一些代码,总结出一般本章,分享给大家. 首先 按钮要想实现悬浮在任何界面,那么必须是要写在服务里面 ...
- JavaScript_3_输出
1. JavaScript通常用于操作HTML元素,可以使用getElementById(id)方法. JavaScript由Web浏览器来执行. 2. document.write()仅仅向文档输出 ...
- 洛谷 P1057 传球游戏
题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:n个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹哨子时开始传球,每个同 ...
- 11gR2 Agent 简介
目的:本文会对oracle 11gR2 集群件(Grid Infrastructure,以下简称GI) 新特性 agent进行介绍,包括 agent的功能,常见的agent介绍,以及基本的诊断方法. ...
- UVA 11491 Erasing and Winning 奖品的价值 （贪心）
题意:给你一个n位整数,让你删掉d个数字,剩下的数字要尽量大. 题解:因为最后数字位数是确定的,而且低位数字对答案的贡献是一定不及高位数字的,所以优先选择选最大且最靠左边的数字,但是有一个限制,选完这 ...