复习HTML(基础）

devtools/2024/12/22 2:09:27/
htmledit_views">

目录

HTML含义

 HTML作用

HTML的常用元素

元素的特点

元素的分类

1 是否嵌套关系

2 是否独占一行

块元素：独占一行 

行内元素：共享一行 

行内元素与块级元素的转换

3是否有结束标签   

常用标签

1 标题标签：有六级 我们用h1 ~h6 表示

2 段落标签：

内容

 

3  图像标签:< img   src="  图片路径" > 是为了添加图片使用的

4 视频标签： 添加视频使用

5  列表

5.1 无序列表

5.2 有序列表

6 超链接 ：  内容

1 访问同目录下的网页

2 访问外部 网页

3  访问本地网页

7 标签  

 

8 表单 

主要表单标签

综合实例

前端

注意

value属性在不同type下的作用：

后端

思路

 

HTML含义

含义：HTML 是一门超文本标记语言

怎么理解这句话呢？我们把他拆开来，理解！

超文本：可以理解为： 超链接 <a >。我们在后面学习超链接 <a  > 时，通过超链接的方式，把每一个独立的网页串联起来，变成我们所熟知的网站。

标记：可以理解为：给事物打上记号，方便浏览器理解。在这里，我们使用各种元素注明文本、图片和其他内容。如标题，我们 有h1-h6  来表示；图片 ，我们用标签 img表示；视频 ，我们用标签 video表示等等。

总而言之;我们使用 各种元素 搭建 网页的内容 并通过超链接的方式 又使每一个网页相互之间存在某种联系，并最终被浏览器解析，执行。

 HTML作用

作用：定义网页的结构和赋予网页内容

如下图所示：最基本的网页框架

html"><!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>我的测试站点</title></head><body><p>这是我的页面</p></body>
</html>

如下图所示每一个部分的含义：

  1. <!DOCTYPE html>: 声明文档类型。早期的 HTML（大约 1991-1992 年）文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。文档类型使用类似于这样：

    HTMLCopy to Clipboard

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    文档类型是一个历史遗留问题，需要包含它才能使其他东西正常工作。现在，只需要知道 <!DOCTYPE html> 是最短的有效文档声明！
  2. <html></html>: <html> 元素。这个元素包裹了页面中所有的内容，有时被称为根元素。
  3. <head></head>: <head> 元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述、CSS 样式、字符集声明等等。以后的章节中会学到更多相关的内容。
  4. <meta charset="utf-8">: <meta> 元素。这个元素代表了不能由其他 HTML 元相关元素表示的元数据，比如 <base>、<link>、<script>、<style> 或 <title>。charset 属性将你的文档的字符集设置为 UTF-8，其中包括绝大多数人类书面语言的大多数字符。有了这个设置，页面现在可以处理它可能包含的任何文本内容。没有理由不对它进行设置，它可以帮助避免以后的一些问题。
  5. <title></title>: <title> 元素。这设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容。当页面被加入书签时，页面标题也被用来描述该页面。
  6. <body></body>: <body> 元素。包含了你访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。

HTML的常用元素

元素的组成：开始标签和结束标签 以及标签之间的内容组成

开始标签：（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。

内容：元素的内容，本例中就是段落的文本。

结束标签：（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。

如下图所示

c7ff15e8ad964876816f775a5eb05805.png

元素的特点

1 不区分大小写

2 字符串表示时 双引号，单引号都可以使用。但不能交替使用如 "11'。

元素的分类

1 是否嵌套关系

嵌套元素：把两元素相互嵌套，但不重叠，定义为嵌套元素。

你也可以把元素放到其他元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将 very 一词嵌套在 <strong> 元素中，意味着这个单词被着重强调：

html"><p>My cat is <strong>very</strong> grumpy.</p>

注意;元素和元素之间，不能重叠。

下面这行代码是错误的

html"><p>My cat is <strong>very grumpy.</p></strong>

 

2 是否独占一行

根据是否独占一行，定义为块元素 和行内元素

块元素：独占一行 

在HTML中，常见的块元素主要包括以下几种：

  1. 标题标签：<h1>至<h6>，这些标签用于定义HTML文档中的标题，<h1>表示最高级别的标题，而<h6>表示最低级别的标题。
  2. 段落标签：<p>，用于定义HTML文档中的段落。
  3. div标签：最典型的块元素，用于定义一个文档中的分区或节，常用于布局和样式化。
  4. 列表标签：包括无序列表<ul>、有序列表<ol>以及列表项<li>，用于创建HTML文档中的列表。
  5. 表格相关标签：如<table>（表格）、<tr>（表格行）、<th>（表格头单元格）等，虽然它们在现代网页设计中使用较少，但仍然属于块元素。
  6. 其他块元素：如<dl>（定义列表）、<dt>（定义术语）、<dd>（定义描述）、<hr>（水平线）等，这些标签在特定的HTML文档结构中也有应用。
  7. 块元素的特点包括：
  8. 独占一行，即每个块元素都会从新的一行开始，并在其后的内容之前结束。
  9. 可以设置宽度、高度、外边距以及内边距等CSS属性，这使得块元素在网页布局和样式化中具有更大的灵活性。

实例

html"><!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>1111111111</p> <p>1111111111</p></body>
</html>

打开浏览器，发现每一个块元素都独占一行

2c01f4194e1048d1b4c2530aa349f801.png

行内元素：共享一行 

以下是一些常见的行内元素及其用途：

  1. 文本相关元素：
    • <span>：用于对文本中的部分内容进行分组或应用样式。
    • <a>：用于创建超链接，可以链接到其他网页或同一网页内的其他位置。
    • <em>：表示强调的文本，通常呈现为斜体。
    • <strong>：表示语气更为强烈的强调文本，通常呈现为粗体。
    • <b>、<i>、<u>、<s>：分别用于设置文本的粗体、斜体、下划线和删除线效果。
    • <sup>、<sub>：分别用于设置上标和下标文本。
    • <code>、<pre>：用于表示代码或预格式化文本。
  2. 图像相关元素：
    • <img>：用于在HTML文档中嵌入图像。
    • <input type="image">：用于创建图像输入字段，通常用于提交表单时作为按钮使用。
  3. 表单相关元素：
    • <input>（type属性为text、button、checkbox、radio等）：用于创建文本输入字段、按钮、复选框和单选按钮等。
    • <select>：用于创建下拉列表。
    • <textarea>：用于创建多行文本输入字段。
    • <button>：用于创建可点击的按钮。
  4. 其他元素：
    • <label>：为表单元素定义标签。
    • <option>：用于定义下拉列表中的选项。
    • <iframe>：用于在当前HTML文档中嵌入另一个HTML文档。
    • <audio>、<video>：用于嵌入音频和视频内容。

行内元素与块级元素的转换

在CSS中，可以使用display属性来修改元素的显示类型，实现行内元素与块级元素之间的转换：

  • 将行内元素转换为块级元素：display: block;
  • 将块级元素转换为行内元素：display: inline;
  • 将元素转换为行内块级元素（既具有行内元素的特性，又可以设置宽度和高度）：display: inline-block;

这种转换在网页布局和样式化中非常有用，可以灵活地调整元素的显示方式和行为。

3是否有结束标签   

如果这个元素没有结束标签如  <img > ,<video>等 这些都没有结束标签，我们称为空元素

在标签中，根据有么有结束标签，分为单标签/双标签。

单标签：也称为空标签或自闭合标签，是由一个尖括号包围的标签，它没有结束标签。

在这里 单标签就是指 空元素。

6101a9b2dd434382966917fded880f63.png

我刚刚讲元素是由标签和标签所包含的内容组成，接下来讲常见的标签

常用标签

1 标题标签：有六级 我们用h1 ~h6 表示

实例

html"><!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>111111111111111</h1><h2>111111111111111</h2><h3>111111111111111</h3><h4>111111111111111</h4><h5>111111111111111</h5><h6>111111111111111</h6></body>
</html>

打开浏览器

aaf225692a0c4ef29888a37ffa727859.png

特点 ：大小依次降低

2 段落标签：<p > 内容</p>

实例

html"><!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- <h1>111111111111111</h1><h2>111111111111111</h2><h3>111111111111111</h3><h4>111111111111111</h4><h5>111111111111111</h5><h6>111111111111111</h6>-->
<p>1111111111111</p>
</body>
</html>

打开浏览器

4513230796ce4eb29605c102677b1719.png

3  图像标签:< img   src="  图片路径" > 是为了添加图片使用的

实例

src 表示当前标签的属性，查找图片时，需要的路径

html"><!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<img src="C:\Users\Administrator\Pictures\image\6.jpg">
</body>
</html>

打开浏览器

4f153da124f942ccaa47d5797db16552.png

4 视频标签：<video> 添加视频使用

55a7880b1a024a66b4580dec096c27c5.png

5  列表

5.1 无序列表

格式如下： <ul> <li>   </li>  </ul>

实例

html"><!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<!-- 无序列表--><ul><li>1</li><li>22</li><li>333</li></ul>
</body>
</html>

c7079b074c27475c8e17c340c9c72366.png

5.2 有序列表

格式：<ol><li>   </li></ol>

实例

html"><!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<!-- 有序列表--><ol><li>1</li><li>22</li><li>333</li></ol>
</body>
</html>

786942ca2e314c8ea08b344bc941a7fc.png

6 超链接 ：<a   href="  网页地址">  内容 </a>

超链接有三种应用方式

1 访问同目录下的网页

什么意思呢

假设，你创建了多个HTML文件，你想通过超链接跳转到其他网页中去

实例

7a484db6dfe74dc8bb6903ea8510c997.png

打开浏览器

bc8d367a56e34ffeb849d95575fbc2fc.png

2 访问外部 网页

举个例 ，你想要访问 文心一言的网页

实例

9199e78edb63469190c03a7f5f810de2.png

3  访问本地网页

实例

html"><!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>今天<a  href="#p1" >天气</a>怎么样？</p><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><p id="p1">天气真不错</p> </body>
</html>

从以上的代码，我们不难看出，如果我们 要看写在下面的p标签的内容，如果不使用超链接 ，是要使用鼠标一直的，但如果使用了超链接就更为方便。

思路：把“#p1" 作为锚点，当你点击时，会跳转到目标位置。

698d824322c74746b581b5328176502f.pngd2fd6c6546074beca93297b6a5042f0a.png

7 标签 <br>，  <hr>

<br> :换行符  <hr>:水平制表符

实例

d345131862bb4beeb4339b42e9809f4b.png

8 表单 

主要表单标签

  1. <form>标签

    • 作用：定义表单的整体区域，用于收集和传递用户信息。
    • 属性：
      • action：定义表单提交的服务器地址。
      • method：定义表单的提交方式，常用的有GET和POST两种。

  2. <input>标签

    • 作用：定义不同类型的用户输入数据方式，是最重要也是最全能的表单标签之一。
    • 属性：
      • type：定义输入字段的类型，如文本框（text）、密码框（password）、单选按钮（radio）、复选框（checkbox）、按钮（button）等。
      • name：定义提交的参数名，后台可以通过这个属性找到对应的表单。
      • value：定义提交的数据，对于文本框等输入型控件，value属性表示输入框的默认值；对于按钮等控件，value属性表示按钮上显示的文本。
      • checked：用于单选按钮和复选框，表示默认选中状态。

  3. <textarea>标签

    • 作用：定义多行文本输入的控件，允许用户输入大段文本。
    • 属性：
      • rows：设置文本区域的可见行数。
      • cols：设置文本区域的可见宽度（以像素为单位）。
      • maxlength：设置文本输入框的最大输入字数。
      • placeholder：定义文本输入框还未输入文本前框里的输入说明。

  4. <label>标签

    • 作用：为表单元素定义文字标注，提高用户交互体验。
    • 属性：
      • for：指定该标签与哪个表单元素关联，其值应与表单元素的id属性值相同。

  5. <select>标签

    • 作用：定义下拉列表，允许用户从多个选项中选择一个或多个值。
    • 属性：
      • name：定义提交的参数名。
      • 通常与<option>标签一起使用，<option>标签设置下拉列表中的各个选项。

  6. <button>标签

    • 作用：定义按钮控件，可以包裹更多类型的内容，如文本、图片等。
    • 属性：
      • type：定义按钮的类型，如普通按钮（button）、提交按钮（submit）、重置按钮（reset）。

 

  1.  

综合实例

问题：写一个表单 （名字，密码，日期，单选，多选）将这些信息上传给服务器（在idea中搭建spring boot 项目，接收来自前端发来的数据）

最终结果如下图所示：

5d04fc4d37694550b79909f7eba2faa4.png

c02ade10f6284e8b8460842eb39ad6c4.png

前端

注意

1 form标签中的，action 属性 ;定义表单提交的服务器地址；method 属性：定义表单提交的方式（如get :向服务器获取数据；post:向服务器发送数据）

2 在单选和多选都使用了 name 属性

原因：表示同一字段组，方便区分

3 checked ：表示单选或多选中的默认选项

4 value 表示默认值，

 

在HTML的<input>标签中，value属性扮演着关键角色，它的功能根据<input>标签的type属性值的不同而有所差异。

value属性在不同type下的作用：

  1. 文本输入（type="text"）:
    • value属性为文本输入框设定了默认值。当页面首次加载时，这个值会显示在输入框内，用户可以修改它。
  2. 密码输入（type="password"）:
    • 与文本输入类似，value属性为密码输入框设定了默认值，但出于安全考虑，这些字符在输入框中通常以圆点或星号等掩码字符显示。
  3. 单选按钮（type="radio"）和复选框（type="checkbox"）:
    • 对于这两种类型的输入，value属性定义了当该选项被选中时，表单数据中将包含哪个值。此外，checked属性可用于预设哪个选项在页面加载时就被选中。
  4. 提交按钮（type="submit"）、重置按钮（type="reset"）和普通按钮（type="button"）:
    • 在这些情况下，value属性定义了按钮上显示的文本。例如，一个提交按钮的value可能设为“提交”，而一个重置按钮的value可能设为“重置”。
  5. 隐藏输入（type="hidden"）:
    • 隐藏输入字段不会在页面上显示，但其value属性仍会随表单一起提交。这种类型通常用于传递不需要用户直接修改的数据。
  6. 文件选择（type="file"）:
    • 对于文件选择输入，value属性通常不由开发者直接设置，而是由用户通过文件选择对话框选定文件后自动填充。不过，出于安全和隐私的考虑，即使文件被选中，浏览器通常也不会在页面
    • 代码如下：

 

html"><!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form  action="http://localhost:8080/test" method="post" >用户 <input type="text"  name ='username'><br>密码 <input type="password" name="password"><br>日期 <input type="date" name="date"><br>男 <input  type="radio" name="sex"  value="男">  女 <input type="radio" name="sex"   value="女"><br><label>  Reading   <input type="checkbox" name="hobbies" value="reading" checked>  </label><label>  traveling <input type="checkbox" name="hobbies" value="traveling">  </label> <label>  Cooking   <input type="checkbox" name="hobbies" value="cooking">  </label>  <label>  Sports   <input type="checkbox" name="hobbies" value="sports">  </label> <br><input type="submit" value="提交"></form>
</body>
</html><!-- <input type="checkbox " name="ff"  value="唱歌"><input type="checkbox " name="ff"  value="跳舞"><input type="checkbox " name="ff"  value="游戏"> -->

后端

思路

1 在TestController 类中 通过@RequestMapping 注解 映射路径方式（找到服务器，并调用ff方法）向User类传递数据，并最终返回对象user

2 User类 中的 成员变量每一个都对应前端代码中的name，value（单选，多选）值

代码如下

 

//TestController 类中通过 @RequestMapping 注解 映射路径的方式，向服务器传递数据
package com.guoqing.controller;import com.guoqing.entity.User;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class TestController {@RequestMapping("/test")public User ff(User user) {return user;}}
// 在entity 实体包中 User类 中 对应前端发来的数据package com.guoqing.entity;import org.springframework.format.annotation.DateTimeFormat;import java.time.LocalDate;
import java.util.List;public class User{private String username;private String password;@DateTimeFormat(pattern = "yyyy-MM-dd")private LocalDate date;private String sex;private List<String> hobbies;public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public LocalDate getDate() {return date;}public void setDate(LocalDate date) {this.date = date;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public List<String> getHobbies() {return hobbies;}public void setHobbies(List<String> hobbies) {this.hobbies = hobbies;}@Overridepublic String toString() {return "User{" +"username='" + username + '\'' +", password='" + password + '\'' +", date=" + date +", sex='" + sex + '\'' +", hobbies=" + hobbies +'}';}
}

 

 


http://www.ppmy.cn/devtools/120133.html

相关文章

WIFI中的两个概念：TWT OFDMA

WIFI中的两个概念：TWT OFDMA

在wifi路由器中&#xff0c;会有这两个选项&#xff1a;TWT OFDMA可以选择关闭和打开。这是什么呢&#xff1f; 原来这两个&#xff0c;一个是节能的&#xff0c;一个是提高线路质量的。 在WiFi技术中&#xff0c;TWT&#xff08;Target Wake Time&#xff0c;目标唤醒时间&a…
阅读更多...
SSM整合：图书管理系统

SSM整合：图书管理系统

图书管理系统 一.环境 1.数据库环境 CREATE DATABASE ssmbuild;USE ssmbuild;DROP TABLE IF EXISTS books;CREATE TABLE books (bookID INT(10) NOT NULL AUTO_INCREMENT COMMENT 书id,bookName VARCHAR(100) NOT NULL COMMENT 书名,bookCounts INT(11) NOT NULL COMMENT 数量…
阅读更多...
win10系统K8S安装教程

win10系统K8S安装教程

准备工作 电脑硬件&#xff1a;支持虚拟化的CPU&#xff0c;内存最好在32G以上&#xff0c;16G也可以操作系统&#xff1a;window10 专业版 1 开启虚拟化 1.1 BIOS 由于主板和CPU的品牌不太一样&#xff0c;这里的操作仅供参考&#xff0c;以Intel的平台为例&#xff1a; …
阅读更多...
[大语言模型-论文精读] 利用多样性进行大型语言模型预训练中重要数据的选择

[大语言模型-论文精读] 利用多样性进行大型语言模型预训练中重要数据的选择

[大语言模型-论文精读] 利用多样性进行大型语言模型预训练中重要数据的选择 论文信息&#xff1a; Harnessing Diversity for Important Data Selection in Pretraining Large Language Models Authors: Chi Zhang, Huaping Zhong, Kuan Zhang, Chengliang Chai, Rui Wang, X…
阅读更多...
docker - 迁移和备份

docker - 迁移和备份

文章目录 1、docker commit1.1、查询 容器 docker ps1.2、docker commit zookeeper zookeeper:3.4.13 2、docker save -o2.1、宿主机 切换到 /opt 目录下2.2、将镜像保存到 宿主机/opt目录下 3、docker load -i 对某一个容器修改完毕以后&#xff0c;我们可以把最新的容器部署到…
阅读更多...
网络编程套接字TCP

网络编程套接字TCP

前集回顾 上一篇博客中我们写了一个UDP的echo server&#xff0c;是一个回显服务器&#xff1a;请求是啥&#xff0c;响应就是啥 一个正常的服务器&#xff0c;要做三个事情&#xff1a; 读取请求并解析根据请求&#xff0c;计算响应把响应写回到客户端 DatagramPacket res…
阅读更多...
华为-IPv6与IPv4网络互通的6to4自动隧道配置实验

华为-IPv6与IPv4网络互通的6to4自动隧道配置实验

IPv4向IPv6的过渡不是一次性的,而是逐步地分层次地。在过渡时期,为了保证IPv4和IPv6能够共存、互通,人们发明了一些IPv4/IPv6的互通技术。 本实验以6to4技术为例,阐述如何配置IPv6过渡技术。 配置参考 R1 # sysname R1 # ipv6# interface GigabitEthernet0/0/1ip address 200…
阅读更多...
excel 填充内容的公式

excel 填充内容的公式

多行填充快捷方式&#xff1a; 使用“CtrlEnter”键&#xff0c;这样所有选中的空单元格前就会自动添加上相同的字符。 对于多行填充&#xff0c;Excel提供了几个快捷键来提高工作效率&#xff1a; “CtrlR”用于向右填充数据。如果你在表格的某一列输入了数据&#xff0c;选…
阅读更多...
最新文章

Copyright @ 2022~2023