Day3 今天来快速了解HTML的基础吧#2~

漫长的期末终于结束了，好不容易盼到假期，当然是要偷偷摸摸地卷死所有人鸭~【doge】

从7月份开始，我会将每天白天的学习内容进行整理，发布博客（如果出去玩就鸽了哈~），一方面希望能对自己一天的学习情况进行总结，不要那么懒只顾着看和听，另一方面希望能有人见证我的成长，共同努力，这个夏天，不要再留下任何遗憾了，留给未来的每一年来回忆吧~

目录

一、列表

二、表格 

今日份总结~

一、列表

上次我们讲到了HTML的文本，今天首先由列表来切入吧~

1.列表简介

列表是网页中最常用的一种数据排列方式，我们在浏览网页时经常可以看到列表的身影，如图。

 在HTML中，列表共分为三种：有序列表、无序列表和定义列表。

2.有序列表简介

（1）ol,即ordered list（有序列表）。li，即list（列表项）。一个有序列表可以包含多个列表项，ol标签和lI标签是配合一起使用的，不可以单独使用，

标签的子标签只能是li标签。

    

        
列表项
        
列表项
        
列表项
    

    
    
    
    


    

        
HTML
        
CSS
        
Javascript
        
jQuery
    

（2）type属性

在HTML中，我们可以使用type属性来改变列表项符号。

 

type属性的取值：

 

 对于有序列表的列表项符号，等学了CSS之后，可以使用list-style-type属性来取代。

    
    
    
    


    

        
HTML
        
CSS
        
Javascript
        
jQuery
    

 

 3.无序列表

（1）ul,即unordered list（无序列表）。

        
HTML
        
CSS
        
Javascript
        
jQuery
    

 无序列表的属性表：

同样可用CSS的list-style-type属性代替。 

    
    
    
    


    

        
HTML
        
CSS
        
Javascript
        
jQuery
    

（2）In sum

我们一般都是使用无序列表，几乎用不到有序列表

 4.定义列表

在HTML中，定义列表由两部分组成：名词和描述。

  

        
名词
        
描述
    

dl即definition list（定义列表），dt即definition term(定义名词)，dd即definition description（定义描述） 

    
    
    
    


    

        
HTML
        
制作网页的标准语言，控制网页的结构
        
CSS
        
层叠样式表，控制网页的样式
        
JavaScript
        
脚本语言，控制网页的行为
    

二、表格 

1.简介

在HTML中，一个表格一般会由以下三个部分组成。

表格：table标签

行：tr标签

单元格：td标签

    
    
    
    
    


    

        
HTML
        
CSS
    
    

        
JavaScript
        
jQuery
    

 

 表格标签：caption

在HTML中，表格一般都会有一个标题，可以用caption标签来实现（一个表格只能有一个标题）。

    
    
    
    
    


    

        
考试成绩表
        

        
小明
        
80
        
80
        
80
    
    

        
小红
        
90
        
90
        
90
    
    

        
小杰
        
100
        
100
        
100
    

 表头单元格：th

th和td在本质上都是单元格，它们之间具有以下两种区别。

显示上：浏览器会以“粗体”和“居中”来显示th标签中的内容，但是td标签不会。

语义上：th标签用于表头，而td标签用于表行。

    
    
    
    
    


    

        
考试成绩表
        

        
姓名
        
语文
        
英语
        
数学
    
    

        
小红
        
90
        
90
        
90
    
    

        
小杰
        
100
        
100
        
100
    
    

        
小明
        
80
        
80
        
80
    

 

2.语义化（标签各司其职） 

thead、tbody、tfoot把表格划分为三部分：表头、表身、表脚。有了这三个标签，表格语义更加良好，结构更清晰，也更具有可读性和可维护性。

    
    
    
    
    


    

        
考试成绩表
        

        

        
姓名
        
语文
        
英语
        
数学
    
    

    

        
小红
        
90
        
90
        
90
    
    

        
小杰
        
100
        
100
        
100
    
   
    

        
小明
        
80
        
80
        
80
    
 
    

        
平均
        
90
        
90
        
90
    

 

单纯从显示效果来说，加了和没加是一样的，但会让你的代码更具有逻辑性，并且还可以很好地结合CSS来分块控制样式。  

 3.（1）合并行：rowspan

在设计表格时，我们有时需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格，这个时候就需要用到“合并行”或“合并列”。

    
    
    
    
    


    

        

            
姓名:
            
小明
        
        

            
 喜欢水果：
            
苹果
        
        

            
香蕉
        
    

（2）合并列：colspan

在HTML中，我们可以使用colspan属性来合并列。

    
    
    
    
    


    

        

            
前端开发技术
          
        

            
 HTML
            
CSS
        
        

            
JavaScript
            
jQuery
        
    

今日份总结~

又是努力吹水的一天，明天就要给自己下禁足令了，得往死里安排才是，成年人表示JS，爪哇，Matlab我都（doge）