前端基础 -- html知识汇总

糯米不开花ぴ

已于 2023-12-04 21:57:09 修改

阅读量616

点赞数

分类专栏：前端知识文章标签：前端 python

于 2023-10-22 20:01:07 首次发布

本文链接：https://blog.csdn.net/weixin_54104072/article/details/133970617

版权

前端知识专栏收录该内容

4 篇文章 1 订阅

订阅专栏

前言：网页构成

前端的网页构成三要素：html、css、js

1. html概述：

* HTML，即超文本标记语言（HyperText Markup Language ]），由SGML (标准通用标记语言) 发展而来，也叫web页面。扩展名是 .html 或是 .htm 。

* HTML，是一种用来制作网页的标准标记语言。超文本，指的就是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、链接等元素。

* HTML 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。

简单说：

html是超文本标签语言，程序运行之后负责内容显示、负责网页上有什么显示什么。

比如网页上放一张图片，放一段文字，放一个按钮，都需要使用html标签语言来完成。

一个页面文件一般以html结尾，还可能是htm，php，aspx，jsp等

html文件示例

我们可以在pycarm中新建一个html文件（new -> HTML File），看看效果~

文件新建后，会默认带入html格式

pychram文件上，会自动显示pycahrm、和我电脑上安装的浏览器图标：

写一个简单的html文件并执行

我们删掉上面文件中自带的默认html格式，写一个简单的程序并执行

如下：

<h1>hello, i am html file </h1>

执行html文件的三种方式：

● 在pycharm直接运行代码

● 在py文件中，直接点击右侧的浏览器图标

● 或者在文件夹中找到该py文件 -> 右键打开方式，选择电脑上的任意浏览器

效果如下：

浏览器是html的解释器，负责显示

即便电脑没有网络依然可以直接显示内容，就相当于浏览器打开的是一个本地文件

html文件注释的格式

在html文件中，注释与pycharm有所不同，默认的注释格式如下：

单行注释：/* 内容 */

多行注释：

2. html文件结构：

为什么要了解html的文件结构？

如果我们像上面一样，把html文件的内容，换成中文，并执行后会怎么样呢？

<h1>hello, 我叫王小明 </h1>

可以看到，文件被执行后，浏览器显示的hell后面的中文，变成了乱码

所以，我们需要遵循html的标准文件结构：

●`<!DOCTYPE html>` 告诉浏览器使用什么样的`html`或者`xhtml`来解析`html`文档。

目前基本是html比较通用，所以就无脑的写上html万无一失。

●`<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 `HTML `文档，在它们之间是文档的头部`<head>`和主体`<body>`。

● <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

● `<title></title>`定义网页标题，在浏览器标题栏显示。

● `<meta charset="UTF-8"> ` 声明编码方式用utf8。

● `<body></body>`之间的文本是可见的网页主体内容，可以有很多个body。

3. html标签语法：

标签的两种形式：

闭合标签：

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

        ★ 属性为键值对，可以写若干个属性，多个属性以空格作为分隔

        ★ 闭合标签有文本内容

自闭合标签：

<标签名属性1=“属性值1” 属性2=“属性值2”…… />

        ★ 属性为键值对，可以写若干个属性，多个属性以空格作为分隔

        ★ 自闭合标签没有文本

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签示例</title>
</head>
<body>

</body>
<h1>小明</h1>     #闭合标签，有</h1>结尾
<h1>帅哥</h1>  
<img src = "">    #自闭合标签
</html>

> 1、HTML标签是由尖括号包围的特定关键词（不能自己随意指定）
>
> 2、标签分为闭合和自闭合两种标签
>
> 3、HTML不区分大小写
>
> 4、标签可以有若干个属性,也可以不带属性,比如<head>就不带任何属性；但有些标签必须带属性，例如src，必须写一个图片源
>
> 5、标签可以嵌套,但是不可以交叉嵌套

标签的分类汇总：

标签分为以下两类

❶ 块级标签(block)：特点如下

        ● 独占一行

        ● 可设置长宽

        ★ 块级标签有：h1~h6、<p></p>、<div></div>



❷ 内联标签(inline)：特点如下

        ● 不独占一行，按内容占比

        ● 不可设置长宽

        ★ 内联标签有：<b></b>、<strong></strong>、<i></i>、<em></em>、特殊符号、<span></span>

HTML-标签-关键词汇总：

关键词：表示特定含义的一个英语单词

☛ 文字性内容：h1，h2，h3，h4，h5，a，p

☛ 链接：href

☛ 落/块：div，section，nav

☛ 表格内容：tb(表格)，li(表格的一行)，ul(表格的一格)

☛ 图片/音视频：img(图片)，audio(声音)，video(音频）

☛ 表单：form(表单)，input(输入框)，select(选择框)，option(选择框)

html基本标签

(1) 标题标签

标题标签，类似word里的标题级数，h1~h6都属于标题标签

<h1></h1>：表示1级标题，最黑最粗的

<h2></h2>：表示2级标题，粗度次之

以此类推，可根据需要选择；

每个h标签都是一个块级标签，独占一行

示例如下：

(2) 换行标签：

我们在编写html文件时，无论有多少个空格、换多少行

执行后，浏览器都只会默认显示一个空格，如下：

so，当我们想要展示出换行效果怎么办呢？

这时候，就需要用到换行标签：<br>即break的简称，效果如下：

(3) 段落标签：

像写作文一样，我们需要分段落展示一首诗，让每行的间隙不那么紧凑

这时候就可以加上段落标签：<p>内容</p>

<p></p>标签也属于块级标签，不仅可以换行，还能时行与行的间隙变大，如下：

(4) 文本格式化标签：

加粗效果

比如：像word中，我们经常会把某些字进行加粗设置

html中也可以进行内容加粗，可以使用：<b></b>、<strong></strong>

它们都属于内联标签，只加粗、不换行

效果如下：

倾斜效果

比如：像word中，我们经常会把某些字进行倾斜设置

html中也可以进行倾斜加粗，可以使用：<i></i>、<em></em>

它们都属于内联标签，只倾斜、不换行

效果如下：

★★标签嵌套：

如果我们想要让内容呈现出又粗又斜，怎么办呢？

此时，就可以进行标签嵌套：

可以在p标签里嵌套i标签，也可以返过来，效果是一样的：

标签嵌套的规则

● 块级标签：可以嵌套块级标签，也可以嵌套内联标签

● 内联标签：只能嵌套内联标签

大部分情况如上

● 特殊情况：p标签例外

(5) 特殊符号：

html中特殊符号非常多，可自行百度查询

上面了解到，html中无论多少个空格，呈现的效果都只会有一个空格

那么，如果我们就想要显示5个空格，怎么办？

加空格：可以使用&bnsp; 几个空格写几个&bnsp;

注册符：可以使用®

效果如下：

html常用标签

(1) 超链接--a标签：

超链接是浏览者和服务器的交互的主要手段，也叫超级链接或a链接（<a>标签），是网页中指向一个目标的连接关系，这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。

例如：我们指定href的值为百度的网址，浏览器中就会显示“百度”两个字，并且带下划线

当我们在浏览器中点击“百度”，浏览器就会自动帮我们访问百度，它会覆盖原来的窗口：

a标签属性

❶ href属性：

● href是超链接最重要的属性，规定了用户点击链接以后的跳转目标，这个目标可以是网络连接，也可以是本地连接。
>
● 网络链接指的是依靠网络来进行关联的地址，一般在地址前面是以 http://或者https://这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标。
>
● 本地链接跳转指的是本地计算机的地址，一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的，不需要经过网络。
>
●如果href的值留空，则默认是跳转到当前页面，也就是刷新当前页面。

❷ title属性：链接的提示信息

❸ target _blank：在新建窗口中打开网页

一个简单的超链接实例：

a标签中，除了href，还可以添加其他属性

例如：加上target属性，这样就在浏览器中就不会覆盖原有窗口

(2) img标签：

img标签属性

❶ src属性：
● 指定图像的URL地址，是英文source的简写，表示引入资源。
● src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
● 如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。

>

❷ alt属性：

        ● 指定图像无法显示时的替换文本。

        ● 当图像显示错误时，在图像位置上显示alt的值。

        ● 就是谷歌浏览器中，引入图像失败后，显示了替换文本。

        ● alt属性一般   作为SEO优化的手段之一，所以，使用了img标签就需要加上alt属性。

>
❸ width属性：指定引入图片的显示宽度。
❹ height属性：指定引入图片的显示高度。
❺ border属性：指定引入图片的边框宽度，默认为0。
❻ title属性：悬浮图片上的提示文字。

远程添加img

当我们想要浏览器中展示一个图片的时候，就需要用到img标签

例如：我找到一张小黄人图片，将图片地址放在src里，打开html文件后即会显示该图片：

还可以再img标签中，添加尺寸设置：

如height：设置高、width：设置宽度

本地上传添加img

上面的img示例都是从服务器上远程拿到的，为了避免网上图片下架找不到，我们运行乘除后也无法显示，我们还可以从本地上传。

最简单的方式，我们将图片下载下来，把图片与要执行的py文件放在同一个路径下，直接写入图片名即可：

属性alt的作用：当图片地址错误的时候，可以添加报错提示

例如：我把小黄人的地址，少写一个字符，并设定alt提示为“not found”，效果如下：

a标签与img的嵌套：

举个栗子：

我们想要点击小黄人图片的时候，让它跳转到京东

那么只需要在上面的img标签外层加上a标签，并且指定href为京东的url即可：

(3) 列表标签：

前端列表标签分为两种：

❶ ul：(unorder list)无序列表

展示的效果是：有一个间隔+实心圆+空格

❷ ol：(order list)有序列表

展示的效果是：每一行内容前有1个索引

li：(list item)表示列表元素，不论是ul还是ol都必须结合li使用，li也不能单独使用

两种列表效果如下：

(4) tabel表格：

在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样，都是有行有列的。HTML使用tr标签定义行，使用td标签定义列。

●`<table>`和`</table>`表示一个表格的开始和结束。一组`<table>...</table>`表示一个表格。
>
● border用于设置整个表格的边框宽度，默认为0，表示不显示边框。
>
● `<tr>`和`</tr>`表示表格中的一行的开始和结束。一组`<tr>...</tr>`，一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。
>
● `<td>`和`</td>`表示表格中的一个单元格的开始和结束。

通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了。

**table属性

属性	值	描述
width	px、%	规定表格的宽度
height	px、%	规定表格的高度
align (http://www.w3school.com.cn/tags/att_table_align.asp)	left、center、right	规定表格相对周围元素的对齐方式
bgcolor (http://www.w3school.com.cn/tags/att_table_bgcolor.asp)	rgb(x,x,x)、#xxxxxx、colorname	规定表格的背景颜色
background	url	规定表格的背景图片
border (http://www.w3school.com.cn/tags/att_table_border.asp)	px	规定表格边框的宽度
cellpadding (http://www.w3school.com.cn/tags/att_table_cellpadding.asp)	px、%	规定单元格边框与其内容之间的空白
cellspacing (http://www.w3school.com.cn/tags/att_table_cellspacing.asp)		规定单元格之间的空隙

td属性

表格中除了行元素以外，还有单元格，单元格的属性和行的属性类似。td和th都是单元格。

属性	值	描述
width	px、%	规定表格的宽度
height	px、%	规定表格的高度
align (http://www.w3school.com.cn/tags/att_table_align.asp)	left、center、right	规定表格相对周围元素的对齐方式
valign	top、middle、bottom	规定单元格内容的垂直对齐方式
bgcolor (http://www.w3school.com.cn/tags/att_table_bgcolor.asp)	rgb(x,x,x)、#xxxxxx、colorname	规定表格的背景颜色
background	url	规定单元格的背景图片
rowspan	number	规定单元格合并的行数
colspan	number	规定单元格合并的列数

简单的tabel表格示例

想要展示单元格合并效果，只需要在其中一行td标签中加上rowspan属性即可：

当然，在实际前端开发过程中，有封装好的方法，可以让表格呈现的更好看，比如CSS

★★★(5) form表单：

表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁。

表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。

当用户输入好数据后，提交时就可以携带表单数据提交到服务器端。

表单的基本组成

一个表单元素有三个基本组成部分：

* 表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。

>

* 表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。

>

* 表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

简单的form表单示例

比如，我们想写一个登陆页面，以form表单形式呈现

以下是加上常用的一些input属性，模拟一个表单注册页面：

在客户端点击“提交”时，是浏览器帮我们按照http协议的格式，将字符串组装键值对：

例如：

input标签中，将{user:输入的小明}组成键值对

input标签中，将{pwd:输入的123}组成键值对

input标签中，将复选框以&组成2个键值对

以post/get请求发给指定的服务器（代码中的ip:端口号），服务器验证后返回更新提交页面

常用的下拉框：<selcet><option>

form标签属性

属性	值	描述
action	访问服务器地址	服务器端表单处理程序的URL地址
method	默认值：post、get	表单数据的提交方法
target	参考超链接的target属性	表单数据提交时URL的打开方式
enctype	默认值]：application/x-www-form-urlencoded	用于文件上传
text/plain	用于纯文本数据发送	表单提交数据时的编码方式

★★★(6) div标签

div标签概述

iv是"division"的缩写，意为分割或划分。它是一个通用的块级元素，常用于将网页内容划分为独立的部分或容器，使得页面更加有组织和结构化。

基本上网页的标签中div占比90%以上，使用非常高频。

div属于块级标签。

div标签的使用

#包裹在body里面：
<div>好好学习，天天向上！</div>

div标签的用途

div的用途多种多样，以下是几个常见的用途：

● 布局控制：通过使用div，你可以将网页内容划分为不同的区块，使得更容易进行布局控制。比如，将网页分为页头、侧边栏、内容区域和页脚，可以用不同的div来组织这些部分，并对每个部分进行样式设置。

>

● 样式控制：使用div可以为一组相关的元素应用相同的样式规则。通过给div设置class或id属性，你可以在CSS中选择这些div，并对其内部的元素进行样式设置。这种组织结构能够提高样式的复用性和可维护性。

>

● JavaScript操作：使用div可以更方便地对一组元素进行JavaScript操作。通过选择特定的div，你可以获取或改变其内部的元素，或者为这些元素添加事件处理程序，实现丰富的交互功能。

F12标签/元素查找快捷键

打开开发者工具 -> 元素(element)中，你会发现有一堆密密麻麻的前端代码，如何找到我们想要的东西呢？

>

例如：我们想找到百度首页的input输入框

在元素(element) -> 点击左上角的小箭头 ->只需要滑动网页，它就会自动帮我们定位到对应的input代码行，可以看到有浅灰色标识，同时输入框中也有阴影及标签名显示。

(7) span标签

span标签属于内联标签，没有任何样式

使用效果如下：

糯米不开花ぴ

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端基础 -- html知识汇总

HTML，即超文本标记语言（HyperText Markup Language ]），由SGML (标准通用标记语言) 发展而来，也叫web页面。扩展名是 .html 或是 .htm。* HTML，是一种用来制作网页的标准标记语言。超文本，指的就是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、链接等元素。* HTML 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。简单说：html是超文本标签语言，程序运行之后负责内容显示、负责网页上有什么显示什么。
复制链接

扫一扫