html阶段易错点

1.下面的说法正确的是B

A  一个transform可以声明多个功能函数,不过之间需要逗号隔开

B  一个transform可以声明多个功能函数,不过之间需要空格隔开

C  一个transform不可以声明多个功能函数

D  一个元素可以添加多个transform属性

2.以下不属于H5标签的是(B)

A  aside

B  thead

C  article

D  section

增加标签:

1、结构标签

(1)section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分;

(2)article:特殊独立区块,表示这篇页眉中的核心内容;

(3)aside:标签内容之外与标签内容相关的辅助信息;

(4)header:某个区块的头部信息/标题;

(5)hgroup:头部信息/标题的补充内容;

(6)footer:底部信息;

(7)nav:导航条部分信息

(8)figure:独立的单元,例如某个有图片与内容的新闻块。

2、表单标签

(1)email:必须输入邮件;

(2)url:必须输入url地址;

(3)number:必须输入数值;

(4)range:必须输入一定范围内的数值;

(5)Date Pickers:日期选择器;

a.date:选取日、月、年

b.month:选取月、年

c.week:选取周和年

d.time:选取时间(小时和分钟)

e.datetime:选取时间、日、月、年(UTC时间)

f.datetime-local:选取时间、日、月、年(本地时间)

(6)search:搜索常规的文本域;

(7)color:颜色

3、媒体标签

(1)video:视频

(2)audio:音频

(3)embed:嵌入内容(包括各种媒体),Midi、Wav、AU、MP3、Flash、AIFF等。

4、其他功能标签

(1)mark:标注(像荧光笔做笔记)

(2)progress:进度条;

(3)time:数据标签,给搜索引擎使用;发布日期9:00更新日期4:00

(4)ruby和rt:对某一个字进行注释;注释内容浏览器不支持时如何显示

(5)wbr:软换行,页面宽度到需要换行时换行;

(6)canvas:使用JS代码做内容进行图像绘制;

(7)command:按钮;

(8)deteils :展开菜单;

(9)dateilst:文本域下拉提示;

(10)keygen:加密;

新增的属性:

对于js进行添加的属性。

<script defer src=".....js" οnlοad="alert('a')"></script>

<script async src=".....js" οnlοad="alert('b')"></script>

如果没有以上两个属性的话,执行顺序为先加载(下载)第一个src,然后在执行其onload,然后在向下依次同步执行defer属性在h5之前就已经有了,输入延迟加载(推迟执行),它会先加载(下载)src中文件内容,然后等页面全部加载完成后,再加载onload中js.async属性属于异步加载,它会在加载src后,立即执行onload,同时还会继续加载页面以上执行顺序,alert显示会先显示b然后再显示a

网页中标签中加入小图标的样式代码

<link rel="icon" href="url..." type="图片名称" sizes="16*16">

有序列表ol:新增start(列表起始值),reversed(是否倒置)menu菜单type属性(3个菜单类型)内嵌css样式:在标签内部来定义一个样式区块(scoped),只对样式标签内部才有效内嵌框架:iframe元素,新增了seamless无边距无边框,srcdoc定义了内嵌框架的内容

<iframe>新增属性:

<!--seamless定义框架无边框 无边距-->

<!--srcdoc的显示级别比sandbox高-->

<!--sandbox用来规定一个内嵌框架的安全级别-->

<!--sandbox="allow-forms:允许提交表单"-->

<!--sandbox="allow-origin:允许是相同的源"-->

<!--sandbox="allow-scripts:允许执行脚本"-->

<!--sandbox="allow-top-navigation:允许使外面的页面进行跳转"-->

manifest属性:

定义页面需要用到的离线应用文件,一般放在<html>标签里

charset属性:

meta属性之一,定义页面的字符集

sizes属性:

<link>新增属性,当link的rel="icon"时,用以设置图标大小

base属性:

<base href="http://localhost/" target="_blank">表示当在新窗口打开一个页面时,会将href中的内容作为前缀添加到地址前

defer属性:

script标签属性,表示脚本加载完毕后,只有当页面也加载完毕才执行(推迟执行)

async属性:

script标签属性,脚本加载完毕后马上执行(运行过程中浏览器会解析下面的内容),即使页面还没有加载完毕(异步执行)

media属性:

<a>元素属性:表示对何种设备进行优化

hreflang属性:

<a>的属性,表示超链接指向的网址使用的语言

ref属性:

<a>的属性,定义超链接是否是外部链接

reversed属性:

<ol>的属性,定义序号是否倒叙

start属性:

<ol>的属性,定义序号的起始值

scoped属性:

内嵌CSS样式的属性,定义该样式只局限于拥有该内嵌样式的元素,适用于单页开发

HTML5全局属性:对任意标签都可以使用的,以下6个

data-yourvalue 、hidden、Spenllecheck、tabindex、contenteditable、desginMode;

全局属性:

1.可直接在标签里插入的:data-自定义属性名字;

hidden(直接放上去就是隐藏);

spellcheck="true"(语法纠错);

tabindex="1"(Tab跳转顺序);

contenteditable="true"(可编辑状态,单击内容,可修改);

2.在JavaScript里插入的window.document.designMode = 'on'(JavaScript的全局属性,整个页面的文本都可以编辑了);


3.

<nav> 

        <li>1</li> 

        <li>2</li> 

        <h3>1</h3> 

        <li>3</li> 

        <h3>2</h3> 

        <li>4</li> 

        <h3>3</h3> 

</nav>

其中nav h3:nth-child(2)选择的是(D)

A  内容为2的li

B  内容为2的h3

C  内容为3的h2

D  都选不到

4.实现动画正反交替播放的语句是(B)

A  transiton:run 3s linear 0s infinite ;

B  animation:run 3s linear 0s infinite alternate;

C  animation:run 3s linear 0s infinite

D  transition:run 3s linear 0s infinite;

5.关于按钮的高度说法正确的是(A)

A  按钮的高度包含了border和padding

B  按钮的height指的是内容的高度

C  按钮的实际高度是所有的margin和padding及border之和

D  按钮的实际高度是margin+width

结论

button与text的显示高度不同,由于处于的模式不同,button处于Quirks模式,text处于标准模式。

text属性的显示值= 原本高度+padding+border值

button属性的显示值= 原本高度(原本高度中包含了padding和border值)


5.怪异盒模型的总宽高不包括(D)

A  padding

B  border

C  content

D  margin

6.当父元素空间不足,flex子元素不换行,也不缩小,可以使用以下哪种方式实现(A)

A  flex-shrink:0

B  flex-wrap:wrap

C  flex-grow:0

D  flex-basis:100%;

弹性盒属性:

flex-direction属性决定主轴的方向;

flex-wrap属性定义,如果一条轴线排不下,如何换行;

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap;

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

项目(子元素)也有一些属性:order,flex-grow,flex-shrink,flex-basis,flex,align-self。

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

7.以下对background-size属性值描述正确的是(A,C)

A  background-size:cover;  背景图会超出容器,背景不会发生变形

B  background-size:contain;  背景图会超出容器,背景不会发生变形

C  background-size:100% 100%;  背景图会发生变形,背景图不会超出容器

D  background-size:100%;  背景图不会超出容器,不会变形

效果如下:

效果如下:

如下所示:

8.关于怪异盒子的说法正确的是

A  所有浏览器都默认为怪异模式

B  谷歌浏览器默认是怪异模式

C  文档类型缺失在IE下会触发怪异模式

D  怪异模式下的宽度包含了border和padding

正确答案: C,D

9.以下可以将图片设置为圆形的有

A  border-radius:50%

B  border-radius:100%;

C  border-radius:0;

D  border-radius:none;

正确答案: A,B

解析:border-radius 设置半径    50%   100%都能设置为正圆

10.以下可以实现让整个当前元素在页面中不显示的css声明有哪些

A  opacity:0;

B  transform:scale(0);

C  overflow:hidden;

D  visibility:hidden;

正确答案: A,B,D

解析:overflow是隐藏超出的内容,visibility:hidden;是删除html结构,控制台也找不到

11.定义子元素在3D空间中呈现的属性

A  transform-style:preserve-3d;

B  transform-style:flat;

C  transform-style:flat-3d;

D  transform-origin:center;

正确答案: A

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容