前端必备知识储存——HTML篇一(面试常考)
系列文章目录
最近准备前端面试,整理一下学习过的内容,勤能补拙嘛。
@阿乐今天敲代码没
文章目录
- 系列文章目录
- 一、HTML篇
- 1.HTML 语义化的理解
- 2.为什么要使HTML语义化?
- 3.写HTML代码时应注意什么?
- 4.你用过哪些 HTML5 标签
- 5.meta viewport 是什么
- 6.行内元素有哪些?块级元素有哪些? 空(void)元素有哪些?
- 7.a 标签中如何禁用 href 跳转页面或定位链接
- 8.canvas 在标签上设置宽高和在 style 中设置宽高有什么区别
- 9.浏览器的内核
- 10.Cookie和localStorage、以及sessionStorage之间的区别
- 11.Doctype 作用? 严格模式与混杂模式如何区分?它们有何意义?
一、HTML篇
1.HTML 语义化的理解
使用合适的标签来表达正确含义的页面结构,让页面具有良好的结构和含义,可以有效提高:
可访问性:帮助辅助技术更好的阅读和转译你的网页,利于无障碍阅读;
可检索性:有了良好的结构和语义,可以提高搜索引擎的有效爬取,提高网站流量;
国际化:全球只有 13%的人口是英语母语使用者,因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构;
互用性:减少网页间的差异性,帮助其他开发者了解你网页的结构,方便后期开发和维护
2.为什么要使HTML语义化?
为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护:语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
3.写HTML代码时应注意什么?
- 尽可能少的使用无语义的标签div和span;
- 在语义不明显时,既可以使用div或者p时,尽量用p,因为p在默认情况下有上下间距,对兼容特殊终端有利;
- 不要使用纯样式标签,如:b、font、u等,改用css设置。
- 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
- 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
- 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
- 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
4.你用过哪些 HTML5 标签
表示结构的标签
<header> <nav> <main> <article> <section> <aside> <footer>
表示文字形式:data
举例:展示了一些产品名称,而且每个名称都和一个产品编码相关联。
<p>新产品</p><ul> <li><data value="398">迷你番茄酱</data></li> <li><data value="399">巨
无霸番茄酱</data></li> <li><data value="400">超级巨无霸番茄酱</data></li></ul>
新产品
- 迷你番茄酱
- 巨 无霸番茄酱
- 超级巨无霸番茄酱
*表示日期和时间值*:time 举例:机器读取通过 datetime 属性指定。
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
The concert took place on May 15.
*用于高亮的文本*:mark
举例:
<mark>我是mark里面的内容</mark>
我是mark里面的内容
*视频*:video
controls:展示视频自带的控件
autoplay:视频马上自动播放
poster:海报帧的 URL
height、width:视频显示区域的宽和高
loop:视频结尾自动回到视频开始的地方
举例:
<video controls> <source src="myVideo.mp4" type="video/mp4"> <source
src="myVideo.webm" type="video/webm"> <p>Your browser doesn't support HTML5 video. Here is a <a href="myVideo.mp4">link to the video</a> instead.</p></video><!-- Simple
video example --><video src="videofile.ogg" autoplay poster="posterimage.jpg"> 抱歉,您的浏览器不支持内嵌视频,不过不用担心,你可以 <a href="videofile.ogg">下载</a> 并用你喜欢的播放器观看 !</video><!-- Video with subtitles --><video src="foo.ogg"> <track
kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> <track kind="subtitles"
src="foo.sv.vtt" srclang="sv" label="Svenska"></video>
Your browser doesn’t support HTML5 video. Here is a link to the video instead.
抱歉,您的浏览器不支持内嵌视频,不过不用担心,你可以 下载 并用你喜
欢 的 播 放 器 观 看 !
音频:audio
大部分同 vedio
controls:展示音频自带的控件
autoplay:音频马上自动播放
muted:是否静音
loop:音频结尾自动回到开始的地方
举例
<audio controls> <source src="myAudio.mp3" type="audio/mpeg"> <source
src="myAudio.ogg" type="audio/ogg"> <p>Your browser doesn't support HTML5 audio. Here is a <a href="myAudio.mp4">link to the audio</a> instead.</p></audio><!-- Simple audio playback
--><audio src="AudioTest.ogg" autoplay> Your browser does not support the
<code>audio</code> element.</audio><audio controls>
<source src="foo.opus" type="audio/ogg; codecs=opus"/>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="foo.mp3" type="audio/mpeg"/></audio>
Your browser doesn’t support HTML5 audio. Here is
a link to the audio instead.
Your browser does not support the
audio
element.
canvas: 通过 JavaScript 和 HTML 的 元素来绘制图形
<canvas id="canvas" width="300" height="300"></canvas>
//获取HTML <canvas> 元素的引用const canvas =
document.getElementById('canvas');
//获得一个绘图上下文 const ctx = canvas.getContext('2d');
//让长方形变成绿色 ctx.fillStyle = 'green';
//将它的左上角放在(10, 10),把它的大小设置成宽 150 高 100ctx.fillRect(10, 10,150,100);
5.meta viewport 是什么
meta可提供有关页面的元信息,viewport是指视窗、视口,浏览器上用来显示网页的那部分区域。在移动端和pc端视口是不同的,pc端的视口是浏览器窗口区域,而在移动端有三个不同的视口概念:布局视口、视觉视口、理想视口。
布局视口:在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或其他值,一般都比移动端浏览器可视区域大很多,所以就会出现浏览器出现横向滚动条的情况
视觉视口:用户通过屏幕看到的页面区域,通过缩放查看显示内容的区域,在移动端缩放不会改变布局视口的宽度,当缩小的时候,屏幕覆盖的css像素变多,视觉视口变大,当放大的时候,屏幕覆盖的css像素变少,视觉视口变小。
理想视口:一般来讲,这个视口其实不是真是存在的,它对设备来说是一个最理想布局视口尺寸,在用户不进行手动缩放的情况下,可以将页面理想地展示。那么所谓的理想宽度就是浏览器(屏幕)的宽度了。
meta viewport是为了在移动端不让用户缩放页面使用的,即实现移动端适配。
<meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0">
width=device-width 将布局视窗(layout viewport)的宽度设置为设备屏幕分辨率的宽度
initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
maximum-scale=1 指定用户能够放大的最大比例
minimum-scale=1 指定用户能够缩小的最大比例
6.行内元素有哪些?块级元素有哪些? 空(void)元素有哪些?
CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素;span默认display属性值为“inline”,是“行内”元素。
(1)行内元素有:
a、b、span、img、input、strong、select、label、em、button、textarea、
cite、i、q、var
(2)块级元素有:
div、p、h1…h6、ol、ul、dl、table、address、blockquote 、form、pre
(3)常用的内联块状元素有:
img、input
(4)常见的空元素:
br、meta、hr、link、input、img
7.a 标签中如何禁用 href 跳转页面或定位链接
一、js的几种调用方法
1、a href="javascript:js_method();"
这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句
2、 a href="javascript:void(0);" οnclick="js_method()"
这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
3、a href="javascript:;" οnclick="js_method()"
这种方法跟跟2种类似,区别只是执行了一条空的js代码。
4、a href="#" οnclick="js_method()"
这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
5、a href="#" οnclick="js_method();return false;"
这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。
综合上述,在a中调用js函数最适当的方法推荐使用:
<a href="javascript:void(0);" onclick="js_method()"></a>
<a href="javascript:;" onclick="js_method()"></a>
<a href="#" onclick="js_method();return false;"></a>
二、href="#"的作用
a中href="#"表示回到最顶部。#包含了一个位置信息,默认的锚是#top 也就是网页的顶端。如果当前页面中需要滚动的话,那么用这种方式就可以直接回到顶部。
三、href="URL"的作用
1、URL为绝对URL
<a href="https://blog.csdn.net/qq_45840993?spm=1011.2124.3001.5343">超链接</a>
超链接
此时指向另一个站点,比如href=“https://blog.csdn.net/qq_45840993?spm=1011.2124.3001.5343”,那么点击时就会直接跳转到这个链接的页面。
2、URL为相对URL
此时指向站点内的某个文件,比如href="/text.doc",那么点击时就会直接下载文件。
3、锚 URL
此时指向页面中的锚,比如href="#top",那么点击时就会到当前页面中id="top"的这个锚点,实现当前页面的所谓跳转。用的最多就是在可滚动页面中,添加菜单,可以直接回到页面中的某个部分的内容。
8.canvas 在标签上设置宽高和在 style 中设置宽高有什么区别
canvas 标签的 width 和 height 是画布实际宽度和高度,绘制的图形都是在这个上面。
而 style的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度。如果 canvas 的 width 和 height没指定或值不正确,就被设置成默认值 。
直白说,在标签上设置宽高canvas的宽高大小改变时,其实际内容大小不会变化,只有画布大小变化;而在 style 中设置宽高,内容大小会发生变化。
9.浏览器的内核
IE: trident 内核
Firefox:gecko 内核
Safari:webkit 内核
Opera:以前是 presto 内核,Opera 现已改用 GoogleChrome 的 Blink内核
Chrome:Blink(基于 webkit,Google 与 Opera Software 共同开发
10.Cookie和localStorage、以及sessionStorage之间的区别
localStorage: localStorage 的生命周期是永久的,关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据,否则数据永远不会消失。
sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念,sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的。
cookie: cookie生命期为只在设置的cookie过期时间之前一直有效,无论窗口或浏览器是否关闭。 cookie存放数据大小为4K左右, 有个数限制(各浏览器不同),一般不能超过20个;sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
11.Doctype 作用? 严格模式与混杂模式如何区分?它们有何意义?
(1)<!DOCTYPE> 声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。
(2)严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
(3)在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站
点无法工作。
(4)DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。复制代码
你知道多少种 Doctype 文档类型?
该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks
(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
前端必备知识储存——HTML篇一(面试常考)相关推荐
- 小学教师资格证计算机知识,小学教师资格证信息技术面试常考考点
小学教师资格证信息技术面试常考考点 小学教师资格证是有信息技术这一科目的.自2017年下半年开始,小学类别面试增设"心理健康教育""信息技术""小学全 ...
- 前端基础-浏览器缓存/HTTP缓存机制(面试常考)
文章目录 一.HTTP报文 1.HTTP请求(Request)报文 2.HTTP响应(Response)报文 二.缓存过程分析 三.缓存规则 1.强制缓存 1.1Expires 1.2 Cache-C ...
- PHP面试常考内容之面向对象(3)
PHP面试专栏正式起更,每周一.三.五更新,提供最好最优质的PHP面试内容. 继上一篇"PHP面试常考内容之面向对象(2)"发表后,今天更新面向对象的最后一篇(3).需要(1),( ...
- PHP面试常考内容之Memcache和Redis(2)
你好,是我琉忆. 继周一(2019.2-18)发布的"PHP面试常考内容之Memcache和Redis(1)"后,这是第二篇,感谢你的支持和阅读. 本周(2019.2-18至2-2 ...
- C++我记得应该是当初笔试面试常考的
C++我记得应该是当初笔试面试常考的.当然指针也是的 布科思直接问我STL 东莞的无人机公司笔试题里面考了些C++的,我不会 武汉的环宇智行笔试题也是一些C++的似乎是面向对象构造函数那些东西,这种我 ...
- JAVA面试常考系列八
转载自 JAVA面试常考系列八 题目一 JDBC是什么? JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系 ...
- java面试常考_JAVA面试常考系列十
JAVA面试常考系列十 题目一 Servlet是什么? Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,是用Java编写的服务器端程序,主要的 ...
- 64位 int 占几个字节_面试常考,项目易错,长文详解C/C++中的字节对齐
面试常考,项目易错,长文详解C/C++中的字节对齐mp.weixin.qq.com 引入主题,看代码 我们先来看看以下程序 //编译器:https://tool.lu/coderunner/ //来 ...
- @entity 不限字节长度的类型_面试常考,项目易错,长文详解C/C++中的字节对齐...
面试常考,项目易错,长文详解C/C++中的字节对齐mp.weixin.qq.com 引入主题,看代码 我们先来看看以下程序 //编译器:https://tool.lu/coderunner/ //来 ...
最新文章
- MySQL 数据库常用命令—where like union 排序 分组 连接
- 果园机器人的课文_小学三年级下《果园机器人》课文
- POJ 3126 Prime Path BFS搜索
- 打开高效文本编辑之门_调用Linux的sed命令
- pandas中expand的作用
- 异步广度优先搜索算法
- C++中如何读取一个数的位数_求1000以内的水仙花数
- 计算机基础职教云答案,计算机基础课程答案
- 总结阐述Cocos2d-X与Cocos2d-iphone区别
- javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint
- pin码是什么意思?
- 剑指offer——9.用两个栈实现队列
- Python 25 Django跨域请求
- spring的历史与设计哲学
- 枚举很好用啊,为啥阿里不建议返回值用枚举?看看作者孤尽的回答
- 知识图谱实现公安情报分析(人工智能系列)
- python表格控件_python--excel操作插件openpyxl
- css设置字体的位置
- 数据结构课程设计 # 论文查重分析系统 (C/C++版和python版)
- DP转HDMI方案|DP转HDMI自带SPI|AG6311设计电路|AG6311MDQ设计参考原理图