type
status
date
slug
summary
tags
category
icon
password
1 HTML基本语法
1.1 基本页面模板
快捷创建方式
vscode:!+enter
webstorm:!+tab
2 开发文档
W3Cscholl：https://www.w3cschool.cn/htmltags/
3 排版标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
h1 ~ h6 | 一级标题~六级标题 | 无 | 双标签 |
p | 段落 | 无 | 双标签 |
hr | 分隔线 | 无 | 单标签 |
br | 换行 | 无 | 单标签 |
pre | 原格式显示 | 无 | 双标签 |
div | 无语义，用于页面布局 | 无 | 双标签 |
4 文本标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
em | 强调，默认表现斜体字 | 无 | 双标签 |
strong | 强调，默认表现粗体字 | 无 | 双标签 |
ins | 表示增加的内容，默认添加下划线 | 无 | 双标签 |
del | 表示删除的内容，默认添加删除线 | 无 | 双标签 |
sub | 下标字 | 无 | 双标签 |
sup | 上标字 | 无 | 双标签 |
span | 无语义，配合CSS给文字设置样式 | 无 | 双标签 |
5 图片
5.1 img 标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
img | 引入图片 | src：设置图片地址。
alt：设置图片替代文字。
width：设置宽度。
height：设置高度 | 单标签 |
总结：
5.2 常见的图片格式
5.3 base64 图片
base64编码工具： https://tool.chinaz.com/tools/imgtobase/
6 相对路径和绝对路径
当前文件： html代码所在的文件
目标文件： 被引用的文件
6.1 绝对路径
网络绝对路径： 目标文字在万维网上的绝对地址，如
https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png，前端开发主要使用网络绝对路径。本地绝对路径： 目标文字在计算上的绝对地址, 如
D:\Library\SH230320\Day02_HTML\课堂案例\02-图片标签\铭哥工作照.jpg，后端开发主要使用本地绝对路径。6.2 相对路径
6.3 HTML 中使用路径的场景
7 超链接和锚点
7.1 a 标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
a | 超链接 | href：设置目标文件地址。
target：设置目标文件在哪个窗口打开 | 双标签 |
总结：
6.2 超链接
① 目标文件是网页
② 目标文件是网页以外的其他类型文件
③ 超链接唤起指定应用
④ href 的值是空的点击刷新
6.3 锚点
① 如何设置锚点
② 如何跳转到锚点（通过超链接跳转到锚点）
- 作者:昕昕丶未来不是梦
- 链接:https://pisce.buzz/article/web01_html_01
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。