1.语义化的理解。

在写HTML页面结构时所用的标签有意义 头部用head 主体用main 底部用foot...

怎么判断页面是否语义化了？

把CSS去掉，如果能够清晰的看出来页面结构，显示内容较为正常

为什么要选择语义化？

1. 让HTML结构更加清晰明了
2. 方便团队协作，利于开发
3. 有利于爬虫和SEO
4. 能够让浏览器更好的去解析代码
5. 给用户带来良好的体验

2.H5有哪些新特性？

1. 语义化的标签
2. 新增音频视频
3. 画布canvas
4. 数据存储localstorage sessionstorage
5. 增加了表单控件 email url search...
6. 拖拽释放API

3. 页面导入样式时，使用link和@import有什么区别？

1. 加载方式和顺序

   link：加载顺序由 HTML 中 标签的顺序决定 页面被加载时，link 会同时被加载

   import : 必须写在样式表的最前面 加载顺序受到 CSS 文件中 @import 规则的顺序决定 引用的 CSS 会等到页面被加载完再加载

2. 权重

   link 方式的样式的权重高于 @import 权重。

3. 从属关系

   link 属于 HTML 标签，而 @import 是 CSS 提供的。

4. 兼容性

   link 没有兼容性问题，@import 不兼容 ie5 以下。

4.什么是 DOCTYPE？

声明（即文档类型声明）位于 HTML 文档的最顶部，用于告诉浏览器当前文档所遵循的 HTML 或 XML 版本。这是 HTML 文档的必需部分，它告诉浏览器应该如何解析和渲染网页。它有助于确保网页的正确显示，并避免浏览器进入“怪异模式”

• 标准模式：浏览器遵循 HTML 和 CSS 的标准规范进行页面渲染，确保网页按预期显示。
• 怪异模式：浏览器以历史遗留方式渲染网页，表现上可能会与标准模式有所不同，通常会存在样式和布局上的差异

5.meta标签

标签是一种非常重要的HTML元素，它用于向浏览器提供有关文档的元数据信息

常见的Meta属性:
1、指定文档字符集
<meta charset="UTF-8">
2、设置视口宽度与缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1">
3、定义页面描述
<meta name="description" content="这里是页面的描述，应该简洁明了地概括页面内容。">
4、定义页面关键词
<meta name="keywords" content="关键字1,关键字2,关键字3">
5、定义作者和其他元数据
<meta name="author" content="John Doe">
<meta name="generator" content="MyCMS 1.0">

5. 行内 块级元素 空(void)元素

1. 行内元素

   通常是文本内容的一部分，它们不会影响布局，只占据内容所在的行宽度。例如：

   <span>、<a>、<img>、<b>、<strong>、<em>

2. 块级元素

   占据一行，形成独立的块，可以设置宽高，影响布局。例如：

   <div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form> 等

3. 空(void)元素

   也称为无内容元素，它们不包含任何内容，但可以有属性。它们通常用于定义结构，不会影响布局。例子有：

   <hr>（水平线）、<br>（换行）、<img>（图片，当src为空时）、<input type="hidden"> 等

6. 怎么解决2个行内块元素中间的空白

导致原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

1. 方案一：手动取消空格和换行（不推荐 ）

   1、部分编译器可能会代码整理的时候会强制换行 2、代码比较臃肿，美观度不行，一点不优雅

2. 方块二：父元素设置font-size:0px（推荐）

7. title与h1的区别、b与strong的区别、i与em的区别？

title与h1的区别：

定义：
	title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
	h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
	title他是显示在网页标题上、h1是显示在网页内容上
	title比h1更加的重要 (title > h1 ) ==》对于seo的了解
场景：
	网站的logo都是用h1标签包裹的

b与strong的区别：

定义：
	b：标签用于为文本设置粗体样式，但它只是简单地表示文本应该呈现为粗体，并不带有语义强调的意义。
	strong：标签用于表示文本的强调语义，默认会呈现为粗体，同时也向屏幕阅读器和搜索引擎表明这段文字的重要性。
区别：
	b标签只有加粗的样式，没有实际含义。
	strong表示标签内字符比较重要，用以强调的。
	
题外话：为了符合css3的规范，b尽量少用，改用strong就行了。

i与em的区别：

定义：
	i:标签用于表示文本的斜体样式，但它只是简单地表示文本应该呈现为斜体，并不带有语义强调的意义。
	em：标签用于表示文本的强调语义，通常会呈现为斜体，同时也向屏幕阅读器和搜索引擎表明这段文字的强调重要性。
区别：
	i只是一个倾斜标签，没有实际含义。
	em表示标签内字符重要，用以强调的。
场景：
	i更多的用在字体图标，em术语上（医药，生物）。

8. img标签的title和alt有什么区别？

区别一：表现形式不同

• title：鼠标移入到图片展示文字值
• alt：图片无法显示时展示文字值

区别二：SEO层面 ( alt > title )

在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

9. png、jpg、gif 这些图片格式解释一下，分别什么时候用？

• png：png格式支持无损压缩 适合保存高质量细节和透明背景的图像
• jpg：jpg格式支持有损压缩 适合保存照片和真实场景图像
• gif：gif格式支持无损压缩和动画功能，能够保存多帧图像并以动画形式显示 适合保存简单的动画和图标
• webp：Google 开发的图像格式，支持有损压缩和无损压缩，通常比 PNG 和 JPG 文件大小更小，同时保持较高的图像质量。它还支持动画和透明度

10. iframe的优点和缺点？

优点：

1. 嵌入外部内容：iframe允许你在一个网页中嵌入来自不同源或服务器的内容，这有助于创建丰富多彩的页面。
2. 独立性： 内嵌的内容在 iframe 中运行，与主页面相互隔离，这意味着它不会受到主页面的影响，保持了独立性。
3. 简便性： 使用iframe非常简单，只需提供要嵌入的资源的 URL 或相对路径即可。

缺点：

1. 性能问题： 如果滥用iframe，在同一个页面中加载多个iframe可能会导致性能问题，因为每个 iframe 都需要单独加载资源。
2. 可访问性问题： 内嵌内容可能导致可访问性问题，因为屏幕阅读器等辅助技术可能无法正确解释和浏览iframe 内的内容。
3. 安全性风险： 如果未谨慎处理来自不受信任源的内容，可能会存在安全风险，例如点击劫持（clickjacking）攻击。

防止自己的网站被别人 iframe 嵌套

if (top != self) {
    top.location = self.location;
}
//这段代码会检测页面是否被嵌套，如果是，则将页面重定向到自身。

11.解决了哪些移动端的兼容问题？

1. 当设置样式overflow:scroll/auto时，IOS上的滑动会卡顿

   -webkit-overflow-scrolling:touch;

2. 在安卓环境下placeholder文字设置行高时会偏上

   nput有placeholder属性的时候不要设置行高

3. 移动端字体小于12px时异常显示

   应该先把在整体放大一倍，然后再用transform进行缩小

4. ios下input按钮设置了disabled属性为true显示异常

   input[typy=button]{
   opcity:1
   }

5. 安卓手机下取消语音输入按钮

   input::-webkit-input-speech-button{
   display:none
   }

6. ​ 6.IOS下取消input输入框在输入引文首字母默认大写

    <input autocapitalize='off' autocorrect='off'/>

7. 禁用IOS和安卓用户选中文字

   -webkit-user-select:none

8. 禁止IOS弹出各种窗口

   -webkit-touch-callout:none

9. 禁止IOS识别长串数字为电话

   添加meta属性 <meta conten='telephone=no' name='format-detection'>