当前位置：首页 > news >正文

1-前端基本知识-HTML

news 2025/11/26 3:24:02

1-前端基本知识-HTML

文章目录

1-前端基本知识-HTML
总体概述
什么是HTML？
- 超文本
- 标记语言
HTML基础结构
- 文档声明
- 根标签
- 头部元素
- 主体元素
- 注释
HTML概念词汇：标签、属性、文本、元素
HTML基本语法规则
HTML常见标签
- 标题标签
- 段落标签
- 换行标签
- 列表标签
- 超链接标签
- 多媒体标签
- 表格标签(重点)
- 表单标签(重点)
- 常见表单项标签(重点)
- 布局相关标签
- 特殊字符

总体概述

语言	作用
HTML	主要用于网页主体结构的搭建（页面元素和内容）
CSS	主要用于页面的美化（页面元素的外观、位置、颜色、大小）
JavaScript	主要用于页面元素的动态处理（交互效果）

什么是HTML？

HTML是Hyper Text Markup Language的缩写，意思是超文本标记语言

超文本

HTML文件本质上是文本文件
普通的文本文件只能显示字符，但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式
超文本就是：本身是文本，但是呈现出来的最终效果超越了文本

标记语言

HTML是由一系列标签组成的，每个标签都有它固定的含义和确定的页面显示效果
不像编程语言一样，HTML只有标签，没有变量、常量、流程控制等

HTML基础结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>我的第一个网页</title></head><body>hello html!!!</body>
</html>

文档声明

HTML文件第一行内容

HTML文档声明有两类：HTML4和HTML5（现在用）

HTML4的文档声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML5的文档声明
```
<!DOCTYPE html>
```

根标签

整个文档的根标签，其他所有标签都要放到里面

<html lang="en">.......
</html>

头部元素

用于定义文档的头部，其他头部元素都放在head标签里

头部元素包括title标签、script标签、style标签、link标签、meta标签等

<html lang="en">.......
</html>

主体元素

body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内

注释

<!-- 注释内容 -->

HTML概念词汇：标签、属性、文本、元素

概念	解释
标签	代码中的一个 <> 叫做一个标签，有些标签成对出现，称之为双标签（一个叫开始标签；一个叫结束标签）；有些标签单独出现，称之为单标签
属性	一般在开始标签中，用于定义标签的一些特征
文本	双标签中间的文字，包含空格换行等结构
元素	经过浏览器解析后，每一个完整的标签（标签+属性+文本）可以称之为一个元素

HTML基本语法规则

1 根标签有且只能有一个
2 无论是双标签还是单标签都需要正确关闭
3 标签可以嵌套但不能交叉嵌套
4 注释语法为，注意不能嵌套
5 属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值
6 HTML中不严格区分字符串使用单双引号
7 HTML标签不严格区分大小写，但是不能大小写混用
8 HTML中不允许自定义标签名，强行自定义则无效

HTML常见标签

标题标签

一般用于在页面上定义一些标题性的内容，如新闻标题，文章标题等，有h1到h6六级标题

<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>

段落标签

一般用于定义一些在页面上要显示的大段文字，多个段落标签之间实现自动分段的效果

<body><p>记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。</p><p>工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。</p><p> 近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。</p>
</body>

换行标签

单纯实现换行的标签是br，如果想添加分隔线，可以使用hr标签

<body>工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。<br>国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。<hr>中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>

列表标签

有序列表：分条列项展示数据的标签，其每一项前面的符号带有顺序特征

<ol><li>JAVA</li><li>前端</li><li>大数据</li>
</ol>

无序列表：分条列项展示数据的标签，其每一项前面的符号不带有顺序特征

<ul><li>JAVASE</li><li>JAVAEE</li><li>数据库</li>
</ul>

嵌套列表：有序列表和无序列表嵌套

<ol><li>JAVA<ul><li>JAVASE</li><li>JAVAEE</li><li>数据库</li></ul></li><li>前端</li><li>大数据</li>
</ol>

超链接标签

点击后带有链接跳转的标签，也叫作a标签

href属性用于定义连接

href中可以使用绝对路径，以/开头，始终以一个固定路径作为基准路径作为出发点
href中也可以使用相对路径，不以/开头，以当前文件所在路径为出发点
href中也可以定义完整的URL

target用于定义打开的方式

_blank 在新窗口中打开目标资源
_self 在当前窗口中打开目标资源

<body><!-- href属性用于定义连接href中可以使用绝对路径，以/开头，始终以一个路径作为基准路径作为出发点href中也可以使用相对路径，不以/开头，以当前文件所在路径为出发点href中也可以定义完整的URLtarget用于定义打开的方式_blank 在新窗口中打开目标资源_self  在当前窗口中打开目标资源--><a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a> <br><a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br><a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br></body>

多媒体标签

img（重点）图片标签，用于在页面上引入图片

<!-- src用于定义图片的连接title用于定义鼠标悬停时显示的文字alt用于定义图片加载失败时显示的提示文字
--> <img src="img/logo.png"  title="尚硅谷" alt="尚硅谷logo" />

audio音频标签，用于在页面上引入一段声音

<!-- src用于定义目标声音资源autoplay用于控制打开页面时是否自动播放controls用于控制是否展示控制面板loop用于控制是否进行循环播放
--> 
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />

video视频标签，用于在页面上引入一段视频

<body><!-- src用于定义目标视频资源autoplay用于控制打开页面时是否自动播放controls用于控制是否展示控制面板loop用于控制是否进行循环播放--> <video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>

表格标签(重点)

常规表格

table标签：代表表格
thead标签：代表表头，可以省略不写
tbody标签：代表表体，可以省略不写
tfoot标签：代表表尾，可以省略不写
tr标签：代表一行
td标签：代表行内的一格
th标签：自带加粗和居中效果的td

<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table  border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分数</th></tr><tr><td>1</td><td>张小明</td><td>100</td></tr><tr><td>2</td><td>李小东</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr>
</table>

单元格跨行

通过td的rowspan属性实现上下跨行

<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table  border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分数</th><th>备注</th></tr><tr><td>1</td><td>张小明</td><td>100</td><td rowspan="3">前三名升职加薪</td></tr><tr><td>2</td><td>李小东</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr>
</table>

单元格跨列

通过td的colspan属性实现左右的跨列

    <h3 style="text-align: center;">员工技能竞赛评分表</h3><table  border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分数</th><th>备注</th></tr><tr><td>1</td><td>张小明</td><td>100</td><td rowspan="6">前三名升职加薪</td></tr><tr><td>2</td><td>李小东</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr><tr><td>总人数</td><td colspan="2">2000</td></tr><tr><td>平均分</td><td colspan="2">90</td></tr><tr><td>及格率</td><td colspan="2">80%</td></tr></table>

效果

1681197299564

表单标签(重点)

可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一

   <form action="http://www.atguigu.com" method="get">用户名 <input type="text" name="username" /> <br>密&nbsp;&nbsp;&nbsp;码 <input type="password" name="password" /> <br><input type="submit"  value="登录" /><input type="reset"  value="重置" /></form>

form标签：表单标签，其内部用于定义可以让用户输入信息的表单项标签

action，属性之一，用于定义信息提交的服务器的地址
method，属性之一，用于定义信息的提交方式
- get方式，数据会缀到url后，以?作为参数开始的标识，多个参数用&隔开
- post方式，数据会通过请求体发送，不会在缀到url后

input标签：主要的表单项标签，可以用于定义表单项

name，属性之一，用于定义提交的参数名
type，属性之一，用于定义表单项类型
- text，文本框
- password，密码框
- submit，提交按钮
- reset，重置按钮

常见表单项标签(重点)

单行文本框

个性签名：<input type="text" name="signal"/><br/>

密码框

密码：<input type="password" name="secret"/><br/>

单选框

你的性别是：
<input type="radio" name="sex" value="spring" />男
<input type="radio" name="sex" value="summer" checked="checked" />女

name属性相同的radio为一组，组内互斥
当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
设置checked="checked"属性设置默认被选中的radio
如果属性名和属性值一样的话，可以省略属性值，只写checked即可

复选框

你喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利

设置checked="checked"属性设置默认被选中的checkbox

下拉框

你喜欢的运动是：
<select name="interesting"><option value="swimming">游泳</option><option value="running">跑步</option><option value="shooting" selected="selected">射击</option><option value="skating">溜冰</option>
</select>

下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
name属性在select标签中设置，value属性在option标签中设置。
option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
通过在option标签中设置selected="selected"属性实现默认选中的效果。

按钮

<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>

普通按钮: 点击后无效果，需要通过JavaScript绑定单击响应函数
重置按钮: 点击后将表单内的所有表单项都恢复为默认值
提交按钮: 点击后提交表单

隐藏域

<input type="hidden" name="userId" value="2233"/>

通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。

多行文本框

自我介绍：<textarea name="desc"></textarea>

textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

文件标签

头像:<input type="file" name="file"/>

不同浏览器显示的样式有微小差异

布局相关标签

div标签：俗称"块"，主要用于划分页面结构，做页面布局

span标签：俗称"层"，主要用于划分元素范围，配合CSS做页面元素样式的修饰

    <div style="width: 500px; height: 400px;background-color: cadetblue;"><div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;"><span style="color: blueviolet;">页面开头部分</span></div> <div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;"><span style="color: blueviolet;">页面中间部分</span></div> <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;"><span style="color: blueviolet;">页面结尾部分</span></div> </div>

特殊字符

对于有特殊含义的字符，需要通过转移字符来表示

该类字符对大小写敏感
有数学符号、希腊字母、其他等字符

    &lt;span&gt;  <br>&lt;a href="http://www.atguigu.com"&gt;尚&nbsp;硅&nbsp;谷&lt;/a&gt; <br>&amp;amp;

1-前端基本知识-HTML

1-前端基本知识-HTML 文章目录 1-前端基本知识-HTML总体概述什么是HTML？超文本标记语言 HTML基础结构文档声明根标签头部元素主体元素注释 HTML概念词汇：标签、属性、文本、元素HTML基本语法规则HTML常见标签标题标签段落标签换行标签列表标签超链接标签…...

编程日记 2023/11/10 19:07:27

磁盘的分区、格式化、检验与挂载 ---- fdisk，mkfs，mount

磁盘的分区、格式化、检验与挂载磁盘管理是非常重要的，当我们想要再系统里面新增一块磁盘使用时，应执行如下几步： 对磁盘进行划分，以建立可用的硬盘分区 （fdisk / gdisk）对硬盘分区进行格式化&#xff0…...

编程日记 2023/11/10 19:06:27

Solr搜索参数详解

Solr 页面搜索 1.1 基本查询参数意义q查询的关键字，此参数最为重要，例如，qid:1，默认为q:，fl指定返回哪些字段，用逗号或空格分隔，注意：字段区分大小写，例如，…...

编程日记 2023/11/10 19:05:26

Flink（三）【运行时架构】

前言今天学习 Flink 的一些原理性的东西，比较偏概念，但是十分重要。有人觉得上来框框敲代码才能学到东西，那是狗屁不通的道理（虽然我以前也这么认为）。个人认为，学习 JavaEE那些框架，你上来就敲…...

编程日记 2023/11/10 19:04:24

一、conda下载 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 显示所有channel conda config --show channels 二、添加清华镜像源 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config --add channels https://…...

编程日记 2023/11/10 19:02:22

「Verilog学习笔记」求两个数的差值

专栏前言本专栏的内容主要是记录本人学习Verilog过程中的一些知识点，刷题网站用的是牛客网 timescale 1ns/1ns module data_minus(input clk,input rst_n,input [7:0]a,input [7:0]b,output reg [8:0]c );always (posedge clk or negedge rst_n) begin if (~rst_…...

编程日记 2023/11/10 19:00:19

微头条项目实战：通过postman测试登录验证请求

1、CrosFilter package com.csdn.headline.filters; import jakarta.servlet.*; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException; public class CrosFilter implements Filter {/*** 过滤器方法，用于处理HTTP请求* param servletReq…...

编程日记 2023/11/10 18:59:17

ARCGIS SERVER WMS、WFS服务添加过滤条件

我们知道geoserver中的wms，wfs过滤参数为cql_filter。比如过滤字段“mc”为"恒宇花园"的数据: cql_filtermc‘恒宇花园但是arcgis server有所不同。具体可以看下它的标准：使用 WMS 请求中的 layerDefs 参数过滤要素—文档 | ArcGIS Enterpris…...

编程日记 2023/11/10 18:58:16

2013年108计网

第33题在 OSI 参考模型中, 下列功能需由应用层的相邻层实现的是()A. 对话管理B. 数据格式转换C. 路由选择D. 可靠数据传输很显然，题目所问的应用层的相邻层是表示层。该层实现与数据表示相关的功能。选项a中的对话管理属于会话层。选项c中的路由选择属于网络层。…...

编程日记 2023/11/10 18:57:15

【数据结构】单链表OJ题(一)

🔥博客主页： 小羊失眠啦. 🎥系列专栏：《C语言》《数据结构》《Linux》《Cpolar》 ❤️感谢大家点赞👍收藏⭐评论✍️ 文章目录前言一、移除链表元素二、寻找链表中间结点三、输出链表倒数第k个结点四、反转单链表五…...

编程日记 2023/11/10 18:56:13

2023年云计算发展趋势浅析

云计算的概念云计算是一种通过互联网提供计算资源和服务的模式。它允许用户通过网络访问和使用共享的计算资源，而无需拥有或管理这些资源的物理设备。云计算的核心理念是将计算能力、存储资源和应用程序提供给用户，以便随时随地根据需要…...

编程日记 2023/11/10 18:55:13

[极客大挑战 2019]Http1

打开题目没有发现什么，我们查看源代码在这里我们发现了提示访问一下页面得到提示说不能来自于https://Sycsecret.buuoj.cn，我们尝试访问一下这个url 发现访问不了我们bp抓包一下伪造个referer头 referer:https://Sycsecret.buuoj.cn 发包过去…...

编程日记 2023/11/10 18:54:12

C 语言 for循环

C 语言 for循环在本教程中，您将借助示例学习在C语言编程中创建for循环。在编程中，循环用于重复代码块，直到满足指定条件为止。 C语言编程具有三种循环类型： for 循环while 循环do… while 循环我们将在本教程中学习for循环…...

编程日记 2023/11/10 18:53:11

浅谈数据结构之链表

链表是一种灵活的数据结构，有单向链表、双向链表和循环链表等多种形式。在本文中，我们将深入探讨单向链表、双向链表、循环链表的定义、Java实现方式、使用场景，同时比较它们的不同之处。我们还会介绍链表与队列之间的区别。单向链表定义…...

编程日记 2023/11/10 18:52:10

封装一个虚拟列表渲染组件

组件代码 <template><div ref"list" class"infinite-list-container" scroll"scrollEvent($event)"><div class"infinite-list-phantom" :style"{ height: listHeight px }"></div><div class…...

编程日记 2023/11/10 18:51:09

Spring中@Bean标注的方法是如何创建对象呢？

Bean 标注的方法如何创建对象呢？ 参考文章：https://blog.csdn.net/qq_35971258/article/details/128241353 下边只讲一下 Bean 注解标注的方法，是如何去进行创建 bean，以及流程是怎样的，如果需要看源码具体执行流程&a…...

编程日记 2023/11/10 18:50:08

伦敦金股票代码是什么？

伦敦金是跟踪实时的现货黄金价格走势的差价合约交易，它的代码一般是LLG、GOLD，但也有一些货币交易平台会显示为XAU。伦敦金不是股票交易，因此没有四位数或六位数的股票代码，但伦敦金交易品种单一，投资者不用在数千支股…...

编程日记 2023/11/10 18:49:07

【环境装配】Anaconda在启动时闪现黑框，闪几次后仍能正常使用，解决黑框问题

anaconda闪黑框这个问题遇到好久了，也没找到相关资料来解决，今天做了两个更新，刚好可以不闪黑框了，记录一下。更新anaconda 在界面右上角的位置点击更新，更新完后再打开时只闪现两个黑框了，之前好像有五…...

编程日记 2023/11/10 18:48:05

【Python】Python爬虫使用代理IP的实现

前言在爬虫的过程中，我们经常会遇到需要使用代理IP的情况。比如，针对目标网站的反爬机制，需要通过使用代理IP来规避风险。因此，本文主要介绍如何在Python爬虫中使用代理IP。一、代理IP的作用代理IP，顾名思义&…...

编程日记 2023/11/10 18:47:04

盘点U-Mail邮件系统安全设计

在当今社会，电子邮件已经成企业沟通和信息传递重要的手段之一，是企业办公中不可或缺的一部分。但是由于企业邮件服务器端口对外开放、企业邮件安全管理能力不足、邮件内容敏感性高等特点，电子邮件也成为了网络攻击者进行网络钓鱼、恶意软件传…...

编程日记 2023/11/10 18:46:00

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

3.3.1_1 检错编码（奇偶校验码）

从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...

编程新知 2025/11/23 1:49:55

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法：原理、应用与企业场景高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...

编程新知 2025/11/17 1:20:02

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战：各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/11/22 15:00:24