HTML基本理解day3 | 青训营笔记

简介: HTML基本理解day3 | 青训营笔记

1.3 表格属性


表格标签这部分属性我们实际开发我们不常用,后而通过CSS来设置,目的有2个:

1.记住这些英语单词,后面CSS会使用

2.直观感受表格的外观形态

align leftcenter, right 规定表格相对周围元素的 对齐方式,

border 1或-- 规定 复格单元是否拥有边秘 默认为””,表示没有边框

cellpadding 像素值 规定 0元边沿与其内容之间的空白 默认1像素。

cellspacing 像素值 单元格之间的空白 默认2像素,

width 像素值或百分比 规定表格的宽度。


1.4表格结构标签


1.< thead>< /thead>:用于定义 表格的头部。  内部 必须拥有< tr>标签 一般是位于第一行

2.< tbody>< /tbody>:用于定义表格的主体 主要用于放数据本体,

3.以上标签都是放在< table>< /table>标签中


1.5 合并单元格


1670047691330.jpg

1670047703124.jpg


列表标签


合并单元格三步曲:

1.先确定是跨行还是跨列合并。

2.找到目标单元格,写上合并方式=合并的单元格数量。比如:<tdcolspan=“2”>< /td>。

3.删除多余的单元格。


1.1 无序列表(重点)


表格是用来显示数据的,那么列表就是用来布局的

列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便

根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表。


1.2 有序列表(理解)


< ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用< li> 标签定义。无序列表的基本语法格式如下:

< ul>
< li>列表项1< /li>
    < 1i>列表项2</1i><1i>列表项3</1i>
..
</ul>
复制代码

1.无序列表的各个列表项之间没有顺序级别之分,是并列的。

< ul>< /ul>中只能嵌套< li>< /li>,直接在< ul>< /ul>标签中输入其他标签或者文字的做法是不被允许的。

2.< li>与< /li>之间相当于一个容器,可以容纳所有元素

3.无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置。

有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。 在HTML标签中,< ol>标签用于定义有序列表,列表排序以数字来显示,并且使用

  • 标签来定义列表项 有序列表的基本语法格式如下:
< ol>
< li>列表项1< /li>< 1i>列表项2< /1i>< li>列表项3< /li>
...
</o1>
复制代码
  • 1.< ol>< /ol>中只能嵌套< li>< /1i>,直接在< ol>< /ol>标签中输入其他标签或者文字的做法是不被允许的。
    2.< li>与< /li>之间相当于一个容器,可以容纳所有元素。 3.有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置。
相关文章
|
4月前
|
前端开发 JavaScript C++
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
本文是一份超详细的HTML学习笔记,从基础认知开始,介绍了网页的构成、五大浏览器、web标准、HTML/CSS/JavaScript的区别,然后详细讲解了HTML的概念、骨架结构、常用快捷键、注释、标签结构和关系。接着,通过大量实例深入探讨了HTML的各种标签,包括排版标签、文本格式化标签、媒体标签、链接标签、列表标签、表格标签、表单标签、语义化标签和字符实体,旨在帮助读者从0开始熟悉并掌握HTML。
51 2
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
|
7月前
|
开发者
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
68 0
|
9月前
|
缓存 前端开发 JavaScript
HTML设计最新笔记
HTML设计最新笔记
47 1
|
8月前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
|
8月前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
|
9月前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
84 1
|
9月前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
337 0
|
6天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
25 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
29天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
116 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子

热门文章

最新文章