HTML的初步学习

阳光穿透心脏的1/2处 2024-02-19 09:13 30阅读 0赞

![123preview][]

## HTML ##

> HTML 描述网页的骨架, 标签化的语言.
> 
> HTML 的执行是浏览器的工作,浏览器会解析 html 的内容,根据里面的代码,往页面上放东西,浏览器的工作归根结底,还是以汇编的形式在CPU上执行.
> 
> 浏览器对于html语法格式的检查没有很严格,即使你写的代码有一些不合规范之处,浏览器也会尽可能的去执行.  
> 可以直接使用记事本编写代码,并且直接在浏览器中运行代码.

开发,是在程序猿的电脑上完成的写代码的过程.  
运行,则是在用户的电脑上完成具体的程序跑起来的过程.  
一次开发,N次运行.

### 浏览器 ###

当前市面上的主流浏览器:

> IE浏览器(Internet explorer),早期windows自带的,现在已经变成edge浏览器.
> 
> 谷歌(chome),当前最牛逼的浏览器
> 
> 火狐浏览器(firefox),也是一个很知名的浏览器,好用不火.
> 
> Safari浏览器,苹果系统上自带的浏览器
> 
> Opera浏览器,相对小众的浏览器

浏览器的主要功能就是解析运行网页(给HTML,CSS, JS提供稳定的运行环境)

一般用户电脑上都会装浏览器,写的前端代码是不愁运行环境.

浏览器是用C++语言写的,性能要求极高的场景,都是C++为主.浏览器内核也是如此.

### 开发环境 ###

前端开发,使用的开发环境,最主流的是这么两个:

1.JB系列  
IDEA如果是专业版(教育版),本身就是支持前端的,或者也可以使用JB提供的WebStorm  
JB => JetBrains (公司名), 最大的问题它是收费的!!!

2.VScode\[轻量级开发工具\]  
免费方案, 使用体验要略逊色于WebStorm

3.除了上面两个之外,还有很多其他的选项,比如dreamweaver , sublime text, vim….

### 使用 VSCode 编写代码 ###

#### 1.下载安装 ####

![image-20231105234639318][]

VSCode网上有山寨版(要收费!!!),千万别搞错了 ~~ 注意看,官网的主域名是否是正确的!!!  
官网链接: https://code.visualstudio.com/Download 这个是科学的主域名,域名和产品名字是匹配的.  
注: 推荐在VSCode安装好之后,将其设置为中文.

#### 2.使用 VSCode ####

vscode 和 idea 相比,更简单.idea 用的时候,需要先创建一个项目,创建过程中要配置很多东西.  
vscode 则没有"项目"这个概念,都是使用目录来组织的.就可以选择一个你当前想要代码的目录,打开这个目录.(打开目录就相当于以这个目录作为项目目录)

1.打开目录

2.创建代码文件

3.编辑代码  
以编写一个最简单的hello world为例.

![image-20231106002920904][]

<html>
        <head></head>
        <body>
            hello world
        </body>
    </html>

注: 写完代码之后,要记得保存(ctrl + s保存),当然你也可以对vscode进行设置,来让vscode进行自动保存!

![image-20231106004122192][]

4.运行代码

![image-20231106093205828][]

![image-20231106093724967][]

![image-20231106093757247][]

--------------------

### 该HTML代码特点 ###

![image-20231106094402026][]

1.  html 代码是通过标签来组织的.  
    形如`<html> </html>`用尖括号组织的,成对出现的这个东西就是"标签"(tag),也可以叫做“元素”(element)
2.  一个标签通常是成对出现的.  
    `<html>`开始标签,`</html>`结束标签,这俩之间,是标签的内容.  
    注: 少数标签是可以只有一个开始标签的,单标签.
3.  标签是可以嵌套的.  
    一个标签的内容可以是其他一个或者多个标签.此时,这些标签构成了一个"树形结构"
4.  可以在开始标签中,给标签赋予属性(Attribute) .  
    属性相当于是键值对,可以有一个或者多个.

HTML 基本的语法结构,就是以上的这几个简单的规则.下一步要介绍的,就是当前HTML中都支持哪些标签,每个标签的作用,每个标签有哪些关键属性…

--------------------

### xml 和 html 的区别 ###

> xml也是标签化的格式.有哪些标签,标签叫啥名字,有啥作用, 有啥属性,都是程序猿(你)根据需求场景,自定义的.  
> html也是标签化的格式.这里有哪些标签,标签叫什么名字,有什么作用,有什么属性,都是有一批大佬们规定好的.浏览器按照这份规定来解析实现的.(html 不支持自定义标签)

1.html  
这是一个html文件最顶层标签,树根节点.

2.head  
存放了这个页面的属性(元数据,meta data).

3.body  
存放了这个页面包含哪些内容.

输入“!”(英文的!),按下 tab, 此时就能生成一个基本的页面.只需要编辑body的内容即可.  
这个功能叫做 emmet 快捷键,主流开发工具都有,WebStorm也有.

![image-20231106110855571][]

> `<!DOCTYPE html>` 声明了一下文件的类型,是 html 文件.
> 
> `<html lang="en">` lang => langugage , en => english 描述了网页中的语言是英语.  
> 告诉浏览器,咱们当前的网页内容是使用英语的,然后有些浏览器打开这个网页的时候,会根据系统语言(中文),和网页语言(英语),提示用户,是否要把网页内容翻译成中文.
> 
> `<meta charset="UTF-8">` , `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 此处的 meta 标签,是单标签,只有开始标签,没有结束标签.
> 
> `<title>Document</title>` 网页标题.
> 
> `<body> </body>` 中间是进行编辑的文本.

--------------------

## HTML 常见标签 ##

### 注释标签 ###

~~ 代码的注释  
HTML的注释,和一般的语言的注释,差别很大!!!

注释的内容不会在页面中显示的!但是,如果右键,查看网页源代码,此时是可以看到注释!!!

![image-20231106115540131][]

VSCode 里,使用 “ctrl + /“ 快速注释代码, webstorm 同理.  
注释的原则:  
1.要和代码逻辑一致.  
2.尽量使用中文.  
3.不要传递负能量.

--------------------

### 标题标签 ###

~~ h1- h6 有六个, 从 h1 - h6, 数字越大, 则字体越小

示例:

![image-20231106121246051][]

运行结果:

![image-20231106121450553][]标题标签由来: html (网页)最初只是用来代替传统的媒体(报纸/杂志),把报纸/杂志搬到电脑里.

每个标题标签都是独占一行的.这个独占一行是和代码的编写无关的!!  
在html里面标签是否换行,和代码的编写无关,而是和标签自身有关(有的标签独占一行,有的标签不独占).在html源代码中写的换行会被忽略.  
写的空格,多个连续空格有的时候会被忽略,有的时候视为一个的空格.

Lorem => 自动生成一段随机的文本,帮助我们调试显示效果.

![image-20231106145906655][]

运行结果

![image-20231106150230602][]

每个段落之间,不光是要换行,同时还有一个明显的段落间距.  
注: 段落间距,需要通过css才能调.当前html自身,调不了.

换行标签: br  
br 是 break 的缩写,表示换行.

> br 是一个单标签(不需要结束标签),一个br  
> br 标签不像 p 标签那样带有一个很大的空隙.  
> `<br/>` 是规范写法,不建议写成 `<br>`

示例:

![image-20231106152639017][]

运行结果:

![image-20231106152251699][]

--------------------

### 格式化标签 ###

> 加粗: strong 标签 和 b 标签  
> 倾斜: em 标签 和 i 标签  
> 删除线: del 标签 和 s 标签  
> 下划线: ins 标签 和 u 标签

示例:  
![image-20231106220619522][]

运行结果  
![image-20231106220817102][]

注: 这些标签都是不独占一行的,如果想要换行,就需要加上`<br/>`.

--------------------

### 图片标签: img ###

#### img 核心属性: src ####

就像报纸上有图片,网页上,也是可以显示图片的.  
img 有个核心属性, src(必填项),src描述了该图片的路径.  
(路径可以是一个本地的绝对路径,也可以是一个相对路径,还可以是网络路径)

示例:

![image-20231107003041983][]

`<img src="C:\Users\22131\Desktop\背景图2\preview.jpg" >` => 绝对路径  
注: 如果使用相对路径的时候,一定要明确,工作目录是哪个(必须有个基准)!  
html 的工作目录就是该html文件所在的目录!!!  
![image-20231107002357430][]

运行结果  
![image-20231107002216832][]

#### 示例 ~~ 使用网络路径 ####

1.得到图片的网络路径

![image-20231107003623648][]

代码示例

![image-20231107003923449][]

注: 除了将这个路径写到img里来显示这个图片外,还可以直接将这个网络路径填写到浏览器里,也能打开图片.

运行结果

![image-20231107004430874][]

#### img的别的属性 ####

alt 属性: 在图片挂了的时候,就会显示 alt 对应的文本.(现在很少使用,博主不做讲解).  
title属性: 鼠标悬停在图片上,会给出一个提示.

![image-20231107005446944][]

![image-20231107005552197][]

width / height 属性, 来描述图的尺寸.

> 宽度和高度可以同时设置,也可以只设置一个,如果只设置一个,另一个会等比例缩放.

![image-20231107010233374][]

![image-20231107010326586][]

px像素,这是在前端开发中最常用的单位.(当然也有别的单位),就是平时照相时候的相机的像素.  
显示器显示出图片的原因: 你的显示器,里面有很多的"小灯泡",每个小灯泡都可以显示不同的颜色.只要显示器的小灯泡越多,此时显示的图片就越细腻,越清晰.  
注: 关于图片的尺寸,也可以使用 css 来设置.

--------------------

### 超链接标签: a ###

> “链接” link(快捷方式), "超"链接跳转到的页面,可以是在当前网站之外的.

示例  
![image-20231107011654293][]

运行结果

![image-20231107011926317][]

超链接还有一个属性: target,一般都是写作 target="\_blank” 就可以打开一个新的标签页(而不会替换原有页面)

示例:

![image-20231107014339451][]

运行结果:  
![image-20231107014535093][]

--------------------

### 表格标签 ###

> table 标签: 表示整个表格  
> tr: 表示表格的一行  
> td: 表示一个单元格  
> th: 表示表头单元格. 会居中加粗  
> thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)  
> tbody: 表格得到主体区域.

示例:  
![image-20231107015954891][]

运行结果:  
![image-20231107020015136][]

示例改进:  
![image-20231107020605557][]

运行结果:  
![image-20231107020718961][]

--------------------

### 列表标签 ###

主要使用来布局的,整齐好看.

> 有序列表 ol(ordered list)  
> 无序列表 ul(unordered list)  
> 列表项 li(list item)

示例:  
![image-20231107023538498][]

运行结果:

![image-20231107023435636][]

在浏览器中,按下F12/右键->检查元素就可以打开浏览器的“开发者工具",借助这个工具就能看到这个页面是怎么实现的

[123preview]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/167b070226904681946a138936bb93b8.png
[image-20231105234639318]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/4caf5db8624d470a9ef9a6aca36b600a.png
[image-20231106002920904]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/34ba46b2d29c457da1cd61ab965768ff.png
[image-20231106004122192]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/61edb7464d0849c789ef2dc83c6c9fdf.png
[image-20231106093205828]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/c75aecc824814a76811d09f793304c1f.png
[image-20231106093724967]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/c9fff4b4a2124642b0faa34cbd79dec8.png
[image-20231106093757247]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/a2134f5c45e8402d87de71d02a621123.png
[image-20231106094402026]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/333b6a0c358544b5b9f7f976c0c4b861.png
[image-20231106110855571]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/b04a542434a1428a95aeb8da6183f872.png
[image-20231106115540131]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/0277cbd835204f12892d32e296ce0cc7.png
[image-20231106121246051]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/ab645735c290448d9953edef3101d50d.png
[image-20231106121450553]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/d0e0e778b585406286ab6eec406b93e4.png
[image-20231106145906655]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/f21d3e1c0ad04bbc8891a16ae1c7c80b.png
[image-20231106150230602]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/38c3ebe8f43841fe97e29406b76b4d84.png
[image-20231106152639017]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/65a375ee69364dbebe2b433cc6188a51.png
[image-20231106152251699]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/caa9c367d73648c09593e87dbdf8cbce.png
[image-20231106220619522]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/0a059d0d06af4527a2966f3ff8e262be.png
[image-20231106220817102]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3bd9c417cbaa45f0b7206a1f564468cb.png
[image-20231107003041983]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/cf0db3309de942c39ef505b2f7f362be.png
[image-20231107002357430]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/114d6ce521894326b6e93ff18ea30693.png
[image-20231107002216832]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/fe40406b29914e30abca4ae2ef0a99d4.png
[image-20231107003623648]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/0752b75e76f6408eb52e30e742ae9b82.png
[image-20231107003923449]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/88c989ff35dd4725a06237087aff8743.png
[image-20231107004430874]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/89d7fc2832ad424bac9438928aef32d4.png
[image-20231107005446944]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/d49dbe43108641d58b88b4f2bf2c41bd.png
[image-20231107005552197]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/4df16397a06148cb849bd182fd3f9b21.png
[image-20231107010233374]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/1f208872fee249e18ebeb25a0fff2979.png
[image-20231107010326586]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/d587c461d42b46c69224e49a4fd95dd7.png
[image-20231107011654293]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/515f38b4c45f439793d7b87ccec65edd.png
[image-20231107011926317]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/d0a6313ba83b487e9ad7212b4fee3abc.png
[image-20231107014339451]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/a3ac7d7efb6e4fc0b11bddc36f81df9c.png
[image-20231107014535093]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/1e1b9dd4ec334d288a814cd1c2562ec7.png
[image-20231107015954891]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/842f2ef18c834facaed42d90b7ad96ba.png
[image-20231107020015136]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/89360c038d5a41c695e5a53235c29fff.png
[image-20231107020605557]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/91057e8dff584995a956fe619d74343a.png
[image-20231107020718961]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/8869718de13b4fed8c341db23d5e8b02.png
[image-20231107023538498]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/f1e26ec995d044329c673801d3ad9f4d.png
[image-20231107023435636]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/016bc57986ff4efc8468b7442c2e6125.png