第三章 HTML5的结构

article元素更强调独立性,section元素强调分段,div元素强调css的套用,aretcle元素和section元素在核实的情况下可以调换

nav元素用作页面导航的链接组,通常里面包含<ul><li><a>元素

aside元素表示页面或文章的附属信息部分,可以是与当前页面或内容相关的参考资料,名词解释

time元素表示24小时中的某个时刻或日期<time datetime="2014-8-6T19:53-14:00">时间</time>日期与时间用T间隔,在19:53后加Z表示使用UTC标准时间,-14:00表示时差,可不添加

pubdate属性表示文章或网页的发布日期<time datetime="2014-8-6" pubdate>....</time>

新增的非主体结构元素

<header>元素是一种具有引导和导航作用的结构元素,可以为每块内容区加这个元素,通常其中会有一个heading元素(h1-h6)

hgroup元素,对标题及其子标题进行分组(拥有多个heading元素时)

footer元素,作为上层父级内容区域的根脚注(比之前div添加id=footer更加语义化)

address元素,表示作者名字等信息,可与footer等其它元素使用

HTML5结构

内容区块的编排可分为“显式编排”(明确使用了section等元素)和“隐式编排”(未使用section等元素),尽量使用显式编排

对新的结构元素使用样式:

很多浏览器未对HTML5新增的元素提供支持,可以这样设置

article,aside,dialog,figure,footer,header,legend,nav,section{display:block;}

nav{float;left;width:20%};

article{float:right;width:79%};

另外IE8及之前的浏览器不支持CSS方法,则需要使用Javascript脚本

<script>

document.createElement('header');

  ...

document.createElement('nav');

</script>

<style>

nav{float;left;width:20%};

</style>

第四章 表单与文件

新增元素与属性

form属性(下列textarea元素从属form元素)

<form id='testform'>

<input type='text'>

</form>

<textarea form='testform'></textarea >

formaction属性,在HTML4中所有的表单元素只能通过表单的action属性统一提交到一个页面,HTML5可以给所有的提交按钮增加不同的提交地址

<form id="testform" action="serve.jsp">

  <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1

  <input type="submit" name="s1" value="v1" formaction="s2.jsp">提交到s2

  ...

</form>

formmethod属性,与formaction同理,增加不同提交方法

<input type="submit" name="s1" value="v1" formaction="s2.jsp" formmethod="get">提交到s2

placeholder属性,文本框处于未输入状态时,显示的提示文字

autofocus属性

list属性,属性的值是datalist元素的id,效果类似于<select>

autocomplete属性,可以指定“on” “off” “”(不指定),自动完成时,可以将datalist元素中的数据作为候补数据

<input type="text" name="greeting" autocomplete="on" list="greetings">

大幅度增加与改良了input元素的种类

<input name="url1" type="url" value="http://www.baidu.com">

对新表单元素使用样式

output元素,它定义了不同类型的输出,比如计算结果或脚本的输出(它从属于某个表单)

<form>

<input name="range1" type=range min=0 max=100 step=5/>

<output onforminput="value=range1.value">50</output>

</form>

以上例子会输出一个数值,表示用户拖动range元素的值

HTML5与CSS3权威指南.pdf2的更多相关文章

  1. Html5与CSS3权威指南 百度云下载

    Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3

  2. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  3. 【HTML5 4】《HTML5与CSS3权威指南》 step1 导读

    一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与H ...

  4. HTML5与CSS3权威指南.pdf6

    第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess, ...

  5. HTML5与CSS3权威指南笔记案例1

    第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...

  6. HTML5与CSS3权威指南

    第一章:Web时代的变迁 HTML5放心使用的理由: 兼容性:HTML5在老板本的浏览器上也可以正常运行: 实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能: ...

  7. 读《HTML5与CSS3权威指南(上册)》笔记

    第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...

  8. HTML5与CSS3权威指南.pdf9

    第21章 Media Queries相关样式 该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media ...

  9. HTML5与CSS3权威指南.pdf8

    第17章 与背景和边框相关的样式 与背景相关的新增属性 background-clip指定背景的显示范围 background-origin指定绘制背景图像时的起点 background-size指定 ...

随机推荐

  1. bzoj1697:[Usaco2007 Feb]Cow Sorting牛排序 & bzoj1119:[POI2009]SLO

    思路:以bzoj1119为例,题目已经给出了置换,而每一次交换的代价是交换二者的权值之和,而置换一定是会产生一些环的,这样就可以只用环内某一个元素去置换而使得其余所有元素均在正确的位置上,显然要选择环 ...

  2. ios 64位下编译webrtc的libvpx库出现错误Bad cputype for object file.Currently only tested for CPU_TYPE_x86_64

    diff --git a/libvpx.gyp b/libvpx.gypindex 4f8cb2b..4eb6866 100644--- a/libvpx.gyp+++ b/libvpx.gyp@@ ...

  3. HBuilder手机Iphone运行提示“未受信用的企业级开发者”

    HBuilder手机Iphone运行提示“未受信用的企业级开发者” 解决方法:设置-----通用------设备管理-----点击Digtial Heaven....---信任"Digtia ...

  4. html5 canvas绘制圆形印章,以及与页面交互

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery完善的处理机制

    使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误.请看下面例子: <script> d ...

  6. Expat Parser解析xml文件

    Expat 解析器是基于事件的解析器. 基于事件的解析器集中在 XML 文档的内容,而不是它们的结构.正因为如此,基于事件的解析器能够比基于树的解析器更快地访问数据. 请看下面的 XML 片段: &l ...

  7. 小笔记(三):PHP使用thinkphp3.2.3对数组进行分页

    之前写过thinkphp3.2.3直接在查询数据的时候进行分页,前段时间用到了将查询之后的数组进行整理后进行分页,用到的一个函数array_slice($arr, $start, $length,tr ...

  8. 一个Highcharts的例子

    关键字:Highcharts <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...

  9. (转载)MVC + JQUERY + AJAX的几种方式

    MVC + JQUERY + AJAX的几种方式 // 传过去一个简单值,获取一个简单值 $.ajax({            type: "GET",         url: ...

  10. 关于OA中权限越级的问题

    最近被人问了一个问题, 在OA中我, 经理出差了,下属需要用到 经理的权限,应该怎么处理. 这个问题比较简单,大神,请指点一下. 一开始 ,我就被搞懵了. 我的回答是: 经理出差之前赋给权限就可以了. ...