HTML5权威指南笔记

最新推荐文章于 2024-08-15 12:25:18 发布

林六汶

最新推荐文章于 2024-08-15 12:25:18 发布

阅读量270

点赞数

分类专栏： HTML+CSS 文章标签： css javascript html html5 css3

本文链接：https://blog.csdn.net/REDJOLER/article/details/107361351

版权

HTML+CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

第三章

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应用程序
离线清单

林六汶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5权威指南笔记

第三章acceesskey属性作用：accesskey可以设定一个或几个用来选择页面上的元素的快捷键例：<input type=“text” name=“name” accesskey=“n“/>为input设置accesskey属性，windows系统上，同时按下alt+n，就可以选择到这个inputcontenteditable属性作用：值为true时，内容可编辑，flase时不可编辑。如果未设定，则会从父元素进行继承例：<p contenteditable
复制链接

扫一扫