前端三件套 - HTML一天搞定篇（参考黑马程序员前端）

<!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用于存储数据等。