一、使用ul，添加新闻信息列表
在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。
新闻列表
图片列表
立即学习
“
前端免费学习笔记（深入）
”；
这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法：
举例：
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：
来试试，在编辑器中的第8行输入
使用ol，添加图书销售排行榜
如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，
如下图所示。这类信息展示就可以使用
1
2
3
4
5 p标签
6
7
8
9
10
11
- 信息
- 信息
......
- 精彩少年
- 美丽突然出现
- 触动心灵的旋律
- 我的第一个列表信息
1
2
3
4
5 p标签
6
7
8
9
10
11 - 标签来制作有序列表来展示。
语法：
- 信息
- 信息 ......
- 前端开发面试心法
- 零基础学习html
- JavaScript全攻略
- 前都自带一个序号，序号默认从1开始，如下图所示：
来试试，在编辑器中的第 8 行输入
别忘了
- 我的第一个列表信息。
- 我的第一个列表信息。
- 标签的语法
- 信息
- 信息 ......
- 前端开发面试心法 11
- 零基础学习html 12
- javascript全攻略 13
- 版本管理工具介绍—Git篇 17
- Canvas绘图详解 18
- QQ5.0侧滑菜单 19
- 前端开发面试心法
- 零基础学习html
- javascript全攻略
- 版本管理工具介绍—Git篇
- Canvas绘图详解
- QQ5.0侧滑菜单
- 前端开发面试心法 12
- 零基础学习html 13
- javascript全攻略 14
- 网页专业名词大扫盲 20
- 网站职位定位指南 21
- 为您解密Yahoo网站制作流程 22
- Ajax异步上传文件实例代码分享
- 解决 Vue.js 项目中 router-link 和路由不生效的常见问题
- 议：如何将树形菜单形式的数据转化成HTML的二维表（相同内容需合并单元格）_html/css_WEB-ITnose
- css过渡如何在伪元素上实现_通过::before、::after与transition结合使用
- 关于弹性盒布局的介绍（附代码）
- 如何为复选框（checkbox）自定义提交值并区分选中/未选中状态
- js本地存储解决方案—localStorage与userData
- Vue开发经验总结：高效使用Vue生态系统的最佳实践
- 如何调整 Window 对象 addEventListener 的事件监听器执行顺序？ 或者 如何控制 window.addEventListener 事件监听器的执行顺序？
- HTML代码有什么作用_HTML代码在网页开发中的核心功能与应用场景
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个1 2 3 4 5p标签 6 7 8热门课程排行榜
9-
10
最新课程排行
15-
16
标签中，这个
标签的作用就相当于一个容器。 语法：
…
确定逻辑部分： 什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。 如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用标签作为容器。 来试试：用p标签为网页划分独立的版块 在编辑器中使用p标签划分出独立的逻辑部分。（答案有很多种噢，看看谁的最简炼） 别忘了
标签的语法：
…
参考代码：（只是其中的一种）p(pISION)顾名思义是对网页划分区块，p、span可以看作为一个容器，或者说一个盒子（ 盒模型 ）。 相当于浏览器屏幕上放了许多容器，为了看着舒服每个容器当然要整齐有序排列——p定位问题用CSS的 position 、还有 浮动 问题用CSS的 float 、以及盒模型布局的使用； 另外，把容器摆好了之后，就要放内容啦，比如列表、文本、图像等等，就好比盘子容器里要放菜一样，当然菜色多了就好看了，这就是CSS的作用。 学习当中要融汇贯通，为了做好伟大的Web大前端而学习。 四、给p命名，使逻辑更加清晰热门课程排行榜
最新课程排行
大家就懂了。p标签就是一个框，将里面的东西框起来，然后通过css来使这个框按照所需要的样式显示出来。
就是分类，把一类东西放在一块，另一类东西放另一块。这样一目了然，就是
实现的。
我们把一些标签放进1 2 3 4 5p标签 6 7 89
热门课程排行榜
10-
11
17
web前端开发导学课程
18-
19
里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称， 用id 属性 来为
提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。 如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。 语法：
…
任务 来试试给网页的独立的版块添加“标记” 1、在编辑器中的第8行修改代码为
。 2、在编辑器中的第16行修改
代码为
。 别忘了标记版块名称的语法：
p相当于划分成一个个房间，id就是房间号了 p的ID号是为了使用CSS的 ID选择器 ，应用CSS样式，否则毫无意义。 五、table标签，认识网页上的 表格 有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表： 想在网页上展示上述表格效果可以使用以下代码： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 创建表格的四个元素： table、tbody、tr、th、td 1、…
：整个表格以标记开始、
标记结束。 2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。 3、… ：表格的一行，所以有几对tr 表格就有几行。 4、… ：表格的一个单元格，一行中包含几对... ，说明一行中就有几列。 5、… ：表格的头部的一个单元格，表格表头。 6、表格中列的个数，取决于一行中数据单元格的个数。 上述代码在浏览器中显示的默认的样式为： 总结： 1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的 2、表头，也就是th标签中的文本默认为粗体并且居中显示 任务 来试试为数学成绩表添加一行内容 在右部编辑器中的第25-29行输入下列代码： 25.26. 结果图： 1、表格的行标签的语法：三班 27.32 28.80 29.… 2、一行中的单元格语法：tbody 防止那种因网速慢加载一点显示一点的情况， 如果把网页比作一个女士 加载样式的过程是化妆过程 那么tbody就相当于屏蔽了化妆的过程直到 女士化好妆在真正出来见人 tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。 td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。 table 创建表格 tbody全显示出来 th表头 tr每一行 td每一个单元格… … …表格标签表格完全下载完后才显示
表格的一行标签 表格的一个单元格，有几个 就有几列。 表格表头标签。 tr是行，td是表头，td是单元格内容； 有几对tr就表示有几行，有几个td表示有几列。 六、用css样式，为表格加入边框 Table 表格在没有添加 css 样式之前，是没有边框的。我们为表格添加一些样式，为它添加边框。 在代码编辑器中添加如下代码：1 2 3 4 5为表格添加边框 6 9 10 11 1213
34 35 3614 18班级 15学生数 16平均成绩 1719 23一班 2030 2189 2224 28二班 2535 2685 2729 33三班 3032 3180 32上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。 结果窗口显示出结果样式： 表格风格改变代码头尾： 表格四元素：table tr td,th 边框大小与颜色：{border:1px solid #000;} 七、caption标签，为表格添加标题和 摘要表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下： 摘要 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性( 语义化 )，使搜 索引 擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 语法：1 2 3 4 5认识table表标签 6 11 12 1314 15
40 4116 21产品名称 17品牌 18库存量（个） 19入库时间 2022 27耳机 23联想 24500 252013-1-2 2628 33U盘 29金士顿 30120 312013-8-10 3234 39U盘 35爱国者 36133 372013-3-25 38标题 用以描述表格内容，标题的显示位置：表格上方。 语法：
来试试，为文章添加标题 1. 在编辑器中为表格添加摘要，摘要的内容为“本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量”。 2. 在编辑器中为表格添加标题，标题的内容为“2012年到2013年库存记录”。 别忘了caption标签的语法标题文本 … … …标题，肯定在最上面，也不能跑到表外面吧。所以在... 下一行的位置写就行。 备注，是这个表的备注，所以，紧跟着table吧。
table的summary属性目的是语义化标签，是为了SEO，和完全是两回事， 因为浏览器(除了ie)，百度，谷歌的引擎是不会读你的注释文字的。 【相关推荐】 1. position 2 2. position 3 3. position 4
相关文章
- 在网页中显示的默认样式一般为：每项