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

时间：2021-04-14 16:13:04

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

上册五百多页，主讲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

相关文章