【html+css网站设计】
学习笔记：HTML基础概念
B站听课笔记：
对html和css的基本了解，后续将深入学习。
1.vscode常用设置
1.1 打开文件
1）文件 – 打开
2）直接拖拽
1.2 新建文件
1）右击文件 – 新建
2）文件名称右侧 – +
1.3 自动保存(ctrl+S)
管理 – 设置
1.4 文件重命名
右击文件 – 重命名 (F2)
1.5 删除文件
右击文件 – 删除 (delete)
2.vscode常用快捷键
快捷键：eclipse插件
2.1 自动补全HTML基本结构
输入html:5 或者 ! ，回车即可。
2.2 标签自动补全
tab 或者 回车
2.3 复制当前行|复制多行
ctrl+alt+向下键
2.4 删除当前行|删除多行
ctrl+D
2.5 单行注释|取消单行注释
ctrl + /
2.6 多行注释|取消多行注释
ctrl+shift+/
2.7 统一编辑
按住alt–点击统一编辑的位置
2.8 生成多个
数字
例子：p10 – 回车
2.9 文字
{文字}
2.10 打开浏览器
alt+B
2.11 快捷键可以组合使用
p{哈哈哈哈}*10
2.12 关闭侧边栏
ctrl+B
2.13 其他快捷键
ctrl+C 复制
ctrl+V 粘贴
ctrl+X 剪切
ctrl+A 全选
ctrl+Z 撤销
ctrl+S 保存
window+D 回到桌面
window+E 打开文件资源管理器
window+L 锁屏
2.14 打开浏览器控制台
1）F12 (Fn+F12)
2）右击网页空白位置 – 检查
3）ctrl+shift+i
3.HTML和CSS的区别
HTML：网页中的内容，例如：图片、文字、视频等 。（身体）
CSS：网页的样式，例如：文字颜色、大小、图片的大小、位置等。（衣服）
4.HTML介绍
4.1 简介
HTML：超文本标记语言
作用：写网页结构内容 例如：图片、文字、视频等
文件后缀：.html 或者 .htm
4.2 标签 标记 元素
HTML由标签组成，标签是尖括号包含的关键词，例如：
//<p> <body> <head>
tag：标签；element：元素。
分类：
- 双标记，封闭类型标记。例子：
//<p> 段落 </p>
开始标记 结束标记 双标记之间可以写任意内容
- 单标记，非封闭类型标记，空标记。例子：
//<meta/> (单标记的 / 可以省略)
4.3 HTML版本
最新版本为HTML5
4.4 浏览器
作用：解析HTML代码，查看网页效果
主流浏览器：谷歌、火狐、Opera、苹果、IE
4.5 html属性
作用：用来修饰HTML元素
语法：
属性
=
"
属性值
"
属性="属性值"
属性="属性值" 双标记写在开始标记中，单标记写在“ / ”前面，一个标签可以有多个属性，多个属性之间用空格隔开，不区分前后顺序。
例子：
//双标记<p style="" class="" id=""></p>
//单标记<hr class="" id=""/>
4.6 html语法
- 不区分大小写，推荐小写；
- HTML忽略多余的空格（有多个空格的时候，只会展示一个空格）；
- HTML由浏览器解析执行，由上往下，由左往右的顺序。
5.网页标题
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>
- 一号标题字体最大，六号标题字体最小。
- 标题标签都是在网页垂直显示，内容居左，加粗
建议：推荐使用2-5号标题，如果使用一号标题，一个网页推荐只有一个一号标题
添加标签属性时：
a
l
i
g
n
=
"
"
align=""
align=""设置元素内容的水平对齐方式，默认left居左，取值center居中，取值right居右。