HTML学习总结_htlm项目总结-CSDN博客

本文链接：https://blog.csdn.net/qq_51097869/article/details/117257926

本文详细介绍了HTML的基本概念、结构和常用标签，包括p标签、font标签、br标签、h1-h6标题标签、img图片标签、ul/ol列表标签、a超链接标签以及表格相关标签。同时，讲解了各标签的属性和使用方法，如图片的路径设置、链接的href属性等。

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

HTML学习总结

一.HTML是什么？

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

二.HTML的结构

HTML 有自己的语言语法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

1.html结构
（1）head标签中包含的内容不会在HTML页面中显示，body标签中包含的内容将会在HTML页面中显示
（2）head标签中通常包含meta标签，title标签，link标签
meta标签主要用来声明HTML文档使用的字符编码
title标签里记录的是文档的标题
link标签主要用来链接，引入一些外部文件，比如css样式表（xxx.css）或HTML页面的图标（xxx.ico）
（3）body标签中包含能在浏览器，即页面中显示的所有内容和框架，包括文字，图片，音频，视频等

2.html标签是以尖括号包围的关键字
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写

三.HTML常用标签

1.p ,p/标签

在HTML中，通常用p标签来定义段落，比如在html上写一篇文章，就可以用p标签来定义文章的各个段落，用p标签定义段落之后，段落与段落之间就会有一定的间隔

2.font标签

字体标签，用于展示效果中修饰文字样式

<font 属性名=”属性值”>文字</font >

size:控制字体大小.
color：控制字体颜色.
face：控制字体类型.

3.br/标签

HTML源码中换行，浏览器解析时会自动忽略。

换行标签，用于展示效果中换行

4.h1 /h1标签

标题标签，用于展示效果中划分标题

其中h1最大，h6最小

5.img标签

图片标签

用于在页面效果中展示一张图片。

src：指明图片的路径。（必有属性）

图片路径的写法：

内网路径：

绝对路径：文件在硬盘上的具体位置。【不建议使用】

例如：C:\ JavaWeb001_html\img\c_1.jpg

相对路径：从引入者所在目录出发。【建议使用相对路径】

例如：…/img/c_1.jpg

…/表示上一层目录

./表示当前目录

互联网路径：

必须前面加上http://

例如：http://www.baidu.com/xxx.jpg

width：图片宽度

height：图片的高度

宽度和高度的设置：

默认单位是px，像素。例如：width=”400” 其实设置的是 width=”400px”。固定设置方式

百分比设置。例如：width=”50%”。是父标签的百分比。动态改变的。
如：

<img src="../c_1.jpg" width="600" height="600"/>
<img src="../c_2.jpg" width="60%"/>

6.ul /ul标签

无序列表标签，用于在效果中定义一个无序列表

7.li /li标签

列表条目项标签，用于在效果中定义一个列表的条目

8.a /a标签

超链接标签，用于在效果中定义一个可以点击跳转的链接

href：超链接跳转的路径 (必有属性)

内网本机路径：相对路径和绝对路径

互联网路径：http://地址

本页：默认跳转到本页

超链接正常工作：
①a标签中必须有内容

②a标签必须有href属性

例：

<a herf="http://www.baidu.com/">百度</a>

<a herf="demo html">demo</a>

效果：
百度

demo
注意：

①a标签内容体，不仅仅是文字，也可以是其他内容，例如图片

②a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片

例：

<a herf="demo html">

<img src="../img/c_1.jpg" />

</a>

例：

<a herf="../img/c_1.jpg" />链接到一张图片</a>

9.表格标签

table /table标签

border：设置表格的边框粗细

width：设置表格的宽度
tr /tr标签

表格的行标签，用于在效果中定义一个表格行

td /td标签

表格的单元格标签，用于在效果中定义一个表格行中的单元格
th /th标签

表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格

th和td唯一区别：th标签的内容居中加粗
表格的书写顺序：

步骤1：用table /table标签定义一个表格

步骤2：用tr/tr定义表格中的一行

步骤3：用td /td标签在表格一行中定义单元格，内容就可以写在单元格中

示例：

<table>

<tr>

<td>姓名</td>

<td>数学</td>

</tr>

<tr>

<td>A</td>

<td>100</td>

</tr>

</table>

效果：
在这里插入图片描述