HTML
Hyper Text（超文本） Markup（标记） Language（语言）
常用浏览器及内核？
- Google Chrome & Microsoft Edge：使用
Blink内核。Blink 是 Webkit 的分支。 - Apple Safari：使用
Webkit内核。 - Opera：使用
Blink内核。与 Chrome 和 Edge 一样。 - Mozilla Firefox：使用
Gecko内核。 - Internet Explorer (已退役)：使用 Trident（也称为 MSHTML）内核，但 Microsoft 已在 2022 年停用了对 Internet Explorer 的支持。
DOCTYPE 有什么作用？
- 作用：告诉浏览器使用哪个版本的 HTML 规范来渲染文档。
DOCTYPE不存在或形式不正确会导致 HTML 文档以混杂模式呈现。 - 标准模式与混杂模式如何区分？
- 标准模式（Standards mode）以浏览器支持的最高标准运行；
- 混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。
html、xhtml、html5 的区别？
html：语法非常松散，容错性强。xhtml：更为严格，要求标签必须小写，必须闭合，标签中的属性必须使用引号引起来等。html5：是 html 的下一个版本，除了非常松散容错性强之外，还增加了许多新特性。
HTML5 有哪些新特性？
- 拖拽释放(
Drag and drop) API。 - 语义化更好的内容标签（
header,nav,footer,aside,article,section）。 - 音频、视频 API(
audio,video)。 - 画布(
Canvas) API。 - 地理(
Geolocation) API。 - 表单控件，
calendar、date、time、email、url、search。 - 新的技术
webworker,websocket,Geolocation。 - 本地离线存储
localStorage长期存储数据，浏览器关闭后数据不丢失。 sessionStorage的数据在浏览器关闭后自动删除。
对 HTML 语义化的理解？
- 去掉或丢失样式的时候能够让页面呈现出清晰的结构。
- 有利于 SEO 和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
- 方便其它设备解析。
- 便于团队开发和维护，语义化根据可读性。
常见的 meta 标签及作用？
1. 指定网页文档的字符编码，确保网页中的字符能够正确显示。
<meta charset="UTF-8" />
2. 提供网页内容的简短描述，常被搜索引擎用于摘要展示。
<meta name="description" content=" " />
3. 列出与网页内容相关的关键词，帮助搜索引擎理解网页主题。
<meta name="keyword" content=" " />
4. 告诉 IE 使用最新的渲染引擎来呈现网页。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5. 用于控制网页在移动设备上的布局和缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6. 禁止安卓手机识别邮箱。
<meta content="email=no" name="format-detection" />
7.禁止 ios 识别长数字为电话
<meta name="format-detection" content="telephone=no" />
link 和 @import 的区别？
link是 HTML 标签，@import是 CSS 提供的。link没有兼容问题，@import有兼容性问题。- 浏览器会先加载
link标签，然后再加载@import引入的 CSS 文件。
title 与 h1 的区别？
- 定义：
title是网站的标题
h1是文章的主题 - 作用:
title概括网站的信息，可以直接告诉搜索引擎和用户这个网站是什么主题和内容，是直接显示在浏览器 tab 栏里的。
h1是文章主题内容，用来显示网站内容中最主要的内容。 - 区别:
title显示在网页 tab 栏上，h1显示在网页内容上。- SEO 中
title高于h1。
b 与 strong 的区别？
- 定义：
b(bold)是实体标签，用来给文字加粗。
strong是逻辑标签，作用是加强字符语气。 - 区别：
b标签只有加粗的样式，没有实际含义。
strong表示标签内的内容比较重要，用于强调。
i 与 em 的区别?
- 定义:
i(italic)是实体标签，用来给文字倾斜。
em(emphasize)是逻辑标签，作用是强调字符语气。 - 区别:
i标签只有倾斜的样式，没有实际含义。
em表示标签内的内容比较重要，用于强调。
img 标签 的 title 和 alt 的区别?
title是鼠标悬停在图片上时显示的提示文字，alt是图片无法加载时的替换文字。- seo 中，搜索引擎会根据
alt中的文字来判断图片的内容。
input 标签
type常用的取值：- text - 单行文本输入框。
- password - 密码输入框，输入内容通常会被遮盖显示为星号或圆点。
- email - 用于输入电子邮件地址的文本框，会进行基本的格式验证。
- tel - 用于输入电话号码的文本框，某些浏览器可能会对其进行格式化处理。
- number - 用于输入数值，可以设置最小值、最大值和步长。
- range - 提供一个滑块来选择一定范围内的数值。
- date - 日期选择器。
- button - 普通按钮，可通过 JavaScript 定义点击事件。
- file - 文件上传输入框。
- hidden - 隐藏输入字段，用于存储非用户可见的数据。
- search - 用于搜索的文本框，可能包含清除按钮。
- url - 用于输入网址的文本框，会进行基本的 URL 格式验证。
- color - 颜色选择器。
<input type="" />
select 标签
常见属性：
multiple：值为布尔，表示是否支持多选，默认为 false。
size：值为数字，表示下拉列表中可见的行数，默认为 1。
disabled：值为布尔，表示是否禁用该选项，默认为 false。常见标签：
option：表示下拉列表中的一个选项。
optgroup：表示一组选项。<select name="pets" multiple size="4"> <optgroup label="4-legged pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster" disabled>Hamster</option> </optgroup> <optgroup label="Flying pets"> <option value="parrot">Parrot</option> <option value="macaw">Macaw</option> <option value="albatross">Albatross</option> </optgroup> </select>
label 标签的作用？
- 用于绑定一个表单元素，当点击 label 标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上。
行内元素
img span a input button select ...
块元素
div p h1~h6 header ...
空元素
br hr link meta...
渐进增强和优雅降级的区别？
- 渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
对 data-* 的理解？
- data-*是 H5 新增的属性，用于储存私有页面后应用的私有数据，可以用在所有 HTML 元素上。
注意点：- 属性名不要包含大小写，在
data-后必须至少有一个字符。 - 该属性可以是任何字符串。
- JS 访问：通过
getAttribute()配合他们完整的属性名称读取、通过 dataset 对象获取或修改。 - CSS 访问：使用
attr()函数来显示data-*的内容、通过属性选择器来设置样式。
- 属性名不要包含大小写，在
如何用 div 模拟 textarea？
<div contenteditable="true" style="width: 300px; height: 100px;"></div>
