1 文本标题标签
标签名称: h1~h6 双标签
默认样式
- 文字会越来越小
- 文字的加粗效果越来越弱
- 文本默认独占一行 下一个标签会在下一行显示
标签作用
- h1用来存放网站中最为重要的部分 logo 唯一性
- h2到h6标签 可以用来存放文本内容没有什么固定用法
快捷操作
1.在vscode编辑器中书写标签的时候 只需要写标签名回车即可
2.快速选中操作文本内容
- 选中标签中共有的部分(<h)
- ctrl+d 有几个标签就按几次
- 利用键盘上的上下左右移动光标选中位置进行修改内容
3..快捷写法
- $ 表示序号 默认是从1开始的
- * 表示乘以
- {} 填写内容
- 例:h$*6{文本}
4.自创标签可以识别,效果等同无标签
2 字体倾斜&加粗标签
1.加粗标签的使用
- 标签名称 b、strong
- 两者之间是有区别的,strong效果会明显一些,但是肉眼不可见 浏览器区分不明显
- 两个标签都是表示加粗的 可以任意使用 官方建议使用strong 表示强调
2.倾斜标签的使用
- 标签名称 i、em
- 同上,em效果会明显一些,两个标签都是表示倾斜的 可以任意使用 官方建议使用em 表示强调
3 段落标记
标签名称: p
默认样式
- 段落标签默认独占一行 会换行显示
- 段落标签上下是有间距的
- 段落标签的宽度会随着浏览器的宽度进行变换
注:VSCode的一些设置
1.设置编辑器的自动换行 设置-左侧默认设置中 wordwrap
2.设置编辑器中字体大小 fontsize
3.自动保存当前文件 autosave
4.编辑器中写很多空格和换行符号默认只会解析一次
一些配置好的设置
{
"editor.fontSize": 18,
"editor.wordWrap": "on",
"git.enableSmartCommit": false,
"git.enabled": false,
"explorer.confirmDragAndDrop": false,
"window.zoomLevel": 0,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000
}
4 下划线 u
5 换行&水平线
强制性换行 br
水平线/横线 hr
6 上标&下标
上标 <sup></sup> 注册商标
下标 <sub></sub> 水的化学方程式
7 常用转义字符
- 不换行空格    或者  ;
- > >右尖括号
- < <左尖括号
- © 备案中图标版权 ©
- ® 注册商标
8 列表
列表标签的使用: 无序列表、有序列表、自定义列表
1.无序列表
标签名称:
- 父级标签 ul 表示列表盒子
- 子级标签 li 表示列表
默认样式
- 有黑色的实心圆是父级ul的 继承给子级li的
- 默认独占一行 并且会换行显示
- 缩进效果
作用: 新闻列表
快捷写法:ul>li*5{文本内容}
2.有序列表
标签名称
- 父级标签 ol
- 子级标签 li
默认样式
- 有序号是父级ol的 继承给子级li的
- 默认独占一行 并且会换行显示
- 缩进效果
作用:轮播图
拓展:常见的属性(只有有序列表才有)
- type 类型 可以设置列表前面的符号是怎样的 1/a/A/i/I
- start 表示从第几个开始的 属性值必须是数字
- 快捷写法:ol>li*5{文本内容}
3.自定义列表
标签名称
- 父级标签 dl
- 子级标签
- dt
- dd
快捷写法:dl>dt+dd