＜电子幽灵＞前端第一件：HTML基础笔记下
HTML基础笔记（下）
介绍
费曼学习法最重要的部分，即把知识教给一个完全不懂的孩子——或者小白。
为了更好的自我学习，也为了让第一次接触某个知识范畴的同学快速入门，我会把我的学习笔记整理成电子幽灵系列。
提示：文章的是以解释-代码块-解释的结构呈现的。当你看到代码块并准备复制复现的时候，最好先保证自己看过了代码块前后的解释。
＜电子幽灵＞前端第一件：HTML基础笔记上中，最基础的一部分HTML标签和已经以表格的形式呈现出来了；接下来，将是对一些重要的标签进行详细叙述，并简单介绍头部和CSS。
HTML基础笔记下
- HTML基础笔记（下）
-
- 介绍
- 重要标签
-
- a :超链接标签
-
- a的常用属性
- img:图片标签
-
- img的常用属性
- table及附属:表格标签
-
- table及其附属标签、常用属性
- ol/ul/dl：定义列表
-
- ol/ul/dl及相关标签、常用属性
- head介绍
-
- head中的标签
- CSS介绍
本篇笔记主要来源于对 菜鸟教程：HTML教程的学习。
重要标签
a :超链接标签
a用来对文本附加“超级链接”。超级链接是各个网页之间的链接，可以说，没有超级链接，就没有今天的互联网。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<a id="y1">Hello Worlda>
<br/>
<a href="https://www.csdn.com" target="_blank">csdn主页a>
<br/>
<a href="https://www.baidu.com">
<img src="https://www.baidu.com/img/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等标签用来定义表格基本表格内的元素。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名th>
<th>年龄th>
<th>性别th>
<th>电话th>
<th>邮箱th>
tr>
thead>
<tbody>
<tr>
<td>张三td>
<td>20td>
<td>男td>
<td>13812345678td>
<td>[email protected]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可以定义有序/无序/自定义列表。
而且，列表之间几乎可以随意嵌套。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<ol>
<li>HTMLli>
<li>CSSli>
<li>JavaScriptli>
ol>
<ul>
<li>tupleli>
<li>listli>
<li>dictionaryli>
ul>
<ol start="4">
<li>Pythonli>
<li>Javali>
<li>C++
<ol reversed>
<li>C#li>
<li>Swiftli>
<li>Kotlinli>
ol>
li>
ol>
<dl>
<dt>HTMLdt>
<dd>- Hypertext Markup Languagedd>
<dt>CSSdt>
<dd>- Cascading Style Sheetsdd>
<dt>JavaScriptdt>
<dd>- Programming Languagedd>
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>Documenttitle>
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>