读《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>
时间: 2024-11-08 19:24:48

读《HTML5与CSS3权威指南(上册)》笔记的相关文章

读《问题解决的思路和方法》笔记

麦肯锡解决问题的7步 1:界定问题-->通过反复问为什么来界定问题--> 一开始问题是表象,比如讨厌周末天气,但通常对于改变气候,结论是不可能,更深层次的原因在表象之下,比如为什么讨厌天气,可能是每个周末都很疲惫 问题界定的结果必须是明确且可执行的,考虑我们能够施加的影响,良好界定符合 SMART 原则 (S)具体 (M)可衡量 (A)以行动为导向 (R)相关的 (T)有时限性的 2:将问题分解成议题 考虑这个问题的关键要素有哪些 3:去除不重要的议题(优先排序) 根据80/20原则,考虑解决

读《编程高手箴言》笔记一

最近无意在朋友的书柜上翻到一本<编程高手箴言>,之前对带有“高手”.“速成”.“7天成才”这样字眼的书籍都有种偏见,总觉得都是些不靠谱的吹嘘.但这本书不一样,翻开大致浏览一下,感觉写得挺中肯,挺实际,于是拿回家有时间就翻翻.并将书上感觉写得好的地方摘录下来. 正确的入门方法 工欲善其事,必先利其器,要想成功,没有一个艰苦的过程是不可能的,所以一开始的时候就要有耐心.如果你准备花5年的时间成为高手,那我敢说你基本不用等到5年,你只要有这个耐心就足够了,你可能2---3年内就达到了目标.但如果你想

《编写可读代码的艺术》读书笔记

表面内容 1.代码的写法应当是别人理解他所需的时间最小化.一条注释可以让你更快理解代码.尽管减少代码行数是一个好目标,但是八里街代码所需的时间最小化是一个更好的目标. 2.选择专业的词,比如函数名使用getxxx(),这个get没有表达出很多信息,是从缓存中得到?从数据库中得到?或者从网络得到?如果是网络,可以用更专业的fetchxxx()或者downloadxxx() 3.tmp,retval这样泛泛的名字,可以根据情况命名,比如tmpFile,让人知道变量是一个临时的文件.(tmp这个名字只

从底层开发谈WebGIS中实现地理长度固定的可视窗口的思路和方法

1.具体问题 在公司某边界城市的项目中,对方提出因为自己的地图安全度要求比较高,需要实现以下两个需求: a.地图的可视范围永远控制在6平方公里以内. b.系统退出时自动删掉所有缓存到本地的瓦片. 第二个问题比较简单,不做讨论,这里主要谈谈第一个问题解决的思路. 2.问题分析 a.不能通过单纯的固定地图大小.因为是地理长度固定,而不是屏幕可视长度固定,换句话说是指,在不同的地图级别下,可视屏幕长度是变化的,因为此时固定的地理长度对应的可视长度是变化的.所以,单纯的通过调整地图可视屏幕大小是行不通的

关于解题的思路与方法

很多学生问我这个问题,拿来一道题(或实际一个问题)解决它的思路和方法是什么. 其实人的思维是最难描述的.每个人的思考方式和习惯都不尽相同,解决同一个问题达到同一个效果的方式也是如此.简单的讲,"思路"是难以给出一个单一模式的,但是前人还是总结了很多方法.下面列出我个人比较常用的解题方法和思路,供大家参考. 博文首发地址:http://blog.csdn.net/duzixi 先说说解体思路. 解体思路有两大基本套路:一个是"自上而下",另一个是"自下而上&

阅读ICONIX方法笔记

主要步骤包括:1.域建模(领域模型)2.用例建模(动态模型)3.分析建模  4.健壮性分析5.交互建模(绘出时序图和设计级类图)      域模型(是一种由内向外的方式来分析系统的)(1) 确定直实世界中的抽象,即系统中将涉及的主要的概念性对象.(2) 域类(可以认为是实体类)的来源就是需求.领域知识以及问题陈述中的相关名词或名词短语等术语.(3) 识别完了域类后,就可以进行问题域建模,即进行域类图的绘制(可以有类之间的关联和泛化等关系)注意:这里的域类图只是一种表现形式,里面的一个类的层次关系

Windows删除删除文件提示无法读源文件或磁盘解决方法

创建一份文本文档,写入以下二行代码: DEL /F /A /Q \\?\%1 RD /S /Q \\?\%1 保存后,把TXT改成BAT批处理格式 把要删的文件拖到这个批处理文件上,会自动运行并删除. Windows删除删除文件提示无法读源文件或磁盘解决方法,布布扣,bubuko.com

CPU利用率异常的分析思路和方法交流探讨

CPU利用率异常的分析思路和方法交流探讨在生产运行当中,经常会遇到CPU利用率异常或者不符合预期的情况,此时,往往暗示着系统性能问题.那么究竟是核心应用的问题?是监控工具的问题?还是系统.硬件.网络层面的问题?在上线前的测试过程中,经常会遇到新版本应用的CPU占用率比旧版本高,那么到底是新增的或者变更的什么模块导致呢?面对这种情况,我们应该如何定位和诊断问题的根本原因? 本期专题讨论会分享采用什么样的分析思路.分析方法和分析工具进行CPU使用情况的分析:并帮助大家解答以下问题: 1. CPU利用

运行Scrapy程序时出现No module named win32api问题的解决思路和方法

有小伙伴在群里边反映说在使用Scrapy的时候,发现创建项目一切顺利,但是在执行Scrapy爬虫程序的时候却出现下列报错:“No module named win32api”,如下图所示,但是不知道怎么破,今天就这个问题讲解一下解决方案. 出现这个报错是因为在Windows下我们缺少一个包,叫pypiwin32,这个报错一般只是在Windows下出现.很多小伙伴看到“No module named win32api”,于是乎便想着直接输入安装命令“pip install win32api”,结果

ARM应用调试思路、方法总结、笔记

一.应用调试1:使用strace命令来跟踪系统调用 二.应用调试2:使用GDB来调试应用程序 编译gdb,gdbservertar xjf gdb-7.4.tar.bz2cd gdb-7.4/./configure --target=arm-linuxmake把arm-linux-gdb复制到/bin目录 cd gdb/gdbserver/./configure --host=arm-linuxcp gdbserver /work/nfs_root/first_fs/bin 编译要调试的应用,编