HTML格式及案例

悠然见南山难

已于 2022-08-30 09:01:08 修改

阅读量444

点赞数

文章标签：前端 html

于 2022-08-30 08:23:59 首次发布

本文链接：https://blog.csdn.net/weixin_44126843/article/details/126595993

版权

本文介绍了HTML的基础知识，包括HTML的定义、文件格式和浏览器的作用。讲解了HTML标签的类型，如双边和单边标记，并通过实例展示了如何使用不同标签创建网页，如``、` `、``、`<hr>`和`<h>`标签。此外，还提到了HTML标签的编写规范和常用属性。

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

HTML 简介

html ：超文本标记语言

html 中一种规范，一种标准，编写网页的一种标准

超文本：其实就是网页上的文本、图片，音频、视频等等。

标记 / 标注：就是一种记号，是一种标志。例如：红绿灯、限速标志、商城（ 24小时监控区域）

语言 : 这里的语言就是代码，与我们所谓的编程语言没有任何关系

html 文件格式

<html> ̜ 标注标签中的内容是 html 语言 ˰

<head> ̜ 表示网页头部信息 ˱ >

<title> 网页的标题</ title>

</head>

<body> ̜ body 标签中存放的是网页的主体内容 ˰

网页的主体内容（网页的正文 …… ）

</body>

</html>

浏览器的作用

翻译 html 代码，将其解释为我们人类能够看懂的内容。

浏览器是渲染网页用的，每个浏览器都有自己的内核（浏览器内核）

一个网页所包含的元素

文本、图片、超链接、视频、音频等等

网页的本质是什么

就是由程序员编写 html 代码组成

html 标签格式

1 、双边标记（双标记标签）

双边标记，是指有开始和结束标记，内容放在开始和结束标记之间，例如（标签是一个双

标记标签， <br 标签是单标记）

语法格式： < 标签名称属性 1=" 属性值 1" 属性 2=" 属性值 2"> 内容 </ 标签名称 >

属性：属性是描述一个物体特征的名词，例如：桌子的属性（长、宽、高、颜色等等）例

如长 =60cm （属性值）

2 、单边标记（单标记标签）

单边标记：指的是只有开头，没有结尾的标记。

单边标记一般表示一个特殊功能

常用的单边标记有 10 个左右

语法格式： < 标签名称属性 =“ 属性值 ” 属性 2=“ 属性值 2”>

案例

<head>

<title> 这是我的第一个网页 ̪ title>

</head>

<body>

床前明月光，疑是地上霜！ ˱ 是一个双边标记

举头望明月、低头思故乡。 ---- 里面的 br 是一个单边标记

作者 - 李白 ̪ p>

</body>

</html>

HTML 标签编写规范

html 标记不区分大小写。例如：

html 标签属性可有可无。有的标记是没有属性的

双边标记的内容是在开始标签和结束标签之间的。单边标记是没有内容。

html 标记是可以互相嵌套，但是一定要注意嵌套顺序。外层套内层。

常用标签和属性

<body> 标签

格式： <body 属性 =” 属性值 “>

属性： bgcolor 网页背景颜色

background ：网页背景图片地址

案例：

<body background="web.png"> 设置网页背景图片

html 文本修饰标记

文本内容 加粗文字

<center> 内容</ center> 将内容居中显示到网页里面

文本倾斜

内容 给文字加下划线

<s> 内容</ s> 给文字加删除线

内容 文字上标

内容 文字下标

案例：

蒸羊羔

蒸熊掌

烧花鸭 8 元

烧雏鸡 10 元 烧子鹅

font 标签

作用：修饰文字

格式： 内容

属性：

size ：设置文本大小，取值 1-7 之间 1 是最小 7 是最大。取值：## px 。

color: 设置文本颜色。

face ：设置文字的字体 : 黑体楷体宋体

案例：

最近忙啥呢

设置文本内容为红色大小位 4 个像素点，文字字体是楷体

p 标签：

作用：是一个段落标签

格式：

内容

属性： align= 水平对齐方式，取值 left （左） center （中间） right （右）

案例：

哈喽你好做核酸了吗

br 标签：

换行标签，相对于 P 标签， br 换行的时候不会有空白行

hr 标签：

作用：是生成一个水平方向的线。

属性：

size ：水平线的粗细，单位也是 px

color ：颜色

width ：水平线的宽度，默认是整个网页的宽度

案例：

h 标签

作用：标题标签

功能：定义各种标题

属性： align 水平对齐方式：取值： left center right

例子：

<h1> 《我和我的核酸》</ h1>

<h2 align="center"> 《我和我的核酸》</ h2>

<h6 align="right"> 《我和我的核酸》</ h6>