html学习笔记（一）——html简介、元素、文档结构

本文链接：https://blog.csdn.net/code_bro/article/details/126104566

8月1日零基础自学HTML笔记第一篇。

一、什么是html

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。

二、html元素

1. 元素的结构和分类

html元素的结构

开始标签
结束标签
内容

html元素的分类

块级元素
内联元素
空元素：只有一个标签的元素，通常用于嵌入一些东西

2. 属性

用于修饰标签，存放在开始标签中

一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个等于号。
一个属性值，由一对引号“ ”引起来。（单双引号都可以，风格不同，但是不能混用）

布尔属性：没有属性值的属性

三、html文档结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

```
<!DOCTYPE html>
```
: 声明文档类型。很久以前，早期的 HTML(大约 1991 年 2 月)，文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
然而这种写法已经过时了，这些内容已成为历史。只需要知道
```
<!DOCTYPE html>
```
是最短有效的文档声明。
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
<head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。以后的章节能学到更多关于元素的内容。
<meta charset="utf-8">: 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

这里有几点注意事项：

html中的多个空白字符只会被翻译成一个
html中的特殊字符需要转义，&号开始；号结束，中间是特殊编码
html注释格式为

1. head标签

不会被浏览器显示，作用是保存一些元数据

title标签用于在 head 标签内添加标题（注意不要和 h1 标签混淆，后者是用来给 body 标签添加标题的）
meta元素中包括name，content，charset等属性
网页添加自定义图标favicon的方式是用link元素选取处在与网站索引页面相同目录的.ico格式图片（不建议但可以是.png或.gif，.ico格式对古老的浏览器更有友好）

link元素和script元素用于在html中应用css和js，这里详细介绍两者

link

link 元素经常位于文档的头部。这个 link 元素有 2 个属性，rel=“stylesheet” 表明这是文档的样式表，而 href 包含了样式表文件的路径：

<link rel="stylesheet" href="my-css-file.css">

script

script 元素没必要非要放在文档的 head 中，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容（如果脚本尝试访问某个不存在的元素，浏览器会报错）。实际上还有很多方法可用于处理加载 JavaScript 的问题，但这是现代浏览器中最可靠的一种方法。

<script src="my-js-file.js" defer></script>