后端学习笔记（八）--HTML

news2024/11/10 15:35:35

1.HTML

*编写网页的一门语言

*HTML(HyperText Markup Language)：超文本标记语言

*超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

*标记语言：由标签构成的语言

*W3C（万维网联盟）标准：网页主要有三部分组成

*结构：HTML

*表现：CSS

*行为：JavaScript

1.快速入门

*步骤：

1.新建文本文件，后缀名改为.html

2.编写HTML结构标签

3.在中定义文字

<html>
    <head>	//头标签
        <title></title>	//标题
    </head>
    <body>	//体标签
        <font color="red">乾坤未定，你我皆是黑马~</font>
    </body>
</html>

在这里插入图片描述

2.基础标签

标签	描述
h1~h6	定义标题
front	定义文本的字体、字体尺寸、字体颜色
b	粗体文本
i	斜体文本
u	文本下划线
center	文本居中
p	段落
br	换行
hr	水平线

*表示颜色：

1.英文单词：red,pink,blue…

2.rgb(值1，值2，值3)：值的取值范围：0~255 rgb(255,0,0)

3.#值1值2值3：值的范围：00~FF

*转义字符

在这里插入图片描述

3.图片、音频、视频标签

标签	描述
img	定义图片
audio	定义音频
vedio	定义视频

*img:定义图片

*src:规定图像的URL

*height:图像的高度

*width:图像的宽度

*audio:音频，支持格式：MP3、WAV、OGG

*src:规定音频的URL

*controls:显示播放控件

*video:视频，支持格式：MP4,WebM、OGG

*src:规定视频的URL

*controls:显示播放控件

*资源路径：

1.绝对路径：完整路径

2.相对路径：

*尺寸单位：

1.px:像素和%

2.百分比

4.超链接标签

标签	描述
a	超链接

*href:指定访问资源的URL

*target:指定打开资源的方式

*_self:默认值，在当前页面打开

*_blank:在空白页面打开

5.列表标签

*有序列表(order list)

在这里插入图片描述

*无需列表(unorder list)

在这里插入图片描述

标签	描述
	有序列表
	无序列表
	列表项

*type:设置项目符号

6.表格标签

标签

描述

表格

行

单元格

表头单元格

*table：定义表格

*border:规定表格边框的宽度

*width:规定表格的宽度

*cellspacing:单元格之间的空白

*tr：定义行

*align：定义表格行的内容对其方式

*td、th:单元格

*rowspan:单元格可横跨的行数

*colspan:单元格可横跨的列数

在这里插入图片描述

6.布局标签

标签	描述
div	定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
span	组合行内元素

7.表单标签

标签	描述
form	定义表单
input	表单项，通过type属性控制输入形式
label	表单项定义标注
select	定义下拉列表
option	定义下拉列表的列表项
textarea	定义文本域