《HTML5与CSS3权威指南》读书笔记(上册)—HTML5篇

豆瓣上的评分少且评价不太好,阅读当中发现几处刊物上的小问题,不过线下口碑貌似不错,基本上人手一本

上册五百多页,主讲H5,分为标签,本地存储,离线应用程序,新的API,获取地理位置信息
标签包含表单,Canvas,多媒体等;
API的话多媒体,History,拖放和通知,文件,通信等。
其中一些章节只是翻了一下,如文件API,通信API更是看不懂,这两章加起来可单做一本薄书

下册为CSS3相关

第二章

  1.不允许写结束标记的元素:meta,link,hr,img,input,br,area,embed,base,col,command,keygen,param,source,track,wbr

   可以省略结束标记的元素:li,dt,dd,p,,thead,tbody,tfoot,option,tr,td,th,rt,rp,optgroup,colgroup

   可以省略全部标记的元素:html,head,body,tbody,colgroup

  2.具有boolean值的属性,当只写属性而不指定属性值时,表示属性值为true,也可以将属性名设定为属性值,或空字符串设定为属性值,如果想要属性值为假,则可以不使用该属性。

    <!-- 属性值设定为true -->
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />
<!-- 不写属性代码为false -->
<input type="checkbox" />

  3.H5中,指定属性值,可以省略引号或用单引号

  4.新增元素:<section>部分,强调分段</section>  <article>文章,强调独立性</article>  <aside>侧边栏</aside>  <header>头部</header>  <footer>脚注</footer>  <nav>导航</nav>  <figure>独力的内容流类似dl<figcaption>添加标题类似dt</figcaption></figure>  <main>主体</main>

    <!-- 菜单列表 -->
<menu>
<li></li>
</menu>
<time>只是一个日期或时间标签</time>
<mark>突出或高亮</mark>
<!-- 软换行,当宽度不够时才进行换行 -->
<wbr />
<output>表示不同类型的输出,类似h4中的span</output>
<video src="movie.ogg" controls >视频</video>
<audio src="">音频</audio>
<!-- 媒介元素,定义媒介资源 -->
<source src="movie.ogg" type="" />
<!-- 插入格式为MP3,MiDi,Wav,AIFF,AU等多媒体 -->
<embed src="horse.wav" />
<progress value="0" max="100">进度条</progress>
<!-- 运用场景如磁盘大小 -->
<meter min="0" max="100" value="75">度量衡</meter>
<!-- ruby注释,运用场景如给汉字加拼音,信息存在rt当中,当浏览器不支持时显示rp内容 -->
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
<canvas id="myCanvas" width="200" height="200" >图形</canvas>
<!-- 收缩展开的效果,summary中定标题或图例 -->
<details><summary>点我试试</summary>被你发现了</details>
<!-- 生成密钥 -->
<keygen />
<!-- 补充:定义选项列表,自动匹配相同内容(为麻书中没有介绍) input中的list属性需与datalist中的id名称匹配,浏览器表现不一,chrome有点像select-->
<input list="list" />
<datalist id="list">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
<option>ddd</option>
</datalist> <!-- 没懂 -->
<command />
<datagrid>定义可选数据的列表</datagrid>

  5.新增input类型:email,url,number,range滑块,color,日期选择器Date pickers(date,month,week,time,datetime,datetime-local)支持率一般,可以在所有主流浏览器中使用,即使不被支持,仍然可以显示为常规的文本域。

  6.新增属性:表单相关autofocus,placeholder,form,required,readonly只读,control,multiple一次上传多个文件,maxlength等,a标签相关download,ol中的start开始编号和reversed倒序,time的putdate表示time元素为文章或整个网页的发布日期,meta,menu,style,script,html,iframe也分别增加相应属性。

  7.废除属性,大部分都可以用CSS样式代替,如很多标签都具有的align居中文本属性

  8.新增全局属性:以任何一个元素都可以使用的属性。conentEditable为true时内容为可编辑;document.designMode="on"整个页面可编辑;hidden告知浏览器不渲染该元素处于不可见状态,boolean值属性;spellcheck对用户输入的内容进行检查;必须明确申明属性值true或false;tabindex。

第三&四章内容则是对以上标签和属性等进行详细讲解

第五章 绘制图形

第六章 多媒体API,自制播放制作,对视频音频添加字幕

第七章 History API

第八章 本地存储

第九章 离线应用程序

第十章 文章API

第十五章 获取地理位置信息

第十六章 拖放和通知API

第十七章 其他API

上一篇:使用GuzzleHttp来进行公众号临时素材上传


下一篇:【函数分享】每日PHP函数分享(2021-2-27)