HTML学习指南：标签语义与常用元素解析

需积分: 0 180 浏览量更新于2024-06-18 1 收藏 6.93MB DOCX 举报

“前端学习笔记-黑马程序员” 前端开发是创建Web页面或应用程序的过程，它主要关注用户与网站或应用的交互部分。以下是一些前端开发的基础知识，主要围绕HTML（超文本标记语言）的使用： 1. HTML标签的类型： HTML标签通常成对出现，例如`<div>`和`</div>`，表示一个区域或容器。有些标签是单标签，如`<br/>`，用于单独的行间换行。双标签如`<head>`和`<body>`包含其他元素，而单标签则没有对应的闭合标签。 2. HTML基本结构标签： HTML文档的基本结构由`<html>`、`<head>`和`<body>`标签组成。`<head>`包含了文档元信息，如`<title>`定义了页面的标题，而`<body>`则包含了用户可见的内容。 3. 文档类型声明： `<!DOCTYPE>`声明定义了HTML版本，告诉浏览器如何解析页面。例如，`<!DOCTYPE html>`声明使用HTML5标准。`<meta charset="UTF-8">`定义了文档的字符集，确保正确显示非ASCII字符，防止乱码。 4. 语义化标签：语义化标签有助于搜索引擎理解页面内容，提高可访问性和可读性。例如，`<header>`、`<nav>`、`<article>`、`<section>`、`<footer>`等标签，它们分别代表页眉、导航、文章、章节和页脚。 5. 标题标签： HTML的`<h1>`到`<h6>`标签用于创建六级标题，其中`<h1>`最重要，`<h6>`最不重要。它们不仅在视觉上有所区别（字号和加粗程度），还为页面提供结构和层次感。 6. 段落与换行： `<p>`标签定义了段落，浏览器会自动处理段落间的间距。`<br/>`是一个单标签，用于强制文本换行，不形成新的段落。 7. 文本格式化标签： - `<strong>`或`<b>`：强调文本，通常是粗体显示，表示重要性。 - `<em>`或`<i>`：斜体，常用于表示强调或引用。 - `<del>`或`<s>`：删除线，表示文本已删除或不再适用。 - `<ins>`或`<u>`：下划线，可用于标记插入的文本。以上只是HTML基础知识的一部分，前端开发还包括CSS（层叠样式表）用于样式设计和JavaScript用于交互功能。深入学习前端开发，需要掌握这些基础知识并逐步扩展到更复杂的布局、响应式设计、框架应用（如React、Vue、Angular）以及前端性能优化等方面。

4.2 标题标签 <h1>-<h6>（重要）

为了使网页具有语义化，我们经常会在页面中用到标题标签。

HTML 提供了 6 个等级的网页标题。即<h1>-<h6>。

<h1>我是一级标题</h1>

单词 head 的缩写，意为头部、标题。

标签语义：作为标题使用，并且依据重要性递减。

特点：

1. 加了标题的文字会变的加粗，字号也会依次变大。

2. 效果图

4.3 段落和换行标签（重要）

在网页中，要把文字有条理地展示出来，就需要将这些文字

分段显示。在 HTML 标签中，<P>标签用于定义段落，它可

以将整个网页分为若干个段落

<p></p>

标签语义：将文章分成几段

剩余27页未读，继续阅读

诸葛亮晶晶831

粉丝: 0
资源: 6

HTML学习指南：标签语义与常用元素解析

黑马程序员Vue前端学习笔记：从基础到高级特性

前端CSS学习指南：结构与样式的分离与基础选择器

JavaScript核心技术：变量、数据类型与操作

前端学习笔记-黑马程序员JS

前端学习笔记-黑马程序员CSS

前端学习笔记-黑马程序员Vue

前端学习笔记-Node.js

前端学习笔记(B站黑马程序员)

struts2学习笔记黑马程序员

微信小程序笔记（黑马程序员）

最新资源