核心思想 —— 语义化
【面试题】如何理解 HTML 语义化 ?
仅通过标签便能判断内容的类型，特别是区分标题、段落、图片和表格
- 增加代码可读性，让人更容易读懂
- 对SEO更加友好，让搜索引擎更容易读懂
html 文件的基本结构
html 文件的文件后缀为 .html，如 index.html
vscode 中输入英文 ! 可快捷输入
<!-- HTML5的文档类型声明【必要】 -->
<!doctype html>
<!-- 整个页面，语言为英文【必要】 -->
<html lang="en">
<!-- 页面的头部【必要】 -->
<head>
<!-- 页面的元信息-- 文档的字符编码为 UTF-8 -->
<meta charset="UTF-8" />
<!-- 页面的元信息-- 设备上显示页面的区域 viewport 的配置 -- width 为 device-width ，即采用设备宽度；intial-scale 为 1 ，即按原比例显示（无缩放）-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 页面的标题【必要】 -->
<title>Document</title>
</head>
<!-- 页面的身体【必要】 -->
<body></body>
</html>
html 标签的分类
根据标签的默认的 display 样式值分为两类
【面试题】HTML有哪些内联元素和块状元素 ?
内联元素
宽度由内容决定
display :inline不能设置宽高
img，span , a , b 等
display :inline-block可以设置宽高
input， button 等
块状元素
宽度由容器决定（宽度会撑满整个容器），可以设置宽高
display: block
div，h1-h6，p，ul, ol ，form , hr 等
display: table
table
display: list-item
li
HTML5 新增的标签
【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)
结构性标签
<header>: 定义文档或节的头部。
<nav>: 定义导航链接。
<section>: 定义文档中的独立节。
<article>: 定义文档、页面、应用或网站中独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<footer>: 定义文档或节的页脚。
<main>: 定义文档的主体内容。
多媒体标签
<video>: 定义视频或电影。
<audio>: 定义音频内容。
<source>: 为<video>和<audio>元素定义媒体资源。
<track>: 为<video>和<audio>元素定义文本轨道。
<embed>: 定义嵌入的内容，比如插件。
<canvas>: 用于在网页上绘制图形。
表单标签
<datalist>: 定义选项列表，与<input>元素配合使用，以提供“自动完成”功能。
<output>: 定义不同类型的输出，比如脚本的输出。
其他标签
<time>: 定义日期或时间。
<mark>: 定义高亮显示的文本。
<progress>: 定义任何类型的任务的进度。
<meter>: 定义已知范围或分数值内的标量测量。
<details>: 定义用户可见的或者隐藏的额外的细节。
<summary>: 定义<details>元素的可见标题。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>: 定义<figure>元素的标题（caption）。
HTML 常用标签实战要点
link 外链资源
限 head 标签内使用，可定义文档与外部资源之间的关系，如外链 css 样式，外链页面标题前的小图标等。
<!-- 外链--样式 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 外链--页面标题前的小图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
a 超链接
-
超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
https://blog.csdn.net/weixin_41192489/article/details/140217094 -
给段落添加超链接
用 p 包裹 a，而不是 a 包裹 p<p><a href="">段落</a></p>
普通文本专用标签
br 段落内换行
仅适用于 p 标签内部的换行，段落间的换行或调整元素间的间距请使用样式 padding、margin 等样式。
<p>广东省<br/>广州市<br/>黄埔大道西601号</p>
span 行内文本
用于包裹行内的部分文本来添加特殊的样式。
<p><span style="color: red">要点：</span> 不能长时间睡觉。</p>
sup 上标
<p>m<sup>2</sup></p>
sub 下标
<p>m<sub>2</sub></p>
pre 预定义文本
块状元素 display: block
可保留所有空白字符(空格、换行符)，原封不动的输出结果，常用于展示计算机的源代码。
<pre>
你好：
我昨天给你打了个电话。
</pre>
code 代码
内联元素 display: inline
用于表示计算机源代码或者其他机器可以阅读的文本内容，为保留代码的缩进格式，通常和 pre 标签一起使用。
code 标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。
<pre>
<code>
let a = 1;
</code>
</pre>
列表相关标签
ul 无序列表
- type 属性可修改序号类型
- disc 实心原点【默认】
- square 实心方点
- circle 空心圆
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
ol 有序列表
- type 属性 —— 序号类型，如1( 阿拉伯数字【默认】) 、a、A、i、I
- start 属性 —— 计数起点
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ol type="a">
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>呵呵</li>
</ol>
<ol type="1" start="4">
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ol>
列表嵌套
li 是一个容器级标签，里面什么都能放，包括 ul。
<ul>
<li>
<b>北京市</b>
<ul>
<li>海淀区</li>
<li>朝阳区</li>
<li>东城区</li>
</ul>
</li>
<li>
<b>广州市</b>
<ul>
<li>天河区</li>
<li>越秀区</li>
</ul>
</li>
</ul>
table 表格
https://blog.csdn.net/weixin_41192489/article/details/140217983
i 图标
i 标签原用于表示斜体文字，默认有字体倾斜的效果，但现在斜体统一通过css实现。 因 i 为图标 icon 的首字母，现习惯用 i 标签来展示图标，所以需添加样式 font-style:normal 取消默认的倾斜。
<i style="font-style:normal">☎</i>
img 图片
display :inline 内联元素
支持的图片格式：jpg(jpeg)、gif、png、bmp，其他格式不支持，如psd、ai
<img src="./ecLogo.jpg" alt="EC编程俱乐部的logo" />
-
src【必要】：图片的地址
-
alt【重要】：当图片无法显示时，代替图片显示的内容，搜索引擎会抓取此属性。alt 源自单词 alternate “替代”，代表替换资源。（有的浏览器不支持）
-
要想图片保持宽高比，通常只设置 width 和 height 中的一个
-
响应式图片
https://blog.csdn.net/weixin_41192489/article/details/126038175 -
图片懒加载（手写）
https://blog.csdn.net/weixin_41192489/article/details/126263221
audio 音频
display :inline 内联元素
<audio controls>
<source src="./test.mp3" type="audio/mp3" />
您的浏览器不支持 audio 标签。
</audio>
- src【必要】：音频的地址
- controls 展示音乐播放器
- autoplay 自动播放
- loop 循环播放
- preload 预加载（设置 autoplay 时，此属性将失效）
下方为使用 vue3 实现的简易音乐播放器，相关属性和方法详见注释
<script setup>
let bgMusic_ref = ref(null)
function printInfo() {
let musicInfo = {
//currentTime 当前播放进度（单位秒s）
currentTime: bgMusic_ref.value.currentTime,
//duration 音频总时长（单位秒s）
duration: bgMusic_ref.value.duration
}
console.log(musicInfo)
}
function play() {
// 播放音频
bgMusic_ref.value.play()
}
function pause() {
// 暂停播放音频
bgMusic_ref.value.pause()
}
// 重新播放音频（从头开始播放）
function rePlay() {
// 先将当前播放进度重置为 0
bgMusic_ref.value.currentTime = 0
// 再播放音频
bgMusic_ref.value.play()
}
</script>
<template>
<audio ref="bgMusic_ref" controls autoplay>
<source src="./test.mp3" type="audio/mp3" />
您的浏览器不支持 audio 标签。
</audio>
<button @click="play">播放</button>
<button @click="pause">暂停</button>
<button @click="rePlay">重新播放</button>
<button @click="printInfo">打印音频信息</button>
</template>
- 【实用技巧】下载音乐到本地电脑
https://blog.csdn.net/weixin_41192489/article/details/122680809
video 视频
display :inline 内联元素
仅支持MP4、WebM、Ogg三种格式，不支持其他格式，如flv、mkv等
<video controls>
<source src="./test.mp4" type="video/mp4" />
</video>
-
src【必要】：视频的地址
-
controls 展示视频播放器
-
autoplay 自动播放
-
loop 循环播放
-
preload 预加载（设置 autoplay 时，此属性将失效）
-
【实用技巧】下载视频到本地电脑-CSDN博客
https://blog.csdn.net/weixin_41192489/article/details/140223996
iframe 内嵌框架
display :inline 内联元素
在页面内嵌入网页
<iframe src="https://www.w3school.com.cn/index.html"></iframe>
- src【必要】：其他网页的地址
表单相关标签
button 按钮
display :inline-block 内联元素
<button onclick="alert('你好!')">点击我！</button>
HTML 渲染特殊字符
| 字符 | 描述 | 代码 |
|---|---|---|
| 空格 | non-breaking spacing | |
| < | 小于号less than | < |
| > | 大于号greater than | > |
| © | 版权 | © |
| & | 和号 | & |
更多特殊字符，参考《html特殊字符的html，js，css写法汇总》
https://www.cnblogs.com/starof/p/4718550.html
HTML 常用标签实战范例
页面布局
-
vue3【实战】语义化首页布局-CSDN博客
https://blog.csdn.net/weixin_41192489/article/details/140215515 -
CSS 【实战】 “四合院”布局-CSDN博客
https://blog.csdn.net/weixin_41192489/article/details/139243680