基础知识整理-1-HTML

codeyx 发布于 2025-8-19 15:07 阅读：50 笔记

Hello everybody! 再过两天就是中秋节啦～
今天搭建了一个小博客，用来记录一下我的 codelife《一位优秀前端的自我修养》hhhh
目前不知道写什么好，就先把学习笔记搬上来吧...（正好印象笔记的会员也要到期了。
笔记中如果有错误，还请指正我，感谢～

上世纪 90 年代，Berners-Lee 上线了世界上第一个网站：http://info.cern.ch/hypertext/WWW/TheProject.html
现在我们看起来觉得它素面朝天，但在当时绝对是“天才之作”。这个网页就是用纯 HTML 编写的，没有样式和动态交互。

HTML 在网页中充当了骨架的作用，负责网页的内容结构。
CSS 在网页中负责视觉体验，丰富的样式带来更好的观感。
JavaScript 在网页中负责交互处理，比如发起网络请求等操作。

HTML 的全称是 HyperText Markup Language 中文名是“超文本标记语言”

什么是标记语言？

由无数个标记（标签、tag）组成；
对某些内容进行特殊标记，以供其他解释器识别处理；
比如使用<h2></h2>标记的文本就会被识别为“标题”进行展示；
由标签和内容组成的部分称为元素（element）；

HTML 文件的拓展名是.htm 或者.html
因为历史遗留问题，Win95/Win98 系统的文件拓展名不能超过 3 个字符，所以当时使用 htm。现在统一使用.html
html 文件的基本结构：

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <p>网页内容</p>
  </body>
</html>

注：前端代码通常缩进 2 空格。

HTML 都有哪些元素标签？
可以参考 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

有开始标签和结束标签的叫双标签元素，例如<p>内容</p>
只有一个标签的叫单标签元素，例如<img>
在 H5 版本前，单标签元素需要加上/，例如<img />。H5 版本可省略，推荐不加。
HTML 元素不区分大小写，推荐小写。
元素可以拥有属性，例如<p class="note"></p> 为 p 元素添加 class 属性。
元素可以嵌套，形成“父子”关系。例如：

<ul>
  <li></li>
</ul>

代码注释的作用：类似备忘录，写完代码后可能会忘记当初为什么要这么写代码，做个备忘。同时也为了方便同事理解你的代码。
HTML 的注释格式： 在编辑器中的快捷键，选中内容后按 ctrl + / 即可添加注释。

文档第一行一定是文档类型声明（DTD），H5 时代是<!DOCTYPE html>，相比以前 H4 或 XHTML 的文档类型声明简洁很多。
浏览器识别后会按 HTML5 的标准解析页面。

<html>元素被称为“根元素”，W3C 标准建议为根元素增加lang属性，作用是：
帮助语音合成工具确定发音
帮助翻译工具确定翻译规则

head 标签内存放网页的配置信息，比如网页标题、网页编码等
网页标题：<title>网页标题</title>
网页编码：<meta charset="UTF-8"> 配置网页编码时要用到元标签<meta>

body 标签内存放网页的内容
<h1>大标题</h1>h1~h6 是标题元素，级别从大到小。一个网页中建议只使用一个 h1 元素。
<p>文本内容</p>段落标签，表示一段内容。
<img src="图片地址" alt="图片描述"> 在网页中插入图像，alt 属性在图片加载不成功时会显示，也会供屏幕阅读器使用。
<a href="要跳转的网址" target="_self" ></a>标签，或称锚(anchor)元素，用于跳转链接。target 属性默认在当前窗口打开链接，改为_blank表示在新窗口打开。
当文档内容比较长时，可以给元素添加 id 属性，在 a 标签的链接后面加#id即可跳到 id 所在位置。
a 标签可以包裹 img 标签，实现点击图片就可以跳转链接的功能。
iframe 元素可以在一个网页中嵌入另一个网页。
<iframe src="网页地址" frameborder="0"></iframe> 如果想禁止其他人通过 iframe 的方式使用你的网页，可以在响应头设置X-Frame-Options:sameorigin。
frameborder 属性用来控制是否显示边框，0 是无边框 1 是有边框。
a 元素 target 属性的其他值：_parent在父窗口打开 URL，_top在顶层窗口打开 URL。这两个值是和 iframe 结合使用的，日常基本用不到。

<div>和<span>元素的历史：
网页的发展早期没有 css，那时通过 html 语义化元素来告知浏览器内容如何显示。后来出现了 css，结构和样式需要分离，这时候 html 只负责结构。所以就出现了 div、span 来编写 html 的结构，样式交给 css 处理。
这两个都是纯粹的“容器”，div 是块级元素，span 是行内元素
块级元素：占据整行空间，能直接设置宽高，垂直排列，外边距影响其他元素。
行内元素：不独占一行，根据内容大小来控制自身大小，不能直接设置宽高，水平排列，垂直外边距不影响其他元素。不能包含块级元素。

空白折叠现象：文字与文字之间的多个空格换行会被折叠成为一个空格。标签“内壁”和文字之间的空格会被忽略。

有些属性只能设置在特定的元素中，比如 img 的 src、a 元素的 href
也有一些属性是所有元素都可设置的，这样的被称为“全局属性”
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes

列表标签：无序列表：（ul）有序列表：（ol）定义列表：（dl）
ul、ol 的子元素只能是 li，ul 的 type 属性废弃，ol 的 type 属性如下：

| a | 表示小写英文字母编号 |
| A | 表示大写英文字母编号 |
| i | 表示小写罗马数字编号 |
| I | 表示大写罗马数字编号 |
| 1 | 表示数字编号（默认） |

ol 拥有 start 属性，属性值必须是一个整数，指定列表编号的起始值。还有个 reversed 属性，表示倒序。
定义列表 demo：

<dl>
  <dt>北京</dt>
  // 数据项
  <dd>我国首都、政治中心</dd>
  //数据定义
  <dt>上海</dt>
  <dd>我国经济、科技创新中心</dd>
</dl>

img 标签：用于在网页上展示图像，支持以下格式：

| .bmp | windows 画图软件默认保存的格式，位图 |
| .gif | 动态图片 |
| .jpeg(.jpg) | 有损压缩图片 |
| .png | 支持透明效果 |
| .svg | 矢量图片 |
| .webp | 最新的压缩算法非常优秀的图片格式 |

a 标签的悬停文本属性：title
audio 标签可插入音频，兼容到 IE9

<audio src="音频地址" controls>
  //controls显示播放控件 autoplay属性自动播放 loop属性循环播放
  显示这段话：你的浏览器不支持audio标签。</audio
>常用的支持mp3与ogg、wav等格式的音频。

video 标签可插入视频，兼容到 IE9

<audio controls>
  <source src=“music.mp3” type=“audio/mpeg”> <source src=“music.ogg”
  type=“audio/ogg”> 你的浏览器不支持
</audio>

区块标签：

| <section> | 文档的区域，语义比 div 大 |
| <article> | 文档的核心内容 |
| <aside> | 文档的非必要相关内容 |
| <nav> | 导航条 |
| <header> | 页头 |
| <main> | 网页核心部分 |
| <footer> | 页脚 |

span 标签是文本中的“区块标签”无任何默认样式 b 被加粗、u 加下划线、i 倾斜，css 以替代他们的功能，在网页中也可以表示需要强调的文本。
strong、em、mark 标签均表示强调语义。
figure、figcaption 标签，figure 元素代表一段独立的内容，与说明 figcaption 配合使用，他是一个独立的引用单元，比如建议读者拓展视野的图片，当这部分转移到附录中或者其他页面时不会影响到主体。

<figure>
  <img src="“xxx.png”" />
  <figcaption>这图片是xxx的图片</figcaption>
</figure>

表单标签：所有表单都以一个 form 元素开始

<form action="“xxx.php”" method="post">
  //action表示要提交到后台的地址
  <input type="“text”" placeholder="“占位提示”" disabled value="值" />
</form>
//
type=“radio”是单选，互斥的值要设置他们的name属性为相同的值。加上checked表示被默认选中。value属性是像服务器提交的值。
// label标签，将文字和单选按钮进行绑定。点击文字也视为点击单选按钮
<label> <input type="“radio”" /> 男 </label>
// 在html4时代的绑定方式：
<input type="“radio”" id="”nan”" />
<label for="“nan”">男</label>
//
type=“checkbox”是复选框，同组复选框要把它们的name设为一样的，向服务器提交的是value值type=“password”是密码框
// 去掉input的蓝色边框：outline:none

下拉菜单：

<select>
  <option value="alipay">支付宝</option>
  //默认选中加 selected
  <option value="“wx”">微信</option>
  <option value="“bank”">网银</option>
</select>

多行文本框：

<textarea>
    //rows和cols属性用于定义多行文本框的行数和列数    
</textarea>

三种按钮：

<input /> // type=“button”普通按钮，可简写为：<button>
  中间除了可以是文字外还可以是图片
</button>
// type=“submit” 提交按钮 和button标签默认有提交表单的功能。 // type=“reset”
重置按钮

html5 新增表单控件，更丰富的 input 种类：

| color | 颜色选择控件 |
| date、time | 日期、时间选择控件 |
| email | 电子邮件输入控件 |
| file | 文件选择控件 |
| number | 数字输入控件 |
| range | 拖拽条 |
| search | 搜索框 |
| url | 网址输入控件 |

datalist 控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应。

<input type="“text”" list="“province”" />
<datalist id="province">
  <option value="山东"></option>
  <option value="北京"></option>
</datalist>

表格标签 table
td 和 th 上的 colspan 属性用来合并列跨度，rowspan 属性用来合并行跨度。
cellpadding 定义了表格单元的内容和边框之间的空间，已废弃，请使用 css 替代。

块元素：display:block/table; 有div h标签 table 列表标签 p等
内联元素：display:inline/inline-block；有 span img input button等

一些常见题目：

一、什么是 SEO（搜索引擎优化）？为什么它对网站开发至关重要？
SEO 是搜索引擎优化，它的英文全称是 Search Engine Optimization
因为我们开发的网站并不全是后台管理系统，还有很多是门户网站或者其他功能网站，（例如：地址帮）这些网站通常需要获取更多的流量。所以我们要在了解一定的搜索引擎自然排名机制的基础上，对网站进行内部和外部的优化，让用户在使用关键字搜索后，尽可能的提升网站的自然排名。

二、SEO 有哪些关键点？在日常开发中，都采取了哪些措施来进行 SEO？
按照在开发中的优先级进行排序，主要有以下几种方式：
1.SSR 服务端渲染
现在的项目基本都是使用 Vue、React 这种框架开发的，大部分页面由客户端 JavaScript 动态生成。很多搜索引擎只能爬去静态 HTML 代码，不会执行 JS 代码，因此动态生成的内容无法被爬虫索引。
另外多数情况下不会等待数据加载完成后再抓取，也会导致网站很多关键信息不能被收录。
所以有 SEO 要求的网站我们都会采用 SSR 技术。
SSR 能够在服务器上执行 JavaScript 并渲染出 HTML 页面，然后发送到客户端。提升 SEO 效果。
使用 Vue 开发的网站选择 Nuxt.js、使用 React 开发的网站选择 Next.js

2.准确的 TDK 表述
TDK 就是 title、description、keywords，描述要贴合网站主题

3.语义化的 HTML 元素，图片 alt、h1、h2 等合理使用
语义化的 HTML 代码和符合 W3C 规范是 SEO 关键要素之一。
语义化是指使用具有明确含义的 HTML 元素。搜索引擎在爬取网站时，也会更容易理解网站的内容以便收录。（同时也能提高代码可读性和可维护性）例如 header、footer、nav、article、aside
图片必须加 alt 属性
一个页面只有一个 h1 标签

4.编写合理的 robots.txt 文件
robots.txt 存放在网站根目录，主要作用是告诉搜索引擎爬虫哪些部分可被抓取，哪些部分不应该被抓取。
通过指示搜索引擎忽略不重要的文件或目录，可让搜索引擎更专注于重要内容的抓取和索引。

5.HTTPS
自 2014 年以来，Google 已将 HTTPS 作为其搜索排名的信号之一。

6.内部链接和外部链接
内部链接有助于建立网站的信息层次结构。但过多的内链也会分散页面权重。
没有内部链接的页面被称为“孤儿页面”，难以被发现。
高质量的外链可以提升网站的权重指数。

7.其他
sitmap 文件、网站导航、响应式处理......

URL 和 URI 的区别？
URI（Uniform Resource Identifier）统一资源标志符，用于标识 Web 技术使用的逻辑或者物理资源
URL（Uniform Resource Locator）统一资源定位符，俗称网络地址，相当于网络中的门牌号
URI 在某一规则下能把一个资源独一无二的识别出来
URL 作为一个网络 Web 资源的地址，可以唯一将一个资源识别出来，所以 URL 是一个 URI
所以 URL 是 URI 的一个子集
但 URI 并不一定是 URL