前端工程师-HTML专项练习

1、什么是HTML?

  • HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等

2、什么是HMTL5?

  • HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一

3、HTML和HMTL5的区别

  • (1)HTML5支持SVG,画布和其他虚拟矢量图形,而在HTML中,只有将它与Flash,Silver-light等不同技术结合在一起才能使用矢量图形。
  • (2)HTML5使用Web SQL数据库,可用于临时存储数据但在HTML中只有浏览器缓存才可用于此目的。
  • (3)HTML5支持新的表单控件,例如:日期和时间,电子邮件,数字,范围,电话,网址,搜索等。
  • (4)HTML 5是否允许音频和视频控件以及标签,HTML不允许音频

- 简单的说,HTML5更新了很多功能

1、若要设置一个表单不会因为屏幕的改变而影响表单显示,现要设置表单的最小宽度为 76 像素,所有元素靠左显示,并且表单距离屏幕有一定的距离,如何设置( A )

  • A、min-width: 76px; text-align: left; margin:1em;
  • B、min-width: 76dp; text-align: left; margin:1em;
  • C、min-width: 76px; align: left; margin:1em;
  • D、min-width: 76dp; align: left; margin:1em;

解析:

  • A. em 自动适应用户所使用的字体。元素像素就是指px。正确
  • B. dp 虚拟像素,在不同的像素密度的设备上会自动适配
  • C. align只能用于div ,align直接写在是div的属性 ,text-align则是Css的属性 ,两个属性使用的地方不一样,但是作用一样
<!-- align 规定 div 元素中的内容的水平对齐方式-->
<div align="center"> 
This is some text! 
</div> 
<!-- text-align 规定“元素中”的文本的水平对齐方式-->
<div style="text-align:center"> 
  • D. 同上,dp的问题

2、有以下代码,最终字体的颜色为?blue

<div class='red black' id="yy">YY</div>
<style>
    #yy{color: blue;}
    .black{color: black;}
    .red{color: red;}
    div{color: white;}
</style>

解析:

  • css优先级:元素的 style 样式属性,#id,.class、:hover、 *(全局)
  • !important:权重为无穷大

3、需要创建一个多选框,且和文本关联起来(单击文本就像单击核选框一样)。下列 HTML 代码中,正确的是?(A、D)

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>

解析:

  • label标签,用于绑定一个表单元素。当点击label标签的时候,被绑定的表单元素就会获得输入焦点
  • 第一种 <label> 用户名:<input type="text"> </label>
  • 第二种 <label for="nc">用户名:</label> <input type="text" id="nc">
  • 故选择A、D

4、以下说法中正确的是(AC)

  • A、canvas 中绘制的元素不可以通过浏览器提供的接口获取到。
  • B、SVG 中绘制的元素不可以通过浏览器提供的接口获取到。
  • C、html 中 A标签 target 属性的默认取值是 _self,默认在当前窗口打开。
  • D、为了优化网页的SEO效果,常用 javascript 动态生成网页的title、description、keyword。

解析:

  • canvas为标量图(jpg或png),通过js生成,不能被引擎抓取
  • svg为为矢量图,通过标签实现,能被引擎抓取
  • 优化seo的话要后台传数据

5、以下是HTML5新增表单元素属性的是:ABCD

  • A、placeholder(用户输入时进行提示)
  • B、multiple(多文件上传)
  • C、required(必填项,验证是否为空)
  • D、pattern(用于验证input域的模式,正则表达式)

6、关于label元素,以下说法正确的有(AB)

  • A、label元素可以使用for属性关联表单控件,也可以将表单控件放置在它的内部
  • B、当使用for属性来关联label元素和表单控件时,label元素的for属性要和表单控件的ID一致
  • C、如果label元素内嵌套一个a链接,则点击该a链接不会触发页面跳转
  • D、一般会在 label 元素内部放置可交互的元素,比如 anchors 或 buttons

7、HTML 语言中,设置表格中文字与边框距离的标签是( C )

  • A、<table boder=””>: 边框
  • B、<table cellspacing=””> : 单元格之间的间距
  • C、<table cellpadding=””>: 文字与单元格边框的间距
  • D、<table width=””> : 宽度

8、jQuery通过哪个方法可以设置或返回表单字段的值:C

  • A、$(&quot;#test&quot;).text(): 设置或返回的是纯文本内容
  • B、$(&quot;#test&quot;).html(): 设置或返回的是源代码
  • C、$(&quot;#test&quot;).val(): 用在表单元素上,用来设置获取 input 或 select 的值
  • D、$(&quot;#test&quot;).attr(): 设置或返回被选元素的属性值

9、下列哪些是正确的引入CSS样式到html中的方式? ( A )

  • A、<link rel="stylesheet" type="text/css" href="test.css">
  • B、<link rel="stylesheet" type="text/css" src="mystyle.css">
  • C、<link rel="stylesheet" type="text/css" src="mystyle.css">
  • D、<style type=“text/css" src="test.css"></style>

解析:

HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式

语法:
1、链接式:<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式:<style type="text/css">@import url("css文件路径");</style>

区别:<link>:属于XHTML,优先加载CSS文件到页面,@import:属于CSS2.1,先加载HTML结构在加载CSS文件


9、关于XML和JSON区别的描述正确的是:(A B D)

  • A、JSON相对于XML来讲,数据的体积小,传递的速度更快些`
  • B、JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互
  • C、JSON对数据的描述性比XML较好
  • D、JSON的速度一般要快于XML

解析:

1、JSON 与 XML 的相同之处:

  • JSON 和 XML 数据都是 “自我描述” ,都易于理解。
  • JSON 和 XML 数据都是有层次的结构 JSON 和 XML
  • 数据可以被大多数编程语言使用

2、JSON 与 XML 的不同之处:

  • JSON 不需要结束标签
  • JSON 更加简短
  • JSON 读写速度更快
  • JSON 可以使用数组

JSON实例:

{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

XML实例:

<sites>
  <site>
    <name>菜鸟教程</name> <url>www.runoob.com</url>
  </site>
  <site>
    <name>google</name> <url>www.google.com</url>
  </site>
  <site>
    <name>微博</name> <url>www.weibo.com</url>
  </site>
</sites>

10、下面标签嵌套正确的是

  • A、<ul><p>牛客网</p></ul>:ul只能紧挨着li
  • B、<a href="#"><a href="#">牛客网</a></a>:a中不能再嵌套a
  • C、<dl><li>牛客网</li></dl>:dl只能紧挨着dt
  • D、<ol><li>牛客网</li></ol>:有序排列

11、下面关于 HTML 的描述正确的一项是 ( D )

  • A、HTML5 中的所有标签都必须写结束标签
  • B、DOCTYPE 的设置不会影响页面的展示效果
  • C、HTML5 中的属性名对大小写敏感
  • D、HTML5 中可以使用 data-* 自定义属性

12、哪个元素表示标记或突出显示的文本以供参考?B

  • A、highlight:jQuery中的,突出特效,通过改变背景颜色来隐藏或者显示一个元素
  • B、mark:h5中的标签,定义带有记号的文本,文本高亮显示
  • C、span:HTML中的标签,定义重要文本,用来加粗文本
  • D、blink:是js中的方法,用于显示闪动的字符串,不能用于ie,Chrome,Safari

13、属于元素事件属性的是( A C D)

  • A、onblur::元素失去焦点时触发
  • B、required
  • C、onfocus:元素聚焦时触发
  • D、onsearch:用户向搜索域或文本搜索时触发

题目来源于:牛客网:https://www.nowcoder.com/

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jasmine_qiqi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值