HTML基本结构标签
<!DOCTYPE html> 告诉浏览器按照html5版本来加载页面
<html lang="en"> 告诉浏览器html代码中的代码是英文的
<head>
<meta charset="UTF-8"> 编码方式 告诉浏览器按照什么方式解码。utf-8万国码
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 下面两个是移动端
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题名称</title>
</head>
<body>
</body>
</html>
vscode快捷键
| 快捷键 | 作用 |
|---|
| ctrl + N | 新建文件 |
| alt + B | 默认浏览器打开 |
| ! + Tab | 生成骨架标签 |
| shift + alt + F | 格式化文档 |
| Ctrl+Shift+K | 删除某一行 |
| shift + alt +up/down | 复制当前行 |
| alt+up/down | 移动行 |
| ctrl + home | 快速返回到顶部 |
| ctrl + end | 快速回到底部 |
| ctrl + / | 单行注释 |
| alt + shift + A | 多行注释 |
HTML常用标签
基本布局标签
标题标签- h1 - h6
<h1> - <h6> 字体逐渐变小
段落和换行标签
p是段落标签。段落与段落之间有空隙
br是换行标签，单标签
文本格式化标签- 文字样式
| 语义 | 标签 | 样式 |
|---|
| 加粗 | <strong></strong>或<b></b> | 加粗文字 |
| 倾斜 | <em></em>或<b></b> | 倾斜样式 |
| 删除线 | <del></del>或<s></s> | 删除样式 |
| 下划线 | <ins></ins>或<u></u> | 下划线样式 |
div和span标签- div是大盒子，span是小盒子
- 一个div就是一个大盒子，独占一行
图像标签
<img src = "xxxURL"/>
属性
| 属性 | 属性值 | 说明 |
|---|
| src | 图片绝对/相对路径 | 必须属性 |
| alt | 文本 | 替换文本 |
| title | 文本 | 提示文本 |
| width | 像素值/百分比 | 图像宽度 |
| height | 像素值/百分比 | 图像高度 |
| border | 像素值 | 边框粗细 |
注意：width和height一般指定一个就行，会等比例缩放。若两个都有设置，改变图片比例
绝对路径和相对路径
绝对路径- 目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
“D:\web\img\logo.gif”
或完整的网络地址
“http://www.baidu.cn/images/logo.gif”
相对路径- 以引用文件所在位置为参考基础，而建立出的目录路径。
图片相对于 HTML 页面的位置
| 相对路径 | 符号 | 举例 |
|---|
| 同一级 | 无 | img src="baidu.gif" |
| 下一级 | / | img src="images/baidu.gif" |
| 上一级 | ../ | img src="../baidu.gif" |
超链接标签
属性
<a href="跳转目标" target="目标窗口的打开方式">文本或图像</a>
| 属性 | 作用 |
|---|
| href | 指定链接目标的url地址 |
| target | 打开方式
_self当前页面打开（默认） _blank在新窗口打开 |
链接分类
| 连接类型 | 说明 | 举例 |
|---|
| 外部链接 | 网络地址 | < a href="http:// www.baidu.com"> |
| 内部链接 | 网站内部页面之间 | < a href="index.html"> |
| 空链接 | 没有确定链接目标 | < a href="#"> |
| 下载链接 | href 里面地址是一个文件或者压缩包，会下载该文件。 | < a href="xxx.zip"> |
| 网页元素链接 | 在网页中的各种元素，如文本、图像、
表格、音频、视频等都可以添加超链接 | < a href="https://www.baidu.com/..xx.."> |
| 锚点链接 | 点击链接,可以快速定位到页面中的某个位置 | < a href="#two">
< h4 id = "two"> |
注释和特殊字符
注释- 不在页面中显示
特殊字符- 一些特殊字符不方便直接使用，用字符表示
| 特殊字符 | 字符代码 | 特殊字符 | 字符代码 |
|---|
| 大于> | > | 小于< | < |
| 空字符 |   | 和号& | & |
| 人民币￥ | ¥ | 摄氏度℃ | ° |
| 版权© | © | 注册商标® | ® |
| 乘号× | × | 除号÷ | ÷ |
| 平方² | ² | 立方³ | ³ |
| 正负号± | ± | | |