前端工程师-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、$("#test").text()： 设置或返回的是纯文本内容
• B、$("#test").html()： 设置或返回的是源代码
• C、$("#test").val()： 用在表单元素上，用来设置获取 input 或 select 的值
• D、$("#test").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：用户向搜索域或文本搜索时触发