python笔记（二十）：HTML_python中html标志是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/baikai666/article/details/132442483

本文介绍了HTML的基础概念，包括其作为标记语言的作用，标签的结构（如开始和结束标签、属性、DOCTYPE声明），head和body标签的用途，以及元素的分类（块级和内联）、标题、链接、表单和图像的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过链接了解对html的一些简单的认识，那么先简单概述一下

HTML概念

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: H yper T ext M arkup L anguage
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套 标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML文档通过web浏览器来解析,显示所写内容
HTML文档的后缀名一般是.html(推荐)

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由 尖括号 包围的关键词，比如
HTML 标签通常是 成对出现 的，比如和
标签对中的第一个标签是 开始标签 ，第二个标签是 结束标签
开始和结束标签也被称为 开放标签 和 闭合标签
有一些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签:例如
换行
下划线

<标签>内容<``/``标签>

—|—

HTML标签属性

通常是以键值对形式出现的. 例如 name=“alex”
属性只能出现在开始标签或自闭和标签中.
属性名字全部小写. *属性值必须使用双引号或单引号包裹例如 name=“alex”
如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

<!DOCTYPE>标签声明

声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的

上述对HTML有了一些简单的认识,那么可以看一下简版html文档树形结构图(如图参考)

由图可得,根元素html分为俩部分元素head和元素body,又基于这俩部分进行一些甚至更多的拓展

又例如在IDE工具pycharm新建一个html文件,可以看到pycharm会为这个文件默认添加一些内容,即必须要有的。

接下来对head和body这俩部分进行阐释

head标签

标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

如图可得head标签下面有俩条内容,那么它们是什么呢?

下面这些标签可用在 head 部分(详情可点击)：, , ,

定义文档的标题，它是 head 部分中唯一必需的元素。

提示：应该把标签放在文档的开始处，紧跟在后面，并处于标签或标签之前。

提示：请记住始终为文档规定标题！

如题,下面代码简单阐释了下head头部信息的一些标签(当然还有其它的)

<!``DOCTYPE html> # 声明

<``html lang="en">

<``head``> # 头部信息,包含的数据并不会真正作为内容显示给用户

``<``meta charset="UTF-8"> # 如果有中午,设定一下编码格式

``<``title``>病毒尖er</``title``> # 标题描述

`` # 此代表刷新的概念,即过俩秒跳转到指定的url

``<``meta http-equiv="Refresh" content="2"> # 即每俩秒自动刷新

``<``meta name="keywords" content="管道工,超级马里奥"> # 搜索关键词

``<``meta name="description" content="马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤、还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色"> # 描述内容

``<``link rel="icon" href="马里奥.ico"> # 标题图片

</``head``>

<``body``> # body标签里面所包含是真正呈现给用户的数据

``<``h1 style="color: chartreuse">我是修水管的马里奥</``h1``>

</``body``>

</``html``>

—|—

body标签

所有标签统分为块级和内联

块级标签

HTML块级通过标签

来定义,以上标签可以称之为块级标签

注释：

是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。

提示：请使用

元素来组合块级元素，这样就可以使用样式对它们进行格式化。

内联标签

提示：请使用来组合行内元素，以便通过样式来格式化它们。

注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

基本标签

块级标签：

内联标签：

特殊符号有很多很多,例如 &lt 小于 &gt 大于 &copy 版权, 更多点击

标题

HTML标题通过标签

-

来定义

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

<``body``>

``<``h1 style="color: chartreuse">我是修水管的马里奥</``h1``>

``<``h2``>我</``h2``>

``<``h3``>我</``h3``>

``<``h4``>我</``h4``>

``<``h5``>我</``h5``>

``<``h6``>我</``h6``>

</``body``>

—|—

注释: 浏览器会自动地在标题的前后添加空行。

换行

换行的方式有俩种

和

(段落换行)有俩个作用 **换行** 和 **隔行** 定义一个段落

<``body``>

``<``h1 style="color: chartreuse">我是修水管的马里奥</``h1``>

``<``p``>我靠吃蘑菇成长</``p``>

``<``p``>特征是大鼻子、头戴帽子、身穿背带裤、还留着胡子.</``p``>

``<``p``>与我的双胞胎兄弟路易基一起，我们长年担任任天堂的招牌角色.</``p``>

</``body``>

—|—

只是单纯的换行

<``body``>

``<``h1 style="color: chartreuse">我是修水管的马里奥</``h1``>

``<``br``/>我靠吃蘑菇成长

``<``br``/>特征是大鼻子、头戴帽子、身穿背带裤、还留着胡子.

``<``br``/>与我的双胞胎兄弟路易基一起，我们长年担任任天堂的招牌角色.

</``body``>

—|—

如图

水平线

HTML水平线通过标签

来定义

<``body``>

``<``h1 style="color: chartreuse">我是修水管的马里奥</``h1``>

``<``hr``/>

</``body``>

—|—

注释

HTML注释通过标签

—|—

链接

HTML 链接通过标签来定义

<a href``=``"http://www.cnblogs.com/leguan1314"``>病毒尖er博客<``/``a>

—|—

<``a href="http://www.cnblogs.com/leguan1314" target="_blank">病毒尖er博客</``a``> 在新的标签页中打开

—|—

上面叙述的是文本超链接,也可以通过图像进行点击超链接(如题,就可以通过1.jpg这张图像可以访问到百度的主页)

<``body``>

<``p``>

您也可以使用图像来作链接：

<``a href="https://www.baidu.com">

<``img border="0" src="1.jpg"/>

</``a``>

</``p``>

</``body``>

—|—

也有另外一个作用,锚的概念

例如链接到同一页面的某个位置(也可以通过一个箭头返回顶部的图像返回页面顶部)

+ View Code

图像

HTML 图像通过标签来定义

—|—

img 表示创建一个图片对象
src 表示图片的路径
width 图片的宽度
height 图片的高度
alt 图片没有加载成功的提示
title 鼠标悬浮时的提示信息(当然还有其它的属性)

表单标签(form)

HTML表单通过标签来定义

input ，可以理解为输入属性，input属性type=“如下”

text 文本输入
password 密文输入
checkbox 多选框
radio 单选框
file 上传文件，form表单需要加上属性enctype=“multipart/form-data”
reset 重置;即所填写的内容进行清空操作
submit 提交按钮
button 按钮;需要配合js使用

input类型补充(以下属性被设置在input类型中)

name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在cssjavascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.

select ，即下拉框

mutiple 多选
size 显示在页面的最大限制
name 提交项的键以上三个属性为select内的属性
option下拉选中的每一项属性：value:表单提交项的值. selected: selected下拉选默认被选中
optgroup 为每一项加上分组

textarea ，即文本编辑框

name: 表单提交项的键. 文本框内容即为提交的值
cols: 文本域默认有多少列
rows: 文本域默认有多少行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9LxSJTgV-1692748895261)(https://common.cnblogs.com/images/copycode.gif)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data">
    <h1 style="color: chartreuse">欢迎加入博客园</h1>
    用户 <input type="text" placeholder="手机号/邮箱/用户名"><br><br>
    密码 <input type="password" placeholder="密码"><br><br>
    喜好 音乐<input type="checkbox"> 电影<input type="checkbox"><br><br>
    性别 男<input type="radio" name="sex" value="boy"> 女<input type="radio" name="sex" value="girl">
    <p><input type="file" name="filename"></p>
    <input type="button" value="注册">
    <input type="submit" value="注册">
    <input type="reset" value="重置"><br><br>

    山西省 <select name="sx" id="" size="1" multiple>
            <optgroup label="山西省">
                <option value="jc">晋城</option>
                <option value="ll">吕梁</option>
                <option value="dt">大同</option>
                <option value="ty">太原</option>
                <option value="cz">长治</option>
                <option value="jz">晋中</option>
                <option value="yc">运城</option>
                <option value="gp">高平</option>
            </optgroup>
          </select>

    个人简历 <textarea name="desc" cols="30" rows="10">个人简历</textarea>

</form>
</body>
</html>