读《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>　　

    <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, ...

随机推荐

从零开始，让你的框架支持CocoaPods
本文为投稿文章,作者:奴良(简书) 这两天一直琢磨着想让自己的一个照片多选框架支持CocoaPods下载安装,就搜了好多资料,但是搜到的资料大多都是最基本的,并没有解决我遇到的问题,问题如下: 当自己 ...
sqlserver防止数据库挂马新尝试
想法不错,放着以后应该会有用网站挂马非常让人头痛,每次的安全措施都是治标不治本,想找到根本原因,只能去分析你的程序源代码,由于很多网站不是一个程序员开发,很多的注入漏洞很难发现,曾经通过公共文件加入 ...
确认某端口占用情况并结束相应进程（Windows）
(1)确认某端口是否被占用 (2)通过查找对应的PID号,定位是哪一个进程在使用该端口 (3)通过PID号结束该进程 # 查找端口2000是否被占用C:\Users\tdcqma>netstat ...
4、处理方法中获取请求参数、请求头、Cookie及原生的servlet API等
1.请求参数和请求头使用@RequestParam绑定请求参数,在处理方法的入参处使用该注解可以把请求参数传递给请求方法 —— value :参数名 —— required : 是否必须,默认为tr ...
机器学习 —— 概率图模型（Homework: StructuredCPD）
Week2的作业主要是关于概率图模型的构造,主要任务可以分为两个部分:1.构造CPD;2.构造Graph.对于有向图而言,在获得单个节点的CPD之后就可依据图对Combine CPD进行构造.在获得C ...
EINTR错误
慢系统调用(slow system call):此术语适用于那些可能永远阻塞的系统调用.永远阻塞的系统调用是指调用有可能永远无法返回,多数网络支持函数都属于这一类.如:若没有客户连接到服务器上,那么服 ...
Linux下jvm、tomcat、mysql、log4j优化配置
小菜一直对操作系统心存畏惧,以前也很少接触,这次创业购买了Linux云主机,由于木有人帮忙,只能自己动手优化服务器了.... 小菜的云主机配置大致为:centeos6(32位),4核心cpu,4G内存 ...
聊聊HTTPS和SSL/TLS协议分类：计算机网络 2015-07-11 21:41 4人阅读评论(0) 收藏
要说清楚 HTTPS 协议的实现原理,至少需要如下几个背景知识. 1. 大致了解几个基本术语(HTTPS.SSL.TLS)的含义 2. 大致了解 HTTP 和 TCP 的关系(尤其是"短连接 ...
struct dev_t
device number(dev_t) linux driver 2009-08-21 10:08:03 阅读26 评论0 字号:大中小 dev_t description: the dev ...
JAVA操作数据库插入中文表中显示乱码的解决方法
String dbUrl = "jdbc:mysql://localhost:3306/BookDB?useUnicode=true&characterEncoding=GB2312 ...

读《HTML5与CSS3权威指南（上册）》笔记

读《HTML5与CSS3权威指南（上册）》笔记的更多相关文章

随机推荐

热门专题