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"> |
注释和特殊字符
注释
-
不在页面中显示
特殊字符
-
一些特殊字符不方便直接使用，用字符表示
| 特殊字符 |
字符代码 |
特殊字符 |
字符代码 |
| 大于> |
> |
小于< |
< |
| 空字符 |
  |
和号& |
& |
| 人民币￥ |
¥ |
摄氏度℃ |
° |
| 版权© |
© |
注册商标® |
® |
| 乘号× |
× |
除号÷ |
÷ |
| 平方² |
² |
立方³ |
³ |
| 正负号± |
± |
|
|