学习打卡-HTML5+CSS3基础（一）

---

theme: channing-cyan

菜鸡打卡

1. Html5 新增那些标签?

布局标签: header,section,footer,article,aside ..

表单标签: + datalist,

• input:type='week|date|time|datetime|number|search|url|tel|color|email|range'

多媒体标签:audio(音频), video(视频)

其他标签: progress(进度条),meter(度量器)

补充:

Html5 新 属 性 : hidden( 隐 藏 元 素 )

required( 必 填 ),minlength( 最 小 长度),maxlength(最大长度)

pattern(正则表达式)

placeholder(提示文本),utocomplete(自动填充),autofocus(自动获取焦点)

2.行内元素和块级元素的具体区别是什么？

块级元素独占一行页面空间, 不会和其他元素共享一行页面空间;

行内元素可以和其他非块级元素(行内,行内块)共享一行页面空间.

3.列举几个块级标签和行内标签？

块级标签:div,p,h1~h6,section,header,footer

行内标签:span,em(i),strong(b),u,em(i),a

4.行内元素的 padding 和margin 可设置吗？

行内元素设置水平方向的padding 和margin 是可以生效,但是设置垂直方向的padding 和margin 虽然看起来对标签起作用,但实际并没有对周围元素产生任何影响, 所以行内元素设置垂直方向的 padding 和 margin 是无效的.

5.哪些标签都存在伪元素?

大部分容器标签(大部分双标签)都有伪元素, iframe 没有伪元素;

大部分单标签都没有伪元素, 但是 img 有伪元素

6.伪元素可以使用 js 来操作吗?

js 不可以操作伪元素

7.Html5 的网页为什么只需要写<!DOCTYOE HTML>?

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML 是标准通用标记语言,简单的说，就是比 HTML,XML 更老的标准，这两者都是由 SGML 发展而来的, 而 HTML5 不是的。

8.px em rem 这三中长度单位的区别？

px 是一个绝对单位;

em 和 rem 是一个相对单位, em 参考的是当前元素的字体(font-size) 大小, 参考的是页面根元素 html 的字体(font-size)大小.

9.谈谈 css 选择器优先级顺序以及判定标准?

优先级从低到高:

通配符选择器<标签选择器<类选择器(属性选择器)

行内样式<使用!important 修饰的属性优先级最高;

如果两个选择器(属性完全相同)同时命中一个元素, 并且权重一样, 则书写顺序会影响优先级, 后一个选择器的属性会覆盖前一个选择器中相同的属性.

10.position 几 个 属 性 的 作 用 ？

position的常见四个属性值： relative，absolute，fixed，static。一般都要 配合"left"、"top"、"right"以及"bottom" 属性使用。

1. static：默认位置，(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。

2. relative：位置被设置为 relative 的元素，偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移。注意 relative 移动后的元素在原来的位置仍占据空间。

3. absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中 不 占 位 置。

4. fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元 素都会留在那个位置。它始终是以body 为依据的。注意设置fixed 属性的元素在标准流中不占位置。