阅读量:0
HTML基础笔记（下）
介绍
费曼学习法最重要的部分，即把知识教给一个完全不懂的孩子——或者小白。
为了更好的自我学习，也为了让第一次接触某个知识范畴的同学快速入门，我会把我的学习笔记整理成电子幽灵系列。
提示：文章的是以解释-代码块-解释的结构呈现的。当你看到代码块并准备复制复现的时候，最好先保证自己看过了代码块前后的解释。
＜电子幽灵＞前端第一件：HTML基础笔记上中，最基础的一部分HTML标签和已经以表格的形式呈现出来了；接下来，将是对一些重要的标签进行详细叙述，并简单介绍头部和CSS。
HTML基础笔记下
本篇笔记主要来源于对 菜鸟教程：HTML教程的学习。
重要标签
a :超链接标签
a用来对文本附加“超级链接”。超级链接是各个网页之间的链接，可以说，没有超级链接，就没有今天的互联网。
<!--该段代码部分由AI Fitten Code生成并已经过验证--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a id="y1">Hello World</a> <br/> <a href="https://www.csdn.com" target="_blank">csdn主页</a> <br/> <a href="https://www.baidu.com"> <img src="/zb_users/upload/2024/csdn/bd_logo1.png" alt="百度logo"/> </a> <br/> <a href="#y1">这是一个实验性锚点</a> </body> </html> a的常用属性
- href:必需属性,指示链接的目标URL。
- target：指示在哪个地方打开新页面。常用值：
- _self:在当前页面打开
- _blank：在新的空白页面中打开
- _parent:在父窗口中打开
- _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)
- 其他页面名字：输入希望打开的页面名字
- download：指示这是不是下载链接。如果存在则是下载链接。
- id:设置锚点
img:图片标签
img的用处非常简单：插入各种各样的图像文件。
img的常用属性
- src:必需属性,指示图片的来源URL。
- alt:必需属性,指示链接的目标URL。
- height:设置图像高度。
- width:设置图像宽度。
- loading:如果一个HTML中有图片，那么图片文件需要另外加载；loading表示图片应当何时加载。
- eager：立即加载图像（让图像优先级靠前）
- lazy：延迟加载图像（让图像优先级靠后）
table及附属:表格标签
table/thead/tbody/tr/th/td/tfoot等标签用来定义表格基本表格内的元素。
<!--该段代码部分由AI Fitten Code生成并已经过验证--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>电话</th> <th>邮箱</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> <td>男</td> <td>13812345678</td> <td>zhangsan@163.com</td> </tr> </tbody> </table> </body> </html> table及其附属标签、常用属性
- table:定义表格
- border,规定表格有没有边框。只能是border=“1"或border=”"
- thead:定义表格的首部，无任何特殊属性
- tr:定义表格的一行，无任何特殊属性
- th:定义一个表头单元格
- colspan:单元格可横跨的列数
- rowspan:单元格可横跨的行数
- headers:设置该单元格所相关联的一个或多个表头单元格
- scope:规定该单元格是否是一个列/行/列组/行组的表头
- tbody:定义表格的主要部分，无任何特殊属性
- td:定义一个标准单元格
- colspan:单元格可横跨的列数
- rowspan:单元格可横跨的行数
- headers:设置该单元格所相关联的一个或多个表头单元格
- tfoot:定义HTML的页脚，无任何特殊属性
ol/ul/dl：定义列表
ol/ul/dl可以定义有序/无序/自定义列表。
而且，列表之间几乎可以随意嵌套。
<!--该段代码部分由AI Fitten Code生成并已经过验证--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <ul> <li>tuple</li> <li>list</li> <li>dictionary</li> </ul> <ol start="4"> <li>Python</li> <li>Java</li> <li>C++ <ol reversed> <li>C#</li> <li>Swift</li> <li>Kotlin</li> </ol> </li> </ol> <dl> <dt>HTML</dt> <dd>- Hypertext Markup Language</dd> <dt>CSS</dt> <dd>- Cascading Style Sheets</dd> <dt>JavaScript</dt> <dd>- Programming Language</dd> </dl> </body> </html> ol/ul/dl及相关标签、常用属性
- ol：定义有序列表
- start:从哪个数字开始排列
- reversed：这个列表的数字排序是否是倒序
- li：定义列表项
- ul：定义无序列表，无任何特殊属性
- dl：定义描述列表，无任何特殊属性
- dt：定义描述列表项，无任何特殊属性
- dd:对描述列表中的一个项目/名字进行描述，无任何特殊属性。
以上标签实际上已经足够我们构建一个简单的、相对完整的HTML页面了；但实际上还不够。它不够美观、不够具有交互性、也不够结构化、不够一目了然。
正如书本上需要一些插图，HTML上也需要一些色彩、一些只有互联网能做到的奇妙效果。在学习怎样实现它们之前，我们先把目光放回到我们已经忽略很久的head身上。虽然一般的head标签及其内容可以自动填补，但是为了下一步的润色以及对HTML更深刻的理解，学习它是必要的。
head介绍
正如之前在＜电子幽灵＞前端第一件：HTML基础笔记上中提到的，head的作用是为整个HTML打底。有了它，HTML页面将会变得更加结构化。
head中的标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <base href="https://www.baidu.com/img/" target="_blank"/> <link rel="stylesheet" type="text/css" href="styles.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> <title>Document</title> </head> <body> <a href="https://www.baidu.com"> <img src="bd_logo1.png" alt="百度logo"/> </a> <br/> <a href="https://www.google.com">这是个通往google的链接,由于base中设定了target="_blank",点击后会在新标签页打开</a> <br/> <h1>我是通过style渲染后显示的。</h1> <p>我也是。</p> </body> </html head中能够容纳的标签很少，不妨直接全部列出。
| 标签 | 解释 | 常用属性 |
|---|---|---|
| title | 定义文档标题 | |
| base | 为页面上所有相对链接规定默认 URL 或默认目标 | href：规定该页面上所有相对链接的基准URL target：规定在此页面上所有链接在哪里打开 |
| link | 定义页面中文档与外部资源的关系，最常用来链接样式表 （只在base中出现，但可以出现任意次数） | href：(必需)外部资源所在URL rel：(必需)当前文档和被链接文档的关系 |
| meta | 提供HTML的元数据 | charset：定义文档用哪种字符编码 http-equiv:把content中的内容关联到http头部 name:把content属性关联到一个名称 content：定义和http-equiv或name相关联的元信息 |
| script | 定义客户端脚本，或者指向外部脚本文件 | src：指向外部脚本的URL charset：外部脚本中的字符编码 defer：页面完成解析后再执行外部脚本 async：异步执行外部脚本 |
| style | 定义HTML文档的样式信息 (可以出现任意次数) | type：规定style的MIME类型 |
对于style、link、script，后续还会有更加详细的细分和更好的用处，但这里先不妨告一段落，基础的HTML学习大概就是这些了。
CSS介绍
在对以上标签的介绍中，我忽略了很多一部分已经被新的标准废弃或者不推荐使用的属性。这是因为，从HTML4开始，有专门的语言来让它变得更加美观，这门语言就是CSS层叠样式表，后面也会专门来讲。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <base href="https://www.baidu.com/img/" target="_blank"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> h1 {color:red;} p {color:blue;} </style> <title>Document</title> </head> <body> <h1>我是通过style渲染后显示的。</h1> <p>我也是。</p> <p style="color:green;">我有专门的内联样式。</p> </body> </html> 当我们需要对当前页面做出一些渲染的时候，就可以使用CSS：在head中添加style标签，并且在style中规定每个标签中的渲染样式。这就是 内联样式表。
如果需要对单个标签内部做渲染，就可以在标签内部的style标签中使用CSS。这就是 内联样式。
当不同页面有复杂的渲染方式时，就可以用link标签外联外部的.css文件。
style标签有很多种属性，进行不同的CSS渲染方法。
蒸汽时代的人会或许难以置信，在他们那个时代不可或缺的本领，对电气时代的人而言已经失去意义，不再被传承；正如过去的我们看将来。长此以往，人类脱离技术的生存是否会变得越来越艰难呢？还是说，人类以奇迹和智慧创造技术，技术赋予人类以改造世界的能力——这本身就是独属于智人的一种进化？
