web前端开发笔记1~20 2022/10/19

最新推荐文章于 2023-11-26 10:46:45 发布

萌木琉璃

最新推荐文章于 2023-11-26 10:46:45 发布

阅读量838

点赞数 2

文章标签：前端 vscode html

本文链接：https://blog.csdn.net/qq_74285138/article/details/127354602

版权

本文详细介绍了如何在Visual Studio Code (VSCode) 中创建和编辑HTML文件，包括快捷生成HTML初始代码、理解HTML结构、注释方法、文本格式化、标签使用、图片和链接的处理、页面跳转以及HTML语义化等基础知识。此外，还涵盖了常用的代码快捷键，如创建标签、保存文件、复制粘贴等，帮助提升前端开发效率。

摘要由CSDN通过智能技术生成

1、在vscode中创建.html格式文件

打开vscode后的初始界面,单击新建文件后输入文件名称，注意文件后缀名为
.html
然后直接enter，选择文件的保存路径，建仪把 .html 文件都保存在一个HTML文件夹下，然后创建文件就可以开始写网页了。

以下为图片参考

2、利用vscode快捷调出HTML初始代码

主要方法就是 ！+TAB 注意是在英文状态下的！
具体图片为下

3、解析HTML初始代码

注意//后为解释此行代码

<!DOCTYPE html>  //文档声明：告诉浏览器这是一个html文件
<html lang="en"> //html的最外层标签（下面的代码为了分清并列和嵌套关系我人为的进行了缩进，方法:选中代码+TAB），意为英文网页“en”，也可改成<html lang ="zh-CN">意为中文网页“zh-CN” 注意无论是中文还是英文网页都可以输入中文或英文
	<head> //头文件
	    <meta charset="UTF-8"> //万国码（国际编码），元信息：是编写网页中的一些赋值信息
	    <meta http-equiv="X-UA-Compatible" content="IE=edge"> //不做要求
	    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //不做要求
	    <title>Document</title> //这里的“Document”可以改，是网页标签页的名字
	</head>
	<body>//这里是指网页的内容（身体）
	    
	</body>
</html>

4、html代码中的注释写法

<!-- 这里是被注释掉的内容 -->    这样里面的内容不会被浏览器运行，但在编辑器里是可以看到的

vscode中有2种快捷添加删除注释的方法
1. ctrl + / （shift左边的键/和？）         将已经写出的文字或代码注释掉，光标放在代码前
2. shift + alt + a   类似于创建注释，填写注释内容

意义：1. 将暂时不用的代码注释起来，以后在用
     2. 对开发人员进行提示，增加代码的可读性

5、HTML语义化

根据网页中内容的结构，选择适合的HTML标签进行编写

6、HTML元素周期表

7、文本代码常用快捷键

创建标签： <单词> + TAB
vscode保存文件： ctrl + s
剪切：ctrl + x
复制：ctrl + c
粘贴：ctrl + v
撤销操作：ctrl + z
前进：ctrl + y
全选文本：ctrl + a
从头选中一行：shift + end（小键盘1）
从尾部选中一行：shift + home
快速复制：shift + alt + 下箭头
快速移动一行：alt + 上或下箭头
向后缩进：tab（光标在标签前）
向前缩进：shift + tab（同上）

8、web前端的三大核心技术

HTML 结构
CSS 样式
JavaScript 行为

9、HTML解释

HTML： 超文本 标记语言

超文本:文本内容+非文本内容（图片、视频、音频等）
标记：<单词>
语言：编程语言
标记也叫标签—分为两种 1.单标签 < br > 2.< html > < /html >

10、HTML有关代码

1、标题与段落

标题双标签

<h1>  一级标题  </h1>
<h2>  二级标题  </h2>
。。。。。。
<h6>  六级标题  </h6>

具体大小如下

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

在一个网页中，h1标题最重要，且一个 .html 文件中只能出现一次h1标签
h2 h3 h4 h5 h6 可以有多个

段落双标签

<p> 这是一个段落</p>

用具体代码显示以下段落代码的效果
无段落代码

无段落代码

无段落代码生成的网页
有段落代码

有段落代码

有段落代码生成的网站

2、文本修饰标签（文本格式化）

语义	标签	说明
加粗	`<strong></strong>` 或`<b></b>`	推荐用`<strong>`语义更强烈
倾斜	`<em></em>` 或 `<i></i>`	推荐用`<em>`语义更强烈
下划线	`<ins></ins>` 或 `<u></u>`	推荐用`<ins>`语义更强烈
删除线	`<del></del>`或`<s></s>`	推荐用`<del>`语义更强烈
下标	`<sub></sub>`
上标	`<sup></sup>`

测试

加粗字体

倾斜字体

下划线

~~删除线~~

A₂

A²

3、图片标签和属性

图片插入标签单标签

<img> 图片
<img src="" alt="">  vscode快速生成的图片标签
src 引入图片的地址
alt 当图片出现问题的时候，可以显示一段友好的提示文字

在这里插入图片描述
图片属性

title：提示信息
height：图片的高度（像素）
width：图片的宽度（像素）

实例
<img src="图片的网址" alt="图片无法显示时的文字" title=“图片的提示信息” height=“300” width=“600”>

注意title的作用

在这里插入图片描述

这里将图片的高宽属性加入

在这里插入图片描述

注意

图片的高宽以及title属性可以不加，只要有基础代码就可以插入图片，建议加入高宽属性

4、引入文件的地址路径

相对路径

1.与网页文件并列的图片的当前路径

2.在网页的子文件中

注意此时文件路径不同

3.图片在网页的父文件中

如此可以跳到网页的父文件夹中去引入图片路径

绝对路径
无参照物，不依靠网页文件的位置来引入文件路径
格式

例如 D:/img/学习/图片.jpg

5、跳转链接

<a> 标签（双标签） <a></a>可链接文字也可链接图片
相关属性 href (链接的地址）（同时也可以类似图片输入保存的网页路径）
target（可以改变链接打开的方式，默认情况下：在当前页面跳转链接 _self  打开一个新页面跳转链接 _blank）

<base>单标签可以改变<a></a>链接的默认情况（一般放在head中）

注意

链接打开方式优先看链接标签的terget的属性
1.若无terget属性，head中有base，则看base中的terget属性
2.若有terget属性，无论head中有无base且其terget属性是否与链接标签的terget属性相同，链接打开方式都由链接文件的terget属性决定

6、跳转锚点

方法1：利用链接标签的href属性#+id名称
效果：即点击被链接文字或图片，将本页面跳到被href属性中标记的id相同的标题行，类似于CSDN博客的目录效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <a href="#C">C</a>
    <h2 id="A">A</h2>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <h2 id="B">B</h2>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <p>duanluo</p>
    <h2 id="C">C</h2>
    <P>duanluo</P>
    <P>duanluo</P>
    <P>duanluo</P>
    <P>duanluo</P>
    <P>duanluo</P>
    <P>duanluo</P>
    <P>duanluo</P>
    <P>duanluo</P>
</body>
</html>

效果图

方法2：链接代码不变，将h2后的id相关代码去掉，在h2标题行的上一行添加代码

<a mane="id"></a>

其中这里的id就是文章目录就是方法1代码中的A B C
参考代码

7、特殊符号

直接表格记忆（注意&和;）

8、无序列表

<ul>、<li>：列表的最外层容器、列表项
同时两者必须组合出现，且中间不能有其他标题
符合嵌套规范
一般在<li></li>标签中嵌套链接标签,例：

<ul>
    <li><a href="网站">文字</a></li>
</ul>

属性 type 改变前面的样式（与CSS有关，不做要求）
详情请看网站 关于ul 代码在HTML中的type属性
在这里插入图片描述

9、有序列表(对应无序列表)

<ol>、<li>:列表的最外层容器、列表项
一般情况下使用的较少，可以用无序列表替代有序列表
有序列表和无序列表一样都有type属性
同理一般嵌套链接标签使用

效果
在这里插入图片描述

10、定义列表

<dl>：定义列表
<dt>：定义专业术语或名称
<dd>：对名词进行解释或描述

注意：dl dt dd 标签列表项需要添加标题和对标题进行描述的内容
代码

效果

2022-10-19 23：13
Author：夏天