一、table标签的使用

table标签是表格标签，用于在页面上显示一个表格；对于一个表格而言，包括表头，行，列。使用tr标签表示表格的行，使用td标签表示表格的列，也就是表格的单元格内容。当一个单元格独自占3列的时候，则添加colspan="3"属性到td标签，当一个单元格独自占3行的时候，则添加rowspan="3"属性到td标签。标签为了方便之后对表格进行修饰，可以使用thead标签将表头内容包裹起来，tbody标签将表格的主体内容包裹起来，tfoot标签将表格尾部内容包括起来。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><title>学生成绩表</title>
</head><body><!-- 表格标签 --><table border="1" cellpadding="0" cellspacing="0" style="width: 500px;"><thead><tr><th colspan="5">学生成绩表</th></tr><tr style="background-color: antiquewhite;"><th>姓名</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th></tr></thead><tbody style="text-align: center;"><tr><td>李四</td><td>90</td><td>90</td><td>90</td><td>270</td></tr><tr><td rowspan="3">张三</td><td>90</td><td>90</td><td>90</td><td>270</td></tr><tr><td>90</td><td>90</td><td>90</td><td>270</td></tr><tr><td>90</td><td>90</td><td>90</td><td>270</td></tr></tbody><tfoot><tr><td colspan="5">备注：</td></tr></tfoot></table></body></html>

效果图如下所示：

二、a标签的使用

a标签是链接标签，用于页面的跳转，包括target与href属性；target属性用于指定页面在何处打开目标 URL，href属性用于指定目标URL
范例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>a标签学习</title>
</head><body><a href="https://book.douban.com/subject/36136074/?icn=index-latestbook-subject" target="_blank">我看见无数的她：跟女孩们聊文学和电影的30个夜晚</a><a href="https://book.douban.com/subject/36078381/?icn=index-latestbook-subject" target="_blank">新潮职业</a>
</body></html>

效果图如下：

三、列表标签的使用

列表分为有序列表与无序列表，使用ol标签指定一个有序列表，使用ul标签指定一个无序列表；列表的表项则都使用li标签指定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表的学习</title>
</head>
<body><h1>畅销图书榜</h1><hr /><ol><li><a href="https://book.douban.com/subject/27192353/" target="_blank">钝感力</a></li><li><a href="https://book.douban.com/subject/35051822/" target="_blank">尘埃落定</a></li><li><a href="https://book.douban.com/subject/35587028/" target="_blank">生死疲劳</a></li></ol><ul><li><a href="https://book.douban.com/subject/27192353/" target="_blank">钝感力</a></li><li><a href="https://book.douban.com/subject/35051822/" target="_blank">尘埃落定</a></li><li><a href="https://book.douban.com/subject/35587028/" target="_blank">生死疲劳</a></li></ul>
</body>
</html>

效果图如下所示：

四、颜色的表示

颜色是由红色，绿色，蓝色三色组成，也就是RGB颜色，可以使用十进制，十六进制表示颜色；颜色的取值范围是0~255（十进制表示），或者00~ff（十六进制表示），在HTML里面可以使用rgb()属性或者rgba()属性进行设置颜色，其中rgb属性共有三个参数，分别用十进制表示红色，绿色，蓝色颜色值；rgba属性共有四个参数，前三个参数分别用十进制表示红色，绿色，蓝色颜色值，第四个参数是指定透明度；透明度的取值范围是0~1；使用范围值在#000000~#ffffff的十六进制值表示颜色；具体的代码如图所示：

<!DOCTYPE html><!--标记文件是HTML文档-->
<html lang="en"><!--html标签是根标签--><head><!--头部标签开始--><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个HTML</title><!--浏览器页面中的将要显示的标题-->
</head><!--头部标签闭合--><body><!--HTML的主体--><h1>了不起的文明现场</h1><h2 style="background-color: #000000; color: #ffffff;" >内容简介</h2><p style="background-color: rgb(255, 0, 0);">“上下五千年”早已刻入每一位中国人的基因，而考古学让我们看到另一个与古籍文献所载的中国相似又不同的华夏，也许难说二者谁更“真实”，但可以肯定的是，我们所能见到的中华文明景观，得益于考古学的襄助，已经殊为精彩，蔚为大观。<br />20世纪的考古发现在极大程度上丰富了我们对于中国历史的认知，改变了世界对中国文明的基本看法。</p><p style="background-color: rgba(0, 255, 0, 1);">全书从中国的重大考古发现中遴选出十个独具代表性的考古遗址——新石器时代的良渚古城、堪称最早的“中国”的二里头遗址、商代晚期的安阳殷墟、拨开古蜀迷雾的广汉三星堆、见证中西文明交流的小河墓地、秦始皇陵、汉代海昏侯墓、汉唐长安城、宋代沉船南海I号、敦煌莫高窟，分别由十位负责一线勘探的考古人——刘斌、许宏、唐际根、高大伦、伊弟利斯•阿不都热苏勒、段清波、杨军、刘瑞、崔勇、樊锦诗，以亲历者的角度为公众揭开考古探掘的面纱，带领读者来到中华上下五千年的文明现...</p><hr /><img src="https://img1.doubanio.com/view/subject/s/public/s33657000.jpg" alt="描述图片信息">
</body><!--body标签闭合--></html><!--html标签闭合-->

效果图如下所示：

五、标签的分类

效果图1：

效果图2：

对效果图1与效果图2进行分析，效果图1里面使用两个a标签在页面里面，可以发现这两个a标签并在一起显示，将这种类型的标签称之为内联元素，它在页面所占的空间大小只与自己的内容大小有关系，无法设置内联元素的宽与高属性；在效果图2里面，分别是有序列表与无序列表，但是这两个列表都独占一行，将这种类型的标签称之为块元素，块元素可以设置宽与高属性；

特殊的两个容器标签：

div：块元素，无任何默认样式，可以使用它作为容器，嵌套其他标签，可以设置其宽与高属性
span：内联元素，无任何默认样式，看可以使用它作为容器，嵌套其他标签，不可以设置宽与高属性，它所占的空间大小只与标签的内容有关系

内联元素与块元素有着自己的特性，在开发的时候根据其特性进行选择使用；如果我们需要让自己的标签不独占一行，但是其所占的页面空间只与其内容有关系，或者我们的标签需要设置指定的宽与高，但是需要让其他标签和他并在一起显示；这种需求就是将块元素与内联元素的特征结合在一起，我们此时使用display属性进行设置，将标签的display属性值更改为inline-block；

范例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>豆瓣title</title>
</head><body><div style="background-color: #545652; height: 28px; color: #d5d5d5; font: 12px Helvetica,Arial,sans-serif;"><ul style="line-height: 28px;padding-inline-start: 10px;"><li style="display: inline-block;">豆瓣</li><li style="display: inline-block;">读书</li><li style="display: inline-block;">电影</li><li style="display: inline-block;">音乐</li><li style="display: inline-block;">同城</li><li style="display: inline-block;">小组</li><li style="display: inline-block;">阅读</li><li style="display: inline-block;">FM</li><li style="display: inline-block;">时间</li><li style="display: inline-block;">豆品</li></ul></div><div style="height: 40.67px; background-color: #f9f9f7; color: #666; font-size: 13px;"><ul style="line-height: 40.67px;"><li  style="display: inline-block;">购书单</li><li  style="display: inline-block;">电子图书</li><li  style="display: inline-block;">豆瓣书店</li><li  style="display: inline-block;">2021年度榜单</li><li  style="display: inline-block;">2021书影音报告</li><li  style="display: inline-block;">购物车</li></ul></div><div style="height: 27px; background-color: #ffffff; color: #9B9B9B; font-size: 13px;" ><span style="color: #111; font-size: 18px;">新书速递</span><ul style="line-height: 27px; display: inline-block;"><li style="display: inline-block;">全部</li><li style="display: inline-block;">文学</li><li style="display: inline-block;">小说</li><li style="display: inline-block;">历史文化</li><li style="display: inline-block;">社会纪实</li><li style="display: inline-block;">科学新知</li><li style="display: inline-block;">艺术设计</li><li style="display: inline-block;">商业经管</li><li style="display: inline-block;">绘本漫画</li></ul></div><hr /><div><h2>畅销图书榜</h2><hr /><ul  style="height: 27px; background-color: #ffffff; color: #3377AA; font-size: 13px;"><li style="display: block;">1.钝感力<br/>[日] 渡边淳一</li><hr/><li style="display: block;">2.尘埃落定<br/>阿来</li><hr/><li style="display: block;">3.生死疲劳<br/>莫言</li><hr/><li style="display: block;">4.恐龙小q-四季变化：科普认知绘本<br/>（套装全4册）</li><hr/><li style="display: block;">5.小小聪明豆绘本系列<br/>阿克塞尔·舍夫勒/绘</li><hr/><li style="display: block;">6.张嘉骅少年读经典系列<br/>张嘉骅 著/郑慧荷 绘</li><hr/><li style="display: block;">7.苏东坡传<br/>林语堂</li><hr/><li style="display: block;">8.瓦尔登湖<br/>王光林（译）</li><hr/><li style="display: block;">9.活着<br/>余华</li><hr/><li style="display: block;">10.《宋朝的腔调》<br/>石继航</li><hr/></ul></div>
</body></html>

效果图如下所示：

常用HTML标签的学习相关推荐

vue快速学习01、环境与常用属性标签
vue快速学习01.环境与常用属性标签 1.MVVC MVVM 设计模式是由 Model (模型). View (视图)和 ViewModel (视图模型)三部分组成,是 MVC 设计模式的进化版,即 ...
前端开发~H5 ·学习笔记 ·001——【HTML介绍、常用HTML标签】
文章目录一.HTML介绍 1.介绍 2.HTML标签 (1).介绍 (2).嵌套 (3).属性 3.HTML文档结构 (1).完整结构 (2).<!DOCTYPE html>标签 (3) ...
HTML一些常用的标签
html常用的标签一般用以下这些: div.p.span.img.h1~h6.from.table.th.td.a.br.ul.li.ol.button.input.nav.main.section. ...
网页最少要有一个html标签,PHP_网页开发人员必须知道的10个不常用HTML标签，网页开发人员常常希望能 - phpStudy...
网页开发人员必须知道的10个不常用HTML标签网页开发人员常常希望能够了解并掌握多种语言,结果是,学习一门语言的所有内容是棘手的,但是却很容易发现你并没有完全利用那些比较特殊却很有用的标签. 不幸的 ...
爬取豆瓣读书-豆瓣成员常用的标签（Python爬虫实战）
前两篇博客,我们介绍了如何对豆瓣读书历史记录进行抓取,这一篇博客是一个收尾工作. 传送门: 爬取豆瓣读书-用户信息页链接(Python爬虫实战) 爬取豆瓣读书-用户所有阅读书籍名称.日期和书籍链接(P ...
HTML5常用基础标签
HTML5中的标签众多,有时新手刚入门前端很容易步入误区,即想要一把抓掌握所有的知识,其实全部掌握效果不尽人意,相反会让我们学习受挫,效率低下,因此"片面"的学习有助于我们提高学习 ...
HTML 常用的标签和属性
我们在开发的过程中常用的标签其实很好理解,我们把京东的首页拿来一用从图中我们可以看到:文字.图片.logo.二维码... 其中文字可以组成词语,段落,或者文章:图片其实就包含了logo.二维码了其 ...
Machine learning(ML)常用的几类学习器及Python实现
Machine learning(ML)常用的几种学习器及Python实现一.决策树 1.函数的参数主要为: 2. 决策树的保存二.Boostings 1.Adaboost 1.构建训练函数 2. ...
app去除html标签,wap、app移动端页面常用html标签汇总
1.section 将内容组织到精确的语义块,表示页面的一部分. 2.article article表示网页的一个文章.故事. 3.header (1)用在整页的页头 (2)section或者arti ...

常用HTML标签的学习

文章目录

一、table标签的使用

二、a标签的使用

三、列表标签的使用

四、颜色的表示

五、标签的分类

常用HTML标签的学习相关推荐

最新文章

热门文章