（HTML学习记录）：Web标准、HTML 初识

最新推荐文章于 2022-10-06 11:27:07 发布

NGC_2070

最新推荐文章于 2022-10-06 11:27:07 发布

阅读量163

点赞数 1

分类专栏： # HTML与CSS进阶

本文链接：https://blog.csdn.net/baidu_41388533/article/details/108662344

版权

HTML与CSS进阶专栏收录该内容

42 篇文章 0 订阅

订阅专栏

写在前面：参考哔哩哔哩黑马程序员pink老师教程
地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26

Web标准

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。

Web 标准构成

构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

标准说明
结构结构用于对网页元素进行整理和分类，咱们主要学的是HTML。
表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript
web标准小结

web标准有三层结构，分别是结构（html）、表现（css）和行为（javascript）
结构类似人的身体，表现类似人的着装，行为类似人的行为动作
理想状态下，他们三层都是独立的，放到不同的文件里面

标准	说明
结构	结构用于对网页元素进行整理和分类，咱们主要学的是HTML。
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript

HTML 初识

基本概念
HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。
所谓超文本，有2层含义：
因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。
html 总结:
html 是超文本标记(标签)语言
学习html 主要学习html标签
用html标签描述网页元素。比如图片标签、文字标签、链接标签等等
标签有自己的语法规范，所有的html标签都是用 <> 表示的

HTML骨架标签

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>
html骨架标签总结

标签名 定义说明
<html></html> HTML标签页面中最大的标签，我们成为根标签
<head></head> 文档的头部注意在head标签中我们必须要设置的标签是title
<titile></title> 文档的标题让页面拥有一个属于自己的网页标题
<body></body> 文档的主体元素包含文档的所有内容，页面内容基本都是放到body里面的

示意图：

注：HTML标签名、类名、标签属性和大部分属性值统一用小写

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们成为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<titile></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

HTML元素标签分类

标签：
在HTML页面中，带有“< >”符号的元素被称为HTML标签
如上面提到的 <html>、<head>、<body>都是HTML骨架结构标签。
分类：
<标签名> 内容 </标签名>  比如 <body>  我是文字  </body>
常规元素（双标签）
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”，有始有终。
和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
以后接触的基本都是双标签
空元素（单标签）
<标签名 />  比如  <br />
空元素用单标签来表示，简单点说，就是里面不需要包含内容，只有一个开始标签不需要关闭。

这种单身狗标签非常少，一共没多少，我们多记忆就好

HTML标签关系

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

`文档类型<!DOCTYPE>`

用法：
<!DOCTYPE html> 
作用：
声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
就是告诉浏览器按照HTML5 规范解析页面.
HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明

页面语言lang

<html lang="en">  指定html 语言种类
最常见的2个：

en定义语言为英语

zh-CN定义语言为中文

<html lang="zh-CN"> 指定该html标签内容所用的语言为中文
考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
可以告诉浏览器，搜索引擎，一些处理Html的程序对页面语言内容来做一些对应的处理或者事情。比如可以
根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别等等

字符集

<meta charset="UTF-8" />
字符集(Character set)是多个字符的集合。
计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312
gb2312 简单中文包括6763个汉字 GUO BIAO
BIG5 繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则基本包含全世界所有国家需要用到的字符
这句代码非常关键，是必须要写的代码，否则可能引起乱码的情况。
这句话是让 html 文件是以 UTF-8 编码保存的，浏览器根据编码去解码对应的html内容。
一般情况下统一使用 "UTF-8" 编码, 请尽量统一写成标准的 "UTF-8"，不要写成 "utf-8" 或 "utf8" 或 "UTF8"。

HTML标签的语义化

白话： 所谓标签语义化，就是指标签的含义。
根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰
方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。( 裸奔起来一样好看 )
遵循的原则：先确定语义的HTML ，再选合适的CSS。

NGC_2070

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（HTML学习记录）：Web标准、HTML 初识

写在前面：参考哔哩哔哩黑马程序员pink老师教程地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录Web标准Web 标准构成web标准小结HTML 初识HTML骨架标签HTML元素标签分类HTML标签关系文档类型页面语言lang字符集HTML标签的语义化Web标准Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。Web 标准构成构成：.
复制链接

扫一扫

专栏目录