国外图片网站源码,好上手的做海报网站,珠海网站建设推广服务,中国七大网络运营商跟着该视频学习#xff0c;记录笔记#xff1a;【黑马程序员pink老师前端入门教程#xff0c;零基础必看的h5(html5)css3移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p12vd_source04ee94ad3f2168d7d5252c857a2bf358
Day4 内容梳理#xff1a;…跟着该视频学习记录笔记【黑马程序员pink老师前端入门教程零基础必看的h5(html5)css3移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p12vd_source04ee94ad3f2168d7d5252c857a2bf358
Day4 内容梳理
目录
HTML 3.0 表格
3.1 表格标签
1语法
基本标签
表头字体加粗
2相关属性
3表格结构
基础的结构标签
合并单元格
3.2 列表标签
无序列表重点
有序列表
自定义列表重点 HTML 3.0 表格
3.1 表格标签
表格不是用来布局页面的而是主要用于显示、展示数据。表格可以让数据以可读性很好的规整形式展示将繁杂数据以简洁明了的方式展现。 1语法
基本标签
tabletrtd单元格内的文字/td……/tr……
/tabletable/table用于定义表格的标签
tr/tr用于定义表格中的行tr双标签必须嵌套在table双标签中。
td/td用于定义表格中的单元格。td双标签必须嵌套在tr双标签中。 例子和效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表格练习/title
/head
bodytabletr td姓名/td td性别/td td年龄/td /trtr td张三/td td男/td td20/td /trtr td李四/td td男/td td21/td /tr/table
/body
/html表头字体加粗
另外如果希望表头字体能更加显眼的话可以把表头的标签从td/td换成th/th呈现出居中的粗体字效果。
仍沿用上面的代码改动如下 效果 2相关属性
在实际开发中不常用到HTML的表格基本属性因为一般是用CSS来设置。 属性名称 属性值 描述 align left、center、right 规定表格相对周围元素的对齐方式。 border 1或”” 规定表格单元是否拥有边框。 默认为””表示没有边框。 cellpadding 像素值 规定单元边沿与其内容之间的空白默认1像素。 cellspacing 像素值 规定单元格之间的空白默认2像素。 width、height 像素值或百分比 规定表格的宽度、高度。 align把表格放页面中央 border给表格加边框 cellpadding表格内容和边框之间的距离
这里加了20个像素的间距 cellspacing规定单元格之间的距离
不特地设置的话默认cellspacing为2像素 如果把cellspacing设为0就是最为常见的单线表格 width、height给表格设置宽度和高度 3表格结构
基础的结构标签
可将表格划分为两部分表头区域thead标签、主体区域tbody标签。
例子 合并单元格
合并单元格有两种方式
跨行合并rowspan”合并单元格的个数”跨列合并colspan”合并单元格的个数” 合并的代码写在目标单元格上。
如果是跨行合并上图红色最上侧单元格为目标单元格在里面写合并代码。
如果是跨行合并上图蓝色最左侧单元格为目标单元格在里面写合并代码。 合并的三个步骤
第一步先确定是跨行还是跨列。
第二步找到目标单元格在里面写上合并的代码合并方式“合并的数量”比如td colspan”2”/td
第三步删除多余的单元格。 比如把下图中的2和3合并为一个单元格采用跨列合并 合并前的代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表格练习/title
/head
bodytable width200 height100 border1 cellspacing0trtd1/tdtd2/tdtd3/td/trtrtd4/tdtd5/tdtd6/td/tr/table
/body
/html合并后的示图以及代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表格练习/title
/head
bodytable width200 height100 border1 cellspacing0trtd1/tdtd colspan”2”/td/trtrtd4/tdtd5/tdtd6/td/tr/table
/body
/html 3.2 列表标签
表格用来展示数据而列表是用来布局的。列表的特点是整齐、有序用它布局会很方便且自由。
列表分为三类无序列表、有序列表、自定义列表 标签名 列表类型 说明 ul/ul 无序列表 各个列表项无顺序li/li标签之间可以包含任何标签。 ol/ol 有序列表 各个列表项有顺序使用相对较少li/li同上。 dl/dl 自定义列表 只能包含dddt标签但dtdd标签之内可以放任何标签。 无序列表重点
ul双标签代表无序列表其中的列表则以li标签定义。
无序列表的基本语法格式
ulli列表项1/lili列表项2/lili列表项3/li……
/ul 比如
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title无序列表/title
/head
bodyh4选择哪个选项/h4ulliA.XXX/liliB.YYY/liliC.ZZZ/li/ul
/body
/html 注意
无序列表的各个列表项之间是并列的没有顺序之分。li/li之间可以放其他标签比如 有序列表
ol双标签代表有序列表各个列表项按照数字升序的方式来排列。
有序列表的基本语法格式
olli列表项1/lili列表项2/lili列表项3/li……
/ol 例子和效果:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title有序列表/title
/head
bodyh4积分排行榜/h4olli张三 10000/lili李四 2000/lili王五 100/li/ol
/body
/html 自定义列表重点
dl双标签代表自定义列表还会使用到命名项目的dt双标签、解释该项目的dd双标签。
自定义列表的基本语法格式
dldt名词1/dtdd名词1的解释1/dddd名词1的解释2/dd……
/dl换句话说如果dl标签代表盒子dd标签就是盒子里装的东西而dt是盒子上贴的标签表明盒子都装了什么。 例子和效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title自定义列表/title
/head
bodyh4其他/h4dldt 帮助中心 /dtdd账户管理/dddd购物指南/dddd订单操作/dd/dl
/body
/html 注意dl/dl标签中只能出现dd、dt标签不能出现其他标签。
