B站千锋教育
了解 VSCode 编辑器
-
Shift + Alt + ↓:快速复制该行内容到下一行
-
Alt + ↑或↓:将该行内容快速移动一行
-
Tab键:向后缩进
-
Tab + Shift:向前缩进
-
多光标:Alt + 鼠标左键
-
将光标快速移动到行首/行尾:Home/End,在笔记本上这两个键和方向键为同一个键,需要使用Fn+Home/End
-
一些快速输入的方法记录:
li{ 列表项$}*4
HTML基本结构和属性
Web前端三大核心技术
HTML:结构
CSS:样式
JavaScript:做与用户的交互行为
HTML:超文本标记语言
- 超文本:文本内容 + 非文本内容
- 标记:<***>
标记也叫“标签”,写法分为两种:
a) 单标签:< img>
b) 双标签:< head>< /head> - 语言:编程语言
- 创建标签的快捷键:单词+Tab(先写一个单词,之后按下Tab键),编辑器就会自动识别完成标签的创建
- 标签可以上下排列,也可以组合嵌套
- HTML5标签含义之元素周期表
- 标签的属性:来修饰标签的,设置当前标签的一些功能
初始代码
每个.html文件都有的代码叫做初始代码。
创建初始代码的方法:! + Tab(一要注意是英文状态下的!,二要注意保证文件名后缀是.html)
<!DOCTYPE html> //文档声明:告诉浏览器这是一个html文档
<html lang="en"> // html文件的最外层标签。包裹着所有html标签代码。
<head>
<meta charset="UTF-8"> // charset属性规定html文档的字符编码,防止乱码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> //设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
HTML注释
- 写法
<!-- 这里是注释的内容 -->
- 快速创建和删除注释的两种方法:
• Ctrl + /
• Shift + Alt + a
标题与段落
- 标题
• h标签,做的是网页内容中的标题
• 是双标签,分为六个等级,< h1>< /h1> … < h6></ h6>
• 在一个网页中h1标题最重要,并且一个.html文件中只能出现一次h1标签
• h5、h6标签在网页中不经常使用 - 段落
• p标签,也是双标签,< p>< /p>
• 每一个段落就是一个p标签,不要把所有段落都写在一个p标签里
文本修饰标签
- 强调:< strong>< /strong>、< em>< /em>
• strong标签会对文本进行加粗,strong的强调性更强
• em标签会对文本进行斜体,强调性稍弱 - < sub>< /sub>、< sup>< /sup>:下标文本、上标文本
- < del>< /del>、< ins>< /ins>:删除文本、插入文本,一般情况下,删除和插入配合使用
图片标签与图片属性
< img>,是一个单标签,向网页中嵌入一幅图像,具有以下属性:
- src:必需的属性,是引入图片的地址
- alt:必需的属性,当图片出现问题的时候,可以显示一段友好的文字代替图片,可以优化用户体验;图片没问题时不会显示该文字
- title:可选属性,title其实是所有html标签都具有的一个属性,它表示一个提示信息,当我们把鼠标放到标签上时,该提示信息就会显示出来