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

web安卓逆向之必学HTML基础知识

news 来源：原创 2024/9/20 11:11:40

文章目录

HTML基础知识
- 一、HTML的介绍
- - 1. HTML定义
  - 2. HTML 的作用
  - - 1. 定义网页的结构
    - 2. 实现超文本链接
    - 3. 支持多媒体内容
    - 4. 提供表单交互
    - 5. 提高网页的可访问性和 SEO
  - 3. 小结
- 二、html的基本结构
- - 1. HTML 基本结构
  - 2. HTML 基本结构的详细介绍
  - 3. 教学案例
  - 4. 补充知识
  - 5. 小结
- 三、常用html标签和属性
- - 常用 HTML 标签及其属性
  - 常用属性说明
- 四、资源路径
- 五、列表标签
- - 1. 列表标签的种类
  - 2. 无序列表
  - 3. 有序列表
- 六、表格标签
- - 1. 基本表格标签
  - 2. 辅助表格标签
  - 3. 表格属性
  - 4.代码教学
  - - 学生成绩表教学代码
    - 使用 `colspan` 和 `rowspan` 跨列和跨行
  - 总结
- 七、表单标签
- - 1. `<form>` 表单标签
  - 2. `<input>` 输入标签
  - 3. `<label>` 标签
  - 4. `<textarea>` 多行文本输入框
  - 5. `<select>` 下拉列表
  - 6. `<button>` 按钮
  - 7. `<fieldset>` 和 `<legend>` 标签
  - 8. 表单数据提交与处理
  - 完整示例
  - 结论

HTML基础知识

学习目标

html常用编辑器
能够知道html的作用
能够写出html的基本结构
能够知道单标签和双标签的区别
能够知道相对路径和绝对路径的区别
掌握标签的种类
了解表格的边线合并
了解表单中常用的表单元素标签
了解表单的提交方式
了解表单中action属性的作用

一、HTML的介绍

1. HTML定义

HTML (HyperText Markup Language) 是超文本标记语言的缩写，用于定义网页的结构与内容。它是构建网页的基础，定义了网页中的元素如文本、图像、链接、表格、列表等。HTML 文件是以 .html 或 .htm 结尾的纯文本文件，通过浏览器解析和展示给用户。

2. HTML 的作用

HTML 在网页开发中的作用主要体现在以下几个方面：

1. 定义网页的结构

HTML 用来描述网页的整体布局和内容，包括标题、段落、图片、链接等。通过不同的 HTML 标签，开发者可以将页面的不同部分进行组织与排版，构建层次清晰、结构合理的网页。

示例：

<h1>主标题</h1>
<p>这是段落内容。</p>
<img src="image.jpg" alt="图片说明">

在这个例子中，<h1> 用来定义主标题，<p> 用来定义段落，<img> 用来插入图片。

2. 实现超文本链接

HTML 最核心的功能之一是创建超链接，即通过点击某一段文本或图像，可以跳转到其他网页或网站。链接通过 <a> 标签实现。

示例：

<a href="https://www.example.com">访问示例网站</a>

这里，href 属性指定了链接的目标地址，<a> 标签内部的文本是用户可以点击的部分。

3. 支持多媒体内容

HTML 支持在网页中嵌入多媒体内容，如图片、音频、视频等。常见的标签包括 <img>（图片）、<audio>（音频）、<video>（视频）。

示例：

<img src="image.jpg" alt="图片说明">
<audio controls><source src="audio.mp3" type="audio/mpeg">您的浏览器不支持音频元素。
</audio>
<video controls><source src="video.mp4" type="video/mp4">您的浏览器不支持视频播放。
</video>

这些标签使网页内容更加丰富和生动，提供了更多的用户互动方式。

4. 提供表单交互

HTML 提供了表单（<form>）功能，用于用户输入数据并与服务器交互，例如用户注册、登录、提交信息等。表单可以包含输入框、按钮、复选框等交互元素。

示例：

<form action="/submit" method="post"><label for="name">姓名:</label><input type="text" id="name" name="name"><input type="submit" value="提交">
</form>

表单用于用户数据的提交和处理，是网页与服务器交互的桥梁。

5. 提高网页的可访问性和 SEO

通过使用正确的 HTML 语义标签（如 <header>、<article>、<footer> 等），不仅有助于开发者构建结构清晰的网页，还能提高网页的可访问性，帮助搜索引擎更好地理解网页内容，提升搜索引擎优化（SEO）效果。

示例：

<article><h2>文章标题</h2><p>文章内容...</p>
</article>

<article> 标签表明网页中包含一篇独立的文章，这有助于搜索引擎在索引网页时理解内容的主题。

3. 小结

HTML 是构建网页的基础，它通过标签来定义网页的结构、内容和格式。HTML 具有定义超链接、多媒体支持、用户表单等功能，广泛应用于各类网站和应用开发。作为一门标记语言，HTML 的语法简单明了，易于学习和使用，是网页开发者必须掌握的核心技能。

通过本次教学案例，你应该能够：

理解 HTML 的基本概念。
编写简单的 HTML 页面。
使用常见的 HTML 标签如 <a>、<img>、<p> 等来构建网页内容。

二、html的基本结构

HTML 的基本结构是网页的基础框架，它定义了浏览器如何显示内容。理解 HTML 的基本结构是学习网页开发的第一步。下面我将详细介绍 HTML 的基本结构，并提供一个简单的教学案例。

1. HTML 基本结构

一个标准的 HTML 文档由以下几个主要部分组成：

<!DOCTYPE html>：声明文档类型，告知浏览器该文档使用的是 HTML5 标准。
<html>：文档的根元素，包含所有的 HTML 内容。
<head>：文档头部，用于放置元数据（metadata），如编码格式、标题等。不会在网页中直接显示。
<meta>：元标签，用于定义字符编码、页面描述、关键词等信息。
<title>：页面的标题，将显示在浏览器的标签页上。
<body>：文档主体，包含网页的实际内容，如文本、图片、链接、表格等。

2. HTML 基本结构的详细介绍

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>HTML 基本结构介绍</title></head><body><h1>这是网页的主标题</h1><p>这是一个段落，段落标签用于定义文本块。</p><a href="https://www.example.com">这是一个超链接</a></body>
</html>

详细解释：

<!DOCTYPE html>：声明文档类型
- 告知浏览器当前使用的是 HTML5 标准，确保浏览器以正确的方式渲染网页。
<html lang="zh-CN">：HTML 根元素
- 包裹整个网页内容的根元素，lang 属性设置语言为简体中文。
<head>：头部元素
- 该部分包含页面的元信息，包括字符集、浏览器视口设置、兼容性设置和标题等。
：字符编码设置
- UTF-8 是一种通用字符集，可以显示大多数语言字符，确保网页内容的编码正确显示。
：视口设置
- 用于移动设备优化，确保页面宽度与设备宽度匹配，防止页面在移动端显示不正常。
：IE兼容性设置
- 告知 Internet Explorer 浏览器使用最新的渲染引擎（IE=edge）。
<title>：页面标题
- 设置网页的标题，会显示在浏览器的标签页上，有助于SEO和用户识别。
<body>：主体元素
- 包含网页的实际内容，包括文本、图片、表格、链接等。所有需要在网页上显示的内容都放在 <body> 标签内。

3. 教学案例

我们通过以下简单案例展示如何应用 HTML 的基本结构：

html复制代码<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个网页</title></head><body><h1>欢迎来到我的网页！</h1><p>这是我的第一个 HTML 网页，我正在学习如何构建网页。</p><p>你可以点击下面的链接，访问我的博客。</p><a href="https://www.example.com">访问我的博客</a></body>
</html>

解释：

文档类型声明：我们通过 <!DOCTYPE html> 告诉浏览器，这是一个 HTML5 网页。
<html lang="zh-CN">：设置网页语言为简体中文，有助于搜索引擎识别和用户体验优化。
<meta charset="UTF-8">：确保网页能够正确显示中文字符。
<title>：设置网页的标题为“我的第一个网页”，它会显示在浏览器标签页上。
<h1>：使用 <h1> 标签定义网页的主标题，表示网页的主要内容。
<p>：通过 <p> 标签定义两个段落，分别说明学习目标和提示操作。
<a>：通过 <a> 标签创建超链接，允许用户点击访问外部网站。

4. 补充知识

常见的 HTML 标签：

<h1> 到 <h6>：标题标签，用于定义页面不同层级的标题，<h1> 是最高层级标题。
<p>：段落标签，用于定义网页中的段落。
<a>：链接标签，用于定义超链接。
<img>：图片标签，用于在网页中插入图片，使用 src 属性指定图片路径。
<ul> 和 <li>：无序列表标签，<ul> 用于定义列表容器，<li> 用于定义列表项。

5. 小结

HTML 的基本结构是每个网页的核心组成部分。通过学习 HTML 的基本结构和常用标签，你可以构建简单的网页，并为进一步学习 CSS 和 JavaScript 打下坚实的基础。

教学小贴士：

实践练习：在教学中，可以让学生编写一个简单的网页，包含标题、段落、超链接和图片，帮助他们巩固所学内容。
可视化演示：使用浏览器开发者工具展示 HTML 代码与网页显示效果的对应关系，帮助学生理解 HTML 的作用。

通过对 HTML 基本结构的详细介绍，学生可以快速上手并构建自己的简单网页。

三、常用html标签和属性

常用 HTML 标签及其属性

标签	描述	常用属性	示例
`<html>`	定义 HTML 文档的根元素	`lang`（设置页面语言）	`<html lang="en">`
`<head>`	包含文档的元数据	无	`<head></head>`
`<meta>`	定义文档的元数据，如字符集、描述等	`charset`, `name`, `content`	`<meta charset="UTF-8">`
`<title>`	定义页面标题	无	`<title>网页标题</title>`
`<body>`	定义文档主体	`style`, `class`	`<body></body>`
`<h1>-<h6>`	定义标题，`h1` 是最高级别标题，`h6` 是最低	`style`, `class`	`<h1>一级标题</h1>`
`<p>`	定义一个段落	`style`, `class`, `align`	`<p>这是一个段落。</p>`
`<a>`	定义超链接	`href`, `target`	`<a href="https://www.example.com" target="_blank">链接</a>`
`<img>`	定义图像	`src`, `alt`, `width`, `height`	`<img src="image.jpg" alt="示例图片" width="200" height="100">`
`<ul>`	定义无序列表	无	`<ul><li>项目1</li><li>项目2</li></ul>`
`<ol>`	定义有序列表	无	`<ol><li>项目1</li><li>项目2</li></ol>`
`<li>`	定义列表中的项目	`value`（有序列表的起始值）	`<li>项目1</li>`
`<table>`	定义一个表格	`border`, `cellpadding`, `cellspacing`	`<table border="1"></table>`
`<tr>`	定义表格行	无	`<tr></tr>`
`<td>`	定义表格中的单元格	`colspan`, `rowspan`, `align`	`<td colspan="2">单元格</td>`
`<th>`	定义表格头部单元格	`colspan`, `rowspan`, `align`	`<th>标题</th>`
`<form>`	定义表单	`action`, `method`, `enctype`	`<form action="/submit" method="post"></form>`
`<input>`	定义输入控件	`type`, `name`, `value`, `placeholder`	`<input type="text" name="username" placeholder="用户名">`
`<button>`	定义按钮	`type`, `value`, `name`	`<button type="submit">提交</button>`
`<select>`	定义下拉列表	`name`, `multiple`	`<select><option>选项1</option></select>`
`<option>`	定义下拉列表中的选项	`value`, `selected`	`<option value="1">选项1</option>`
`<textarea>`	定义多行文本输入	`name`, `rows`, `cols`, `placeholder`	`<textarea rows="5" cols="20">文本内容</textarea>`
`<link>`	定义与外部资源的链接（通常用于CSS样式表）	`rel`, `href`, `type`	`<link rel="stylesheet" href="style.css">`
`<audio>`	嵌入音频文件	`src`, `controls`, `autoplay`	`<audio src="audio.mp3" controls></audio>`
`<video>`	嵌入视频文件	`src`, `controls`, `autoplay`, `width`, `height`	`<video src="video.mp4" controls></video>`
`<div>`	定义块级元素	`style`, `class`, `id`	`<div class="container"></div>`
`<span>`	定义内联元素	`style`, `class`, `id`	`<span style="color: red;">红色文本</span>`
`<br>`	定义换行	无	`<br>`
`<hr>`	定义水平线	无	`<hr>`
`<strong>`	定义加粗文本	无	`<strong>加粗文本</strong>`
`<em>`	定义斜体文本	无	`<em>斜体文本</em>`

常用属性说明

class：定义CSS类，可以应用多种样式。
id：定义唯一标识符，可用于JavaScript操作或CSS样式指定。
style：内联样式，直接在HTML元素中应用CSS样式。
href：超链接地址，用于 <a> 标签。
src：资源路径，用于 <img>, <audio>, <video> 等标签。
alt：替代文本，用于图像无法加载时的替代描述。
type：定义表单控件类型，如 text, password, submit 等。
name：用于表单控件的名称，用于表单提交时传递数据。
value：表单控件的默认值或按钮的值。
placeholder：表单输入字段的占位符，提供提示信息。

四、资源路径

当我们使用img标签显示图片的时候，需要指定图片的资源路径。比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径，资源路径可以为相对路径和绝对路径。

1.相对路径

从当前文件html的文档所在目录算起的路径叫做相对路径。

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png"><!-- 相对路径方式2 -->
<img src="images/logo.png">

绝对路径

从根目录算起的路径叫做绝对路径，Windows的根目录是指定的盘符，mac OS 和 Linux 是 /。

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png"><img src="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径，绝对路径的操作往往会出现资源文件找不到的问题。

五、列表标签

1. 列表标签的种类

无序列表标签（ul标签）
有序列表标签（ol标签）

2. 无序列表

<!-- ul标签定义无序列表 -->
<ul><!-- li标签定义列表项目 --><li>列表标题一</li><li>列表标题二</li><li>列表标题三</li>
</ul>

3. 有序列表

<!-- ol标签定义有序列表 -->
<ol><!-- li标签定义列表项目 --><li><a href="#">列表标题一</a></li><li><a href="#">列表标题二</a></li><li><a href="#">列表标题三</a></li>
</ol>

代码如下所述

```html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 无序列表标签 --><ul><!-- li标签是定义列表的项目 --><li>1</li><li>2</li><li>3</li><li>4</li></ul><!-- 有序列表标签 --><ol><li>1</li><li>2</li><li>3</li><li>4</li></ol></body>
</html>

六、表格标签

1. 基本表格标签

<table>: 定义一个表格。
<tr>: 定义表格中的行 (table row)。
<th>: 定义表格中的表头单元格 (table header)，通常用于表格的标题部分，内容默认居中并加粗。
<td>: 定义表格中的普通单元格 (table data)。
<caption>: 定义表格的标题，位于表格的上方。

2. 辅助表格标签

<thead>: 用于定义表格的头部区域，包含 <tr> 行。
<tbody>: 用于定义表格的主体区域，包含 <tr> 行。
<tfoot>: 用于定义表格的底部区域，包含 <tr> 行。
<colgroup> 和 <col>: 用于设置列的属性，通常用于表格列的样式控制。

3. 表格属性

border: 设置表格边框的粗细。
cellpadding: 定义单元格内容与边框之间的内边距。
cellspacing: 定义单元格之间的间距。
width 和 height: 定义表格或单元格的宽度和高度。

4.代码教学

学生成绩表教学代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生成绩表</title><style>table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid black;padding: 8px;text-align: center;}th {background-color: #f2f2f2;}</style>
</head>
<body><h2>学生成绩表</h2><table><caption>2024年春季学期学生成绩表</caption><thead><tr><th>学号</th><th>姓名</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th></tr></thead><tbody><tr><td>202001</td><td>张三</td><td>85</td><td>90</td><td>88</td><td>263</td></tr><tr><td>202002</td><td>李四</td><td>78</td><td>82</td><td>84</td><td>244</td></tr><tr><td>202003</td><td>王五</td><td>92</td><td>89</td><td>91</td><td>272</td></tr></tbody><tfoot><tr><td colspan="5">平均分</td><td>259.7</td></tr></tfoot></table></body>
</html>

代码解释:

<table>: 定义一个表格。
<caption>: 为表格提供一个标题，显示在表格上方。
<thead>: 定义表头部分，包含一行 (<tr>) 表头 (<th>) 信息。
<tbody>: 定义表格的主体部分，包含学生成绩数据，每一行 (<tr>) 表示一个学生。
<tfoot>: 定义表格的尾部，显示表格的平均分。
CSS 部分定义了表格的样式，包括边框、单元格内边距和表头的背景颜色。

使用 `colspan` 和 `rowspan` 跨列和跨行

示例代码: 使用 colspan 跨列和 rowspan 跨行

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跨列和跨行表格</title><style>table {width: 50%;border-collapse: collapse;}th, td {border: 1px solid black;padding: 8px;text-align: center;}th {background-color: #f2f2f2;}</style>
</head>
<body><h2>跨列和跨行表格示例</h2><table><tr><th rowspan="2">姓名</th><th colspan="2">成绩</th></tr><tr><th>语文</th><th>数学</th></tr><tr><td>张三</td><td>85</td><td>90</td></tr><tr><td>李四</td><td>78</td><td>82</td></tr></table></body>
</html>

代码解释:

rowspan="2": 使 “姓名” 单元格在两行中跨行。
colspan="2": 使 “成绩” 单元格跨两列。
该表格展示了如何合并单元格，便于在复杂表格中清晰呈现数据。

总结

使用 <table>、<tr>、<th>、<td> 来创建基本的表格结构。
使用 <thead>、<tbody>、<tfoot> 可以更好地组织表格内容。
利用 colspan 和 rowspan 实现跨列或跨行功能，便于在表格中展示复杂数据。
通过 CSS 设置表格样式，提升表格的可读性和美观度。

七、表单标签

在HTML中，表单（form）标签用于创建与用户交互的表单，通过提交按钮将数据发送到服务器。表单包含多个元素，这些元素帮助用户输入数据。以下是常见的表单元素及其详细介绍。

1. `<form>` 表单标签

<form> 标签用于定义表单。它包含多个输入元素，如文本框、单选按钮、复选框等。

常见属性：

action: 定义提交表单时数据提交的目标URL。
method: 定义表单提交方式，常用的有 GET 和 `POST``
- GET: 通过URL发送数据，数据暴露在URL中。
- POST: 通过HTTP主体发送数据，数据不会暴露在URL中。
target: 指定在何处打开提交的表单结果，比如 _self、_blank等。

示例：

<form action="/submit_form" method="POST"><!-- 表单内容 -->
</form>

2. `<input>` 输入标签

<input> 标签是表单中最常见的元素，用于接受用户输入。根据不同的 type 属性，<input> 标签有多种形式。

常见类型：

text: 文本输入框，用于单行文本输入。
password: 密码输入框，输入内容以星号或圆点显示。
email: 电子邮件输入框，会验证输入内容是否符合电子邮件格式。
number: 数字输入框，只能输入数字。
checkbox: 复选框，用于选择多项内容。
radio: 单选按钮，用于选择单个选项。
submit: 提交按钮，提交表单数据。
reset: 重置按钮，清空表单中的内容。

示例：

<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><label for="password">密码:</label><input type="password" id="password" name="password" required><label for="email">电子邮件:</label><input type="email" id="email" name="email"><label for="age">年龄:</label><input type="number" id="age" name="age"><label for="gender">性别:</label><input type="radio" id="male" name="gender" value="male"> 男<input type="radio" id="female" name="gender" value="female"> 女<input type="checkbox" id="agree" name="agree" value="yes"> 我同意条款<input type="submit" value="提交"><input type="reset" value="重置">
</form>

3. `<label>` 标签

<label> 标签用于定义表单控件的标签，它能提升用户体验，让用户更容易点击表单元素。

常见属性：

for: 绑定到表单元素的 id，点击 label 标签时，焦点会移动到对应的表单元素。

示例：

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

4. `<textarea>` 多行文本输入框

<textarea> 标签用于创建多行的文本输入区域，适合用户输入较长的文本。

常见属性：

rows: 定义文本框的行数。
cols: 定义文本框的列数。

示例：

<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

5. `<select>` 下拉列表

<select> 标签用于创建下拉列表，用户可以从多个选项中选择一个或多个。

常见属性：

multiple: 允许用户选择多个选项。
size: 定义显示的选项数量。

示例：

<label for="country">选择国家:</label>
<select id="country" name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option>
</select>

6. `<button>` 按钮

<button> 标签用于创建按钮，可以执行不同的操作（如提交表单、重置表单或触发JavaScript事件）。

常见属性：

type: 指定按钮的类型，通常是 submit、reset 或 button。

示例：

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('按钮被点击')">点击我</button>

7. `<fieldset>` 和 `<legend>` 标签

<fieldset> 用于对表单中的元素进行分组，而 <legend> 标签为分组添加标题。

示例：

<fieldset><legend>个人信息</legend><label for="fname">名:</label><input type="text" id="fname" name="fname"><br><br><label for="lname">姓:</label><input type="text" id="lname" name="lname"><br><br>
</fieldset>

8. 表单数据提交与处理

表单通过 submit 按钮将数据发送到 action 属性指定的服务器端脚本。可以使用 POST 或 GET 方法传递数据。
服务器接收并处理提交的数据，通常返回一个新的页面或者更新当前页面内容。

完整示例

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单示例</title>
</head>
<body><h1>用户注册</h1><form action="/submit_registration" method="POST"><fieldset><legend>基本信息</legend><label for="username">用户名:</label><input type="text" id="username" name="username" required><br><br><label for="password">密码:</label><input type="password" id="password" name="password" required><br><br><label for="email">电子邮件:</label><input type="email" id="email" name="email" required><br><br><label for="age">年龄:</label><input type="number" id="age" name="age" min="18" max="100"><br><br><label for="country">选择国家:</label><select id="country" name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option></select></fieldset><fieldset><legend>其他信息</legend><label for="gender">性别:</label><input type="radio" id="male" name="gender" value="male"> 男<input type="radio" id="female" name="gender" value="female"> 女<br><br><label for="country">国家:</label><select id="country" name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option></select><br><br><label for="terms"><input type="checkbox" id="terms" name="terms" required> 我同意条款</label><br><br></fieldset><fieldset><label for="message">留言:</label><textarea id="message" name="message" rows="4" cols="50"></textarea></fieldset><input type="submit" value="注册"></form>
</body>
</html>