[持续更新]HTML5学习笔记(一)
2015-08-31 16:38
633 查看
HTML学习笔记
1. DOCTYPE
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML,所以不需要引用 DTD。
简言之:它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。
常见的有:
<!DOCTYPE HTML
PUBLIC "-//IETF//DTD HTML//en">
按照HTML5规范的书写只有一种,建议使用。
<!DOCTYPE html>
2. HTML实体
实体是浏览器用来代替特殊字符的一种代码。简单来说,html是有标签组成的,所以你在输入一段文字的时候,会判断文字中是否有可是别的标签,若有,则翻译对应的标签。比如:我想入俗一段文字。
<p>this is <i>test</i> <hhhhh> end</p>
可以看到test是斜体而<hhhh>则不显示。若<hhhh>是我想要显示的内容怎么办:
<p>this is <i>test</i> <hhhhh> end</p>
这样就可以解决问题。
这里的<>就是HTML实体。
常见的HTML实体如下表:
字符 | 实体名称 | 实体编号 |
< | < | < |
> | > | > |
& | & | |
€ | € | € |
£ | £ | £ |
© | © | © |
® | ® | ® |
™ | ™ | ™ |
3. HTML5全局属性
全局属性:用来配置所有元素的共有的行为。全局属性也可以用在任何一个元素身上。这里罗列出一个我不太熟悉的。1. accesskey
可以设定一个或几个用来选择页面上的元素的快捷键。
2. contentitable
HTML5中新增的属性,让用户哪修改页面上的内容。
<div contenteditable="true"> <p>你可以修改这里的文字</p> <p contenteditable="false">你不可以修改这里的文字</p> </div>
该属性设置为true时用户可以编辑元素内容,false时则禁止编辑。未设置的时候,元素从父元素处继承该属性的值。
3. dir
该属性用来规定元素中的文字方向,有效值有两个ltr,rtl。
<p dir="ltr">ltr = left to right</p> <p dir="rtl">rtl = right to left</p><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
4. draggable
HTML5支持拖拽操作的方式之一
5. dropzone
HTML5支持拖拽操作的方式之一 与draggable搭配使用 以后细说。
6. lang
该属性说明元素内容使用的语言。该属性值必须使用有效地ISO语言代码。
7. spellcheck
该属性用来表明浏览器是否应该对元素的内容进行拼写检查。该属性只有在用户可编辑的元素上才有意义。
<input type="text" spellcheck="true"> <textarea spellcheck="true"></textarea> <p spellcheck="true">你可以修改这里的文字</p><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
8. tabindex
页面上的键盘焦点可以通过tab键在各元素之间切换。tabindex可以改变默认的转移顺序。
<label>Name:</label><input type="text" tabindex="1"/><br> <label>Password:</label><input type="password" tabindex="-1"/><br> <label>Repassword:</label><input type="password" tabindex="2" /><br> <button type="submit" tabindex="3">submit</button>
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- 原生js结合html5制作小飞龙的简易跳球
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- HTML5实现微信拍摄上传照片功能
- jQuery+HTML5加入购物车代码分享
- 实现音乐播放器的代码(html5+css3+jquery)
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- HTML5使用DeviceOrientation实现摇一摇功能
- jquery+html5烂漫爱心表白动画代码分享
- spring+html5实现安全传输随机数字密码键盘
- html5在android中的使用问题及技巧解读
- 非html5实现js版弹球游戏示例代码
- html5 canvas js(数字时钟)实例代码
- js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS