HTML基础知识入门：标签语义化与常见元素解析

需积分: 0 80 浏览量更新于2024-08-04 收藏 1.99MB DOCX 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"这篇资源是关于HTML基础知识的个人整理，旨在帮助初学者了解HTML的基本结构和重要概念。" HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它的主要功能是通过各种标签来描述文档的结构和内容。在HTML中，每个元素都是由尖括号包围的，如`<html>`、`<head>`和`<body>`等。这些元素构成了HTML文档的骨架。在创建第一个HTML页面时，通常会包含以下部分： 1. `<!DOCTYPE html>`声明文档类型，对于HTML5来说，这个声明告诉浏览器这是一个HTML5文档。 2. `<html>`元素是整个HTML文档的根元素，包含了文档的全部内容。 3. `<head>`元素包含非显示信息，如元数据（metadata），例如字符集设置`<meta charset="UTF-8">`，它指定文档使用的字符编码。 4. `<title>`元素定义了网页的标题，显示在浏览器的标签页上。 5. `<body>`元素包含了网页的可见内容，比如文本、图像、链接等。 HTML文档中的换行和回车不会被浏览器解析，需要通过标签来实现段落、换行等效果。常用的文本格式化标签包括： - `<h1>`到`<h6>`用于定义标题，大小依次递减。 - ``用于定义段落。 - ``和``都可以使文本加粗，但``具有更多的语义强调。 - ``和``可以使文本倾斜，``同样带有强调的语义。 - ``表示下划线，但不建议频繁使用，可用`<del>`表示删除线。 - `<img>`用于插入图像，其`src`属性定义图像源，`width`和`height`定义尺寸，`alt`提供替代文本，`title`为鼠标悬停时显示的提示。编写HTML时，标签的语义化至关重要。这意味着应该根据元素在文档中的作用来选择正确的标签。例如，用``标签表示段落，用`<header>`和`<footer>`表示页面头部和底部，这样不仅有助于浏览器理解内容，还能提高搜索引擎优化（SEO）的效果。开发工具的选择也很重要，推荐的工具有Dreamweaver（DW）、Sublime Text、HBuilder、WebStorm、Notepad++和Editplus等，它们能提供代码高亮、自动补全等功能，提升编写效率。学习HTML基础是前端开发的第一步，理解并熟练运用这些基础知识，能够构建出结构清晰、易于理解的网页，为进一步学习CSS和JavaScript打下坚实基础。

资源详情

资源推荐

一. HTML 定义

超文本标记语言

二. 第一个 HTML 页面

1、<!DOCTYPE html> 描述当前文件的版本信息，如果没有详细说明 4.0 还是 x1.0 那就是 5

版本。

2、<html>html 文件

3、<head>网页的头部

4、<meta charset=“UTF-8”> utf-8 是国际编码的意思，如果不写，或者写成其他都会有问

题。

5、<title>此处内容是网页的标题</title>

6、<body>我们自己写的所有代码都放在这里</body>

课堂练习：新建一个 html5 的文档并保存，添加标题，最终在浏览器上运行。

注意---html 文档不能正常识别回车和换行，只能使用特定代码来实现：标签、标记、节点、

元素都是尖括号。

一句话：做事情要有头有尾，写代码也一样。

编码工具的重要性---代码工具推荐：dw、sublime、HBulider、WebStorm、notepad++、editplus

H1，h2，h3……..h6 字体从大到小

三. 标签语义化（重要）

在合适的地方使用合适的标签；（该放 P 就放 P）

为什么要标签语义化：因为浏览器只认识标签，没有语音语调，所以想表达的东西只能使

用对应的标签来表示；

标签语义化的好处：语义化做得好，可以让搜索引擎把你的网站排名更靠前。

四. h 和 p 标签

h 有六个 1 到 6，依次变小，代表文章标题。

P 代表文章。

五. bui 标签和小伙伴

B 代表加粗

单标签------代表换行回车

Strong 也代表加粗，多了强调的语义

U 代表下划线

I 代表倾斜

Em 也代表倾斜，多了强调的语义

<s> S 代表删除线，这种写法渐渐被淘汰 </s>

<del> Del 也代表删除线，这种写法是主流，建议使用 del 代替 s </del>

注意——strong 代表特别强调，一篇文章中不要出现多次；em 代表一般强调，一篇文章

中可以出现多次；

下载后可阅读完整内容，剩余5页未读，立即下载

香草&可乐

粉丝: 1
资源: 1

HTML基础知识入门：标签语义化与常见元素解析

二级计算机基础知识整理版

CSS基础知识超全整理

spark基础知识整理

CSP初赛基础知识整理

python基础知识点整理

java基础知识点整理2023

Python基础知识整理

ccaa认证通用基础知识点整理

网络安全基础知识整理

计算机图形学基础知识重点整理csdn

软件测试基础知识整理

javaweb基础知识点整理

计算机网络基础知识整理大全

UIKit基础知识整理

汇编语言基础知识整理

java基础知识点整理

python知识整理pdf

javaspring基础知识点整理

计算机基础知识试题及答案app

请整理git子模块git submodule基础知识及易踩的坑

最新资源