zoukankan      html  css  js  c++  java
  • 《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

    桃花岛
  • 相关阅读:
    大白话解说,半分钟就懂 --- 分布式与集群是什么 ? 区别是什么?
    intellij idea中去除@Autowired注入对象的红色波浪线提示
    用JQuery获取事件源怎么写
    springBoot 配置url 访问图片
    地图服务 纬度、经度对应坐标轴x,y
    5个问题带你了解export和import的使用以及export和export defalut 的区别
    5个你可能不知道的html5语义化标签
    CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别
    前端ps实用小技巧
    7步教你使用git命令上传本地代码至github仓库(小白向)
  • 原文地址:https://www.cnblogs.com/chenlily/p/5670116.html
Copyright © 2011-2022 走看看