HTML 列表

 

1、列表

 

1.1、有序列表

 

用来规定一些顺序重要，不能随意调整的项，比如排行榜

 

属性说明： type 属性用来规定编号类型 1 / A / a / I /i

1.2、无序列表

 

用来定义一些顺序不重要的项目 ，比如商品列表，导航

   

 

属性说明： type 属性用来规定列表项前面的标记风格 desc(实心圆)/circle(空心圆)/square(方块)

1.3、定义列表

 

用来解释一些专有名词或者术语的定义

   

         名词1

         解释1

         解释2

 

         名词2

         解释1

         解释2

   

 

2、超链接

 

    文字连接：

     文本

    图片链接：

     

使用场景：

   

     跳转到京东退换服务

跳转到图片网页

 

 

    去百度

豆瓣

 

属性说明：

    href="#":  用来规定跳转目标 ，如果暂时没有就添加 "#" 占位

    target="_blank": 规定目标页面的打开方式，_self在当前窗口打开，_blank在新窗口中打开

    title="文本"：规定鼠标悬停在连接上的提示文本

3、表格

 

表格早期用于网页的整体排版布局，但是现在只适用于一些局部报表，数据表格，不适用于整个页面的布局。     

3.1、基本表格标签

table :定义整个表格

tr: 定义表格的行

td : 定义表格的普通单元格

th :定义表头单元格，文本默认加粗居中

下面截图对应的是效果图代码

3.2、复杂表格标签

caption: 给表格定义标题，紧跟在table开始标签之后

thead : 表格的头部

tbody: 表格的主体

tfoot: 表格的底部

这几个标签是为了增强表格的语义化，使表格结构清晰，但是浏览器支持情况不统一，所以一般不用写

3.3、合并单元格

colspan="n": 横向合并若干列

rowspan="n": 纵向合并若干行

3.4、表格相关属性

 

table标签属性：

 

 

    border : 给table以及里面的单元格都添加边框

        border="0"没有边框

        border="1"添加1px边框

    width="300" ： 整个表格的宽度

    height="300"： 整个表格的高度

    cellspacing="0": 单元格之间的间距

    cellpadding="10":单元格的内边距

 

table的样式属性

 

 

    border-collapse:

        - collapse; 去掉单元格之间的间距并且相邻边框合并

        - separate; 单元格独立

    border-spacing: 设置单元格之间的间距

表格特点：

表格设置固定宽高时，单元格会按照内容的比例去分配行高和列宽，也可以通过给单元格设置 width 和height属性去调整

5、CSS 简介

 

css是层叠样式表 （Cascading StyleSheet）

用来美化网页

5.1、 css 三种引入方式

 

5.1.1、行内样式

 

在开始标签上添加style属性，把样式代码写在style属性里面

作用范围只是当前标签，导致代码不能复用，产生大量冗余代码，也使网页的结构不够清晰

   

5.1.2、内嵌样式

 

在head标签之间添加style标签，在style标签之间写入css样式语法

作用范围是当前页面，在项目中也比较少用

   

 

5.1.3、外链样式

 

在head标签之间添加一个link标签，通过link标签的href属性引入 .css文件 ，把css样式代码写在.css文件中

外链样式可以使结构和表现代码完全分离，并且一个css文件可以作用于多个网页的，所以可以规定一些公共样式，项目中推荐使用外链样式

   

5.2 css的基本语法

 

    h2{

        width: 200px;

        height:200px;

        background-color: lime;

    }

    选择器{

        样式声明1;

        样式声明2;

    }

 

    选择器{

        样式声明1;

        样式声明2;

 

    }

 

css基本语法由选择器和多组样式声明组成

每一组样式声明由 "属性名:值" 组成

注释:

    /*  css注释 */

5.3 类选择器

 

    css选择器：

    .box{ ... }

class属性的命名规则

可以包含数字、字母、下划线 _、连字符 -

不能以数字开头

建议使用有意义的英文单词,多个单词建议用 连字符或者下划线连接，或者用驼峰命名法

多个标签可以使用同一个类名

一个标签可以定义多个类名 ,多个类名通过词列表的方式定义 class="box red font"

 

 

 

这是我所学到的HTML列表，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！