1、 对HTML语义化的理解
语义化是指根据内容的结构化内容语义化选择合适的标签代码语义化。通俗来讲就是用
正确的标签做正确的事情。
语义化的优点如下
对机器友好带有语义的文字表现力丰富更适合搜索引擎的爬虫爬取有效信息有利于SEO。除
此之外语义类还支持读屏软件根据文章可以自动生成目录
对开发者友好使用语义类标签增强了可读性结构更加清晰开发者能清晰的看出网页的结构
便于团队的开发与维护。
常见的语义化标签
2、html document是干嘛的
HTML即超文本标记语言标准通用标记语言的一个应用“超文本”就是指页面内可以包含图
片、链接、甚至音乐、程序等非文字元素。
HTML Document即HTML Document对象每个载入浏览器的HTML文档都会成为Document
对象
由于Document对象是window对象的一部分所以可通过window.document属性对其进行访
问。
3、DOCTYPE有什么作用
告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文
档以混杂模式呈现。
4、什么是严格模式与混杂模式
严格模式是以浏览器支持的最高标准运行
混杂模式页面以宽松向下兼容的方式显示模拟老式浏览器的行为
5、head 标签有什么作用其中什么标签必不可少
head标签用于定义文档的头部它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器
在哪里找到样式表、提供元信息等。
文档的头部描述了文档的各种属性和信息包括文档的标题、在 Web 中的位置以及和其他文档的
关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分 , , ,
。
其中 <title> 定义文档的标题它是 head 部分中唯一必需的元素。
<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块有语义化的div
主要区域
<article></article> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部
6、什么是WEB标准什么是W3C标准
7、HTML
1、Web标准不是某一个标准而是一系列标准的集合
web标准简单来说可以分为结构、表现和行为
结构 主要是有HTML标签组成
表现 即指css样式表
行为 主要是有js、dom组成
web标准一般是将该三部分独立分开使其更具有模块化。但一般产生行为时就会有结构或者表
现的变化也使这三者的界限并不那么清晰。
2、W3C对于WEB标准提出了规范化的要求
1标签和属性名字母要小写
2标签要闭合
3标签不允许随意嵌套
4尽量使用外链css样式表和js脚本。让结构、表现和行为分为三块符合规范。同时提高页面渲
染速度提高用户的体验。
5样式尽量少用行间样式表使结构与表现分离
6标签的id和class等属性命名要做到见文知义更利于seo代码便于维护
的注释怎样写
HTML 中的注释也叫"注释标签"。
“<- -” 表示注释的开始"- ->" 表示注释的结束。
8、src和href的区别
src和href都是用来引用外部的资源它们的区别如下
src 表示对资源的引用它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下
载并应⽤到⽂档内如请求js脚本。当浏览器解析到该元素时会暂停其他资源的下载和处理直
到将该资源加载、编译、执⾏完毕所以⼀般js脚本会放在页面底部。
href 表示超文本引用它指向一些网络资源建立和当前元素或本文档的链接关系。当浏览器
识别到它他指向的⽂件时就会并⾏下载资源不会停⽌对当前⽂档的处理。 常用在a、link等标
签上。
9、常见的块标签和内联标签以及内联块标签的区别 空(void)元素有那些
块级标签单独占一行可以设置宽高等样式h1 h2 h3 h4 h5 h6 p div ul li ol dl dt dd
内联标签行内标签在同一行显示不可以设置宽度宽高由内容撑开strong b em i span
空元素即没有内容的HTML元素。空元素是在开始标签中关闭的也就是空元素没有闭合标签
常见的有 <br/> 、 <hr/> 、 <img/> 、 、 、
10、 title与h1的区别、b与strong的区别、i与em的区别
strong标签有语义是起到加重语气的效果而b标签是没有的b标签只是一个简单加粗标签。b
标签之间的字符都设为粗体strong标签加强字符的语气都是通过粗体来实现的而搜索引擎更
侧重strong标签。
title属性没有明确意义只表示是个标题H1则表示层次明确的标题对页面信息的抓取有很大的
影响
i内容展示为斜体em表示强调的文本
11、 label 的作用是什么如何使用
label标签来定义表单控件的关系当用户选择label标签时浏览器会自动将焦点转到和label标签
相关的表单控件上。
使用方法1
使用方法2
12、如何合并表格单元格
rowspan="2"表示从设置的td单元格开始向下合并两个单元格
colspan="2"表示自左向右合并两个单元格。
8、Thead,tbody,tfoot的作用
thead 表格的头 用来放标题之类的东西
tbody 表格的身体 放数据本体
tfoot 表格的脚 放表格的脚注之类
13、标签上title属性与alt属性的区别是什么
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文
字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户视觉障碍的用户和使
用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。
14、标签应该如何合理嵌套
合理嵌套HTML标签ul和li是固定嵌套ul的直接子元素必须是li标签ol和li是固定嵌套ol的直
接子元素必须是li。Dl,dtdd是固定嵌套dl的直接子元素必须是dt和dd,dt和dd是兄弟元素。
块标签可以套其他的标签但是p标签除外p标签不能嵌套其他的块标签内联标签不能嵌套块
标签(a标签特殊)a标签不允许嵌套a标签和其他有交互作用的标签。块级元素与块级元素并列、
内嵌元素与内嵌元素并列。
15、png、jpg、gif 这些图片格式解释一下分别什么时候用。有没有了解过
webp
1. png是便携式网络图片Portable Network Graphics是一种无损数据压缩位图文件格式.优
点是压缩比高色彩好。 大多数地方都可以用。
2. jpg是一种针对相片使用的一种失真压缩方法是一种破坏性的压缩在色调及颜色平滑变化
做的不错。在www上被用来储存和传输照片的格式。
3. gif是一种位图文件格式以8位色重现真色彩的图像。可以实现动画效果.
4. webp格式是谷歌在2010年推出的图片格式压缩率只有jpg的2/3大小比png小了45%。缺
点是压缩的时间更久了兼容性不好目前谷歌和opera支持。
<label>Number:</label>
<label>Date:</label>
16、表单提交中Get和Post方式的区别
Get 一般用于从服务器上获取数据 Post 向服务器传送数据
Get 传输的数据是拼接在Url之后的对用户是可见的 Post 的传输数据对用户是不可见的
Get 传送的数据量较小不能大于 2KB 。 Post 传送的数据量较大一般被默认为不受限制
Get 安全性非常低 Post 安全性较高
在 FORM 提交的时候如果不指定 Method 则默认为 Get 请求
17、meta标签的name属性值
name 属性主要用于描述网页与之对应的属性值为contentcontent中的内容主要是便于搜索
引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是＜meta name="参数" content="具体的参数值"＞。
其中name属性主要有以下几种参数
A 、Keywords(关键字)说明keywords用来告诉搜索引擎你网页的关键字是什么。
B 、description(网站内容描述) 说明description用来告诉搜索引擎你的网站主要内容.
C 、robots(机器人向导)说明robots用来告诉搜索机器人哪些页面需要索引哪些页面不需要索
引。
content的参数有all,none,index,noindex,follow,nofollow,默认是all。
举例＜meta name="robots" content="none"＞D 、author(作者)
18、sass是什么
sass是css预处理语言无法直接运行在浏览器需要其他的编译框架进行二次编译以后才可以在
浏览器中运行。sass提供了许多便利的写法大大节省了设计者的时间使得CSS的开发变得简
单和可维护
HTML5
19、HTML5 为什么只需要写
1HTML5不基于SGML因此不需要对DTD进行引用但是需要DOCTYPE来规范浏览器的行为
让浏览器按照它们应该的方式来运行
2HTML4.01基于SGML所以需要对DTD进行引用才能让浏览器知道该文档所使用的文档类
型。
20、Html5 有哪些新特性、移除了哪些元素?
新增元素
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
语义化更好的内容元素比如 article 、footer、header、nav、section
表单控件 calendar 、 date 、 time 、 email 、 url 、 search
新的技术 webworker 、 websocket 、 Geolocation
移除的元素
纯表现的元素 basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
对可用性产生负面影响的元素 frame 、 frameset 、 noframes
这样表示网站的头部。 HTML5在语义上却有很大的优势。提供了一些新的标签比如
支持 HTML5 新标签
IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签
可以利用这一特性让这些浏览器支持 HTML5 新标签
浏览器支持新标签后还需要添加标签默认的样式
21、如何区分 HTML 和 HTML5
(1在文档类型声明上不同
HTML是很长的一段代码很难记住而HTML5却只有简简单单的声明方便记忆。
(2在结构语义上不同
HTML没有体现结构语义化的标签通常都是这样来命名的
22、HTML5的离线储存怎么使用工作原理解释一下
localStorage 长期存储数据浏览器关闭后数据不丢失
sessionStorage 数据在浏览器关闭后自动删除。
23、HTML5 Canvas元素有什么用
Canvas 元素用于在网页上绘制图形该元素标签强大之处在于可以直接在HTML上进行图形操
作
CSS/CSS3/移动端适配
1、css盒子模型box-sizing属性的理解
在网页中一个元素占有空间的大小由几个部分构成其中包括元素的内容content元素的
内边距padding元素的边框border元素的外边距margin四个部分。这四个部分占
有的空间中有的部分可以显示相应的内容而有的部分只用来分隔相邻的区域。
CSS盒模型标准模型 + IE模型
1. 标准模型
1. 怪异模型|IE模型
box-sizing 是一个 CSS3 属性与盒子模型有着密切联系。即决定元素的宽高如何计算 boxsizing 有三个属性
content-box 使得元素的宽高即为内容区的宽高(默认模式)
div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度div宽度会变化
box-sizing:content-box; /*设置标准盒子*/
div宽度定死 = 内容宽度+border宽度+padding宽度 //改变border宽度div宽度不会变化
box-sizing:border-box; /*IE模型*/
border-box : 计算方式 content + padding + border = 本身元素大小即缩小了 content 大
小
inherit 指定 box-sizing 属性的值应该从父元素继承
2、引入css的方式有几种分别是什么
1内嵌式
2外联式
3行内样式
3、px、em、rem的区别
1、px像素。绝对单位像素px是相对于显示器屏幕分辨率而言的是一个虚拟单位。是计算机系
统的数字化图像长度单位如果px要换算成物理长度需要指定精度DPI。
2、em是相对长度单位相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被
人为设置则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小因此并不是一个固定的
值。
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事仍然是相对大
小但相对的只是HTML根元素。
4、区别IE无法调用那些使用px作为单位的字体大小而em和rem可以缩放rem相对的只是
HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身通过它既可以做到只修改根元
素就成比例地调整所有字体大小又可以避免字体大小逐层复合的连锁反应。目前除了IE8及更
早版本外所有浏览器已支持rem。
4、怪异盒模型box-sizing弹性盒模型|盒布局?
在标准模式下的盒模型盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下盒子的总宽度和高度是包含内边距padding和边框border宽度在内
的盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box另一个是border-box。
当设置为box-sizing:content-box时将采用标准模式解析计算
当设置为box-sizing:border-box时将采用怪异模式解析计算。
通过来书写CSS代码。
只能应用于当前网页不能被其它网页共享。
注意</meta></link></input>
