视频公司的网站设计,广州前端培训机构,宁波网站建设论坛,重庆王网站制作HTML相关知识
目录
HTML相关知识
前言
准备工作
标签的具体分类#xff08;三#xff09;
本文中的标签在什么位置中使用#xff1f;
列表
编辑编辑
有序列表
无序列表
自定义列表
表格
拓展案例
预告和回顾
后话 前言
本系列博客将分享HTML相关知识点…HTML相关知识
目录
HTML相关知识
前言
准备工作
标签的具体分类三
本文中的标签在什么位置中使用
列表
编辑编辑
有序列表
无序列表
自定义列表
表格
拓展案例
预告和回顾
后话 前言
本系列博客将分享HTML相关知识点。
这一期博客我们来讲解列表和表格相关的标签。
本来想写表单的但是博客内容比较多我不想让博客太长了所以放到下一期讲。
按照我的风格来说其实我不太喜欢用书面语言来分享知识。比起单纯的科普我的博文更像是一种语言风格类似于休闲聊天但是又不缺乏严谨性的知识笔记也就是我之前提到的——“杂谈”的形式。
初心呢就是主打分享写的不好多多包涵嘻嘻。
准备工作
软件【参考版本】Visual Studio Code有道云笔记
*关于有道云笔记的使用可以看我专栏的Markdown文档有关文章*
浏览器版本Chrome
系统版本 Win10/11/其他非Windows版本
*我的电脑是Win10的版本仅供参考*
标签的具体分类三
本文中的标签在什么位置中使用
本文中我们需要掌握的是写在主体标签body中的各种标签。
列表
在网页当中我们常常会见到类似下面新闻的分类 类似这样具有编号或者标记按照列的顺序排列的图文排列方式往往由列表来实现。
目前常见的列表形式有三种
有序列表无序列表自定义列表
有序列表
有序列表使用的标签是ol/ol全称是ordered list直译为有序排列的列表。
在这个标签中可以预定义的属性如下
属性作用type定义有序列表的序号类型start指定列表编号的起始值reversed倒序
序号类型type可以定义5种效果
属性值含义1数字a小写英文字母A大写英文字母i小写罗马数字I大写罗马数字
起始值start可以指定任何数字且只能指定数字。对于除了数字的其他序号将会从对应位置开始编号。
比如设置start数值为3那么小写英文将从c开始排列罗马数字将从iii开始排列。
reserved没有属性值添加之后可以让表格中的序号倒序排列。
在ol标签之间可以定义li/li选项表示列表项。
以下是一段有序列表的示例代码
ol typeA start3 reversedli这里是一个列表项/lili这里是下一个列表项/lili这里是最后一个列表项/li/ol
在网页中的显示效果如下 无序列表
无序列表使用的标签是ul/ul全称是unordered list直译为不按顺序排列的列表。
在这个标签中可以预定义的属性如下
属性作用type定义无序列表的列表项样式
列表项前面的type样式有三种
属性值含义disc默认 黑色圆点square黑色小方框circle圆圈
以下是三个无序列表的代码
ul typediscli表一第一项/lili表一第二项/li/ulul typesquareli表二第一项/lili表二第二项/li/ulul typecircleli表三第一项/lili表三第二项/li/ul
在网页中显示的效果如下 注意有序列表和无序列表都是可以相互嵌套的方法是将一个完整的列表放置到上一级列表的li标签之中。
自定义列表
自定义列表使用的标签是 dl/dl 全称是 definition list直译为定义的列表。
常用于图文列表由dt定义自定义标题 definition titledd定义自定义描述 definition description。
利用自定义列表可以实现像我的专栏这样的类似功能代码如下
dldtimg srchttps://i-blog.csdnimg.cn/direct/4e0bb6ed3ff243e08746c987484233a5.png?x-oss-processimage/resize,m_fixed,h_224,w_224 alt width120 height120/dtdd【H2O2】UI设计入门/dddtimg srchttps://i-blog.csdnimg.cn/direct/94db23ac70fe4cfbae4eeedf18339fa7.png?x-oss-processimage/resize,m_fixed,h_224,w_224 alt width120 height120/dtdd【H2O2】HTML/dd/dl
在网页中运行效果如下 表格
早期的网页中的很多东西都涉及表格的概念每一个框框都是用一个一个的表格写的现在一般用盒模型了。
在生活中我们也经常需要进行表格的填写比如工作简历 和列表的格式类似一个表格的最外层的标签是table/table。
在table标签中可以定义如下属性部分已弃用
border属性值为0时表格边框不可见否则将会有指定宽度的像素。
width和height的属性值为数字单位默认为 px 或 %其中 % 是相对于父元素的而言的。
*比如对于一个单元格中的元素而言它的父元素就是这个单元格*
align属性用于设置表格中的任意元素的水平位置有三个值left center right分别代表左、
中、右。
cellspacing属性用于设置表格线上的空隙。
为什么会出现这个空隙呢因为在table里设置的border属性值实际上不但对表格外层生效对表格中的其他标签也生效这样就会导致实际上产生的边框不止一层。
例如对于下面这个表格设置其边框宽度为1px
table border1trtd1/tdtd2/td/trtrtd3/tdtd4/td/tr/table
在浏览器中的效果就是下面这样 将这个属性设置为0这个空隙就可以被删去 cellpadding可以设置文本和边界的填充间距。比如在上一个表格中继续添加cellpadding值为20默认单位px效果如下 bgcolor可以设置表格的背景色属性值可以使用颜色名或者十六进制这个概念在PS系列中提到过。比如将表格的底色设置为天蓝色aqua 接下来看表格中的标签有下面三个
tr行元素th表头td单元格
其中tr比后两个级别高一级。我们在编辑一个表格的代码时需要先编辑行然后设置这一行的每个单元格或表头的信息。
tr中可以定义的属性值如下 属性 作用 height 定义表格行的高 align 行内内容水平对齐方式 left center right valign 行内内容垂直对齐方式vertical-align bgcolor 设置表格行的背景色
valign也是一种对齐的方式常见的有三个值top middle bottom分别为上 中 下。
th和td中可以定义的属性值如下 属性 作用 height 定义表格单元格的高 width 定义表格单元格的宽 align 单元格内容水平对齐方式 valign 单元格内容垂直对齐方式 bgcolor 设置表格单元格的背景色
th和td的区别主要在于th中的内容默认样式为水平居中加粗而td中的内容则默认水平居左。
特别的th和td还有一组属性 属性 作用 rowspan 行合并 colspan 列合并
比如对于刚才的2*2表格合并第一列的两行使用行合并
table border1trtd rowspan21/tdtd2/td/trtrtd4/td/tr/table
就可以得到下面的效果 注意一旦有一个单元格设置了合并那么被合并的单元格对应的代码应当被删去。
而列合并同理不再赘述。
拓展案例
还记得表格章节的开头的个人简历吗现在我们可以简单实现它了。
*注意本案例暂时不实现CSS样式* 显然这张表格应用到了行合并和列合并的知识。比如说“照片”区域显然跨越了5行。
还涉及到了tr的height属性比如最下面的5排内容他们的高度并不相同。
这里还有一个小细节需要注意不同的单元格似乎在水平方向上也没有对齐。想实现这个效果有一个小技巧——最小参照列。
在PS中打开图片为图片添加纵向辅助线注意每一个单元格的左右边界都要放在辅助线上。
我们可以把距离最近的两条辅助线之间的距离看做一列即最小参照列。其他的列的宽度都可以近似作这个列的某个倍数。
比如下图中辅助线组成了两个区域右边的区域为最小参照列而左边的宽度为右边的两倍。那么左侧区域的colspan属性就可以设置为2。 对于一个单元格来说它两边的辅助线之间可能不止一个参照列多条辅助线那么想要表示这个单元格就可以把它占据的参照列的colspan的值相加。
而整个表格的最长的单元格的colspan值就是所有参照列的colspan的值的总和比如基本信息栏的这个值可以是41。
请注意需要设置至少一行的每个单元格的宽度因为参照列毕竟只是一个相对值我们还需要用具体宽度来规范整个表格。
利用下面的代码实现这个表格的格式我将最小参照列也设置成合并10列了因为倍数的问题这个倍数可以自己调整的
!-- 表格分成24个小格子 --table border1 cellspacing0 width820pxcaptionbigb简历模版网/b/big/captiontr height50pxth width820px colspan410bigb个人简历/b/big/th/trtr height30pxth colspan410 alignleft基本信息/th/trtr height30pxth colspan50 width100px姓名/thtd colspan60 width120px/tdth colspan50 width100px性别/thtd colspan55 width110px/tdth colspan55 width110px出生日期/thtd colspan60 width120px/tdth colspan80 rowspan5 width160px照br /br /片/th/trtr height30pxth colspan50民族/thtd colspan60/tdth colspan50政治面貌/thtd colspan55/tdth colspan55电话/thtd colspan60/td/trtr height30pxth colspan50籍贯/thtd colspan60/tdth colspan50学历/thtd colspan55/tdth colspan55专业/thtd colspan60/td/trtr height30pxth colspan50毕业院校/thtd colspan165/tdth colspan55E-mail/thtd colspan60/td/trtr height30pxth colspan50住址/thtd colspan280/td/trtr height30pxth colspan50 rowspan6教育培训经历/thth colspan60起止日期/thth colspan130学校机构名称/thth colspan90所学专业/课程/thth colspan80荣誉/证书/th/trtr height30pxtd colspan60/tdtd colspan130/tdtd colspan90/tdtd colspan80/td/trtr height30pxtd colspan60/tdtd colspan130/tdtd colspan90/tdtd colspan80/td/trtr height30pxtd colspan60/tdtd colspan130/tdtd colspan90/tdtd colspan80/td/trtr height30pxtd colspan60/tdtd colspan130/tdtd colspan90/tdtd colspan80/td/trtr height30pxtd colspan60/tdtd colspan130/tdtd colspan90/tdtd colspan80/td/trtr height30pxth colspan50 rowspan4工作经历/thth colspan60起止日期/thth colspan85公司名称/thth colspan65职务/部门/thth colspan150主要职责/th/trtr height30pxth colspan60/thth colspan85/thth colspan65/thth colspan150/th/trtr height30pxth colspan60/thth colspan85/thth colspan65/thth colspan150/th/trtr height30pxth colspan60/thth colspan85/thth colspan65/thth colspan150/th/trtr height30pxth colspan50语言水平/thth colspan60英语/thtd colspan130/tdth colspan55国语/thtd colspan115/td/trtr height30pxth colspan50电脑水平/thtd colspan360/td/trtr height60pxth colspan50技能专业/thtd colspan360/td/trtr height45pxth colspan50业余爱好/thtd colspan360/td/trtr height50pxth colspan50发展方向/thtd colspan360/td/trtr height40pxth colspan50自我评价/thtd colspan360/td/tr/table 实现效果如下 预告和回顾
在我的HTML第五期博客中将会继续介绍HTML的基本标签主要是表单的概念并会加上实际的案例。算是对本期博客本来应该写的内容的补充吧。
对HTML感兴趣的朋友也可以看看我的主页专栏
专栏 | HTMLhttp://t.csdnimg.cn/XBbDK
后话
在全栈领域博主也只不过是一个普通的萌新而已。关于这篇博客主要是记录一下自己学习的一些经历然后把自己领悟到的一些东西总结一下分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的一些定义性的文字加入了笔者自己的很多理解在里面所以仅供参考。如果有说的不对的地方还请谅解。
期待与你在下一期博客中再次相遇
【H2O2】
