HTML5入门 2.docx
- 文档编号:2953060
- 上传时间:2022-11-16
- 格式:DOCX
- 页数:13
- 大小:92.18KB
HTML5入门 2.docx
《HTML5入门 2.docx》由会员分享,可在线阅读,更多相关《HTML5入门 2.docx(13页珍藏版)》请在冰豆网上搜索。
HTML5入门2
你必须知道的28个HTML5特征、窍门和技术
摘要:
前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。
如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。
更多html5信息请关注:
http:
//www.html5cn.org
一、新的Doctype
//zxx:
”doctype”中文意思指“文档类型”
仍在使用麻烦的,不可能记得住的XHTML文档类型?
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.html5cn.org/">如果是,为什么还在用呢?
使用新的HTML5文档类型代替吧。
你会活得更久的——正如DouglasQuaid说的
DOCTYPEhtml>我就琢磨着,为了HTML5搞个这厮代码,您可能会对这段代码究竟靠不靠谱表示怀疑。
不用担心,如今这是可行的,只有老的浏览器需要一个特定的doctype(文档类型)。
浏览器如果不知道doctype,就会很简单的以标准模式对包含的标签进行渲染。
所以,妹妹你大胆的向前冲,把小心谨慎都抛到九霄云外,去拥抱新的HTML5文档类型吧。
二、图形元素(TheFigureElement)
看看下面给图片添加的标示:
ImageofMars.
文字裹在p标签里,与img标签各行其道,很难让人联想到这就是标题。HTML5通过采用
当合
Thisisanimageofsomethinginteresting.
三、重新定义
还在不久前,元素被用来创建靠近logo且相关的副标题。
这是个很有用的表现元素,但是,现在,这种用法可能就不正确了。
元素已经被重新定义了,指小字,因而更具可用性。
试想下你网站底部的版权状态,根据对此元素新的HTML5定义,可以正确地包裹这些信息。
small元素专指“小字”。
四、脚本(scripts)和链接(links)无需type
您可能现在仍在给link和script标签增加type属性。
这意味着,这些标签都各自指向样式表和脚本。
因此,我们可以把type属性一起干掉。
五、引号还是不要引号
…这确实是个问题。
记住,HTML5不是XHTML,要是你不愿意,你没有必要非得用引号标记包裹你的属性,没有必要非得闭合元素。
换句话说,只要你自己觉得舒服,就没有什么对错之分。
对于我自己来说就是如此。
如果你更倾向于结构化的文档,就算天塌下来,也要把引号牢牢拽在怀里。
六、内容可编辑
最新的浏览器有个很赞的新属性可以应用到元素上,叫做contenteditable。
顾名思意,就是允许用户编辑元素内容包含的任意文本,包括子元素。
类似的用途还有很多,像是简单的待办事项清单应用程序,可大大利用其本地存储的优势。
七、Email输入(Inputs) 如果我们给表单输入框应用名为”email”的type属性,我们可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。 没错,内置表单验证即将到来,由于一些显而易见的原因,我们还不能100%依赖内置验证,较旧的浏览器不认识这个”email”型,它们会简单地退回到普通文本框。 //zxx: 经我小测了下,貌似仅在Chrome浏览器下有效果(xp系统),当输入内容不是合法邮箱格式,点击“确定”按钮是没有反应的;当输入为合法邮箱,点击“确定”按钮才会提交刷新页面。 目前而言,我们不能依赖浏览器验证,客户端/服务器验证还是必须的。 还应当指出,当谈到哪些元素和属性支持和不支持时,当前所有的浏览器都有点靠不住的。 例如,Opera似乎支持电子邮件验证,但仅在name属性被指定的时候。 而且,它不支持占位符属性,这个我们将会在后面学到。 底线是不依赖于这种形式的验证…但你仍然可以使用它! 八、占位符(Placeholders) //zxx: 此处内容非直译,有删改 Placeholders什么意思呢,就是文本框/文本域空间默认会有个文字提示,获得焦点时,此提示文字消失;失去焦点时如果内容为空,提示文字又出现。 如下图所示: 这些表单控件里面显示的些提示性的文字就是占位符。 按照以往的做法,我们需要使用一点JavaScript代码实现占位符效果,例如我之前的“文本框/域文字提示自动显示隐藏jQuery小插件”一文所展示的。 当然,你需要设定一个初始的默认的value值,然后根据输入内容进行判断,从而决定文本框值的改变与否。 如果您使用占位符(placeholders)属性,一切就轻松了。 九、本地存储(LocalStorage) 多亏了本地存储(非正式的HTML5,本着方便归纳的目的),我们可以让高级浏览器记住我们的编辑后的内容,即使浏览器被关掉或是页面刷新。 //zxx: 原视频默认展示的是YouTube视频,不翻墙看不了,所以,这里展示来自另外一个网站的video。 建议全屏观看,以看清其中的HTML与JavaScript代码 //zxx: 根据视频内容,我自己做了个demo,关于本地存储的。 IE8浏览器已经支持了本地存储,如下截图所示: 尽管显然不支持所有的浏览器,我们可以在InternetExplorer8时,Safari4和Firefox3.5下期待此工作方式。 请注意,为了弥补旧的浏览器将无法识别本地存储,你应该先测试,以确定window.localStorage是否存在。 十、语义的Header和Footer 那些过往的日子: ...
...
现在,通过HTML5,我们可以使用
以上的代码可以替换成:
...
...
它完全适合您有多个页眉和页脚的项目。
尽量不要混淆”header”和”footer”这些元素。
他们只是指他们的容器。
因此,将博客底部的,例如,元信息放在footer元素内部是说得通的。
这同样也适用于header。
十一、更多HTML5表单特征(MoreHTML5FormFeatures)
通过下面视频学习更多有用的HTML5表单特征:
//zxx:
TouTuBe视频,需要翻墙
十二、IE和HTML5(InternetExplorerandHTML5)
不幸的是,讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素。
所有元素,默认的,都有个inline的display
为了确保所有新的HTML5元素能以block水平的元素正确地渲染,有必要对其做如下定义:
header,footer,article,section,nav,menu,hgroup{display:
block;}不幸的是,IE仍旧忽略这些样式,因为它不知道这些标签从哪里来的,好比是header元素。
幸运的是,有一个简单的解决办法:
document.createElement("article");document.createElement("footer");document.createElement("header");document.createElement("hgroup");document.createElement("nav");document.createElement("menu");奇怪的是,这段代码似乎触发IE浏览器。
为了更简单将此应用到每个新的应用过程中,雷米夏普(RemySharp)创建了一个脚本,通常称为HTML5shiv。
该脚本同样修复了些显示问题。
--[ifIE]> //www.html5cn.org/"> [endif]--> 十三、文档某一部分的信息(hgroup) 想象一下,在我的网站的标题,我有我的站点的名称,随后立即由一个副标题。 虽然我们可以使用一个和lt;h2>标签,为其分别创造标记,但是依旧没有(因为HTML4)一个简单的方法来语义上说明了两者之间的关系。
此外,一个h2标记的使用提出了更多的问题,在层次结构上,当涉及到其他网页上显示的标题时。
通过使用不影响文档的大纲流hgroup元素,我们可以将这些标题组合在一起。
&header&&hgroup&&h1&RecallFanPage&/h1&&h2&Onlyforpeoplewhowantthememoryofalifetime.&/h2&&/hgroup&&/header&
十四、必要的属性(RequiredAttribute)
表单允许新的必要属性,用来指定是否需要特殊的input。
这取决于你的代码偏好,你可以以下面两种方式之一申明此属性。
有了这个代码,并且浏览器支持此属性,如果
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5入门 HTML5 入门
![提示](https://static.bdocx.com/images/bang_tan.gif)