HTML基础笔记（下）

介绍

费曼学习法最重要的部分，即把知识教给一个完全不懂的孩子——或者小白。
为了更好的自我学习，也为了让第一次接触某个知识范畴的同学快速入门，我会把我的学习笔记整理成电子幽灵系列。
提示：文章的是以解释-代码块-解释的结构呈现的。当你看到代码块并准备复制复现的时候，最好先保证自己看过了代码块前后的解释。

＜电子幽灵＞前端第一件：HTML基础笔记上中，最基础的一部分HTML标签和已经以表格的形式呈现出来了；接下来，将是对一些重要的标签进行详细叙述，并简单介绍头部和CSS。

HTML基础笔记下

• HTML基础笔记（下）
• • 介绍
  • 重要标签
  • • a :超链接标签
    • • a的常用属性
    • img:图片标签
    • • img的常用属性
    • table及附属:表格标签
    • • table及其附属标签、常用属性
    • ol/ul/dl：定义列表
    • • ol/ul/dl及相关标签、常用属性
  • head介绍
  • • head中的标签
  • CSS介绍

本篇笔记主要来源于对 菜鸟教程：HTML教程的学习。

重要标签

a :超链接标签

a用来对文本附加“超级链接”。超级链接是各个网页之间的链接，可以说，没有超级链接，就没有今天的互联网。

                         Hello World     
     csdn主页     
                        
     这是一个实验性锚点   

a的常用属性

1. href:必需属性,指示链接的目标URL。
2. target：指示在哪个地方打开新页面。常用值：
   1. _self:在当前页面打开
   2. _blank：在新的空白页面中打开
   3. _parent:在父窗口中打开
   4. _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)
   5. 其他页面名字：输入希望打开的页面名字
3. download：指示这是不是下载链接。如果存在则是下载链接。
4. id:设置锚点

img:图片标签

img的用处非常简单：插入各种各样的图像文件。

img的常用属性

1. src:必需属性,指示图片的来源URL。
2. alt:必需属性,指示链接的目标URL。
3. height:设置图像高度。
4. width:设置图像宽度。
5. loading:如果一个HTML中有图片，那么图片文件需要另外加载；loading表示图片应当何时加载。
   1. eager：立即加载图像（让图像优先级靠前）
   2. lazy：延迟加载图像（让图像优先级靠后）

table及附属:表格标签

table/thead/tbody/tr/th/td/tfoot等标签用来定义表格基本表格内的元素。

                         
         
             
                 
姓名
                 
年龄
                 
性别
                 
电话
                 
邮箱
             
         
         
             
                    
张三
                 
20
                 
男
                 
13812345678
                 
zhangsan@163.com
             
         
     
   

table及其附属标签、常用属性

1. table:定义表格
   1. border,规定表格有没有边框。只能是border=“1"或border=”"
2. thead:定义表格的首部，无任何特殊属性
3. tr:定义表格的一行，无任何特殊属性
4. th:定义一个表头单元格
   1. colspan:单元格可横跨的列数
   2. rowspan:单元格可横跨的行数
   3. headers:设置该单元格所相关联的一个或多个表头单元格
   4. scope:规定该单元格是否是一个列/行/列组/行组的表头
5. tbody:定义表格的主要部分，无任何特殊属性
6. td:定义一个标准单元格
   1. colspan:单元格可横跨的列数
   2. rowspan:单元格可横跨的行数
   3. headers:设置该单元格所相关联的一个或多个表头单元格
7. tfoot:定义HTML的页脚，无任何特殊属性

ol/ul/dl：定义列表

ol/ul/dl可以定义有序/无序/自定义列表。

而且，列表之间几乎可以随意嵌套。

                         
         
HTML
         
CSS
         
JavaScript
     
     
         
tuple
         
list
         
dictionary
     
     
         
Python
         
Java
         
C++             
                 
C#
                 
Swift
                 
Kotlin
             
         
     
     
         
HTML
         
- Hypertext Markup Language
         
CSS
         
- Cascading Style Sheets
         
JavaScript
         
- Programming Language
     
   

ol/ul/dl及相关标签、常用属性

1. ol：定义有序列表
   1. start:从哪个数字开始排列
   2. reversed：这个列表的数字排序是否是倒序
2. li：定义列表项
3. ul：定义无序列表，无任何特殊属性
4. dl：定义描述列表，无任何特殊属性
5. dt：定义描述列表项，无任何特殊属性
6. dd:对描述列表中的一个项目/名字进行描述，无任何特殊属性。

以上标签实际上已经足够我们构建一个简单的、相对完整的HTML页面了；但实际上还不够。它不够美观、不够具有交互性、也不够结构化、不够一目了然。

正如书本上需要一些插图，HTML上也需要一些色彩、一些只有互联网能做到的奇妙效果。在学习怎样实现它们之前，我们先把目光放回到我们已经忽略很久的head身上。虽然一般的head标签及其内容可以自动填补，但是为了下一步的润色以及对HTML更深刻的理解，学习它是必要的。

head介绍

正如之前在＜电子幽灵＞前端第一件：HTML基础笔记上中提到的，head的作用是为整个HTML打底。有了它，HTML页面将会变得更加结构化。

head中的标签

                                                           
     这是个通往google的链接,由于base中设定了target="_blank",点击后会在新标签页打开     
     
我是通过style渲染后显示的。
     
我也是。
  

                                  
我是通过style渲染后显示的。
     
我也是。
     
我有专门的内联样式。