前端必备知识储存——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代码时应注意什么?

  1. 尽可能少的使用无语义的标签div和span;
  2. 在语义不明显时,既可以使用div或者p时,尽量用p,因为p在默认情况下有上下间距,对兼容特殊终端有利;
  3. 不要使用纯样式标签,如:b、font、u等,改用css设置。
  4. 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
  5. 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
  6. 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
  7. 每个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 15time>.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 videoa> instead.p>video><video src="videofile.ogg" autoplay poster="posterimage.jpg"> 抱歉,您的浏览器不支持内嵌视频,不过不用担心,你可以 <a href="videofile.ogg">下载a> 并用你喜欢的播放器观看 !video><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 audioa> instead.p>audio><audio src="AudioTest.ogg" autoplay> Your browser does not support the
<code>audiocode> 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) 声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。
(2)严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
(3)在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站
点无法工作。
(4)DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。复制代码
你知道多少种 Doctype 文档类型?
该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks
(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

你可能感兴趣的:(笔记,面试,html,大前端)