2020 June 08 HTML与CSS

VSCode开发工具、w3.org官方文档的使用

VSCode开发工具

常见开发工具

记事本
Webstorm、Sublime Text、VSCode、Atom、HBuilder、IntelliJ IDEA、Dreamweaver
常用开发工具：
1. Webstorm
  1. 优点：集成开发工具，不用额外安装插件
  2. 缺点：重（占用资源），收费
2. VSCode
  1. 优点；轻，免费
  2. 缺点：需要安装一些插件来辅助开发

VSCode的配置

常用插件：(插件：原有软件功能的一个补充、扩展)
1. 汉化插件：Chinese (Simplified) Language Pack for Visual Studio Code
2. 右击选择浏览器打开html文件： open in browser
3. 常用主题：Atom One Dark Theme
4. 文件图标的样式： vscode-icons
5. Js语法规则和代码风格的检查工具： ESLint
6. 每次保存，都会自动格式化js、css 和html 代码(自动帮你调整代码编写规范)： JS-CSS-HTML Formatter
7. 自动重命名配对的HTML/XML标签(当想修改一个标签类型时，修改开始自动匹配结尾标签，同时修改): Auto Rename Tag
8. 追踪至样式: CSS Peek
9. 本地服务启动(右击选择，以本地服务器的方式运行静态页html)：live Server
10. art Template 模板编辑支持:Art Template Helper
11. vscode-fileheader ：添加注释到文件头，并支持自动更新文件修改时间。
12. 常用插件
  1. https://zhuanlan.zhihu.com/p/73577624
  2. https://www.cnblogs.com/jiaoshou/p/13408968.html
常用设置：（左下角的设置按钮图标）
1. 设置开发工具的颜色主题：左下角的设置按钮图标->颜色主题,通常使用Monokai Dimmed样式
2. Auto Save：自动保存，左下角的设置按钮图标->设置->Auto Save 选择 afterDelay，隔一段时间自动保存
3. Font Size：设置代码字体大小，设置同上
4. Word Wrap：代码自动换行
5. Render Whitespace：空格渲染的方式
6. Tab Size 代码缩进

常用快捷键：

 option/alt + B : 打开浏览器显示
 option/alt + shift +B：打开其他浏览器测试
 多文件件分屏编辑：option/alt + 鼠标点击相应文件
 单文件分屏显编辑：分屏图标
 cmmand+点击css属性：html文件中，按住cmmand+点击css的class，就可以直接跳转到相应的css文件，对应属性设置
 ctrl + + 和 ctrl + -： 放大缩小视图
 向上复制一行：alt+shift+↑
 向下复制一行：alt+shift+↓
 将当前行向下向上移动一行： option/alt + ↑/↓

注意: 当光标点击到某一行时，默认选中全行，可以直接复制剪切

用VSCode新建一个项目

在电脑中新建一个空的文件夹:WebTestDemo
打开vscode，点击文件菜单下的“打开文件夹” (快捷键：ctrl+o/cmmand+o)
打开WebTestDemo文件即可，然后在该文件下新建html文件
在html文件中输入：html:5 或者!回车

w3.org官方文档的使用

查阅教程（这里以查看CSS属性为例）

打开官网https://www.w3.org
点击标准（STANDARDS）
点击Web Design and Applications(网页设计和应用)
1. 这里面包含了web的各种技术知识：HTML & CSS、JavaScript Web APIs、Graphics等等
点击HTML & CSS
右边有个USE IT（使用它）
1. 点击Tutorials(教程)
进入之后TUTORIALS AND COURSES（教程和课程）
1. 在HTML and CSS选项下，打开折叠
2. 里面有各种HTML、CSS的教程、资料，
查看css属性
1. 点击Learning Cascading Style Sheets(学习CSS)
  1. 点击CSS HOME
  2. STANDARDS & DRAFTS下面的列表中显示的就是CSS发布的所有版本教程
2. 点击CSS Fonts Level 3（CSS3 的字体相关属性）
  1. 在当前页面的Table of contents目录下，可以查看Fonts所有相关的属性教程
  2. 比如选择Font size: the font-size property就可以查看font-size属性的使用
查看html标签
1. 点击HTML5 Reference Material（HTML5参考材料）
2. 滚动到最下面，找到See also
3. 点击List of HTML Elements，就可以查看所有的html元素了

CSS官方文档阅读CSS属性

CSS官方文档中对每一个CSS属性都有详细的描述

Name: 属性名称
Value： 可以设置哪些值
Initial：初始值(默认值)
Applies to: 应用于哪些元素
    all elements： 所有元素
    block containers：block元素
Inherited: 是否可以继承
Percentages:是否可以使用百分比,N/A:Not applicable，不适用；
Media: 媒体组
Computed value: 如何得出计算值
Animatable: 是否可以动画

CSS属性的取值-组合（combinators）

每个取值之间的关系，有以下几种情况
1. 并列：取值之间用空格隔开，代表每个都必须出现，顺序也不能改变（参考font属性）
2. |：只能出现一个（参考font-style属性）
```
 //font-style取值：只能选一个值
 Value:	normal | italic | oblique
```
3. ||：出现1个或者多个，顺序任意（参考border属性）
```
 //boder取值：可设置任意一个，无顺序
 Value:	<line-width> || <line-style> || <color>
```
4. &&: 每个都必须出现，顺序任意
5. []: 分组，代表是一个整体（参考text-decoration-line属性）
```
 Value:	none | [ underline || overline || line-through || blink ]
```
优先级
1. 并列>&&>||>|
  1. a b|c ||d&&e f 等价于 [a b]|[c ||[d&&[e f]]]
2. 如果是斜杠/、逗号，两种字符必须以字面形式显示，参考font-family、font

CSS属性的取值-出现次数

每个取值或者分组后面，可以跟着一下符号，用来指明取值可出现的次数
1. 星号（*）：出现0次或者多次
2. 加号（+）：出现1次或者多次
3. 问号（？）：出现0次或者1次
4. 花括号（{A,B}）:至少出现A次，最多出现B次
5. 井号（#）：出现1或多次，每个值之间用逗号,隔开
```
 //font-family
 Value:	[ <family-name> | <generic-family> ] #
```
6. 感叹号(!)：跟在分组后面，表示这个分组至少要出现1个值（即使分组内规定所有值都是可选）

CSS属性的取值-类型

CSS属性的取值，有以下几种类型
1. 关键字
  1. 比如red、auto、none、left、right等（没有任何引导、大于小于号包住），以字面形式显示
2. 基本数据类型
  1. 格式为<数据类型>，比如：<length>、<number>、<percentage>、<color>、<string>、<time>等
3. 跟特定属性相关的数据类型
  1. 格式为<数据类型>，比如<margin-width>、<border-width>等
4. 引用其他属性的值
  1. 格式为’属性名‘，比如'font-size','background-image'
```
 //font取值
 Value:	[ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar
```