vs code编辑器
安装插件
chinese 中文支持
open in browser 快速预览文件
view in browser
快捷键
快捷键 | 描述 |
---|---|
shift + end | 选中从光标到行尾 |
shift + home | 选中从光标到行首 |
shift + alt + 方向上下 | 快速复制粘贴当前行 |
alt + 方向上/下 | 快速和上/下行移动 |
tab | 向后缩进 |
shift + table | 向前缩进 |
alt + 鼠标左键 | 多光标编辑 |
ctrl + d | 选择相同元素的下一个 |
web三大核心技术
HTML
CSS
javaScoript
HTML
超文本标记语言
超文本: 文本内容+非文本内容(图片,视频,音频等)
初始代码
Document
代码 | 描述 |
---|---|
H5文档声明,告诉浏览器这是一个html文件 | |
html文件的最外层标签 | |
lang="en" 表示是一个英文网站 | |
lang="zh-CN" 表示一个中文网站 | |
元信息,是编写网页中的一些赋值信息 | |
charset="UTF-8" 国际编码,让网页不出现乱码的情况 | |
网页的标题 |
注释
写法
意义
- 1 为代码添加提示
- 2 将代码注释起来,方便以后使用
快捷键
ctrl+/
光标放在要注释的内容前面,执行ctrl+/
shift + alt + a
选中要注释的内容,执行shift + alt +a
标题和段落
标题
h标签
在一个网页中,h1标签很重要,并且一个.html文件中只能出现一次h1标签
h5和h6标签不常用
h1
h2
h3
h4
h5
h6
段落
p标签
段落,会自动换行
文本修饰标签
文本修饰标签 | 描述 |
---|---|
表示强调,会对文本进行加粗 | |
表示强调,灰度文本进行斜体 | |
, | 下标文本,插入文本 |
删除文本,插入文本 |
图片标签
图片标签
img
属性 | 描述 |
---|---|
src | 引入图片的地址 |
alt | 当图片出现问题的时候,可以显示一段文字 |
title | 提示信息,鼠标放到图片上,会显示提示信息 |
width,height | 图片的大小(高,宽),默认单位是像素.当网络比较慢,图片未加载的时候,这两个属性可以先撑起图片所占据的位置 |
引入文件的地址路径
相对路径
- .在路径中表示当前路径
- ..在路径中表示上一级路径
绝对路径
- C:\Users\inmeditation\Pictures\1.1\1.PNG
- https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg
其中1.png文件在当前文件的上一层的上一层的Pictures目录中
发现斜线和反斜线都可以正常预览,但是要尽量避免使用反斜线
跳转链接
a标签
属性 | 描述 |
---|---|
href属性 | 链接的地址 |
target属性 | 可以改变链接打开的方式 |
_self 在当前页面打开,默认方式 | |
_blank 新窗口打开 |
我的网站
base标签
改变a链接的默认跳转行为的
当整个页面的标签,都需要做成新窗口打开的方式
可以为每一个a标签设置target属性,也可以通过base标签全局设置
跳转锚点
和跳转链接的区别
锚点是在当前页内间的跳转
常用在目录,回到行首和行尾等操作上
实现一
html
css
JavaScript
html
模拟的段落
...
模拟的段落
css
模拟的段落
...
模拟的段落
JavaScript
模拟的段落
...
模拟的段落
实现二
html
css
JavaScript
html
模拟的段落
...
模拟的段落
css
模拟的段落
...
模拟的段落
JavaScript
模拟的段落
...
模拟的段落
特殊符号
可以解决冲突,左右尖括号,添加多个空格的实现
符号 | 描述 | 效果 |
---|---|---|
空格 | ||
© | 版权 | © |
® | 注册商标 | ® |
< | 小于号 | < |
> | 大于号 | > |
& | 逻辑和 | & |
¥ | 人民币 | ¥ |
° | 摄氏度 | ° |
列表
无序列表
- 列表项
规范:ul和li标签必须成对出现,他们之间不能有其他标签
代码:
- 第一项
- 第二项
输出:
- 第一项
- 第二项
type属性,改变前面标记的样式(一般都是css去控制)
值 描述 disc 默认值,实心圆 circle 空心圆 square 实心方块 代码:
- 第一项
- 第二项
输出:
- 第一项
- 第二项
有序列表
- 列表项
有序列表用的非常少,经常用的是无序列表,无序列表可以代替有序列表
type属性,改变前面标记的样式,一般都是用css控制
值 描述 1 默认值,数字有序列表 a 按字母顺序排列的有序列表,小写 A 按字母顺序排列的有序列表.大写 i 罗马字母,小写 I 罗马字母,大写 代码:
- 第一项
- 第二项
输出:
- 第一项
- 第二项
定义列表
-
定义专业术语或名词
-
对名词进行解释和描述
代码:
- HTML
- 超文本标记语言
- css
- 层叠样式表
- JavaScript
- 网页脚本语言
输出:
- HTML
- 超文本标记语言
- css
- 层叠样式表
- JavaScript
- 网页脚本语言
定义列表
列表的最外层容器
列表的最外层容器