初识html及工具的使用

最新推荐文章于 2024-10-03 17:58:45 发布

高申航

最新推荐文章于 2024-10-03 17:58:45 发布

阅读量115

点赞数 1

文章标签： vscode 前端 html html5

本文链接：https://blog.csdn.net/qq_46058838/article/details/120667446

版权

初识html

1、安装工具汉化包

博客安装地址：

VS Code 安装教程_高申航的博客-CSDN博客

2、工具的使用

1、打开和新建的区别

2、用磁盘中的文件夹和项目中进行对比更能说明问题

3、什么是HTML

1、html是超文本语言

2、后缀名，后缀名是html，讲如何调出来后缀名，改扩展名后缀名的不同，导致打开方式的不同

如何调出文件扩展名：

控制面板，工具，文件夹选项，查看，隐藏已知文件类型的扩展名把勾打掉。

4、解释html默认补充信息的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>

代表版本 5.0版本的头就长这样（可百度查找4.0的长什么样）这叫网页声明规范，就是浏览器看到这个 就知道 ，吆西，你的html滴干活。就这意思 声明！

html4的样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

什么是标签：

标签是由两个尖括号组成的，标签分为单标签和双标签，单标签是只有开始，没有结束

双标签是有开始，有结束

没有结束这就是单标签功能性标签

双标签，有开始，有结束，有范围限制

<html lang="en">

这后面的lang可以不要，lang的意思是language语言的意思，后面跟en是英语的意思，可用可不用。这里的html意思html从这里开始了，到后面的</html> 意思是html到这里结束了，这就是双标签的什么限制？？范围限制！！

<head>
	#
	#
	#
</head>

是头的意思，设置了整个html文件的格式，和标题，作用的整个html

<meta charset="UTF-8">

字符集什么是字符集呢？字符集是一种统一的标准，全世界有很多很多

不同的语言，我们说汉语，小日本说日语，英语等等，这时候如果针对每个国家的语言都设置一个字符集的标准，会很混乱，比如我写的页面上可能有了中文就不能有英文了，因为识别不出来，为了解决这个问题，就出现了utf-8这个字符集标准，所有的国家，所有的文字，都生成特定的字节码，这样不论你一个页面出现多少的文本内容，都可以正常的识别出啦了

我们国家的汉语简体的字符集标准是GB2312

</body>

身体，所有的网页内容，都在这个里面

## 5、**基础标签**

1、在body中的内容都可以在浏览器正常显示

2、注释 ctrl +/ 注释解释什么是注释

3、<h1>你好</h1> 再后面写一个随便的内容，进行对比， h标签，即标题标签，把一段文字真正的变为标题。引入h2,h3,h4直到h6，进行对比

4、<p></p>段落标签，新闻中一段一段的文字，自然段的意思

5、html不认识空格和换行，想让分段两种方式，1.<p>，进行分段。2.<br> html不认识换行，只认<br>。空格是什么呢：演示在编辑器空格，对比，无变换。因为在html中多个空格和换行，默认一个。html认

6、<hr> 水平线，一个hr代表一个水平线

7、<em>斜体</em>

8、<strong>加粗（强壮）</strong>

## 6、**图像标签**

1、<img> 插入图片<img src="" alt=""> 这里的src 和alt叫属性，在标签内部的内容成为属性，属性和属性之间必须用空格隔开。作用：src是填写图片的路径。

1.同级目录，直接写文件名字,扩展名要写全。

2、不在统计目录，在下级目录，先写目录名，/目录名，直到文件名。例：a/b/123.jpg

3、上级目录：../../直到找到图片。../返回上级目录，一个../代表返回一次。

4、其他目录下 ../c/123.jpg。 alt属性是在一个图片不能正常显示时，对一个图片的补充说明，例 1231.jpg没有这张图的时候就会显示alt的内容。如果图片错误，没有alt 则什么也不显示

5、超链接标签 a 按table <a href=”路径”>要点击的内容</a>，用来点击内容跳转页面。

6、 1. 填写跳转网址的时候，必须要加上http://，如果没有则会报错，找不到地址，如果想省略这些，可把http省略，直接//即可

7、 2.跳转本地地址。和找图片的方法一样。

8、 3.通过点图片返回，在a里面嵌套图片

## 7、**锚链接**

比如点击淘宝的回到顶部，就可以回到固定位置

这时候需要我们先找到目标位置

就像做飞机一样，我想飞北京，飞上海，得先找到目标地址，然后给目标位置加一个id

id名不能是数字，要跳转的地方，设置id名。然后直接用a标签，href的地址写为：#id名

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>我是第1个h1</h1>
    <h1>我是第2个h1</h1>
    <h1>我是第3个h1</h1>
    <h1>我是第4个h1</h1>
    <h1>我是第5个h1</h1>
    <h1>我是第6个h1</h1>
    <h1>我是第7个h1</h1>
    <h1>我是第8个h1</h1>
    <h1>我是第9个h1</h1>
    <h1>我是第10个h1</h1>
    <h1>我是第11个h1</h1>
    <h1>我是第12个h1</h1>
    <h1>我是第13个h1</h1>
    <h1>我是第14个h1</h1>
    <h1>我是第15个h1</h1>
    <h1>我是第16个h1</h1>
    <h1>我是第17个h1</h1>
    <h1>我是第18个h1</h1>
    <h1>我是第19个h1</h1>
    <h1>我是第20个h1</h1>
    <h1>我是第21个h1</h1>
    <h1>我是第22个h1</h1>
    <h1>我是第23个h1</h1>
    <h1>我是第24个h1</h1>
    <h1>我是第25个h1</h1>
    <h1>我是第26个h1</h1>
    <h1>我是第27个h1</h1>
    <h1>我是第28个h1</h1>
    <h1>我是第29个h1</h1>
    <h1>我是第30个h1</h1>
    <h1>我是第31个h1</h1>
    <h1>我是第32个h1</h1>
    <h1 id="go">我是第33个h1</h1>
    <h1>我是第34个h1</h1>
    <h1>我是第35个h1</h1>
    <h1>我是第36个h1</h1>
    <h1>我是第37个h1</h1>
    <h1>我是第38个h1</h1>
    <h1>我是第39个h1</h1>
    <h1>我是第40个h1</h1>
    <h1>我是第41个h1</h1>
    <h1>我是第42个h1</h1>
    <h1>我是第43个h1</h1>
    <h1>我是第44个h1</h1>
    <h1>我是第45个h1</h1>
    <h1>我是第46个h1</h1>
    <h1>我是第47个h1</h1>
    <h1>我是第48个h1</h1>
    <h1>我是第49个h1</h1>
    <h1>我是第50个h1</h1>

    <a href="#go">跳转到第3个</a>
</body>
</html>