复盘之html

最新推荐文章于 2025-11-29 00:03:29 发布

原创最新推荐文章于 2025-11-29 00:03:29 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍了HTML的基础知识，包括超文本的概念、HTML的基本结构标签及其作用，同时详细解释了页面开发的基本骨架，常用标签如标题标签、图像标签、超链接等，并介绍了表格、列表和表单的用法。

在这里插入图片描述

html 即超文本标记语言，其中，超文本是指连接单个网站内或多个网站间的网页的链接

切记：html 不是编程语言，它只是一种标记语言

1、基本的结构标签

html 中的基本结构标签是指页面中的最基本的标签，也称为骨架标签，包括 <html>、<head>、<title>、<body>

其关系为：

<html>
	<head>
		<title> 骨架结构 </title>
	</head>
	<body>
        <div>Hello world!</div>
	</body>
</html>

<html> 元素：包含整个页面中的内容，也称为根元素、根标签
<head> 元素：文档头部，该内容对用户是不可见的，其中包括：搜索引擎的搜索关键字、页面描述、字符编码声明、页面标题以及CSS样式表
<title> 元素：文档头部，显示页面标签上，也作为收藏的描述文字，放在 <head> 中
<body> 元素：页面主体内容，包括文本、图像、多媒体等等，是用户可以看见的内容

在这里插入图片描述

2、页面开发的基本骨架

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 页面的基本骨架 </title>
</head>

<body>
    不曾与你分享的时间，我在进步！
</body>

</html>

这就是页面开发的基本骨架，包括了基本基本标签和一些声明

<!DOCTYPE html>：文档类型声明，告诉浏览器我想要采用HTML5版本来显示页面

1、<!DOCTYPE> 声明标签必须卸载文档的最前面

2、注意：<!DOCTYPE> 不是一个HTML标签，而是一个文档声明标签
<html lang="">：定义当前文档显示的语言，en 为英语，zh-CN 为中文
<meta>：描述HTML文档的元数据
1. charset属性来定义HTML文档要使用哪种文字编码，默认定义为 UTF-8
2. 可以指定页面的描述、搜索引擎关键词、文档最后修改时间等等

3、常用标签

标题标签

h1 ~ h6 6级标签，h1 最大，h6 最小

`div` 和 `span` 标签

块级标签：div

行内标签：span

这两个是用得最多的标签，但是现在提倡用 html5 的语义化标签了

段落换行分隔标签

段落标签：<p>

换行标签：<br />

分隔标签：<hr>

<p>不曾与你分享的时间，我在进步！</p>
<br />
<hr>

文本格式化标签

语义	标签	说明
加粗	`<strong></strong>` 或者 `<b></b>`	推荐使用`<strong>`加粗标签，语义更加强烈
倾斜	`<em></em>` 或者 `<i></i>`	推荐使用`<em>`倾斜标签，语义更加强烈
删除线	`<del></del>` 或者 `<s></s>`	推荐使用`<sel>`删除标签，语义更加强烈
下划线	`<ins></ins>` 或者 `<u></u>`	推荐使用`<ins>`下划线标签，语义更加强烈

需要注意一下：文本格式化标签是行内标签

图像标签

<img>：图像标签，在HTML中，该标签用于定义HTML页面中的图片

<img src="图片路径">

<img> 标签的属性：

属性	属性值	说明
src	图像路径	必须属性
alt	文本	替换文本；图片不能显示时，就显示该文本
title	文本	提示文本；鼠标放在图像上时，显示的文字
width	像素	设置图片的宽度
height	像素	设置图片的高度
border	像素	设置图片的边框粗细

<img src="./image/images1/01.jpg" alt="加载失败" title="图片" width="50px" border="5">

宽高是要任意设置一个，另一个会等比例缩放

超链接

<a href='url' target=''> 文本或图形 </a>

href：就是连接目标的url地址
target：指定链接页面打开的方式
1. _self：在当前页面打开（默认）
2. _target：在新窗口中打开

在这里插入图片描述

表格、列表、表单

在这里插入图片描述

表格

表格标签的基本语法

<table>
	<tr>
        <td> ... </td>
	</tr>
	...
</table>

<table></table>：定义表格的标签
<tr></tr>：定义表格的行
<td></td>：定义行中的格

一般我们为了更加语义化，会这样写：

<table>
    <thead>
        <tr> 
            <th> ... </th> 
        </tr>
    </thead>
    <tbody>
        <tr> <td> ... </td> <tr>
        ....
    </tbody>
<table>