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
超文本标记语言

超文本: 文本内容+非文本内容(图片,视频,音频等)

初始代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
代码 描述
<!DOCTYPE html> H5文档声明,告诉浏览器这是一个html文件
<html> html文件的最外层标签
lang=”en” 表示是一个英文网站
lang=”zh-CN” 表示一个中文网站
<meta charset=”UTF-8″> 元信息,是编写网页中的一些赋值信息
charset=”UTF-8″ 国际编码,让网页不出现乱码的情况
<title> 网页的标题

注释

写法

<!-- 注释的内容 -->

意义

  • 1 为代码添加提示
  • 2 将代码注释起来,方便以后使用

快捷键

ctrl+/
光标放在要注释的内容前面,执行ctrl+/

shift + alt + a
选中要注释的内容,执行shift + alt +a

标题和段落

标题
h标签
在一个网页中,h1标签很重要,并且一个.html文件中只能出现一次h1标签
h5和h6标签不常用

    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

段落
p标签

<p>段落,会自动换行</p>

文本修饰标签

文本修饰标签 描述
<strong> 表示强调,会对文本进行加粗
<em> 表示强调,灰度文本进行斜体
<sub>,<sub> 下标文本,插入文本
<del>,<ins> 删除文本,插入文本

图片标签

图片标签
img

属性 描述
src 引入图片的地址
alt 当图片出现问题的时候,可以显示一段文字
title 提示信息,鼠标放到图片上,会显示提示信息
width,height 图片的大小(高,宽),默认单位是像素.当网络比较慢,图片未加载的时候,这两个属性可以先撑起图片所占据的位置 
<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg" alt="正在努力加载中" title="人生如梦" width="600" height="430">

引入文件的地址路径

相对路径

  • .在路径中表示当前路径
  • ..在路径中表示上一级路径

绝对路径

<!-- 插入本地图片 -->
<img src="../../Pictures/1.1/1.PNG" alt="">

其中1.png文件在当前文件的上一层的上一层的Pictures目录中

<!-- 插入本地图片 -->
<img src="C:\Users\inmeditation\Pictures\1.1\1.PNG" alt="">

发现斜线和反斜线都可以正常预览,但是要尽量避免使用反斜线

跳转链接

a标签

属性 描述
href属性 链接的地址
target属性 可以改变链接打开的方式
_self 在当前页面打开,默认方式
_blank 新窗口打开 
<!-- 为文字添加链接 -->
<a href="http://www.sunlizhao.cn" target="_blank">我的网站</a>
<!-- 为图片添加链接 -->
<a href="http://www.sunlizhao.cn"><img src="../../Pictures/1.1/1.PNG" alt=""></a>

base标签
改变a链接的默认跳转行为的
当整个页面的标签,都需要做成新窗口打开的方式
可以为每一个a标签设置target属性,也可以通过base标签全局设置

<head>
    <base target="_blank">
</head>

跳转锚点

和跳转链接的区别

锚点是在当前页内间的跳转
常用在目录,回到行首和行尾等操作上

实现一

<a href="#html">html</a>
<a href="#css">css</a>
<a href="#JavaScript">JavaScript</a>

<h2 id="html">html</h2 id="html">
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<h2 id="css">css</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<h2 id="JavaScript">JavaScript</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

实现二

<a href="#html">html</a>
<a href="#css">css</a>
<a href="#JavaScript">JavaScript</a>

<a name="html"></a>
<h2>html</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<a name="css"></a>
<h2>css</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<a name="JavaScript"></a>
<h2>JavaScript</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

特殊符号

可以解决冲突,左右尖括号,添加多个空格的实现

符号 描述 效果
&nbsp; 空格
&copy; 版权 ©
&reg; 注册商标 ®
&lt; 小于号 <
&gt; 大于号 >
&amp; 逻辑和 &
&yen; 人民币 ¥
&deg; 摄氏度 °

版权声明：本文为inmeditation原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/inmeditation/p/12169730.html