HTML/CSS专题练习错题本

-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性 
IE使用的是Trident内核，Firefox 使用的是Gecko内核。目前使用IE内核的浏览器还有搜狗，遨游，360等等

在非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属性。

multiple属性允许用户选择多个值
<textarea>元素限定了多行输入字段
[更多的属性见HTML学习笔记二的forms]

Web Worker是一种JavaScript，它在后台运行，独立于其他脚本，而不会影响页面性能。您可以继续做任何您想做的事情，Web Worker在后台运行。

这里考察HTML标签的使用： <audio> 标签定义声音，比如音乐或其他音频流。 
A正确。 <canvas> 标签定义图形，比如图表和其他图像。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 B错误，<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。C正确 
command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。 D正确。

鼠标移入onmouseover，移出onmouseout
<a href="#" onmouseover="this.style.fontSize='30px'">注册</a>
在js里面添加的属性名使用驼峰法，在css里面使用连接线

行内元素典型代表 span  ,a,  ,strong , em,  del,  ins
特点：★在一行上显示
      ★不能直接设置宽高
      ★元素的宽和高就是内容撑开的宽高。
      
行内块元素（内联元素）典型代表  input  img
特点：★在一行上显示
      ★可以设置宽高
      
块元素典型代表,div,h1-h6,p,ul,li
特点: ★独占一行
      ★可以设置宽高
     ★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。

span 为行内元素，无法设置高宽；当添加样式 display : block，可设置高宽。

col-md-8 col-xs-12

- .col-xs- 超小屏幕 手机 <768px
- .col-sm- 小屏幕 平板  >=768px
- .col-md- 中等屏幕  >=992px
- .col-lg- 大屏幕  >1200px

是footer不是foot

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>

继承：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。

col 元素是仅包含属性的空元素。

DOM事件流 DOM事件流包括三个阶段。 事件捕获阶段 处于目标阶段 事件冒泡阶段

默认有…这道题很奇怪

有歧义。submit 在html dom中称为属性,onsubmit 在html dom 中称为事件。

a标签使用（#）实现了页面跳转，#默认为当前页面，这个方法应该不能算为a标签不跳转

HTML5中：
自关闭的斜线(/)对 ：area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr空标签无效，言即不再需要自闭合(/)这个小尾巴了，如果要写上也是可以的。

在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。

head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。
body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

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

继承就是指子节点默认使用父节点的样式属性。 不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。 所有元素可继承：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。

DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。
通过 JavaScript 和 HTML DOM，能够动态地改变 HTML 元素的样式。

DHTML实现了网页从Web服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。
包括：
    ①动态内容(Dynamic Content)：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等。
    ②动态排版样式(Dynamic Style Sheets)：W3C的CSS样式表提供了设定HTML标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可以“动态”地改变排版样式。

颜色也可以使用 hsl() 函数符被定义为色相-饱和度-明度（Hue-saturation-lightness）模式。HSL 相比 RGB 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。（通过保持相同的色相并改变明度/暗度和饱和度）。

色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。这个角度作为一个无单位的 <number> 被给出。定义 red=0=360，其它颜色分散于圆环，所以 green=120, blue=240，以此类推。作为一个角度，它隐含像 -120=240 和 480=120 这样的回环。

饱和度和明度由百分数来表示。
100% 是满饱和度，而 0% 是一种灰度。
100% 明度是白色， 0% 明度是黑色，而 50% 明度是“一般的”。

跨域：发起请求与指向资源域不相同（协议+域名+端口）
常见有指向资源的部件：<a>, <form>, <img>, <script>, <iframe>, <link> 等标签以及 Ajax
localstorage不支持跨域，跨域可以利用postmessage和iframe来实现

B 选项中target属性没有new这个值。target的属性值包括： 1._blank 在新窗口中打开。 2._self 默认，在相同的框架中打开被链接的文档。 3._parent 在父框架中打开被链接的文档。 4._top 在整个窗口中打开被链接的文档。 5.framename 在指定的框架中打开被链接的文档。 

b:打开新窗口 target=“_blank”
c:插入图片： src="image.gif"
d:第一次见，不过试了可以的

网页最上层是 title

文章最上层是h1

D真是让人满脸疑问？

A D
1、用label包住可以 使label 与表单元素绑定；
2、laber的for 属性规定 label 与哪个表单元素绑定；

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，才能实现可设置高宽，不会自动换行的效果。

一个空元素（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>

没学过，先存疑着。https://www.nowcoder.com/questionTerminal/b612f0905386452c830b8ef53406dec1

border-top-width:默认值medium,定义中等的上边框。
outline-width:默认值medium,规定中等的轮廓。

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新增视频标签。具有高宽属性。

parent {
display: table;
}
child {
display: table-cell;
vertical-align: middle;
}

parent {
display: flex;
align-items: center;
}

parent {
position: relative;
}
child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

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才行

注释：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b> 标签作为最后的选项。HTML5 规范声明：应该使用 <h1> - <h6> 来表示标题，使用 <em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本

legend元素用来表示标题

<img>标签没有闭合，应该是<img src="" />

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:图片距离容器垂直方向距离