HTML面试题简答版

什么是HTML?

Html是超文本标记语言

DOCTYPE 的作用是什么?标准模式与兼容模式(混杂模式)各有什么区别?

Doctype是文档声明,就是为了告诉浏览器用什么样的标准来解析我这个html。

呈现在最新浏览器当中的就是标准模式

呈现在老式浏览器当中的就是兼容模式

总而言之,尽可能更好的将内容显示给用户

html5为什么只需要写<!doctype html>?  你知道多少种Doctype文档类型?

因为HTML5 与 HTML4 基于的基准不同,不需要基于SGML,也不用引入DTD.

三种类型:混杂模式,标准模式,准标准模式

编码集的作用是什么?说出几个常见的编码集?为什么常用utf-8?

编码集的作用就是数据传输

常见的编码集有utf-8   utf-16   utf-32

Utf-8也被成为万国码,它可以解决多国语言文本显示的问题,具有更高的性能,所以常用

meta viewport是什么? 原理是什么?

Meta viewprot是可视化的一个区域。

原理就是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放

行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?

行内元素有: a、 b、span、br。

块级元素有:div、 ul、ol、li、h1...h6、p、td、tr、form。

行内块元素有:ifream、img、input、textarea。

行内块级元素,元素排列在一行,并不会自动换行,但是可设置宽度和高度以及外边距和内边距的所有样式

块级元素,能够自动换行开启新的一行,能够设置宽高,margin和padding对上下左右四个方向设置均有效

行内元素,相邻的行内元素不换行,设置宽高无效,margin设置仅左右方向有效,上下无效,padding设置上右下左都有效

简述a标签target属性的取值和作用?

a标签中target取值一共四个

_blank:在新窗口中打开。

_self:在同一框架中打开。

_parent:在父框架中打开。

_top:在整个窗口中打开。

<img>标签上的 title 属性与 alt 属性的区别是什么?

title和alt共同点都是给图片做注释的,区别在于:

当图片在浏览器中加载成功后,鼠标光标放在图片上显示的内容就是title里的内容

当图片在浏览器中不能正常加载的时候,所显示的内容就是alt里面的内容

对WEB标准以及W3C的理解与认识

web标准就是将页面的结构、样式和行为这三部分分开,使页面更具有模块化

w3c对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范。

前端页面有哪三层构成,分别是什么,作用是什么?

结构层:HTML   搭建结构

样式层:CSS   设置样式

行为层:JS     实现行为

什么是iframe?请讲述一下iframe的优缺点?

Html里的一个标签,作用就是镶嵌网页。它是一个行内块元素,并且默认有一个宽高,存在边界。

iframe 能够原封不动的把镶嵌进来的网页展现出来。

如果有多个网页都需要使用 iframe,只需要修改 iframe 的内容,就可以实现每一个页面内容的更改。

缺点:会出现很多页面,不容易管理。

form的作用

form是html的一个标签,它的作用是用来定义表单域,实现用户信息的收集和传递,包含表单控件和提示信息

HTML中有哪些属于表单元素?那些属于表格元素?请分别列举5个并说明用途

表单元素:

文本区域(textarea)

列表框(select)

文本输入框(input  type=text)

密码输入框input type=password)

单选框(input  type=radio)

复选框(input type=checkbox)

表格元素:

有三个元素是每个表格都必须要有的: table、tr和td。元素table,是HTML用以支持表格式内容的核心元素,它表示HTML文档中的表格

如何定义一个单选按钮?

<input type="radio" >,这是一个单标签

input只读,禁用,必填,提示词(占位符)属性分别是什么?

readonly   规定输入内容为只读(不能修改)

disabled    规定输入内容是禁用的

required    规定必需在提交之前输入内容,否则提交不了。

placeholder(占位符) 是 HTML5 新增的一个属性,是搜索框内显示的文字,作为搜索提示使用

input的type属性一共有多少个值?请写出常用的13种,并写出每种类型的应用场景

text  默认的输入类型。               

password 密码,表现为一连串的点。

file  文件上传控件。                   

radio  单选按钮

checkbox  复选框                 

hidden  隐藏的输入字段,用于在表单中添加对用户不可见

button 按钮                    

image  图像形式的提交按钮

reset  重置按钮,清除表单中所有数据        

submit  提交按钮,提交按钮会把表单数据发送到服务器

color  调色板                  

tel  包含电话号码的输入域

search  搜索域                     

number 包含数值的输入域

range 包含一定范围内数字值的输入域     

date  选取日、月、年的输入域

month 选取月、年的输入域              

week  选取周、年的输入域

time 选取月、年的输入域            

datetime 选取时间、日 月、年的输入域(UTC时间)

datetime-local 选取时间、日 月、年的输入域(本地时间)

input的disabled属性 和 readonly属性的区别?

禁用属性和只读属性的区别如字面意思

写法上没有什么区别:

disabled写法:<input type="text" name="aaa" value="xxx" disabled="true"/>

readonly写法:<input type="text" name="bbb" value="xxx" readonly="true"/>

disabled属性在将input文本框变成只读不可编辑的同时,还会使文本框变灰,但是readonly不会。

disabled属性修饰后的文本框内容,在不可编辑的同时,通过js也是获取不到的。例如$("input [name='aaa']").val()是不好用的。但是用readonly修饰后的文本框内容,是可以通过js获取到的,也就只是简单的不可编辑而已!

disabled属性对input文本框,单选radio,多选checkbox都适用,但是readonly就不适用,用它修饰后的单选以及多选按钮仍然是可以编辑状态的。

label 的作用是什么?是怎么用的?

Label标签可以实现让用户点击文字区域,自动选择到当前的input框

input设置id属性,label设置for属性,for属性的属性值为id属性值。

两种写法:

方法一:<label for="aaa">康哥</label>

<input type="text" id="aaa">

方法二:<label>男<input type ="text" name=“aaa” ></label>

<label>女<input type ="text" name=“aaa”></label>

datalist 是什么?有什么用?

是html5的新标签,相当于input里的option选择框,也需要配合input来使用,但是需要给datalist设置一个id,并且这个id和input的id一致才有用。

input的name属性的作用是什么?

Input相当于一个人,一个人必须要有名字,只有给input设置了名字之后,才能在提交表单的时候传递它的值

相对、绝对路径的区别是什么?

出发位置不一样

相对路径是从一个目录为起点出发到另一个目录的路径

绝对路径是从根目录为起点出发到另一个目录的路径

src和href的区别是什么?

src是引入这个文件的位置,而href是给这个文件或文本和引用资源之间建立联系。

jpg、png、gif的区别是什么?如何进行选择?

jpg全名叫jpeg,其压缩比高,生成文件体积小,但是图片质量会变差。而这种质量变差的情况会随着每一次压缩累积。

pang它压缩比高,生成文件体积小。PNG结合了gif和tiff的优点,能够支持压缩不失真、透明背景、渐变图像的制作要求

很多人以为GIF指的就是动图,其实GIF不仅有动画GIF,还有静态GIF。GIF的特点是体积小、成像相对清晰,支持透明背景图像,适用于多种操作系统

s 与 del 的区别、b 与 strong 的区别、i 与 em 的区别?

s元素:添加删除线,有表示该段文本不正确的语义。

del元素:添加删除线。

b元素:给指定文本加粗,但没有其他语义。

strong元素:给指定文本加粗,有“重要”的语义。

i元素:让指定文本变为斜体,没有其他语义。

em元素:让指定文本变为斜体,有”强调“的语义。

请简述一下你对语义化标签的理解,并说出几个语义化标签。

用正确的标签做正确的事情。

便于开发者阅读和写出更优雅的代码,同时让浏览器更好的解析。

请说出五种html5的新特性

语义标签

增强型表单

视频和音频

Canvas绘图

SVG绘图

如何区分html和html5?

html5是第五代超文本标记语言,其文档声明及其简洁。而html一般指html4.01,其文档声明繁杂。

如何处理html5新标签的浏览器兼容问题?

使用html5的:

shiv包、shim框架

canvas和svg的区别是什么?它们的应用场景是什么?

Canvas用来绘制2d图,svg用来绘制不规则矢量图

Svg应用于简单图像,canvas用于可视化数据图,比如天气数据
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值