HTML5div相关知识,<html5权威指南>知识学习巩固(一)

一.基础

1.自定义属性data

一般的元素都可以设置自定义属性,自定义属性的要求是 data开头,比如 data-name

2.html5将元素分为 元数据元素 metadata element,流元素flow emement,短语元素phrasing emement

3.html实体 (entity), 这是对于字符而言的,有些字符具有特殊含义 < < > >

全局属性

一些属性是局部的,比如img的src,有些属性是全局的全局意味着通用,配置所有元素的共有行为

id ,class,hidden,title

5.css嵌入方式

(1)元素内嵌 (2)文档内嵌 (3)外部样式

@import url("hello.css");

从其他地方导入样式,外部的和,文档内嵌的都可以用

6.样式除了css定义的样式,还有浏览器样式,和用户样式

7.用重要样式调整层叠次序!improtant

8.样式层叠比较

如果两个样式同时应用于同一个元素,他们则要进行比较

(1)一个是a标签的样式

(2)一个是a标签上写的一个class

比较样式选择器中所涉及的 id + 属性 +元素名

(1) 评分 0-0-0

(2)评分 0-1-0

所以选b

9.继承

一般元素外观(颜色字体等)能继承,元素布局不能继承,如果硬要继承,那么在子元素使用inhert

10.css中的长度,

绝对长度cm,pt,

相对长度 px(css像素,假定设备分辨率为96dpi),

em(与元素字号挂钩)

rem(与根元素html的字号挂钩)

长度可以用算式做值 calc(50%-20px)

11.javascript

(1)对象字面量

经过别人总结，就是不用js的new操作符创建实例。简单并且运行快

文章来源https://www.jianshu.com/p/17b8b3b28eae

(2)添加对象属性直接添加,删除用delete

(3)判断对象是否有哪些属性,可以使用 "name" in Obj

(4)显示类型转换 (5).toString(); Number("1") parseInt("1")

(5) 数组字面量 var arr=[1,2,3];

(6)检测变量是否为null或者是undefined,直接 if(!a){}

二.html元素

秉着一颗向着语义走的心

(1)base 设置基准url

如果不填的话就是当前页面的域

(2)style的media属性

image.png

(3)script defer 延迟执行

(4)script async 异步执行,可以在执行文档的同时,执行脚本,用户行为统计

(5)加以强调用em

(6)i外文或者科学术语

(7)s不准确 你不好 就给打上横线了

(8)strong重要的文字,比如warning

(9)u 下划线

(10)figure插图(删除后不影响外部)

image.png

(11)文档分节

--hgroup(隐藏子标题) 就是将标题和子标题括起来,从而形成一个整体,更清晰

---section用于强调某一个模块，强调模块本身是作为一个整体的；

---article用于强调某一段独立的内容，强调内容的独立性。

---header文章首部

--footer文章尾部

--aside附注栏

image.png

--details

标签用于描述文档或文档某个部分的细节。

image.png

(12)表格元素

基本表格

image.png

复杂表格

image.png

image.png

image.png

image.png

三.Form相关

1.基础

---label的作用 :用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

name:

---disable 禁用input

---filedlist和lengend 分组以及给分组加上标题

禁用filedlist则整体都将被禁用

image.png

--button,提交按钮可以设置到表单外,写一个form就行

image.png

2.input相关

1.type 为 range

image.png

2.输入验证 required pattern正则

四.嵌入内容

1.创建分区响应图

image.png

2.iframe

• baidu
• 360

image.png

3.embed嵌入外部资源

image.png

4.object工作方式稍有不同,并且带着额外的功能

image.png

5.progress,meter嵌入数字表现形式

image.png

image.png