1200字范文 > HTML5+CSS3快速入门每日一篇day01前端开发常用工具vscode快捷键的使用和emmet快速生成

HTML5+CSS3快速入门每日一篇day01前端开发常用工具vscode快捷键的使用和emmet快速生成

时间：2020-11-18 10:42:14

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

禁用电脑触摸板

/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

# + 空格标题文字 +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

afgrdgd

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

esgrhftgh

jesahfrsf r

5.表格

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

6.高亮

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

shafiushfesghtreoihteogtimfrjew

==高亮文字==

7.文字底色

tab上面那个键

afhsfhesufhrewasgdshfdjfgmk

8.插入代码段

tab上面那个键连按3次

```+语言的名字

.box {width:200px;}

9.表情

😄

🏁

⬇️

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

10.斜体，粗体

斜体

<i>wqefrewtr</i>

粗体

<b>segtrdg</b>

wqefrewtrgxdfhfgh

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

浏览器及其内核

浏览器=外壳+内核

五大浏览器：

HTML语言

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

!+ enter —>创建模板

HTML 结构负责网页有什么

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

JS 行为交互+数据渲染

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

不是编程语言标记语言超文本 .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:高度