前端基础——认识HTML

最新推荐文章于 2022-11-04 23:36:00 发布

@Wenk

最新推荐文章于 2022-11-04 23:36:00 发布

阅读量677

点赞数

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/hewenqing1/article/details/104604677

版权

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了HTML的基础知识，包括HTML的概念、标签分类和关系、代码开发工具、文档类型、页面语言以及字符集。重点讲解了HTML标签的语义化，强调遵循语义化原则对网页制作的重要性。

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

前端基础

学习目标

理解

HTML的概念
HTML标签的分类
HTML标签的关系
HTML标签的语义化

应用

HTML骨架格式
sublime基本使用

一. HTML 初识

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

html作用：网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户。

所谓超文本，有2层含义：

因为它可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）。

html 总结:

html 是超文本标记(标签)语言
我们学习html 主要学习html标签
我们用html标签描述网页元素。比如图片标签、文字标签、链接标签等等
标签有自己的语法规范，所有的html标签都是用 <> 表示的
H（很）T（甜）M（蜜）L（啦）是很快乐的一件事情。（哈哈！）

1. HTML骨架标签

html <html> <head> <title></title> </head> <body> </body> </html>

2. HTML元素标签分类

标签：

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <html>、<head>、<body>都是HTML骨架结构标签。

分类：

常规元素（双标签）

html <标签名> 内容 </标签名> 比如 <body> 我是文字 </body>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“” 表示该标签的作用结束，一般称为“结束标签（end tag）”。
和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
我们以后接触的基本都是双标签
空元素（单标签）

html <标签名 /> 比如 <br />

空元素用单标签来表示，简单点说，就是里面不需要包含内容，只有一个开始标签不需要关闭。
这种单身狗标签非常少，一共没多少，记住就好了。

3. HTML标签关系

主要针对于双标签 的相互关系分为两种：务必熟悉记住这种标签关系，因为后面标签嵌套特别多，很容易弄混他们的关系。

1) 嵌套关系

2) 并列关系

建议：

html 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

二. 代码开发工具（书写代码）

为了提高我们的开发效率
减少代码的出错我们不提倡用记事本开发，我们有更好的工具。

Dreamweaver
SublimeText
WebStorm
HBuilder
VScode

sublime有非常多的优点，最重要的就是非常轻量级，打开速度超快，楼主目前学习暂时选用sublime。

sublime生成html骨架小技巧

双击打开软件
新建文件（ctrl+n）
保存（ctrl+s）,保存为：文件名.html （注意后缀名必须是 .html )
放大缩小代码按住 ctrl 在滚动鼠标滚轮或者 ctrl+ 加号键和 ctrl + 减号键
生成页面骨架结构
- html: 5 按下tab键或者
- ! 按下tab键
在浏览器中预览页面
- 右键在浏览器中打开

三. 文档类型<!DOCTYPE>

用法：

html <!DOCTYPE html>

作用：

<!DOCTYPE> 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

<!DOCTYPE html> 就是告诉浏览器按照HTML5 规范解析页面.

约定：

HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明

四. 页面语言lang

~~~html 指定html 语言种类 ~~~

最常见的2个：

en定义语言为英语
zh-CN定义语言为中文

五. 字符集

字符集(Character set)是多个字符的集合。

计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字 GUO BIAO
BIG5 繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则基本包含全世界所有国家需要用到的字符
这句代码非常关键，是必须要写的代码，否则可能引起乱码的情况。

六. HTML标签的语义化

白话：所谓标签语义化，就是指标签的含义。

根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

遵循的原则：先确定语义的HTML ，再选合适的CSS。所以，学习html标签，要根据语义去记忆。 HTML网页中任何元素的实现都要依靠HTML标签。