HTML：初体验、排版标签、多媒体标签、其他嵌入方式、列表、表格、表单、字符实体以及补充一些面试题
目录
一、初体验
1. 骨架
2. 分析
3. 注释
二、排版标签
1. 标题
2. 段落
3. 换行
4. 分割线
5. 文本格式化
三、多媒体标签
1. 图片
2. 超链接
3. 音频
4. 视频
5. 路径
1. 相对路径
2. 绝对路径
四、其他嵌入技术
1. 嵌入其他网页
2. 嵌入外部资源（PDF）
五、列表
1. 无序列表
2. 有序列表
3. 自定义列表
六、表格 - table
七、表单 - from
1. input模块
2. select - 下拉菜单
3. textarea - 文本域
5. label - 包裹
八、字符实体
补充：HTML篇面试问题
1. HTML基础与理解
2. HTML元素与属性
3. iframe的使用与影响
4. DOCTYPE的作用与模式
5. HTTP与HTTPS
6. HTML5新特性
一、初体验
1. 骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>2. 分析
- html：整个网页
- head：网页头部，用来存放给浏览器看的信息，例如 CSS
- meta（元数据）：charset="utf-8" - 字符编码；
description、keywords - SEO(搜索引擎优化)；
- title：网页标题
-link：引入网页图标
- body：网页主体，用来存放给用户看的信息，例如图片、文字
3. 注释
快捷键：Ctrl+/
HTML注释：<!-- 注释内容 -->
CSS注释：/* 注释内容 */
JavaScript注释：// 注释内容
二、排版标签
1. 标题
语法：h1~h6（块元素）
特点：
- 文字加粗
- 字号逐渐减小
- 独占一行（换行）
（一般需清除加粗样式 font-wight:400）
2. 段落
语法：p（块元素）
特点：
- 独占一行
- 段落之间存在间隙
3. 换行
语法：br
4. 分割线
语法：hr
5. 文本格式化
语法：加粗 - strong / b
倾斜 - em / i
下划线 - ins / u
删除线 - del / s
三、多媒体标签
1. 图片
语法：img（行内块）
属性：
- src：图片URL，必须属性
- alt：替换文本
- title：提示文本
- width：图片宽度
- height：图片高度
<img src="url" alt="替换文本" title="提示文本">2. 超链接
语法：a（行内）
属性：
- href：跳转地址，必须属性
- target="_blank"：新窗口打开
注意：清除默认下划线并设置文字颜色 text-decoration: none; color: #333;
<a href="#" target="_blank">a标签</a>3. 音频
语法：audio
属性：
- src：音频URL
- controls：音频控制面板
- loop：循环播放
- autoplay：自动播放
<audio src="#" controls loop autoplay>音频标签</audio>4. 视频
语法：video
属性：
- src：音频URL
- controls：音频控制面板
- loop：循环播放
- autoplay：自动播放
<video src="#" controls loop autoplay>视频标签</video>5. 路径
5.1 相对路径
从当前文件位置出发查找目标文件
写法：
- / 表示进入某个文件夹里面 → 文件夹名/
- . 表示当前文件所在文件夹 → ./
- ..表示当前文件的上一级文件夹 → ../
5.2 绝对路径
Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发
写法：
- C:\\Program Files
- https://www.baidu.com/
注意：反斜杠"\"表示转义字符，所以绝对路径需要用"\\"表示。
四、其他嵌入技术
1. 嵌入其他网页
语法：iframe
属性：src（指定要嵌入的页面的 URL）、width 和 height（指定 <iframe> 的尺寸）、frameborder（指定是否显示边框）等
作用：用于在当前 HTML 页面中嵌入另一个 HTML 页面或任何网页内容。它创建一个嵌套的浏览上下文，使得用户可以在不离开当前页面的情况下浏览另一个页面的内容。
<iframe
src="https://example.org"
title="iframe Example 1"
width="400"
height="300">
</iframe>注意：可能会带来安全风险，因为它允许嵌入不受信任的外部内容。此外，它可能会增加页面的加载时间，因为需要加载额外的页面内容。另外，<iframe> 中的内容可能与当前页面的样式和交互发生冲突，导致用户体验不佳。
2. 嵌入外部资源（PDF）
语法：object / embed
属性：
<object data="mypdf.pdf" type="application/pdf" width="800" height="1200">
<p>
You don't have a PDF plugin, but you can
<a href="mypdf.pdf">download the PDF file. </a>
</p>
</object>五、列表
注意：清除点或序号 ul, ol { list-style: none; }
1. 无序列表
语法：ul > li（ul 嵌套 li，ul 是无序列表，li 是列表条目）
注意：- ul 标签里面只能包裹 li 标签；- li 标签里面可以包裹任何内容。
<ul>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
</ul>2. 有序列表
语法：ol > li（ol 嵌套 li，ol 是有序列表，li 是列表条目）
注意：- ol 标签里面只能包裹 li 标签；- li 标签里面可以包裹任何内容。
<ol>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
</ol>3. 自定义列表
语法：dl > dt 、 dd
（dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情）
注意： - dl 里面只能包含dt 和 dd；- dt 和 dd 里面可以包含任何内容。
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>六、表格 - table
语法：table > tr > td 、th（table 嵌套 tr，tr 嵌套 td / th）
属性：
- caption：标题
- table：表格
- tr：行
- th：表头单元格
- td：内容单元格
合并操作：
- 明确合并的目标
- 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量），
跨行合并，保留最上单元格，添加属性 rowspan
跨列合并，保留最左单元格，添加属性 colspan - 删除其他单元格
注意：清除表格间隙 border-collapse:collapse
<table border='1'>
<caption>表格标题</caption>
<!-- 第一行 -->
<tr>
<th>表头</th>
<td rowspan="2">单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<!-- 第二行 -->
<tr>
<th>表头</th>
<!-- <td>单元格1</td> -->
<td colspan="2">单元格2</td>
<!-- <td>单元格3</td> -->
</tr>
</table>
七、表单 - from
1. input模块
text：文本框
password：密码框
radio：单选框（默认选中：checked；分组、单选：name=“”）
checkbox：复选框
file：上传文件（multiple：多文件上传）
placeholder：占位文本
<input type="..." placeholder="提示信息">
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
<input type="checkbox" checked> 敲前端代码
<input type="file" multiple>注意：清除默认样式 border: none; outline: none; color: #333;
2. select - 下拉菜单
语法：select > option
（select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项）
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>注意：默认显示第一项，selected 属性实现默认选中功能。
3. textarea - 文本域
语法：textarea
<textarea>默认提示文字</textarea>4. button - 按钮
submit：提交按钮
reset：重置按钮
button：普通按钮
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<!-- 如果省略 type 属性，功能是 提交 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>5. label - 包裹
作用：
- 网页中，某个标签的说明文本
- 增大点击范围
- label 标签只包裹内容，不包裹表单控件；设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
<input type="radio" id="man">
<label for="man">男</label>- 使用 label 标签包裹文字和表单控件，不需要属性（常用）
<label><input type="radio"> 女</label>八、字符实体
空格：
小于号：<
大于号：>
引号：quot;
补充：HTML篇面试问题
1. HTML基础与理解
请简述一下你对HTML语义化的理解？
回答：HTML语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。语义化的好处包括：提高可访问性、改善用户体验、提高SEO效果以及便于团队开发和维护。
2. HTML元素与属性
行内元素和块级元素有哪些？它们有什么区别？
回答：行内元素包括a、b、span、img等，它们不设置宽高、不独占一行。块级元素包括div、ul、ol、li、h1-h6、p等，可以设置宽高、独占一行。
3. iframe的使用与影响
iframe有哪些优点和缺点？
回答：优点包括展现嵌入的网页、加载速度较慢的内容（如广告）以及跨子域通信。缺点有阻塞主页面onload事件、不利于搜索引擎识别、增加HTTP请求等。
4. DOCTYPE的作用与模式
DOCTYPE的作用是什么？严格模式和混杂模式的区别是什么？
回答：DOCTYPE告诉浏览器以什么标准解析页面，如HTML5。严格模式（标准模式）是以W3C标准解析代码，而混杂模式（怪异模式）则是浏览器用自己的方式解析代码，通常模拟老式浏览器的行为。HTML5没有DTD，因此没有严格和混杂之分。
5. HTTP与HTTPS
HTTP和HTTPS有什么区别？HTTPS是如何实现加密的？
回答：HTTP是超文本传输协议，是互联网上应用最为广泛的一种网络协议；HTTPS则是安全版本的HTTP，通过在HTTP下加入SSL层，对数据加密来保护数据的传输安全。HTTPS的加密实现通常使用SSL/TLS协议。
6. HTML5新特性
你能列举一些HTML5的新特性吗？
回答：HTML5引入了许多新特性和元素，如语义化标签（如<header>、<footer>、<article>等）、<canvas>用于绘图、<video>和<audio>用于播放音视频、localStorage和sessionStorage用于存储数据等。
