HTML5+CSS3快速入门每日一篇day01前端开发常用工具vscode快捷键的使用和emmet快速生成标签的语法，以及笔记的使用，快捷工具的使用

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

禁用电脑触摸板

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

vscode的基本设置

• 1、颜色主题

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

• 2、字体

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

• 3、自动保存

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

• 4、自动折行

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

• 5、修改键盘快捷方式 – 切换块注释

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

vscode 插件

• 1、汉化

扩展 – chinese …

• 2、打开网页快捷方式

扩展 – 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><span></div>

​ div+span 快速生成:

<div><span></span></div>

​ .div 快速生成:

<div></div>

创建网页

• 新建文件 – 后缀名 .html
• 生成基本结构代码 英文! + enter(回车)

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)]

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

<img  src="media/1.jpg"  style="width:200px;height:300px">

4. 列表系列

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

1. 数据1

2. afgrdgd

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

• esgrhftgh

• jesahfrsf r

5.表格

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

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

6.高亮

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

shafiushfesg htreoihteogtimfrjew

==高亮文字==

7.文字底色

tab上面那个键

afhsfhesufhrewasgdshfdjfgmk

8.插入代码段

tab上面那个键连按3次

​```+语言的名字

.box {
    width:200px;
}

9.表情

😄

🏁

⬇️

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

10.斜体，粗体

斜体

<i>wqefrewtr</i>

粗体

<b>segtrdg</b>

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

浏览器及其内核

浏览器=外壳+内核

h	d

五大浏览器 ：

浏览器	内核
IE	Trident
FireFox(火狐)	Gecko
Safari（ios）	Webkit
Chrome（谷歌）	Webkit—>Blink
Opera(欧朋)	Presto–>Blink

HTML语言

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

!+ enter —>创建模板

HTML 结构 负责网页有什么

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

JS 行为 交互+数据渲染

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

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

写法：

起个名字 图片 img

img + src

<> <>

双标记 ，闭合标记

<标记名字>内容</标记名字>
<开始>内容</结束>

<name  属性名="属性值" 属性名="属性值" ....>内容</name>  元素 

单标记

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

注释

html 快捷键 ctrl+/

单行 //注释文字

多行/注释文字/

文本相关的标记

标题

<h1>标题内容</h1>  有且只有一个 一般用在logo
<h2>标题内容</h2>
<h3>标题内容</h3>
<h4>标题内容</h4>
<h5>标题内容</h5>
<h6>标题内容</h6>

段落P

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

图片标记

<img src=""  alt=""  title="" width="" height="">
src:图片路径

绝对路径
    1. 网络图片
    2. 本地绝对路径 D：...C:\Users\Administrator\Desktop\1109\老师的\day04\images

相对路径
    根目录 / （编辑器里打开的文件夹的顶级目录）
    同级目录 ./ 或者不写
    上一级 ../ 跳出一个文件夹
    上上级 ../../跳出2个文件夹
    <img src="./image/timg.jpg" alt="">
    <img src="../资料/timg.jpg" alt="">


alt: 当图片加载失败的文本提示

title:鼠标悬停时的文本提示


width:宽度  等比例缩放  3:2  
height:高度

修饰文字（了解）

加粗

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

斜体

<i>斜体文字</i> italic 斜体
<em>斜体文字</em>  语义化标签

下划线

<u>aefresf</u>
<ins>ftrewtet</ins>语义化标签

中划线

<s>99.00</s>
<del>99.00</del>语义化标签

换行

给段落内的文字换行

<br> break

水平线

<hr color="red" align=""  width="300px">

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

字符实体

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

人民币符 ¥

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

布局标签

大盒子大容器 大区域

<div></div> 可以装div,img  p hi....

小容器 小盒子 小区域

<span></span> 可以装几个字 小图标 非常小的图片

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