前言开始积累前端知识吧为了秋招为了提升自我1、Doctype是干什么的声明位于文档中的最前面的位置处于标签之前主要作用是告诉浏览器按照何种规范解析网页。如果不预先告诉浏览器浏览器就不知道我们的文档标准是什么在这种情况下大部分浏览器将开启最大兼容模式来解析网页我们称之为怪异模式。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namekeywords contentHTML, 学习, 教程 meta namedescription content这是一个关于HTML学习的网页 meta http-equivContent-Type contenttext/html; charsetUTF-8 meta http-equivrefresh content5 titleDocument/title /head body /body /html浏览器有两种渲染模式标准模式Standards和怪异模式也称为兼容模式或混杂模式Quirks。浏览器将使用怪异模式来渲染页面这可能导致一些不一致的、过时的渲染行为。例如盒模型在W3C标准中如果设置一个元素的宽度和高度指的是元素内容的宽度和高度然而在Quirks模式下IE的宽度和高度还包含了padding和border设置行内元素的高宽在Quriks模式下会生效而在Standards模式下给行内元素设置width和height都不会生效用margin0 auto设置水平居中在Quriks模式下失效但是在Standards模式下设置margin0 auto可以使元素水平居中设置百分比高度:在Standards模式下父级必须有明确高度px/vh/ 百分比子级height: 100%才有效诡异模式Quirks不要求父级有明确高度子级height: 100%直接生效会撑满父级可视高度2、meta标签viewport的理解元素可提供有关页面的元信息并且仅存在与head标签内name属性的取值viewport表示供移动设备使用content定义了viewport的属性.keywords(关键字) 告诉搜索引擎该网页的关键字description(网站内容描述) 用于告诉搜索引擎你网站的主要内容。http-equiv属性相当于HTTP的头部协议它可以回应一些浏览器的请求例如设置网页的缓存时间、页面刷新、字符编码等。width表示移动设设备下显示的宽度为设备宽度(device-width)height表示移动设设备下显示的宽度为设备宽度.user-scalable表示用户缩放能力, 默认yes或1表示允许,no或0表示不允许。initial-scale表示设备与视口的缩放比率 maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须比minimum大.3、请说出XHTML和HTML的区别1、文档顶部doctype声明不同xhtml的doctype顶部声明中明确规定了xhtml DTD的写法2、html语法更加严格html元素必须正确嵌套不能乱属性必须是小写的属性值必须加引号标签必须有结束单标签也应该用 “/” 来结束掉4、Label 的作用是什么是怎么用的label 标签来定义表单控制间的关系当用户选择该标签时浏览器会自动将焦点转到和标签相关的表单控件上。for 属性规定 label 与哪个表单元素绑定(通过id)。label forsex性别/label input typeradio namesex idsex /5、img的 title 和 alt 有什么区别?alt 规定图像的替代文本title 鼠标放在上面时显示的文字alt 是必要属性title 非必要。补充img的必要属性src,alt6、title 和 h1 的区别、b与strong的区别、i与em的区别h1 标签写在网页的 body 中title 标签写在网页的 head 中h1 为大标题一般用作文章的标题作用如同一张报纸的大标题使用读者在没看内容之前就大概了解本文的旨意它是直接给用户看的。title 为页面标题一般面对的是搜索引擎和浏览器标签。strong标明重点内容是起到加重语气的效果含义b是无意义的视觉表示em表示强调文本i是斜体是无意义的视觉表示视觉样式标签b i u s语义样式标签strong em ins del7、link和import的区别(1)link属于HTML/XHTML 标签写在head里建立当前文档与外部资源的关系不止样式。而import属于CSS 语法At-rule必须写在style标签内或 CSS 文件的最顶部。在 CSS 内部导入另一份 CSS。(2)link属于XHTML标签除了加载CSS外还能用于定义预加载定义图标, 定义rel连接属性等作用而import是CSS提供的只能用于加载CSS;(3)一般情况下开发时把css样式文件的引用放在页面顶部link会按照顺序加载而import引用的CSS会等到页面被加载完再加载;4兼容性link标签在所有浏览器中都被支持而import标签在 IE5 以下的版本中不被支持。5link引入的样式权重 ≥import引入的样式同一选择器下link样式会覆盖importlink relstylesheet hrefstyle.css link relicon hreffavicon.ico link relpreload hreffont.woff2 asfont拓展ES6 和 CommonJ引入资源共同是js的语法, 是在js中去引用文件require / module.exports→ CommonJSNode 老写法import / export→ ES6 模块现代前端标准CommonJS 导出 // 单个导出 exports.age 18 exports.getName () 张三 // 整体导出 module.exports { age: 18, getName: () 张三 } CommonJS 导入 // 全部引入 const fs require(fs) const utils require(./utils) // 解构引入 const { getName, age } require(./utils) ES6 导出 // 分别导出 export const age 18 export function getName() { return 张三 } // 统一导出 const age 18 function getName() { return 张三 } export { age, getName } // 默认导出一个模块只能一个 export default getName ES6 导入 // 全部引入 import fs from fs // 把所有导出的内容全部装进 obj 这个对象里 import * as obj from ./a.js // 解构引入 import { getName, age } from ./utils // 重命名 import { getName as getUserName } from ./utils差异1.在 ES6 中使用export default、export关键字来导出模块中的变量、函数、类等一个模块可以有多个export语句而在 CommonJS 中使用module.exports来导出模块只能使用一次module.exports导出整个模块。2.ES6的import的是对象的引用export和export default的表现不一致适合于浏览器端和 Node.js 中使用。CommonJS的require也要区分是值拷贝更适合于 Node.js 文件模块中使用。3.加载方式不同。ES6是静态加载编译时就处理了模块依赖关系CommonJS是动态加载运行时才处理模块依赖关系4.ES6异步加载比较快。CommonJS是同步加载比较慢。8、src与href有什么区别src用于替换当前元素href用于在当前文档和引用资源之间确立联系src是source的缩写指向外部资源的位置在请求src资源时会将其指向的资源下载并应用到文档内。当浏览器解析到该元素时会暂停其他资源的下载和处理直到将该资源加载、编译、执行完毕。href是Hypertext Reference的缩写指向网络资源所在位置建立和当前元素锚点或当前文档链接之间的链接。会并行下载资源并且不会停止对当前文档的处理。9、什么是跑马灯一段文字或内容自动从左往右 / 从上往下不停滚动的效果像老式走马灯一样循环动。marquee非标准已废弃。CSSanimationtransform最常用JavaScript 控制scrollLeft/scrollTopVue / 小程序 / React 自带组件Vuevue-marquee小程序swiper、scroll-viewUniapp直接用scroll-view或轮播组件10、请描述下 SEO 中的 TDK在 SEO 中所谓的 TDK 其实就是 title、description、keywords 这三个标签title 标题标签description 描述标签keywords 关键词标签。11、前端需要注意哪些 SEO 1、 合理的 title、description、keywords搜索对着三项的权重逐个减小title 值强调重点即可重要关键词出现不要超过2次而且要靠前不同页面 title 要有所不同description 把页面内容高度概括长度合适不可过分堆砌关键词不同页面 description 有所不同keywords 列举出重要关键词即可。2、 语义化的 HTML 代码符合 W3C 规范语义化代码让搜索引擎容易理解网页。3、 重要内容 HTML 代码放在最前搜索引擎抓取 HTML 顺序是从上到下有的搜索引擎对抓取长度有限制保证重要内容肯定被抓取。4、 重要内容不要用 js 输出爬虫不会执行 js 获取内容5、 少用 iframe搜索引擎不会抓取 iframe 中的内容6、 非装饰性图片必须加 alt7、 提高网站速度网站速度是搜索引擎排序的一个重要指标12、知道的网页制作会用到的图片格式有哪些png-8png-24jpggifsvg。WebP格式谷歌google开发的13、行内元素有哪些块级元素有哪些 空(void)元素有那些块级元素会独占一行通常用于表示页面的结构如段落、标题、列表、表格等。常见的块级元素有7种divh1~h6pul、ol、litable、thead、tbody、tfoot、tr、th、tdform、fieldset、legendheader、footer、nav、article、section、aside行内元素不会独占一行通常用于表示页面的内容如文本、链接、图片、按钮等。常见的行内元素有9种aspanimginputbuttonlabelselect、optiontextareastrong、em、b、i、u空元素单标签元素metal hr br link14、什么是可替换元素什么是非可替换元素它们各自有什么特点可替换元素是指这样一种元素它在页面中的大部分展现效果不由 CSS 决定。比如 img 元素select 元素video、audio、大部分表单元素都属于可替换元素。非可替换元素就是指的普通元素它具体在页面上呈现什么完全由 CSS 来决定。15、什么是iframe内联框架iframe是什么参考iframe/frameset/frame的区别 - Cloud% - 博客园 (cnblogs.com)iframe是内联框架是一种允许外部网页嵌入到HTML文档中的HTML元素。作用1当页面中有大部分内容相同时比如页面的头部和底部我们就可以使用标签将重复的部分嵌入页面中这样可以减少代码的重复率减轻代码量。但是页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用同时不利于交互2可以使用iframe内嵌网页跨域ajax通讯的实现微前端广告嵌入等。3重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度.缺点iframe会阻塞主页面的Onload事件;无法被一些搜索引擎索引到;会产生很多页面不容易管理。html head/head body iframe srcxxx.html里面的内容只有在浏览器不支持iframe标记时才会显示出来/iframe /body /htmliframe属性的取值javascript - iframe,我们来谈一谈 - 前端的bigboom - SegmentFault 思否1.frameborder:是否显示边框1(yes),0(no)2.height:框架作为一个普通元素的高度建议在使用css设置。3.width:框架作为一个普通元素的宽度建议使用css设置。4.name:框架的名称window.frames[name]时专用的属性。5.scrolling:框架的是否滚动。yes,no,auto。6.src内框架的地址可以使页面地址也可以是图片的地址防 iframe 嵌套防点击劫持if (window.top ! window.self) { window.top.location.href window.location.href; }iframe获取父子页面元素父页面可以获取子iframe的内容那么子iframe同样也能操作父页面内容。在子页面中window.parent 获取上一级的window对象如果还是iframe则是该iframe的window对象window.top 获取最顶级容器的window对象即就是你打开页面的文档。window.self 返回自身window的引用。在父页面中iframe src /index.html idiframe1 nameifr1 scrollingyes pYour browser does not support iframes./p /iframe window.frames[ifr1] var iframe document.getElementById(iframe1); var iwindow iframe.contentWindow; //获取iframe的window对象 var idoc iwindow.document; //获取iframe的documentiframe父子通讯发送消息: 使用postMessage(message, targetOrigin)方法当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性data,origin,source.datapostMessage传递进来的值origin发送消息的文档所在的域source发送消息文档的window对象的代理如果是来自同一个域则该对象就是window可以使用其所有方法如果是不同的域则window只能调用postMessage()方法返回信息接受消息: 监听message事件父页面A.comiframe srchttp://tuhao.com namesendMessage idmyIframe onloadsendMsg() /iframe script function sendMsg() { // 拿到 iframe 的 window const ifrWin window.frames[sendMessage]; // 向子页面发消息 ifrWin.postMessage( give u a message, // 数据 http://tuhao.com // 目标域名必须精准 ); } // 监听子页面回传的消息 window.addEventListener(message, (e) { // 校验来源 if (e.origin ! http://tuhao.com) return; e.source.postMessage(received, e.origin); //向原网页返回信息 console.log(收到子页面回复, e.data); }); /script子页面tuhao.comscript window.addEventListener(message, (e) { // 只信任父页面来源 if (e.origin ! http://A.com) return; console.log(收到父消息, e.data); // 收到后给父页面回复 e.source.postMessage(received, e.origin); }); /scriptframeset的用法框架模板,目前没有使用案例cols 定义框架集中的对应每列的尺寸取值px、% 和 *rows 定义框架集中的对应每行和尺寸取值px、% 和 *html head/head frameset rows100,3*,*,* //生成四行框架第一行框架集的100px。剩下的空间3/5分配给第二个框架剩下两行各分1/5. noframes body Your browser does not handle frames! iframe srcxxx.html/iframe //必须嵌套在body里面 /body /noframes frame src frame src /frameset /html不能与 frameset/frameset 标签一起使用 body/body 标签。当需要为不支持框架的浏览器添加一个 noframes 标签时则必须在noframes中嵌套body标签那样noframes标签中的内容才会被显示出来。16、字符代码空格 nbsp , 大于号lt 小于号gt17、合并单元格合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。跨行合并rowspan合并单元格的个数跨列合并colspan合并单元格的个数trtd/td td colspan2/td/tr trtd rowspan2/tdtd/tdtd/td/tr trtd/tdtd/td/tr18、超链接和锚点的区别超链接和锚点只是标签的两种呈现方式。锚点用于页面定位超链接用于页面间的跳转超链接在href中加入网址锚链接首先要再某个标签设置id选择器其次在设置a元素中的href属性为该id选择器a hrefhttp://www.baidu.com百度/a a href#chapter1章节1/a h2 idchapter1 章节1 /h219、请说说H5的新特性新增了语义化标签 1) header: 2) footer 3)nav 4) aside定义了页面侧边栏 5) dialog定义了对话框,如提示框新增了表单类型 type date(选择日期) email(邮箱) number(数字) tel(电话号码字段)新增了表单属性 placeholder required(必填项) min和max(元素最小最大值)新增了多媒体标签绘画 canvas用于媒介回放的 video 和 audio 元素h5新增事件 onscroll onerror(错误发生时触发)本地离线存储 localStorage 长期存储数据浏览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后自动删除新的技术webworker, websocket, GeolocationlocalStorage sessionStorage localStorage.setItem(myCat, Tom); let cat localStorage.getItem(myCat); localStorage.removeItem(myCat); // 移除所有 localStorage.clear();离线缓存方式在Web开发中实现离线缓存主要通过使用Service Worker和Cache API。这使得网页在离线状态时能够加载先前缓存的资源提高用户体验。service worker翻译成中文叫做 服务工作线程它是一个注册在指定源和路径下的事件驱动worker。以下是使用Service Worker和Cache API实现离线缓存的一般步骤1、注册Service Worker:在项目根目录下创建一个JavaScript文件例如sw.jsif (serviceWorker in navigator) { navigator.serviceWorker.register(./sw.js); }2、在sw.js中编写Service Worker脚本。然后在主文档中注册Service Worker。生命周期有 5 步注册、安装成功安装失败、激活、运行、销毁。事件install、activate、message、fetch、push、async。缓存资源:在Service Worker的install事件中使用caches.open方法打开一个命名的缓存存储然后使用cache.addAll方法添加要缓存的文件。拦截并返回缓存的资源:在Service Worker的fetch事件中使用caches.match方法检查缓存中是否有请求的资源。如果有就返回缓存的资源否则使用fetch方法从网络获取资源。var VERSION v1; // 缓存 self.addEventListener(install, function(event) { event.waitUntil( caches.open(VERSION).then(function(cache) { return cache.addAll([ ./start.html, ./static/jquery.min.js, ./static/mm1.jpg ]); }) ); }); // 缓存更新 self.addEventListener(activate, function(event) { event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { // 如果当前版本和缓存版本不一致 if (cacheName ! VERSION) { return caches.delete(cacheName); } }) ); }) ); }); // 捕获请求并返回缓存数据 self.addEventListener(fetch, function(event) { event.respondWith(caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(response) { caches.open(VERSION).then(function(cache) { cache.put(event.request, response); }); return response.clone(); }).catch(function() { return caches.match(./static/mm1.jpg); })); });2、更新缓存:当需要更新缓存时可以在Service Worker的install事件中执行self.skipWaiting()来跳过等待阶段使新的Service Worker立即激活。20、简述一下你对 HTML 语义化的理解1、 用正确的标签做正确的事情。2、 html 语义化让页面的内容结构化结构更清晰便于对浏览器、搜索引擎解析;3、 即使在没有样式 CSS 情况下也以一种文档格式显示并且是容易阅读的;4、 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重利于 SEO ;5、 使阅读源代码的人对网站更容易将网站分块便于阅读维护理解。21、标签属性注意点1.ul将 ul 标签与 li 标签一起使用创建无序列表。规定列表的项目符号的类型。HTML5 不支持。HTML 4.01 已废弃。2、olol 标签定义了一个有序列表. 列表排序以数字来显示。列表嵌套:li里面可以嵌套ul或ol3、表格标签thead前面行, tbody中间行, 和 tfoot倒数行 元素默认不会影响表格的布局。不过您可以使用 CSS 来为这些元素定义样式从而改变表格的外观。4、表单标签form 元素包含一个或多个如下的表单元素input定义输入字段。textarea定义文本域。select定义下拉列表包含 optgroup optionbutton定义按钮fieldset:区域包含lengend5、音频标签audio source video