HTML基础全解析：标签、文档结构与美化技巧

需积分: 9 134 浏览量更新于2024-07-29 收藏 141KB DOC 举报

“HTML详细总结，包括HTML文件的基本结构、主要标签、<META>标签、页面背景设置以及文本样式控制。” HTML是一种标记语言，用于构建网页结构和内容。它由一系列的标签组成，这些标签告诉浏览器如何展示网页内容。以下是HTML的一些关键知识点： 1. **HTML文件的基本结构**： HTML文件通常包含以下主要部分： - `<html>`：整个HTML文档的根元素。 - `<head>`：包含了文档的元数据，如标题、字符编码等。 - `<title>`：定义了浏览器工具栏中的页面标题。 - `<body>`：包含了用户在浏览器窗口中看到的实际内容。 2. **标签的使用**： HTML标签通常是成对出现的，如`<tag>`和`</tag>`，用于包裹内容。标签不区分大小写，但规范做法是使用小写。 3. **<META>标签**： `<meta>`标签在`<head>`部分，提供关于网页的元信息，如页面描述、关键词、字符编码等。例如，设置页面的字符编码可以用： ```html <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> ``` 其中，`charset`属性用于设定页面的字符集。 4. **页面背景设置**： - `bgcolor`属性：可设置整个网页的背景颜色，如`<body bgcolor="#ffccff">`。 - `background`属性：可设置背景图像，如`<body background="image/back_image.gif">`。 5. **文本相关标签**： - **标题标签**：HTML提供六级标题标签`<h1>`到`<h6>`，其中`<h1>`是最大的标题，`<h6>`是最小的。 - **字体与字号标签**： - `<font>`标签已过时，但它仍被广泛使用来控制文本的大小、颜色和字体。例如： ```html <font size="+2" color="red" face="隶书">示例文本</font> ``` `size`属性设定字体大小，`color`属性设定颜色，`face`属性设定字体类型。 - **其他文本标签**： - `<p>`：段落标签。 - `<strong>`和`<em>`：分别表示加粗和斜体。 - `<a>`：超链接标签，用于创建指向其他网页或文件的链接。 6. **颜色与尺寸表达**： - 颜色可以用英文名称（如`red`）、十六进制（如`#ff0000`）或RGB值（如`rgb(255, 0, 0)`）来设定。 - 字体大小可以用相对单位（如`+2`，相对于默认大小的增减）或绝对单位（如像素`px`）来设定。理解并熟练使用这些HTML元素和属性是创建基本网页的基础。随着HTML的发展，现代网页开发更倾向于使用CSS（层叠样式表）来分离样式和内容，以实现更精细的布局和设计。然而，HTML的基本知识仍然是所有Web开发者的必备技能。

6．行的控制相关标签

a) 段落标签<P>

段落标签<P>用于标记段落的开始。一般省略段落结束标记</P>

还可以设置段落的 align 属性，设置段落的对齐方式，如左对齐、居中、右对齐

b) 换行标签<BR>

只要在文本中放入<BR>标签，就会强制换行。

7．图像标签

a) 图像的基本语法

<IMG>标签用于在 HTML 文档中插入图像，该标签可以放在要显示图像的位置。

<IMG>标签不含任何内容，它使用 src 属性指定图像源文件所在的路径。

语法：

其中，src 参数用来设置图像文件所在的位置，width 和 height 属性用来指定图像

的宽度和高度，

alt 属性有两个作用：

1．在网页中，如果图像没有被下载，在图像位置上出现提示文字；

2．如果图像下载完，将鼠标放在该图像上，在鼠标旁边出现的提示文字。

b) 图像与文本的对齐

align 属性用于调整图像对于周围文本的对齐方式

align 可取的值：top、bottom、middle、left 或 right。

c) 文字布局

可以使用<HR>标签对文本内容进行分割，使用列表对文本内容进行整齐排列。

使用<PRE>标签让指定的文本内容以指定的格式在网页中显示。

d) 使用<HR>标签

<HR>（水平线）标签用于在页面上绘制水平线。只有开始标签，没有结束标签。

语法：

size 用来指定水平线的高度，以像素为单位；color 可用来设置水平线的颜色。

width 用于改变水平线的宽度，可以以像素为单位，也可以是窗口的百分比。

剩余16页未读，继续阅读

vesper1125

粉丝: 0
资源: 1

HTML基础全解析：标签、文档结构与美化技巧

html标签和属性总结

html总结.xmind

HTML和CSS最全面详细总结笔记

html课程设计说明书关于甜品店的，详细说明

pytest框架如何生成html测试报告

html课程设计说明书关于甜品店的

3页html网页制作

web前端开发案例教程(html5+css3)(微课版)教学教案1

uploader html5 压缩包

html化学元素周期表

最新资源