HTML基础入门：标签详解与常用属性

需积分: 13 188 浏览量更新于2024-08-05 收藏 639KB PDF 举报

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，是前端开发的基础。本文将深入讲解HTML基础知识点，特别适合初次接触前端的初学者，通过学习这些内容，你将对HTML有一个全面的理解。 1. **标题标签** `<title>`: 这个标签定义了浏览器标签页上显示的页面标题，如示例中的 "家用电器排行榜"。它是SEO优化的重要部分，搜索引擎会抓取<title>标签内容作为网页的主要描述。 2. **元数据标签** `<meta charset="UTF-8">`: 这个标签用来设定文档的字符集，这里是UTF-8，确保网页内容的正确编码和跨平台显示。 3. **网页基本标签** 包括： - **标题标签** (h1-h6): 从`<h1>`到`<h6>`，表示从最重要的大标题到不那么重要的小标题，结构清晰，利于阅读。 - **段落标签** `<p>`: 用于分隔文本块，每个段落之间独立显示。 - **换行标签** `<br/>`: 控制文本在一行内的换行。 - **水平线标签** `<hr>`: 创建水平分割线，常用于分隔内容区域。 - **字体样式标签** `<i>` 和 `<em>`: 使文本倾斜显示，前者表示非强调，后者通常用于强调。 - `<del>`: 删除线，表示被删除的内容。 - **特殊字符和符号** 如空格、大于号、小于号、引号等，它们是HTML文本中的基本组成部分。 4. **`<body>`标签和背景图片** `<body background=”URL”>`: 这个属性允许设置网页的背景图片，给页面增加视觉效果。 5. **图像标签**: - **常见图像格式**: JPG、GIF、PNG、BMP等。 - **背景图片**: 可以用`<img>`标签设置，配合`background`属性。 - `<img>`标签的属性包括： - `src`: 图片源地址。 - `alt`: 提供图片描述，当图片无法加载时提供替代文本。 - `width` 和 `height`: 设置图片的尺寸，可以用像素值或百分比。 - `border`: 设置图片边框宽度。 - `align`: 控制图片与周围文字的对齐方式。 - `<a>`标签用于创建超链接，包括`href`、`target`属性用于指定链接地址和打开新窗口的模式。 6. **链接标签** `<a>`: - 相对地址和绝对地址的区别。 - `target`属性的选择：_self（默认，当前窗口打开）、_blank（新窗口）、_parent（父框架）、_top（顶层框架）。 - 使用`<a>`和`<name>`或`<a>`和`<a>`配合创建内部链接，实现页面内的跳转。 7. **多元素布局**: 当需要在同一行显示多个元素，且自动换行时，需注意元素的`display`属性设置，例如`inline-block`。掌握这些HTML基础知识点是前端开发者入门的基石。通过实际操作和实践，你可以逐渐构建出美观、功能丰富的网页，并为后续学习CSS和JavaScript打下坚实基础。

a标签

<a href="path" target="目标窗口文件">链接文本或图像</a>

地址：相对地址

网址：必须加协议 http

target： _self 在当前选项卡中打开

target： _blank 在一个新的选项卡中打开

target： _parent 在父窗体中打开

target： _top 在最顶级的窗体中打开

创建跳转标记：<a name="marker">乙位置</a>

创建跳转链接：<a href="#marker">甲位置</a>

多个元素在一行显示，当一行排满的时候才会换行

strong span i cite em big del small

e.1 设置宽高不起作用元素的宽度是靠内容撑起来的

e.2 水平方向的边距起作用，垂直方向的边距不起作用

元素独占一行

h1-h6 p div table ul li ol dl dd dt

e.1 可以设置宽高

e.2 可以设置边距



5.链接标签

1)超链接

http://localhost:63342/HTML/0620/www.baidu.com

2)锚点链接

6.行内元素和块元素

1)行内：

2)区块：

二、

剩余11页未读，继续阅读

多多Coi

粉丝: 208
资源: 5

HTML基础入门：标签详解与常用属性

HTML基础知识速览：文档结构与常用标签

"HTML标签及常用属性总结-Web前端知识点

HTML常用标签精简教程

html简单知识点总结，常用标签总结，简洁界面 ，框架的基础例子

HTML5常用基础标签

HTML基础重点_一般标签、常用标签和表格

html常用知识点总结

HTML中的常用标签

HTML基础入门与常用标签详解

HTML5基础与常用标签详解

最新资源

html简单知识点总结，常用标签总结，简洁界面，框架的基础例子