day01（工具用到的有vscode,谷歌浏览器，typora(markdown语法),snipaste(截图，吸色，量高宽，F1是快捷键，shift可以换成rgb模式取色，按c复制颜色)，搜狗输入法的（工具箱的截屏工具））

禁用电脑触摸板

    https://jingyan.baidu.com/article/359911f5ba225157ff030659.html
 

vscode的基本设置

管理 – 颜色主题 – 深色/浅色

管理 – 设置 – 字体（字体/font）

管理 – 设置 – 自动保存（保存/save） – afterDelay

管理 – 设置 – 自动折行 （折行/wrap） – on

管理 – 键盘快捷方式 – 切换块注释

vscode 插件

扩展 – chinese …

扩展 – open in browser

管理-设置-搜索-折行，打开。可以进行折行，在vscode里面，调小窗口也可以看整段代码。

扩展中下载安装的目前有9个：
chinese
open in browser
auto close Tag
auto Rename Tag
live server preview
live server
code spell checker
es6
markdownlint

vscode的live-server的配置方法：现在扩展里面搜索安装，再打开管理中的设置，然后搜索live server.然后找到port端口号的设置，改成8083，也可以改成别的。

live-server
开启Server（服务）
有四种方式：

在窗口的最底部有Go Live可以点击，一旦点击，就会自动在浏览器中打开HTML文件

在HTML文件中右键，然后点击open live server

快捷键 (alt+L, O) 打开服务 (alt+L, C) 关闭服务

按F1,然后在输入栏中输入 Live Server: Open Live Server to start a server 打开服务，或者 Live Server: Close Live Server to stop a server 关闭服务

谷歌的登录

需要先下载GHelper 然后在三个点里面的更多设置扩展里面开启开发者模式，加载已解压的扩展程序，安装到谷歌。

接着在插件（五角星收藏的右边），打开此登录GHelper，接着在主页应用里面点击登录即可。

vscode快捷键和emmet语法

vscode快捷键

​ alt+↓/↑ 把本行文字快速替换到下一行或者上一行

​ alt+shift+↓/↑ 快速复制本行到下一行或者上一行

​ alt+shift+f 快速格式化文档，只限于html文档，快速对齐

​ alt+鼠标单击多个地方 光标多选

​ 滚轮上下滑动 光标快速向上向下多选

​ ctrl + D 快速定位到和本标签属性的下个标签（可以快速删除或者修改）

​ ctrl +/ 快速多行注释

​ ctrl+shift + / 快速代码块的注释（这个需要自己设置一下快捷键）

​ ctrl+f 查找

​ ctrl+h 替换

​ ctrl+z 撤销

​ ctrl+y 下一步

emmet语法：

​ div*10 快速生成10个div

​ div>span 快速生成：

​ div+span 快速生成:

​ .div 快速生成:

创建网页

HTML语言

typora快速使用方法，markdown 语法，可以直接全选复制到csdn，语法基本一致。

.md markdown 富文档 (网页)

1.标题

ctrl+1 一级标题

ctrl+2 二级标题

ctrl+i…6

or

# + 空格 标题文字 +enter 一级标题## + 空格 标题文字 +enter 二级标题....6个
 

2.段落 ctrl+0

阿湖府邸是否合适改二手房东风浩荡是非得失阿飞赛诺菲

3. 插入图片

ctrl+shift +i

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IbXT5JWR-1605868130048)(media/1.jpg)]

设置：文件—》偏好设置—》图片—》勾选优先本地路径—》关闭—》打开

4. 列表系列

有序列表 1. +空格 + 数据

1. 数据1

2. afgrdgd

无序列表 + 实心圆 -空心圆

5.表格

|姓名|年龄|薪资|工龄|+enter
 

姓名年龄薪资工龄上发帖人水果放到

6.高亮

设置： 文件–》偏好设置—》勾选高亮 用法： 文字左右两侧加双==

shafiushfesg htreoihteogtimfrjew

==高亮文字==
 

7.文字底色

tab上面那个键

afhsfhesufhrewasgdshfdjfgmk

8.插入代码段

tab上面那个键连按3次

​```+语言的名字
 

.box {width:200px;
 }
 

9.表情

😄

🏁

⬇️

:加表情的英文单词:
 :smile:笑脸
 :flag:旗帜
 :arrow:箭头

10.斜体，粗体

斜体

wqefrewtr
 

粗体

segtrdg
 

wqefrewtr gxdfhfgh

segtrdgasgfsgdgfdhd

前端开发

用前端技术实现用户界面

前端技术：基础三大要素 html5 css3 javascript +js衍生物（vue,react,angular框架,node.js）

用户界面:pc端 + 移动端app （页面+交互+数据渲染）

发展史

web1.0阶段 蒂姆·伯纳斯·李 [1] （Tim Berners-Lee） 界面：只能读 不能写

web2.0阶段 布兰登·艾奇（Brendan Eich，1961年～） JS 有了交互 只能读 还能写 建设者

web3.0阶段（大前端） 09年 Ryan Dahl

浏览器及其内核

浏览器=外壳+内核

hd

五大浏览器 ：

浏览器内核IETridentFireFox(火狐)GeckoSafari（ios）WebkitChrome（谷歌）Webkit—>BlinkOpera(欧朋)Presto–>Blink

HTML语言

编辑器(vscode,hbuilder,webstrom…)---->a.html —>浏览器

!+ enter —>创建模板

HTML 结构 负责网页有什么

CSS 样式 负责的是这些东西长什么样子

JS 行为 交互+数据渲染

HTML: Hyper 超 Text 文本 Markup 标记 Language 语言

1. 不是编程语言 标记语言
2. 超 文本 .txt —>字符 .html—>不光写字符 写图片，音频，视频，动画 超文本传输协议

写法：

起个名字 图片 img

img + src

<> <>

双标记 ，闭合标记

<标记名字>内容
 <开始>内容
 

内容  元素 
 

单标记

<标记名字 属性名="属性值" 属性名="属性值" >
 

注释

html 快捷键 ctrl+/

单行 //注释文字

多行/注释文字/

文本相关的标记

标题

标题内容
  有且只有一个 一般用在logo
 
标题内容
 
标题内容
 
标题内容
 
标题内容
 
标题内容
 

段落P

近来围绕美国大选结果等问题，特朗普和拜登的支持者在美国多地集会持续对峙。当地时间13日，双方支持者再次来到华盛顿白宫外抗议示威，并发生激烈的言语冲突。
 

图片标记

 src:图片路径绝对路径1. 网络图片2. 本地绝对路径 D：...C:UsersAdministratorDesktop1109老师的day04images相对路径根目录 / （编辑器里打开的文件夹的顶级目录）同级目录 ./ 或者不写上一级 ../ 跳出一个文件夹上上级 ../../跳出2个文件夹alt: 当图片加载失败的文本提示title:鼠标悬停时的文本提示width:宽度  等比例缩放  3:2  
 height:高度
 

修饰文字（了解）

加粗

adsaudf bold 非语义标签
 safsf 语义化标签  装重要的 强调的文字  希望被爬虫抓取
 

斜体

斜体文字 italic 斜体
 斜体文字  语义化标签
 

下划线

aefresf
 ftrewtet语义化标签
 

中划线

99.00
 99.00语义化标签
 

换行

给段落内的文字换行

 break
 

水平线

align 水平对齐方式 left 左对齐  right  center居中
 

字符实体

版权符 人民币符 > < . “” —》Unicode编码

人民币符 ¥

¥  人民币符号
 ©版权符 
 > 大于号
 <小于号
 

布局标签

大盒子大容器 大区域

 可以装div,img  p hi....
 

小容器 小盒子 小区域

 可以装几个字 小图标 非常小的图片
 

两组span标签，如果加回车的话会有一个空格的间距，但是打多少空格和回车只生效一个，如果用空格可以使用 或者有段落的时候可以使用css样式，即text-indent:32px;因为默认字体大小是16px,所以为两个空格，首行缩进两格。