读《HTML5与CSS3权威指南（上册）》笔记
第二章
1.内容类型：“text/html”。DOCTYPE声明：<!DOCTYPE html>。指定字符编码：<meta charset="utf-8">
2.不允许写结束标记的元素有：area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr
可以省略结束标记的元素有：li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,body,tfoot,tr,td,th
可以省略全部标记的元素有：html,head,body,colgroup,tbody
3.具有boolean值得属性，当只写属性而不指定属性值时，表示属性值为true；如果要想将属性值设为false，可以不使用该属性。另外，要想将属性值设为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。
<!-- 只写属性不写属性值代表属性为true -->
<input type="checkbox" checked>
<!-- 不写属性代表属性为false -->
<input type="checkbox">
<!-- 属性值=属性名，代表属性为true -->
<input type="checkbox" check="checked">
<!-- 属性值=空字符串，代表属性为true -->
<input type="checkbox" check="">
4.HTML5中，指定属性值时，可以省略引号。
5.新增元素：<section>...</section> <article>...</article> <aside>...</aside> <header>...</header> <hgroup>...</hgroup>
<footer>...</footer> <nav>...</nav> <figure>...</figure>
<video src="movie.ogg" controls="controls">video元素定义视频</video>
<audio src="some.wav">audio元素定义音频</audio>
<!-- embed元素用来插入各种多媒体，格式可以是Midi，Wav,AIFF,AU,MP3等 -->
<embed src="horse.wav">
<mark>高亮显示文字</mark>
<progress>表示运行中的进程</progress>
<meter>表度量</meter>
<time>表示时间</time>
<ruby>ruby注释</ruby>
<wbr>软换行，浏览器窗口宽度不够时，主动换行
<canvas id="maCanvas" width="200" height="200">表示图形</canvas>
<command onclick=cut() label="cut">表示命令按钮</command>
<details>表示详细信息</details>
<datalist>表示可选数据列表，与input配合使用，可以制作出输入值的下拉列表</datalist>
<datagrid>表示可选数据列表，以树形列表的形式来显示</datagrid>
<keygen>表示生成密钥
<output>表示不同类型的输出</output>
<source>定义媒介资源
<menu>表示菜单列表</menu>
6.新增input类型：email,url,number,range,Date Pickers
7.新增全局属性：contentEditable属性，designMode属性，hidden属性，spellcheck属性，tabindex属性。
第三章
1.putdate属性：是一个可选的，boolean值的属性，它可以用到article元素中的time元素上，意思是time元素代表了文章或整个网页的发布时间。
第四章
1.新增属性：表单内元素的form属性；表单元素的formaction属性；表单内元素的formmethod属性；表单内元素的formenctype属性；表单内元素的formtarget属性；表单内元素的autofocu属性；表单内元素的required属性；表单内元素的labels属性；标签的control属性；文本框的placeholder属性；文本框的list属性；文本框的autocomplete属性；文本框的SelectionDirection属性；复选框的indeterminate属性；image提交按钮的height属性与width属性；textarea元素的maxlength属性与wrap属性。
<!-- 表单内元素的form属性； -->
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>
<hr>
<!-- 表单元素的formaction属性； -->
<form id="testform" action="serve.jsp">
<input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1
<input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2
<input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到s3
</form>
<hr>
<!-- 表单内元素的formmethod属性；指定不同的提交方法-->
<form id="testform" action="serve.jsp">
姓名：<input type="text" name="name"/><br/>
<input type="submit" value="post方式提交" formmethod="post">
<input type="submit" value="get方式提交" formmethod="get">
</form>
<hr>
<!-- 表单内元素的formenctype属性；指定在表单发送到服务器之前应该如何对表单内的数据进行编码 -->
<form action="serve.jsp" method="post">
<input type="text" name="name" value="test"/><br/>
文件：<input type="file" name="files">
<input type="submit" value="上传" formaction="uploadFile.jsp" formenctype="multipart/form-data">
<input type="submit" value="提交">
</form>
<hr>
<!-- 表单内元素的formtarget属性；指定在何处打开表单提交后所需要加载的页面 -->
<form id="testform" action="serve.jsp">
<input type="submit" name="s1" value="v1" formaction="s1.jsp" formtarget="_self">提交到s1
<input type="submit" name="s1" value="v1" formaction="s1.jsp" formtarget="_self">提交到s1
</form>
<hr>
<!-- 表单内元素的autofocus属性；自动获得光标焦点 -->
<input type="text" autofocus>
<hr>
<!-- 表单内元素的required属性；验证提交内容是否为空 -->
<hr>
<!-- 表单内元素的labels属性； -->
<hr>
<!-- 标签的control属性； -->
<hr>
<!-- 文本框的placeholder属性； -->
<input type="text" placeholder="input me">
<hr>
<!-- 文本框的list属性； -->
text：<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display:none;">
<option value="good morning">good morning</option>
<option value="hello">hello</option>
<option value="good afternoon">good afternoon</option>
</datalist>
<hr>
<!-- 文本框的autocomplete属性； -->
<input type="text" name="greeting" autocomplete="on" list="greetings">
<hr>
<!-- 文本框的pattern属性 -->
<form>
请输入指定格式的内容：<input pattern="[0-9][a-z]{3}">
<input type="submit">
</form>
<hr>
<!-- 文本框的SelectionDirection属性； -->
<form>
<input type="test" name="text">
<input type="button" value="点击我" onclick="AlertSelectionDirection()">
</form>
<script type="text/javascript">
function AlertSelectionDirection(){
var controls=document.form[0]['text'];
var Directon=control.selectionDirection;
alert(Direction);
}
</script>
<hr>
<!-- 复选框的indeterminate属性； -->
<hr>
<!-- image提交按钮的height属性与width属性； -->
<form action="test.aspx" method="post">
姓名:<input type="text" name="name">
<input type="img" src="edit.gif" alt="编辑"width=23 height=23/>
</form>
<hr>
<!-- textarea元素的maxlength属性与wrap属性。 -->
<form action="test.php"method="post">
<textarea name="name" maxlength=100 row=5 wrap="hard" cols=5></textarea>
<input type="submit" value="提交">
</form>
读《HTML5与CSS3权威指南（上册）》笔记的更多相关文章
- [已读]HTML5与CSS3权威指南第二版(下)
去年下半年前公司给买的(老付对我们确实蛮好的),一人挑一本,我当时一定是秀逗了.看的时候就发现,这本书的内容过时严重,即便它是新出不久的第.二.版.其他没什么说的,总之,不推荐看.
- Html5与CSS3权威指南 百度云下载
Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- 【HTML5 4】《HTML5与CSS3权威指南》 step1 导读
一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与H ...
- 《HTML5与CSS3权威指南》读书笔记（上册）—HTML5篇
豆瓣上的评分少且评价不太好,阅读当中发现几处刊物上的小问题,不过线下口碑貌似不错,基本上人手一本 上册五百多页,主讲H5,分为标签,本地存储,离线应用程序,新的API,获取地理位置信息标签包含表单,C ...
- 《HTML5与CSS3权威指南》读书笔记（下册）—CSS3篇
大而全的CSS3 API类型书,并带有一些实用案例讲解,层次分明分类明确,新增技术都做了详情介绍.个人觉得如果在细节和文字表达上再下些功夫会更出色,其中部分内容如:rem.Media Queries网 ...
- HTML5与CSS3权威指南笔记案例1
第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...
- html5+css3 权威指南阅读笔记（三）---表单及其它新增和改良元素
一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...
- HTML5与CSS3权威指南.pdf6
第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess, ...
随机推荐
- python os.stat() 和 stat模块详解
stat 系统调用时用来返回相关文件的系统状态信息的. 首先我们看一下stat中有哪些属性: >>> import os >>> print os.stat(&qu ...
- 海明距离hamming distance
仔细阅读ORB的代码,发现有很多细节不是很明白,其中就有用暴力方式测试Keypoints的距离,用的是HammingLUT,上网查了才知道,hamming距离是相差位数.这样就好理解了. 我理解的Ha ...
- 计算机视觉和人工智能的状态：我们已经走得很远了 The state of Computer Vision and AI: we are really, really far away.
The picture above is funny. But for me it is also one of those examples that make me sad about the o ...
- ActiveMQ 集群(1)
Queue consumer clusters(消费者集群): 简介: 同一个queue,如果一个消费者失效, 那么任何未经确认的消息将会被发送给queue上的其它消费者.如果一个消费者比其它消费者执 ...
- Struts2注解配置之@Namespace(四)
今天开始学习@Namespace注解. 还是先看一段代码: package com.example.actions; import org.apache.struts2.convention.anno ...
- UVa 11105 (筛法) Semi-prime H-numbers
题意: 你现在来到了一个所有的数都模4余1的世界,也就是除了这种数没有其他的数了. 然而素数的定义依然没变,如果一个数不能写成两个非1数字的乘积,则它是素数. 比如,在这里5就变成了最小的素数. 两个 ...
- BZOJ1272: [BeiJingWc2008]Gate Of Babylon
题解: 多重集合的组合数?还是0-m?有些元素有个数限制? 多重集合的组合数可以插板法,0-m直接利用组合数的公式一遍求出来,个数限制注意到只有15个,那我们就暴力容斥了 AC了真舒畅.. 注意开lo ...
- 【iOS-Cocos2d游戏开发之四】独自收集Cocos2d提供的字体！共57种（有对照的字体图）
本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-c ...
- java读取照片信息 获取照片拍摄时的经纬度
项目结构 源码:ImageInfo.zip 第一步:添加需要的架包metadate-extractor.jar 架包下载地址:https://code.google.com/p/metadata-ex ...
- nginx - conf.d vs sites-available
自己理解: conf.d - 扩展配置文件,用户配置文件 sites-available - 配置 虚拟主机(nginx支持多个虚拟主机,sites-enabled(存放 软链接,指向sites-av ...