HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2)
1、使用ul,添加新闻信息列表
在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,
这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法:
<ul><li>信息</li><li>信息</li>......
</ul>
举例:
<ul><li>精彩少年</li><li>美丽突然出现</li><li>触动心灵的旋律</li>
</ul>
ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点.
2、使用ol,添加图书销售排行榜
如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,这类信息展示就可以使用<ol>
标签来制作有序列表来展示。
语法:
<ol><li>信息</li><li>信息</li>......
</ol>
举例:
下面是一个热点课程下载排行榜:
<ol><li>前端开发面试心法 </li><li>零基础学习html</li><li>JavaScript全攻略</li>
</ol>
<ol>
在网页中显示的默认样式一般为:每项<li>
前都自带一个序号,序号默认从1开始,
3、认识div在排版中的作用
在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>
标签中,这个<div>
标签的作用就相当于一个容器。
语法:
<div>…</div>
确定逻辑部分:
什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。
4、给div命名,使逻辑更加清晰
在上一小节中,我们把一些标签放进<div>
里,划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>
提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。
语法:
<div id="版块名称">…</div>
table标签,认识网页上的表格
创建表格的四个元素:
table、tbody、tr、th、td
1、<table>…</table>
:整个表格以<table>
标记开始、</table>
标记结束。
2、<tbody>…</tbody>
:当表格内容非常多时,表格会下载一点显示一点,但如果加上
标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>
:表格的一行,所以有几对tr 表格就有几行。
4、<td>…</td>
:表格的一个单元格,一行中包含几对<td>...</td>
,说明一行中就有几列。
5、<th>…</th>
:表格的头部的一个单元格,表格表头。
6、表格中列的个数,取决于一行中数据单元格的个数。
总结:
1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
2、表头,也就是th标签中的文本默认为粗体并且居中显示
6、用css样式,为表格加入边框
Table 表格在没有添加 css 样式之前,是没有边框的。这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框。
在右侧代码编辑器中添加如下代码:
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
上述代码是用 css 样式代码,为th,td单元格添加粗细为一个像素的黑色边框。
7、caption标签,为表格添加标题和摘要
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法:<table summary="表格简介文本">
标题
用以描述表格内容,标题的显示位置:表格上方。
语法:
<table><caption>标题文本</caption><tr><td>…</td><td>…</td>…</tr>
…
</table>
公告
转载于:https://www.cnblogs.com/wanglongshuai/p/5228196.html
HTML+CSS学习笔记(3)- 认识标签(2)相关推荐
- CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- HTML+CSS学习笔记(2) - 认识标签(1)转载
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 http://www.cnblogs.com/wanglongshuai/p/5204070.html@ ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
- div+css学习笔记一(转)
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- CSS学习笔记(详细,不定期更新)
CSS 学习笔记 CSS书写规范 顺序 布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
- CSS学习笔记 #20201119
CSS学习笔记 #20201119 目录 文章目录 CSS学习笔记 #20201119 目录 引言 选择器 权值 样式 引言 CSS能搭配HTML文档,将网页繁杂的 样式信息 从HTML文档中 相对独 ...
最新文章
- JBPM深入解析之变量设计
- 机器学习中的数学(1)-回归(regression)、梯度下降(gradient descent)
- [云炬商业计划书阅读分享]无水洗车业 发展前景好
- Object-C中的字符串对象1-不可变字符串
- 初学者Git和GitHub简介(教程)
- P2839 畅通工程
- Leetcode每日一题:10.09.sorted-matrix-search-lcci(排序矩阵查找)
- [原创]java WEB学习笔记107:Spring学习---AOP切面的优先级,重用切点表达式
- 沟通CTBS立白集团远程接入成功案例
- Android 百度地图定位
- 90后的青春,定格在被淡忘的QQ空间里
- Methods annotated with ‘@Async‘ must be overridable
- 网页中为什么不显示图片
- js与html和css的关系
- 如何在word中插入图表目录(插图清单、表格清单)
- 不同浏览器对键盘事件的不同认知
- 超级实用(附技巧)——用word与谷歌翻译将英文PDF文档翻译成中文,免费无限制
- 什么是预言机(oracle)
- RTK+GPS提高定位精度原理解析
- 【微信群助手】微信社群怎么运营?微信群规则范本
热门文章
- 【java】随机数的阶乘
- ad18修改过孔和走线间距_PCB设计之“过孔”
- yolov5鱼苗检测计数:从数据标注到训练
- 谷歌免费GPU,在线Jupyter notebook深度学习环境
- linux下串口抓包,Linux的串行端口 - wrtie()字节到目标设备通过串口
- html小游戏代码_厉害!84 行 JavaScript 代码实现塔式堆叠游戏
- python中输出某段文字_Python如何输出字符串中字符出现的个数
- Python学习入门基础教程(learning Python)--5.5 Python写操作详解
- java成组链接法的实现_c++磁盘存储空间的管理模拟(UNIX存储管理的成组链接法的设计与实现)...
- Javascript面向对象特性