第三章
- acceesskey属性
作用:accesskey可以设定一个或几个用来选择页面上的元素的快捷键
例:
<input type=“text” name=“name” accesskey=“n“/>
为input设置accesskey属性,windows系统上,同时按下alt+n,就可以选择到这个input
- contenteditable属性
作用:值为true时,内容可编辑,flase时不可编辑。如果未设定,则会从父元素进行继承
例:
<p contenteditable="true">today is Friady. yeah!</p>
用户单击后即可编辑。
- dir属性
作用:用来规定元素中文字的方向
<p dir="ltr">wo shi no1</p>
<p dir="rtl">wo shi no2</p>
效果如上
- draggable属性
作用:表示元素是否可以拖放 - dropzone
作用:也是HTML5支持拖放操作之一,与draggable属性搭配使用 - hidend
作用:布尔属性,表示当前元素无需关注 - lang
作用:说明元素内容使用的语言 - spellcheck
作用:表明浏览器是否对元素的内容进行拼写检查。只有在用户可编辑的元素上有用,检查方式因浏览器而异。
PS:多数浏览器拼写检查会忽略lang属性,而是基于操作系统或浏览器的语言设置。 - tabindex
作用:改变按下tab时焦点的转移顺序,值为1的会被第一个选中,值为负数则不会被选中
第四章
- @import和@charset
@charset "UTF-8"
@import "base.css"
a {
color:blue;
}
@import必须位于样式表顶部
@charset如果未声明,就使用HTML文档声明的编码,如果都没有,默认为”UTF-8"
- 用户样式
各浏览器都有自己管理用户样式的方式,如Chrome,会在个人配置信息目录中生成一个Default\User StyleSheet\Custom.css。
第七章
- base元素
作用:用来设置一个基准URL,让HTML文档中的相对链接在此基础上进行解析
示例:
<head>
<base href="http://no1/mainpro/" />
</head>
如果不用base,或不用href属性设置基准URL,那么浏览器会将当前文档的URL认定为所有相对URL的解析基准。例如:浏览器从http://myserve.com/app/mypage.html这个URL载入一个文档,该文档中一个超链接用了otherpage.html这个相对URL,点击这个链接,浏览器会尝试从http://myserve.com/app/otherpage.html这个绝对URL加载第二个文档。
ps:还有一个target属性
- 用元数据说明文档
1、指定名/值元数据对
2、声明字符编码
3、模拟http标头字段 - script
属性:src、defer、async - noscript
作用:禁用或不支持JavaScript的浏览器,可以在其中加入提示信息,或者加入meta将其引向另一个URL - wbr元素
作用:建议换行,具体是否换行由浏览器判断 - abbr元素
作用:表示缩写,title属性中填写全称 - q元素
cite属性:指定来源文章(URL)
q:before{content:open-quote;} q:after{content;close-quote;} - ruby rt rp元素
作用:帮助读者掌握发音 - bdo元素
作用:加dir属性改变文字方向 - 表单
1、datalist
2、readonly(会发送给服务器)
3、disable(不会发送给服务器) - a嵌套img
img设施ismap属性,会在跳转时将图片点击的位置加到URL上 - 客户端分区响应图
作用:点击某张图片的不同区域可以连接到不同的URL
map元素,包含多个area,图片设置usermap属性 - 通过插件嵌入内容
1、使用embed元素
2、使用object和param元素 - 显示进度
progress标签 - 显示范围里的值
meter标签 - CSS计数器
要创建计数器,需要使用专门的counter-reset属性为计数器设置名称,如:
body { counter-reset:paracount 10 othercount;}
这条声明创建了两个计数器,paracount初始值为10,othercount初始值为1
在包括:before或:after的选择器中使用指定样式,如:
content:counter(paracount,lower-alpha) ”. ";
其中lower-alpha可以是list-style-type属性支持的任意值
counter-increment:paracount 2
如果不指定2,则增量默认为1 - :target
匹配URL标识符指向的元素 - 边框圆角
border-radius:20px/15px;
用/将水平半径和垂直半径隔开
border-radius:50% 20px 25% 2em / 25% 15px 40px 55%
分别设置四个角的水平和垂直半径 - 图像边框
1、border-image-source
只有当 border-style属性取值为 none 时,border-image属性才会有效。所以,如果定义的边框图像显示不出来,首先需要检查border-style属性的值是否为 none。
2、border-image-slice
3、border-image-width
border-image-width属性定义的是边框图像的显示区域,即切片的最大显示宽度,跟元素的边框宽度没有关系,元素边框的宽度由 border-width属性定义。
所以,当设置的 border-image-width大于边框宽度时,边框图像会对元素自身和周围的元素产生影响。
4、border-image-outset
需要注意的是,边框图像外凸后,就会延伸到盒子的外面。如果外凸的宽度过宽,边框图像可能会覆盖周围的元素。
但是,由于边框图像并不是元素盒模型中的内容,因此,即便边框图像延伸到元素的边界之外,甚至覆盖其它元素,也不会对页面布局产生任何影响。
5、border-image-repeat - 背景图像
background-origin
background-clip
background-size - 盒子阴影
box-shadow:inset offset-x offset-y blur-radius spread-radius color; - 多列布局
- 弹性盒布局
- 表格布局
- 文本属性
text-align:justify、 whitespace 、word-wrap、 text-transform、 text-shadow - 跨文档消息传递
发送:目标window对象.postMessage
监听:window.addListener(“message”,func1) - **Document元数据
1、文档信息 2、Location对象 3、读取和写入cookie 4、文档就绪状态
5、DOM实现情况 DOMImplementation对象,hasFeature方法 - 获取HTML对象
1、使用属性获取
例:document.images获取所有img元素的对象,在通过[i]或namedItem,第二种获取指定id或name的元素
2、document[“apple”],深度优先 - 合并链式搜索
例外:getElementById,只有Document才能用它 - window对象
- Text对象
- 移动元素
把待移动元素关联到新的父元素上即可,无需让他脱离初始位置 - 向文本块插入元素
- document.styleSheet样式表
- 计算样式
用来显示某元素的CSS属性集合,document.defaultView.getComputedStyle - e.eventPhase
- Ajax
1、使用Origin请求标头跨域
2、FormData对象收集表单内容
3、XMLHttpRequest.upload属性获得XMLHttpRequestUpload对象监测进度 - Canvas
1、HtmlCanvasElement对象
2、画布绘制状态:渐变、图案、保存和恢复绘制状态
3、绘制图像、视频图像 - 拖放
- 使用地理位置
- 使用Web存储
- 离线Web应用程序
离线清单