【学习笔记】前端基础入门之HTML文档与实现

原创已于 2024-08-17 09:44:18 修改 · 905 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #笔记

于 2024-08-17 09:40:31 首次发布

HTML 同时被 2 个专栏收录

1 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

【前端入门】了解HTML

HTML 入门
- 一什么是html

HTML 入门

一什么是html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
从小学学习信息技术时我们就会了解到互联网基础就包含Html，他是用来创建网页的的标准标记语言。

1.1 标记语言

标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。百度百科-标记语言

1.2 语言结构

标记语言只有两个重点，一、标签，二、属性

标签：
用于标记行为模式与结构模式的一种，相对面向对象的编程语言可理解为类，例如
objectName标签，以"<>“包裹，”/"结束。有两种表达模式一种是单一表达，一种是嵌套表达。

单一表达

<objectName />

采用“<>”包裹空格后以“/”结束。

嵌套表达

<objectName><objectName />

采用"<>"包裹，结束标签与单一表达格式相同。共同组成一个标签组，标签内可镶嵌其他内容。
2. 属性
在标签名后添加属性名，格式key=value，例如。无论单一表达还是嵌套表达都支持属性。且嵌套表达与单一表达属性描述方式相同。

1.3 解析

浏览器在构建用户界面时会将标签解析为一个对象，每一个默认标签对应一个独立解析模式，有专属用户显示，同时附带有专属的可接受属性，来提供显示与响应效果，每一种浏览器引擎对用户页面显示效果与响应能力都会不同。这里不对浏览器深层内容进行讲述。

1.4 html文档结构


<!DOCTYPE html> 
<html lang="zh">
    <head> 
        <meta charset="UTF-8">
        <title>一个练习的html</title>
     </head>
      <body> 
     </body> 
</html>

上述代码为一个标准html文档结构
包含文档类型声明，!DOCTYPE，这部分可看出该文档是html类型，解析器将按照html解析方式对文档进行解析。
html 是html的根标签也叫（root标签）标识文档块中服从html规范所有的标签都是html的子标签，应被包含在html标签内。lang属性表示文档语言种类。
hand 是html文档的头部区域，用于定义文档的元信息例如：meta 标签、title标签等
body 是文档正文内容html的90%以上的内容将被定义在此区域内。
特别注意：html解析器对文档解析与渲染是从上到下，因此这也是html的文档流。这一点请务必get到否则后续的css学习中你将无法理解布局模式。