HTML5权威指南----读书笔记

<!DOCTYPE html>
<html>
<head><meta name = 'keywords' content="HTML5权威指南----读书笔记"><meta name = 'description' content="HTML5权威指南----读书笔记"><meta charset="utf-8"><title>HTML5权威指南----读书笔记</title>
</head>
<body><!-- //第一部分 开篇第一章 HTML5背景知识第二章 准备工作第三章 初探HTML3.4 html实体<  <>  >&  &3.5 accesskey<input type="text" name="" accesskey = 's'>//alt+s就可以焦点就会聚焦到改input3.5.3 contenteditable<p contenteditable = 'true'></p>//设置内容可编辑3.5.4 contextmen//用来为元素设定快捷菜单3.5.5 dir<p dir = 'rtl'></p>//text-align:left;<p dir = 'ltr'></p>//text-align:right;3.5.6 draggable//设置元素是否可以被拖拽3.5.10 lang <p lang = 'en'></p>// 说明元素内容使用的语言3.5.11 spellcheck<textarea spellcheck = 'true'></textarea>//表明浏览器是否应该对元素的内容进行拼写检查3.5.13 tabindex <label><input type="" name="" tabindex = '1'></label><label><input type="" name="" tabindex = '2'></label><label><input type="" name="" tabindex = '3'></label>//填写完毕后tab键跳转顺序第四章 初探CSS4.1.4 设置字符编码&引入css文件@charset ='UTF-8';@import "style.css";4.4.1 绝对长度in 英寸cm 厘米mm 毫米pt 磅pc pica（12磅）4.4.2相对长度em 与元素字号挂钩cx 与元素字体的x高度挂钩rem 与根元素的字号挂钩px css像素% 另一属性的值的百分比缺乏浏览器支持的相对度量单位gd 与网格grid挂钩vw 与视口viewport宽度挂钩vh 于视口高度挂钩vm 1vm等于最短视口袖长的1%ch 与用当前字体显示的字符的平均宽度挂钩第五章 初探javascript5.4.2 枚举对象属性var myData = {print :function(){ // 直接执行}}function demo(){  //需要调用}5.7 错误处理try{}catch{}5.8 比较undefined 和 nullundefined： 在读取未赋值的变量或者试图读取对象没有的属性时的到的就是undefinednull ： 用于表示已经赋了值但该值不是一个有效的object，string，number或者boolean值第二部分 HTML元素6.4.1 文档和数据元素basebodydoctype6.4.2 文本元素aabbrb6.4.3对内容分组dddivdldt6.4.4 划分内容addressarticleaside6.4.5 划分内容captioncolcolgrouptable6.4.6 创建表单buttondatalistfieldset6.4.7 嵌套内容areaaudiocanvas第七章 创建HTML文档7.2.2 设置相对URL的解析基准base元素可以用来设置一个基准URL，让HTML文档中的相对连接在此基础上进行解析<!DOCTYPE html><html><head><base href="..."><title></title></head><body></body></html>7.2.3 用元数据说明文档<!DOCTYPE html><html><head><meta charset="utf-8"><meta name = 'author' content = ''><meta name = 'description' content = ''><title></title></head><body></body></html>7.2.5 预先加载资源<!DOCTYPE html><html><head><title></title><link rel="stylesheet" type="text/css" href=""><script type="text/javascript"></script><script type="text/javascript" defer></script><script type="text/javascript" async></script></head><body></body></html>//defer 确保了在脚本涉及的元素解析出来之后才载入和执行脚本//asnc 浏览器将在继续解析HTML文档中其他元素的同时异步加载和执行脚本7.3.2 noscript 元素// 可以用来向禁用的了javascript或浏览器不支持javascript的用户像是一些内容<!DOCTYPE html><html><head><title></title><noscript><h1>javascript is required</h1><p>you cannot use this page without javascrpit</p></noscript></head><body></body></html>第八章 标记文字wbr //安全换行建议位置dfn //定义术语8.6ruby，rt，rp元素<ruby>漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>字 <rp>(</rp><rt>ji</rt><rp>)</rp></ruby>8.6.2bdo 元素 撇开文字默认方向设置，明确指定内容中文字的方向<bdo dir = 'ltr'>love</bdo>  //love<bdo dir = 'rtl'>love</bdo>  // evolbdi 元素第九章 组织内容9.3 使用div元素div元素没有具体的含义，找不到其他切当的元素可用时可以使用这个元素为内容建立结构并赋予其含义第十章 文档分节10.1 基本标题：h1 h2 h3 h4 h5 h610.2 隐藏子标题 hgroup<hgroup><h1></h1><h2></h2></hgroup>    10.3 setion // 表示文档的一节10.4 添加首部尾部<header></header>  <footer></footer>10.5 添加导航区域<nav></nav>10.6 使用article//article 元素代表HTML文档中一段独立成篇的内容10.7 生成附注释<aside><h1></h1><section></section></aside>10.8 提供联系信息<address>fsdfdsf <a href="#"></a></address>第十一章 表格元素第十二章 表单12.2.4 autocomplete//设置表单中的input元素默认行为的行为方式label： 关联 input 元素autofocus ： 自动聚焦disabled ： 禁用input元素fieldset ： 对表单元素编组<fieldset><p><label><input type="" name=""></label></p></fieldset>第十三章 定制input元素datalist 数据列表range ： 指定范围的数值<input type="range" name="" min = '0' max = '100'>date :  日期选择工具<input type="date" name="">color ： 设置颜色<input type="date" name="">search ： 获取搜索用词<input type="search" name="">hidden : 隐藏input元素<input type="hidden" name="">image： 图片按钮和分区响应图<input type="image" name="">file ： 上传文件<input type="file" name="">第十四章 其他表单元素及输入验证select ： 选项列表 size:显示多个选项 mutiple 让用户一次选择多个选项<select size = '4' multiple></select>textarea ： 输入多行文本output ： 计算结果<form οninput="res.value = q.valueAsNumber*p.valueAsNumber"><input type="number" name="q" id = 'q'>x<input type="number" name="p" id = 'p'>=<output for='q name' name = 'res'/></form>keygen : 生成公开/私有密匙对第十五章 嵌入内容img ： 嵌入图像<img src="">15.2 嵌入一张html文档iframe ： 允许在现有的html文档中嵌入另一个文档15.3 通过插件嵌入内容object和embed元素最初是作为扩展浏览器能力的一种方式，用于添加插件支持，而插件能够处理浏览器不直接支持的的内容object+param object ：显示图片<object data = 'portrait.png' type = 'image/png'></object>progress : 进度条<progress value="10" max="100">meter ： 显示某个范围内所有可能值的一个<meter></meter><meter min="10" max="100" low = '40' high = '80' optimum="60"></meter>第三部分 CSS16.2 盒模型content,padding,border,margin16.3 选择器#.[attr]::16.4 属性16.4.3布局属性第十七章 使用CSS选择器1、 * 通用选择器2、  a,p,span,div 元素选择器3、  <p class = 'name'></p>  name 类选择器4、 <p id="name"></p> name ID选择器5、 <a href=""></a> [href]{}  属性选择器6、 并集选择器 a,p{}7、后代选择器 p a{}8、p>a 子元素p+a 相邻兄弟选择器p~a 通用相抵选择器9、 微元素选择器::first-line::first-letter:after:before17.3.4 css计数器p{conuter-reset:paracount;}p:after{content: counter(paracount);couter-increment: paracount;}第十八章 使用CSS选择器1、结构性伪类选择器:root{//匹配文档中的根元素}2、UI伪类选择器3、已勾选的元素:checked{}4、默认元素:default{}5、选择无效的和有效的input元素:valid{}:invalid{}6、选择限定范围的input元素:in-range{}:out-of-range{}7、选择必须和可选的input元素:required{}:optional{}8、动态伪类选择器:active{}:visted{}:link{}:hover{}9:focus{}10、否定选择器:not{}11、 空内容选择器:empty{}12、语言选择器:lang{}13、目标伪类选择器:target{}第十九章 使用白框和背景第二十章 使用盒模型第二十一章 创建布局21.2创建多列布局<!DOCTYPE html><html><head><title></title><style type="text/css">p{column-count: 3;column-fill: balance;column-rule: medium solid black;column-gap: 1.5em;}</style></head><body><p></p><p></p><p></p></body></html>21.3创建弹性布局flex-align;flex-direction;flex-order;flex-pack;21.3.1创建简单的弹性盒子<!DOCTYPE html><html><head><title></title><style type="text/css">p {width: 150px;border: medium double black;background-color: lightgray;margin: 2px;height: 300px;}#container {display: -webkit-box;}#second {-webkit-box-flex: 1;}</style></head><body><div id="container"><p id="first"></p><p id="second"></p><p id="third"></p></div></body></html>21.3.2伸缩多个元素<!DOCTYPE html><html><head><title></title><style type="text/css">p {width: 150px;border: medium double black;background-color: lightgray;margin: 2px;height: 300px;}#container {display: -webkit-box;}#first{-webkit-box-flex: 3;}#second {-webkit-box-flex: 1;}</style></head><body><div id="container"><p id="first"></p><p id="second"></p><p id="third"></p></div></body></html>21.3.3 处理垂直空间<!DOCTYPE html><html><head><title></title><style type="text/css">div div{width: 150px;border: medium double black;background-color: lightgray;margin: 2px;height: 300px;}#container {display: -webkit-box;-webkit-box-align: end;/*垂直对齐方式*/-webkit-box-direction: reverse;/*反转*/}#first{-webkit-box-flex: 3;height: 100px;}#second {-webkit-box-flex: 1;height: 120px;}</style></head><body><div id="container"><div id="first"><h1>first</h1></div><div id="second"><h1>second</h1></div><div id="third"><h1>third</h1></div></div></body></html>21.3.4 处理最大尺寸max-width: 250px;21.4 创建表格布局第二十二章 设置文本杨思22.1 应用基本文本样式22.1.1 对齐文本text-align: start/end/left/right/center/justify;text-justify: text-align设定好justify的时候用来指定对齐规则auto: 浏览器选择对齐放肆none: 禁用文本对齐inter-word: 空白分布在单词之间inter-ideographinter-clusterdistributekashida22.1.2 处理空白whitespace nomal: 默认值，空白符被压缩nowrap: 空白符被保留，文本不换行pre: 空白符被保留，文本遇到换行符时换行pre-line: 空白符被压缩，一行排满或者遇到换行符时换行pre-wrap: 空白符被保留，一行排满或者遇到换行符时换行22.1.3 文本方向p{direction : rtl; }p{direction : ltr;}22.1.4 指定单词，字母，行之间的间距letter-spaceword-spaceline-space22.1.5 控制断词word-wrap: normal/break-word;// normal 单词不断开，即时无法完全放入容器//break-word 断开单词，使其能放入包含快内第二十三章 过度，动画和变化23.1 使用过度 ：hover{}transition-delaytransition-durationtransition-propertytransition-timing-function  ease/linear/ease-in/ease-out/ease-in-outtransition23.2 使用动画animation-delay  开始前的延迟animation-direction  是否反向播放animation-duration  持续时间animation-iteration-count  播放次数 animation-name 指定动画时间animation-play-state 允许动画暂停和重复animation-timing-function 指定如何计算中间动画帧P:hover{-webkit-animation-delay: 100ms;-webkit-animation-duration: 500ms;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-name: 'growshrik';}@-webkit-keyframes growshrik{from{}50%{}to{font-size:border:background-color:color:padding:}}23.3 使用变换translatetranslateXtranslateYscalescaleXscaleYrotateskewskewXskewYmatrix第二十四章 其他CSS属性第四部分  使用DOM//允许我们使用js来探查和操作html第二十五章 理解DOM第二十六章 使用Document对象第二十七章 使用Window对象第二十八章 使用DOM元素第二十九章 为DOM元素设置样式第三十章 使用事件第三十一章 使用元素专属对象第五部分 赶集功能第三十二章 使用Ajax（第一部分）第三十三章 使用Ajax（第二部分）第三十四章 使用多媒体第三十五章 使用canvas元素（第一部分）第三十六章 使用canvas元素（第二部分）第三十七章 使用拖拽第三十八章 使用地理位置第三十九章  使用web存储第四十章 创建离线Web应用程序--></body>
</html>

转载于:https://www.cnblogs.com/SunlikeLWL/p/7399706.html

HTML5权威指南----读书笔记相关推荐

HTML5权威指南读书笔记03（第7，8章）--icon，base，锚点，一些七七八八的元素
1.使用ico图标如果标志文件位于服务器/favicon.ico(服务器根目录,则不需要link),浏览器自动匹配该文件 <link rel="shortcut icon" ...
HTML5权威指南读书笔记12（第21章）--创建布局postion，z-index，column-count，display：flex，box-flex、algin、pack，table
1.概述 2.定位内容的位置 <head><style type="text/css">div{ p ...
mysql数据库权威指南_MySQL_MySQL权威指南读书笔记(三)，第二章：MYSQL数据库里面的数 - phpStudy...
MySQL权威指南读书笔记(三) 第二章:MYSQL数据库里面的数据用想用好MYSQL,就必须透彻理解MYSQL是如何看待和处理数据的.本章主要讨论了两个问题:一是SQL所能处理的数据值的类型:二是 ...
MongoDB权威指南读书笔记——CRUD
插入并保存文档插入是向MongoDB中添加数据的基本方法.可以使用Insert方法向目标集合插入一个文档:db.foo.insert({"bar" : "baz&quo ...
HTTP权威指南读书笔记
<<HTTP权威指南>>读书笔记第一部分:Web的基础第1章:HTTP概述主要内容 1.什么是HTTP 2.HTTP的基本组件 HTTP HTTP:HTTP(Hypert ...
计算机网络和http权威指南读书笔记
计算机网络笔记网络层网络层向上提供无连接的,尽最大努力交付的数据报服务网络层不提供数据质量承诺物理层使用的中间设备叫转发器repeater 数据链路层叫网桥bridge 网络层叫路由器rout ...
MapReduce总结 + 相关Hadoop权威指南读书笔记（未完......欢迎补充，互相学习）
文章目录 MapReduce概述 MapReduce优缺点 MapReduce核心思想 MapReduce进程 MapReduce编程规范 WordCount 案例实操本地测试集群测试 Hadoo ...
小白的《HTML5权威指南》笔记（第一部分）
第一章基本了解HTML5 什么是HTML5? HTML5是一种标准,负责制定HTML标准的是W3C(World Wide Web Consortium,万维网联盟). HTML5不仅仅是HTML规范 ...
android开发读书笔记,android开发权威指南读书笔记
第17章 Fragment 1.在res目录下增加 layout-sw600dp 目录,用于存放7英寸及以上尺寸屏幕的布局文件.10英寸以上平板用 sw720dp.如果是更小的屏幕,如 480*800 ...

HTML5权威指南----读书笔记

HTML5权威指南----读书笔记相关推荐

最新文章

热门文章