网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
meta 标签中的 viewport 属性 ， initial-scale 设置为 1 。
rem 按照设计稿标准走，外加利用 transfrome 的 scale(0.5) 缩小一倍即可。
全局处理：
meta 标签中的 viewport 属性 ， initial-scale 设置为 0.5 。
rem 按照设计稿标准走即可。
6、meta 相关
<!DOCTYPE html> <!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8ʹ> <!--声明文档使用的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使用指定浏 览器使用特定的文档模式-->
<meta name=”description” content=”不超过150个字符”/> <!--页面描述-->
<meta name=”keywords” content=””/> <!-- 页面关键词-->
<meta name=”author” content=”name, email@gmail.com”/> <!--网页作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-sc
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏--> <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”renderer” content=”webkit”> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使用兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”> <!--针对手持设备优化，主要是针对一些老的 不识别viewport的浏览器-->
<meta name=”MobileOptimized” content=”320″> <!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
💫三、标签相关
1、说说 title 和 alt 属性
- 两个属性都是当鼠标滑动到元素上的时候显示。
alt是img的特有属性，是图片内容的等价描述，图片无法正常显示时候的替代文字。title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签，是对dom元素的一种类似注释说明。
2、 iframe 有那些缺点？
iframe会阻塞主页面的Onload事件- 搜索引擎的检索程序无法解读这种页面， 不利于
SEO iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载- 使用
iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态 - 给
iframe添加src属性值，这样可以绕开以上两个问题
3、Html5 有哪些新特性、移除了哪些元素
（1）新增元素
- 绘画
canvas - 用于媒介回放的
video和audio元素 - 本地离线存储
localStorage长期存储数据，浏览器关闭后数据不丢失 sessionStorage的数据在浏览器关闭后会自动删除- 语义化更好的内容元素，比如
article、footer、header、nav、section - 表单控件 ，
calendar、date、time、email、url、search - 新的技术
webworker、websocket、Geolocation
（2）移除的元素
- 纯表现的元素：
basefont、big、center、font、s、strike、tt、u - 对可用性产生负面影响的元素：
frame、frameset、noframes
（3）支持 HTML5 新标签
IE8/IE7/IE6支持通过document.createElement方法产生的标签。- 可以利用这一特性让这些浏览器支持
HTML5新标签。 - 浏览器支持新标签后，还需要添加标签默认的样式。
4、Label 的作用是什么？是怎么用的？
label 标签用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
5、div+css的布局较table布局有什么优点
- 改版的时候更方便，只需要修改
css文件。 - 页面加载速度更快、结构化清晰、页面显示简洁。
- 表现与结构相分离。
- 易于优化
seo，搜索引擎更友好，排名更容易靠前。
6、简述一下src与href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。- 同时，
src指的是，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也就是为什么将js脚本放在底部而不是头部。 href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href="common.css" rel="stylesheet">，那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
7、知道网页制作会用到的图片格式有哪些吗
png-8，png-24，jpeg，gif，svg。- 但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（考察是否有关注新技术，新鲜事物）
- 科普一下
Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook、Ebay等知名网站已经开始测试并使用WebP格式。 - 在质量相同的情况下，
WebP格式图像的体积要比JPEG格式图像小40%。
8、如何在 HTML5页面中嵌入音频与视频？
HTML5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：
<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>
9、HTML全局属性(global attribute)有哪些
class：为元素设置类标识data-*：为元素增加自定义属性draggable：设置元素是否可拖拽id：元素id，文档内唯一lang：元素内容的的语言style：行内css样式title：元素相关的建议信息
✨四、结束语
html 相关的内容在面试中考察的部分不多，但该记忆的内容还是得稍微记一下，以防在面试中突然被面试官问倒。
关于 html 相关的题目整理到这里就结束啦！希望对大家有帮助！
如文章有误或有想补充的新内容，欢迎加我微信指出呀，👉 vx: MondayLaboratory~
周一在整个春秋招备试的过程中，深知从0到1准备是非常不容易的。也想要把我所学的所有内容进行整理，让这个面试专栏更加尽善尽美，造福更多在准备面试的小伙伴~💬
往后专栏内容如有新补充也将放在下面的更新地址，大家可以戳下方链接直达~
🐣彩蛋 One More Thing
（：资料获取
👉 微信关注公众号 星期一研究室 ，回复关键字 html面试pdf 即可获取相关资料~
👉 回复 面试大全pdf 可获取全系列资料！
（：更新地址
（：番外篇
如何自学黑客&网络安全
黑客零基础入门学习路线&规划
初级黑客
1、网络安全理论知识（2天）
①了解行业相关背景，前景，确定发展方向。
②学习网络安全相关法律法规。
③网络安全运营的概念。
④等保简介、等保规定、流程和规范。（非常重要）
2、渗透测试基础（一周）
①渗透测试的流程、分类、标准
②信息收集技术：主动/被动信息搜集、Nmap工具、Google Hacking
③漏洞扫描、漏洞利用、原理，利用方法、工具（MSF）、绕过IDS和反病毒侦察
④主机攻防演练：MS17-010、MS08-067、MS10-046、MS12-20等
3、操作系统基础（一周）
①Windows系统常见功能和命令
②Kali Linux系统常见功能和命令
③操作系统安全（系统入侵排查/系统加固基础）
4、计算机网络基础（一周）
①计算机网络基础、协议和架构
②网络通信原理、OSI模型、数据转发流程
③常见协议解析（HTTP、TCP/IP、ARP等）
④网络攻击技术与网络安全防御技术
⑤Web漏洞原理与防御：主动/被动攻击、DDOS攻击、CVE漏洞复现
5、数据库基础操作（2天）
①数据库基础
②SQL语言基础
③数据库安全加固
6、Web渗透（1周）
①HTML、CSS和JavaScript简介
②OWASP Top10
③Web漏洞扫描工具
④Web渗透工具：Nmap、BurpSuite、SQLMap、其他（菜刀、漏扫等）
恭喜你，如果学到这里，你基本可以从事一份网络安全相关的工作，比如渗透测试、Web 渗透、安全服务、安全分析等岗位；如果等保模块学的好，还可以从事等保工程师。薪资区间6k-15k
到此为止，大概1个月的时间。你已经成为了一名“脚本小子”。那么你还想往下探索吗？
如果你想要入坑黑客&网络安全，笔者给大家准备了一份：282G全网最全的网络安全资料包评论区留言即可领取！
7、脚本编程（初级/中级/高级）
在网络安全领域。是否具备编程能力是“脚本小子”和真正黑客的本质区别。在实际的渗透测试过程中，面对复杂多变的网络环境，当常用工具不能满足实际需求的时候，往往需要对现有工具进行扩展，或者编写符合我们要求的工具、自动化脚本，这个时候就需要具备一定的编程能力。在分秒必争的CTF竞赛中，想要高效地使用自制的脚本工具来实现各种目的，更是需要拥有编程能力.
如果你零基础入门，笔者建议选择脚本语言Python/PHP/Go/Java中的一种，对常用库进行编程学习；搭建开发环境和选择IDE,PHP环境推荐Wamp和XAMPP， IDE强烈推荐Sublime；·Python编程学习，学习内容包含：语法、正则、文件、 网络、多线程等常用库，推荐《Python核心编程》，不要看完；·用Python编写漏洞的exp,然后写一个简单的网络爬虫；·PHP基本语法学习并书写一个简单的博客系统；熟悉MVC架构，并试着学习一个PHP框架或者Python框架 (可选)；·了解Bootstrap的布局或者CSS。
8、超级黑客
这部分内容对零基础的同学来说还比较遥远，就不展开细说了，附上学习路线。
网络安全工程师企业级学习路线
如图片过大被平台压缩导致看不清的话，评论区点赞和评论区留言获取吧。我都会回复的
视频配套资料&国内外网安书籍、文档&工具
当然除了有配套的视频，同时也为大家整理了各种文档和书籍资料&工具，并且已经帮大家分好类了。
一些笔者自己买的、其他平台白嫖不到的视频教程。
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
2095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
