本文目录🧾
- 1. 网页开发中,一般需判断浏览器类型,需通过userAgent中获取浏览器内核来判断,下列说法错误的是?
- 2. 浮动会导致页面的非正常显示,以下几种清除浮动的方法,哪个是不推荐使用的?
- 3. 下面关于表单的说法中,错误的是 ( )
- 4. 什么是 Web Worker ?
- 5. 关于position定位,下列说法错误的是()
- 6. 请选出用于标题的标签()
- 7. 下面有关html5标签说法错误的有?
- 8. 在 HTML 文档中包含如下超链接,要实现当鼠标移入该链接时,超链接文本大小变为 30px ,选项中的编码正确的是()
- 9. 以下属于行内块元素/内联元素的是()
- 10. 根据 HTML 规范,以下代码中,外层容器 .outer 的宽高分别是:
- 11. 能在1024的windows机器上显示8列而在肾6手机上显示12列的是()
- 12. 下面哪一个不是 HTML5 中的标签 ( )
- 13. 添加样式的方式有()
- 14. 在CSS中下列哪些属性可以继承( )
- 15. 下列哪些元素可以作为table元素的子元素?
- 16. DOM事件流包括哪些阶段:
- 17. 以下那几个标签默认有margin值()
- 18. 表单提交时会触发什么Dom方法()
- 19. 假链接中我们通常在a标签的href中添加什么能使得页面不跳转()
- 20. 在HTML5中,空标签可以不写自关闭的斜线(/)了,这些标签不包括以下哪项?
- 21. 放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行?
- 22. 根据栅格系统的标准用法,错误的是()
- 23. 以下哪个CSS属性是继承属性(inherited)?
- 24. DHTML 的动态样式的作用是 ()
- 25. 下面的颜色代码里,色彩看上去偏绿色的有哪些?
- 26. 下列哪些功能默认支持跨域?()
- 27. 下列描述正确的是()
- 28. 属于html5新增规范的有()
- 29. 以下说法正确的是()
- 30. 需要创建一个多选框,且和文本关联起来(单击文本就像单击核选框一样)。下列 HTML 代码中,正确的是?()
- 31. 哪一个不是浏览器默认的天生inline-block标签(拥有内在尺寸,可设置高宽,不会自动换行)?
- 32. 以下不属于空元素(void elements)的是:
- 33. 下列对Reflow(回流)和 Repaint(重绘)的描述正确的是?
- 34. 下面使用Animate-timing-function定义的贝塞尔曲线,哪一个是先快后慢的()
- 35. 关于bootstrap3的说法,错误的是()
- 36. div元素的哪些CSS属性的默认值为0?
- 37.下面哪些特性不是HTML5新引入的特性:( )
- [38. 下列属于HTML5新元素的是__。](#38-下列属于html5新元素的是__)
- 39. 假设HTML结构为
<parent><child>content</child></parent>
下列哪些做法可以实现child内容垂直居中? - 40.关于语义化,以下说法正确的有:
- 41. 以下哪些标签是合法的HTML5标签?
- 42. 下列关于背景定位属性background-position说法正确的是( )
正文部分📝
✍🏻虽然看完了HTML&CSS,但没有那么细致,来做做专项练习查漏补缺吧~
1. 网页开发中,一般需判断浏览器类型,需通过userAgent中获取浏览器内核来判断,下列说法错误的是?
A. 一直到IE9,都是Trident内核
B. firefox是Gecko内核
C. chrome是webkit内核
D. IE是目前最快的浏览器
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
IE使用的是Trident内核,Firefox 使用的是Gecko内核。目前使用IE内核的浏览器还有搜狗,遨游,360等等
2. 浮动会导致页面的非正常显示,以下几种清除浮动的方法,哪个是不推荐使用的?
A. 在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>
B. 通过设置父元素overflow值为hidden;
C. 父元素也设置浮动
D. 给父元素添加clearfix类
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
方法一:使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
方法二:使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
方法三:给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
方法四:使用邻接元素处理
什么都不做,给浮动元素后面的元素添加clear属性。
3. 下面关于表单的说法中,错误的是 ( )
A. 可以给 input 添加 multiple 属性使它可以输入多行文字
B. placeholder 属性可以用来提示用户输入什么内容
C. 用户无法直接修改包含 disabled 属性的文本框的内容
D. maxlength 属性可以限制文本框内最多输入多少个字符
multiple属性允许用户选择多个值
<textarea>元素限定了多行输入字段
[更多的属性见HTML学习笔记二的forms]
4. 什么是 Web Worker ?
A. 运行在后台的JavaScript程序,会影响页面的性能。
B. 运行在后台的JavaScript程序,不会影响页面的性能。
C. 都不正确
D. 运行在后台的CSS程序,不会影响页面的性能。
Web Worker是一种JavaScript,它在后台运行,独立于其他脚本,而不会影响页面性能。您可以继续做任何您想做的事情,Web Worker在后台运行。
5. 关于position定位,下列说法错误的是()
A. fixed元素,可定位于相对于浏览器窗口的指定坐标,它始终是以 body 为依据
B. relative元素以它原来的位置为基准偏移,在其移动后,原来的位置不再占据空间
C. absolute 的元素,如果它的父容器设置了 position 属性,并且 position 的属性值为 absolute 或者relative,那么就会依据父容器进行偏移
D. fixed 属性的元素在标准流中不占位置
relative元素以它原来的位置为基准偏移,在其移动后,原来的位置仍然占据空间。
6. 请选出用于标题的标签()
A. <h1></h1>
B. <h7></h7>
C. <em></em>
D. <h3></h3>
这道题我多选了h7……这个也太坑了哈哈哈哈哈!!!记住标题最多到h6!
7. 下面有关html5标签说法错误的有?
A. <audio>
标签定义声音,比如音乐或其他音频流
B. <canvas>
比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容
C. <menu>
标签定义菜单列表。当希望列出表单控件时使用该标签
D. <command>
标签定义命令按钮,比如单选按钮、复选框或按钮
这里考察HTML标签的使用: <audio> 标签定义声音,比如音乐或其他音频流。
A正确。 <canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。 B错误,<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。C正确
command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。 D正确。
8. 在 HTML 文档中包含如下超链接,要实现当鼠标移入该链接时,超链接文本大小变为 30px ,选项中的编码正确的是()
A. <a href=”#” onmouseover=”this.style.fontSize='30px'”>注册</a>
B. <a href=”#” onmouseout=”this.style.fontSize=30px”>注册</a>
C. <a href=”#” onmouseover=”this.style.font-size=30px”>注册</a>
D. <a href=”#” onmouseout=”this.style.font-size=30px”>注册</a>
鼠标移入onmouseover,移出onmouseout
<a href="#" onmouseover="this.style.fontSize='30px'">注册</a>
在js里面添加的属性名使用驼峰法,在css里面使用连接线
9. 以下属于行内块元素/内联元素的是()
A. p
B. img
C. ul
D. form
行内元素典型代表 span ,a, ,strong , em, del, ins
特点:★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高。
行内块元素(内联元素)典型代表 input img
特点:★在一行上显示
★可以设置宽高
块元素典型代表,div,h1-h6,p,ul,li
特点: ★独占一行
★可以设置宽高
★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致。
10. 根据 HTML 规范,以下代码中,外层容器 .outer 的宽高分别是:
<style>
.outer {
height: 50px;
}
.inner {
width: 120px;
height: 100px;
}
</style>
<div class="outer">
<span class="inner">content</span>
</div>
A. 高50px, 宽120px
B. 高50px, 宽100%
C. 高100px, 宽120px
D. 高100px, 宽100%
span 为行内元素,无法设置高宽;当添加样式 display : block,可设置高宽。
11. 能在1024的windows机器上显示8列而在肾6手机上显示12列的是()
A. Col-md-8 col-xs-12
B. Col-lg-8 col-sm-12
C. Col-md-8 col-sm-12
D. Col-lg-8 col-xs-12
col-md-8 col-xs-12
- .col-xs- 超小屏幕 手机 <768px
- .col-sm- 小屏幕 平板 >=768px
- .col-md- 中等屏幕 >=992px
- .col-lg- 大屏幕 >1200px
12. 下面哪一个不是 HTML5 中的标签 ( )
A. article
B. section
C. foot
D. main
是footer不是foot
13. 添加样式的方式有()
A. 内联式:即直接加在标签上的样式 如:<div style="width:100px;"></div>
B. 导入样式:@import url(“css/style.css”)
C. 嵌入式:即用<style>.classname {width: 100px;}</style>
标签括起来写在页面中的样式
D. 外部引用式:即将样式单独放到一个文件夹中,然后用link标签引入页面的形式,如:<link rel="stylesheet" type="text/css" href="Css.css" />
1. 导入样式:在 .css文件中使用@import url("...")来引入另一个css样式表
2. 外部样式:在html页面中的head中使用 link 标签引入,如<link rel="stylesheet" type="text/css" href="a.css" />
3. 内部样式(嵌入式):在HTML页面中的 style 标签中使用样式 , <style type="text/css">...</style>
4. 内联样式:与html标签的内部使用style属性设置的样式,直接与当前html标签相关联,如<div style=" width:100px; "></div>
14. 在CSS中下列哪些属性可以继承( )
A. font-size
B. border
C. padding
D. color
继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性。 不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。 所有元素可继承:visibility和cursor。 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 终端块状元素可继承:text-indent和text-align。 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。 表格元素可继承:border-collapse。
15. 下列哪些元素可以作为table元素的子元素?
A. caption
B. col
C. tr
D. tbody
col 元素是仅包含属性的空元素。
16. DOM事件流包括哪些阶段:
A. 事件捕获阶段
B. 处于目标阶段
C. 事件冒泡阶段
D. 事件监控阶段
DOM事件流 DOM事件流包括三个阶段。 事件捕获阶段 处于目标阶段 事件冒泡阶段
17. 以下那几个标签默认有margin值()
A. body
B. div
C. form
D. img
默认有…这道题很奇怪
18. 表单提交时会触发什么Dom方法()
A. submit
B. onsubmit
C. onupload
D. onresize
有歧义。submit 在html dom中称为属性,onsubmit 在html dom 中称为事件。
19. 假链接中我们通常在a标签的href中添加什么能使得页面不跳转()
A. #
B. ##
C. Javascript:;
D. 直接为空,无需添加
a标签使用(#)实现了页面跳转,#默认为当前页面,这个方法应该不能算为a标签不跳转
20. 在HTML5中,空标签可以不写自关闭的斜线(/)了,这些标签不包括以下哪项?
A. img
B. button
C. br
D. input
HTML5中:
自关闭的斜线(/)对 :area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr空标签无效,言即不再需要自闭合(/)这个小尾巴了,如果要写上也是可以的。
21. 放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行?
A. 文件头部位置
B. 文件尾部
C. <head>
标签部分
D. <body>
标签部分
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。
head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。
body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
22. 根据栅格系统的标准用法,错误的是()
A. <div class="container"><br> <div class="row">
B. <div class="row"><br> <div class="col-md-1">
C. <div class="row"><br> <div class="container">
D. <div class="col-md-1"><br><div class= "row">
C(错误)
Bootstrap 框架的网格系统工作原理如下:
1 、数据行 (.row) 必须包含在容器( .container )中,以便为其赋予合适的对齐方式和内距 (padding) 。
如: <div class=" container ">
<div class=" row "></div>
</div>
2 、在行 (.row) 中可以添加列 (.column) ,但列数之和不能超过平分的总列数,比如 12 。
如: <div class="container">
<div class="row">
<div class="col-md- 4 "></div>
<div class="col-md- 8 "></div>
3 、具体内容应当放置在列容器( column )之内,而且只有列( column )才可以作为行容器 (.row) 的直接子元素
4 、通过设置内距( padding )从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距( margin )来抵消内距 (padding) 的影响
详: http://www.imooc.com/code/2325
D(正确)
关于列的嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行( row )容器,然后在这个行容器中插入列。但在列容器中的行容器( row ),宽度为 100% 时,就是当前外部列的宽度。
详: http://www.imooc.com/code/2329
23. 以下哪个CSS属性是继承属性(inherited)?
A. vertical-align
B. background-color
C. text-indent
D. justify-content
继承就是指子节点默认使用父节点的样式属性。 不可继承的属性太多了不要背,记住可以继承的属性有哪些就行了。可以继承的属性很少,只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承。 所有元素可继承:visibility和cursor。 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 终端块状元素可继承:text-indent和text-align。 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
24. DHTML 的动态样式的作用是 ()
A. 可使开发人员改变显示在一页上的文本或图像,以便内容能够交互地对用户的鼠标和键盘操作做出响应
B. 让页面制作者以自动方式或对用户的操作做出响应的方式移动页面上的文本和图像
C. 可实现客户端与服务端动态的信息资源交换
D. 使网页作者改变内容的外部特征而不强制用户再次下载全部内容
DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起,用于创造动态性更强的网页。
通过 JavaScript 和 HTML DOM,能够动态地改变 HTML 元素的样式。
DHTML实现了网页从Web服务器下载后无需再经过服务的处理,而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如,当鼠标指针移到文章段落中时,段落能够变成蓝色,或者当鼠标指针移到一个超级链接上时,会自动生成一个下拉式子链接目录等。
包括:
①动态内容(Dynamic Content):动态地更新网页内容,可“动态”地插入、修改或删除网页的元件,如文字、图像、标记等。
②动态排版样式(Dynamic Style Sheets):W3C的CSS样式表提供了设定HTML标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能,而“动态排版样式”即可以“动态”地改变排版样式。
25. 下面的颜色代码里,色彩看上去偏绿色的有哪些?
A. rgb(0,170,0);
B. hsl(0,100%,50%);
C. #0a0;
D. hsl(120,50%,50%);
颜色也可以使用 hsl() 函数符被定义为色相-饱和度-明度(Hue-saturation-lightness)模式。HSL 相比 RGB 的优点是更加直观:你可以估算你想要的颜色,然后微调。它也更易于创建相称的颜色集合。(通过保持相同的色相并改变明度/暗度和饱和度)。
色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度。这个角度作为一个无单位的 <number> 被给出。定义 red=0=360,其它颜色分散于圆环,所以 green=120, blue=240,以此类推。作为一个角度,它隐含像 -120=240 和 480=120 这样的回环。
饱和度和明度由百分数来表示。
100% 是满饱和度,而 0% 是一种灰度。
100% 明度是白色, 0% 明度是黑色,而 50% 明度是“一般的”。
26. 下列哪些功能默认支持跨域?()
A. LocalStorage
B. image
C. canvas
D. iframe
跨域:发起请求与指向资源域不相同(协议+域名+端口)
常见有指向资源的部件:<a>, <form>, <img>, <script>, <iframe>, <link> 等标签以及 Ajax
localstorage不支持跨域,跨域可以利用postmessage和iframe来实现
27. 下列描述正确的是()
A. HTML 指的是超文本标记语言(Hyper Text Markup Language)
B. <a href="url" target="new">
可以打开新窗口
C. ` `可以插入图片
D. <body background="background.gif">
可以插入背景图
B 选项中target属性没有new这个值。target的属性值包括: 1._blank 在新窗口中打开。 2._self 默认,在相同的框架中打开被链接的文档。 3._parent 在父框架中打开被链接的文档。 4._top 在整个窗口中打开被链接的文档。 5.framename 在指定的框架中打开被链接的文档。
b:打开新窗口 target=“_blank”
c:插入图片: src="image.gif"
d:第一次见,不过试了可以的
28. 属于html5新增规范的有()
A. cookie
B. websql
C. sessionStorage
D. localStorage
E. WebSocket
29. 以下说法正确的是()
A. HTML中表示标题的标签应该全部使用h1
B. 应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
C. 应该根据页面中内容的层级关系来决定使用合适的标题标签。
D. h1标签用来描述网页中最上层的标题。
网页最上层是 title
文章最上层是h1
D真是让人满脸疑问?
30. 需要创建一个多选框,且和文本关联起来(单击文本就像单击核选框一样)。下列 HTML 代码中,正确的是?()
A. <label><input type="checkbox" />记住我</label>
B. <input type="checkbox" /><label for="checkbox">记住我</label>
C. <input type="checkbox" id="c1" /><label>记住我</label>
D. <input type="checkbox" id="c1" /><label for="c1">记住我</label>
A D
1、用label包住可以 使label 与表单元素绑定;
2、laber的for 属性规定 label 与哪个表单元素绑定;
31. 哪一个不是浏览器默认的天生inline-block标签(拥有内在尺寸,可设置高宽,不会自动换行)?
A. <button>
B. <input>
C. <label>
D. <img>
1.常见的块级元素(自动换行, 可设置高宽 )有:
div,h1-h6,p,pre,ul,ol,li,form,table,label等
2。常见的行内元素(无法自动换行,无法设置宽高)有:
a,img,span,i(斜体),em(强调),sub(下标),sup(上标)等。
3.常见的行块级元素(拥有内在尺寸,可设置高宽,不会自动换行 )有:
(button,input,textarea,select), img等
4.label元素不是浏览器默认的行块级元素
- input默认情况下可以设置可设置高宽,不会自动换行。但是label并没有变化。
- 手动设置label的display属性为inline-block,才能实现可设置高宽,不会自动换行的效果。
32. 以下不属于空元素(void elements)的是:
A. embed
B. img
C. address
D. wbr
一个空元素(empty element)可能是 HTML,SVG,或者 MathML 里的一个不可能存在子节点(例如内嵌的元素或者元素内的文本)的element。
HTML,SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容(define very precisely what each element can contain)。许多组合是没有任何语义含义的,比如一个 <audio> 元素嵌套在一个 <hr> 元素里。
在 HTML 中,通常在一个空元素上使用一个闭标签是无效的。例如, <input type="text"></input> 的闭标签是无效的 HTML。
在 HTML 中有以下这些空元素:
<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>
33. 下列对Reflow(回流)和 Repaint(重绘)的描述正确的是?
A. Repaint比Reflow更加花费时间影响性能
B. 一条条地修改DOM的样式要比先定义好css的class然后修改DOM的className减少reflow/repaint
C. 为HTML标签使用fixed或absoult的position,那么修改他们的CSS是不会reflow的
D. 改变了某个元素的背景颜色,文字颜色等会导致Reflow
34. 下面使用Animate-timing-function定义的贝塞尔曲线,哪一个是先快后慢的()
A. animation-timing-function : cubic-bezier(.22,1.23,.97,.89)
B. animation-timing-function :cubic-bezier(1.23,..22,97,.89)
C. animation-timing-function :cubic-bezier(1.23,.97,.89,.22)
D. animation-timing-function :cubic-bezier(.22,.97,.89,1.23)
没学过,先存疑着。https://www.nowcoder.com/questionTerminal/b612f0905386452c830b8ef53406dec1
35. 关于bootstrap3的说法,错误的是()
A. 在windows上支持IE8
B. 在IOS上支持Opera
C. 在MAC OS及Windows上支持firefox
D. 在IOS及android上都支持chrome
36. div元素的哪些CSS属性的默认值为0?
A. border-top-width
B. outline-width
C. padding-top
D. margin-top
border-top-width:默认值medium,定义中等的上边框。
outline-width:默认值medium,规定中等的轮廓。
37.下面哪些特性不是HTML5新引入的特性:( )
A. audio和video支持
B. Canvas
C. AJAX
D. localStorage
E. ES6
F. WebSocket
38. 下列属于HTML5新元素的是____。
A. header
B. footer
C. section
D. nav
E. viewport
E是meta属性
H5新增标签:
article: 标签定义外部的内容。
aside:标签定义 article 以外的内容。a
audio:h5新增音频标签。没有高宽属性。
canvas:h5新增画布标签。
command: 定义命令按钮(未测试)
datalist:标签定义选项列表。
datalist 及其选项不会被想显示出来,它仅仅是合法的输入值列表。
details:标签用于描述文档或文档某个部分的细节。
figure:标签用于对元素进行组合。
figcaption:定义 figure 元素的标题。
footer:定义 section 或 document 的页脚。
header:定义 section 或 document 的页眉。
hgroup:用于对网页或区段(section)的标题进行组合。
keygen:标签规定用于表单的密钥对生成器字段
mark:标签定义带有记号的文本。
meter:通过min="0" max="20"的方式定义度量衡。仅用于已知最大和最小值的度量。
nav:定义document或section或article的导航。
output:定义不同的输出类型,比如脚本。
progress:定义任何类型的任务的进度。
rp:定义若浏览器不支持 ruby 元素显示的内容
rt:定义 ruby 注释的解释
ruby:定义 ruby 注释
section:标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其他部分。
source:audio和video的属性之一。为audio和video定义媒介源。
summary:为details定义标题。
time:定义日期或时间。
video:h5新增视频标签。具有高宽属性。
39. 假设HTML结构为<parent><child>content</child></parent>
下列哪些做法可以实现child内容垂直居中?
**A. **
parent {
display: table;
}
child {
display: table-cell;
vertical-align: middle;
}
B.
parent {
display: flex;
align-items: center;
}
C.
parent {
position: relative;
}
child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
**D. **
parent:after {
content: '';
height: 100%;
vertical-align: middle;
width: 0;
}
child {
display: inline-block;
vertical-align: middle;
}
A:把parent变成table,再把子元素变为table-cell,而vertical-align属性可以设置元素垂直对齐,前提条件:只能应用于内联元素以及display值为table-cell的元素。
B:弹性布局。align-items:center为设置子元素在侧轴方向上居中对齐,弹性布局默认主轴方向为row(即从左到右),侧轴就是就是column(从上到下)。
C:定位。父元素设置相对定位,子元素设置绝对定位,子元素的top值设置为50%(即父元素高度的50%),注意:此时是child元素的左上角(0,0),移到了parent元素的(0,parent高度的50%),而不是子元素的中心点移到了父元素垂直方向的中心点。因此子元素需要往上移动自身高度的50%,即transform:translateY(-50%)。
D:设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。打个比方:有两个行内元素a和b,a和b都是img,如果a加了vertical-align:middle样式,b的底部(基线)就会对齐a的中间位置;如果a和b都加了一个vertical-align:middle样式。那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了。
而伪元素的display属性默认值为inline,行内元素是无法设置宽高的,想要设置宽高需要将之设置为block或者inline-block。所以D有错误,应该将:after设置为inline-block才行
40.关于语义化,以下说法正确的有:
A. div元素本身不具有语义,但是可以结合class、title、lang属性来表示具有语义的一组内容
B. b元素和strong元素都可以用来表示强调
C. legend元素用于对表单控件进行分组,而fieldset元素用来表示它的标题
D. time元素用于表示时间、address元素用于表示地址
注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本
legend元素用来表示标题
41. 以下哪些标签是合法的HTML5标签?
**A. <p></p>
**
B. <center></center>
C. <pre></pre>
D. <img></img>
<img>标签没有闭合,应该是<img src="" />
42. 下列关于背景定位属性background-position说法正确的是( )
A. 该属性可有两个取值,第一个取值为背景图像与其容器在水平方向上的距离,第二个取值为背景图像与其容器在垂直方向上的距离
B. 若只有一个取值,则其第二个取值默认为50%
C. 若此取值用百分数表示,如:20% 60%,则表示此背景图像离其容器左边的距离为整个容器宽度的20%,离容器上边的距离为整个容器高度的60%
D. 若属性取值用left、center、right、top、bottom表示,则该属性取值的顺序可以颠倒,否则其取值顺序不能颠倒
Background-position属性
用处:配合background-image属性一起使用,用于设置背景图片在盒子中的位置
参数:xpos ypos |x% y% |x y三种,
如果只写第一个水平方向的参数,第二个垂直方向的参数会默认为:
center|50%|容器高度的一半px
Xpos:规定水平方向的对齐方式,值有left,right,center
Ypos:规定垂直方向的对齐方式,值有top,bottom,center
x%:规定图片水平方向的距离。
你会不会以为这个x%就是父级容器宽度的x%?那你就想错了哦,这里的x%指的是父级容器的宽度减去图片的宽度后的差值的x%。
举个栗子:background-position:50%,20%;
图片的宽度为 imgwidth:100px;高度为 imgheight:100px;
容器的宽度为 conwidth:200px;高度为 conheight:200px;
那么此时图片的左顶点距离容器的左顶点的水平距离就是(conwidth-imgwidth)*50%=50px,而不是conwidth*50%=100px;(很好理解的吧,不然盒子宽度200px,图片宽度100px,又距离左边100px,岂不是50%没实现水平居中而紧靠右了吗?)
由此也可以算出图片的左顶点距离容器的左顶点的垂直距离为20px
y%:对应x%
x:图片距离容器水平方向距离
y:图片距离容器垂直方向距离
不打算更这个啦!因为我发现牛客网有错题集哈哈哈哈哈我人傻了!!!🤢