Investigator Veritatis

02-第一个HTML

4 min read

1 浏览器渲染

1.1 渲染本质

HTML 本质是文本，浏览器通过渲染引擎解析标签，并按 Web 标准 转换为可视页面。

  • 写的是“结构”（标签）
  • 浏览器负责“显示”（渲染）

1.2 有无标签

  • 无标签：所有内容合并为一行，空格/换行失效
人生的指示:
吃放
睡觉
重复
  • 有标签：浏览器按语义自动排版
<p>人生的指示：</p>  
<ul>  
  <li>吃饭</li>  
  <li>睡觉</li>  
  <li>重复</li>  
</ul>

2 html的基本格式

2.1 基本组成结构

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>网页标题</title>  
</head>  
<body>  
    页面内容  
</body>  
</html>

<!DOCTYPE html>告诉浏览器这是 HTML 文件。现代浏览器已能自动识别，不写也行，但建议保留。

2.2 HTML标签

<html> 是根标签，所有内容都在它里面，<html> 开始，</html> 结束。lang 属性是给搜索引擎看的，lang="en" 表示英文站，lang="zh" 表示中文站，对页面显示没有影响。

2.3 head标签

<head> 紧跟在 <html> 后面，用来放文档的头部信息，内容不会显示在页面上。一个 HTML 文档只能有一对 <head>。

2.4 title标签

<title> 放在 <head> 里，定义网页标题，内容显示在浏览器标签栏上。一个文档只能有一对。

2.5 body标签

<body> 放在 <head> 后面，页面上所有可见内容都写在里面，一个文档只能有一对。

3 标签之间的关系

标签可以按照规则进行嵌套

graph TD
     建立连接
    A --- B
    A --- C

    %% 样式美化（匹配截图颜色）
    style A fill:#5b84d1,stroke:#333,color:#fff
    style B fill:#5d3ba8,stroke:#333,color:#fff
    style C fill:#f1d302,stroke:#333,color:#000

嵌套关系: 类似于父亲和儿子之间的关系

并列关系: 类似与兄弟之间的关系

4 标签的分类

4.1 双标签

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

<标记名></标记名>

该语法中“<标记名>”表示该标记的作用开始，一般称为“开始标记（start tag）”，“</标记名>” 表示该标记的作用结束，一般称为“结束标记（end tag）”。和开始标记相比，结束标记只是在前面 加了一个关闭符“/”。

4.2 单标签

单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

<标记名/>

Recent Notes

Graph View