html基础教程之认识标签（三）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了html基础教程之认识标签（三），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9414字，纯文字阅读大概需要14分钟。

内容图文

一、使用ul，添加新闻信息列表

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title> p标签</title>
 6 </head>
 7 <body>
 8 
 9 
10 </body>
11 </html>

在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。

html基础教程之认识标签（三） - 文章图片

新闻列表

html基础教程之认识标签（三） - 文章图片

图片列表

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

语法：

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

举例：

<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：

html基础教程之认识标签（三） - 文章图片

来试试，在编辑器中的第8行输入<ul><li>我的第一个列表信息</li></ul>

li 在英文里代表 List(列表),ol 在英文里代表 ordered list（有序列表）,ul 在英文里代表 unordered list（无序列表）

二、使用ol，添加图书销售排行榜

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title> p标签</title>
 6 </head>
 7 <body>
 8 
 9 
10 </body>
11 </html>

使用ol，添加图书销售排行榜

如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，

如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。

html基础教程之认识标签（三） - 文章图片

语法：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

举例：

下面是一个热点课程下载排行榜：

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，如下图所示：

html基础教程之认识标签（三） - 文章图片

来试试，在编辑器中的第 8 行输入

<ol>
   <li>我的第一个列表信息。</li>
   <li>我的第一个列表信息。</li>
</ol>

别忘了<ol>标签的语法

  <ol>
      <li>信息</li>
      <li>信息</li>
       ......
  </ol>

  三、认识p在排版中的作用

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>p标签</title>
 6 </head>
 7 <body>
 8     <h2>热门课程排行榜</h2>
 9     <ol>
10         <li>前端开发面试心法 </li>
11         <li>零基础学习html</li>
12         <li>javascript全攻略</li>
13     </ol>
14     <h2>最新课程排行</h2>
15     <ol>
16         <li>版本管理工具介绍—Git篇 </li>
17         <li>Canvas绘图详解</li>
18         <li>QQ5.0侧滑菜单</li>
19     </ol>
20 </body>
21 </html>

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<p>标签中，这个<p>标签的作用就相当于一个容器。

语法：

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。

如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<p>标签作为容器。

html基础教程之认识标签（三） - 文章图片

来试试：用p标签为网页划分独立的版块

在编辑器中使用p标签划分出独立的逻辑部分。（答案有很多种噢，看看谁的最简炼）

别忘了<p>标签的语法： <p> … </p>

参考代码：（只是其中的一种）

<p>
    <h2>热门课程排行榜</h2>
    <ol>
        <li>前端开发面试心法 </li>
        <li>零基础学习html</li>
        <li>javascript全攻略</li>
    </ol>
</p>
<p>
    <h2>最新课程排行</h2>
    <ol>
        <li>版本管理工具介绍—Git篇 </li>
        <li>Canvas绘图详解</li>
        <li>QQ5.0侧滑菜单</li>
    </ol>
</p>

一个html页面可以看成一个家，而一个p你们可以看成家的每个小房间，房间有了当然没什么效果，
但是一个家必须分成一个个小房间才能多姿多彩，但每个房间里怎么装饰就得你们自己放东西，当然装饰就得交给css了，
后面讲到<p class>大家就懂了。p标签就是一个框，将里面的东西框起来，然后通过css来使这个框按照所需要的样式显示出来。
<p>就是分类，把一类东西放在一块，另一类东西放另一块。这样一目了然，就是<p>实现的。

p(pISION)顾名思义是对网页划分区块，p、span可以看作为一个容器，或者说一个盒子（盒模型）。

相当于浏览器屏幕上放了许多容器，为了看着舒服每个容器当然要整齐有序排列——p定位问题用CSS的position、还有浮动问题用CSS的float、以及盒模型布局的使用；

另外，把容器摆好了之后，就要放内容啦，比如列表、文本、图像等等，就好比盘子容器里要放菜一样，当然菜色多了就好看了，这就是CSS的作用。

学习当中要融汇贯通，为了做好伟大的Web大前端而学习。

四、给p命名，使逻辑更加清晰

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>p标签</title>
 6 </head>
 7 <body>
 8 <p>
 9    <h2>热门课程排行榜</h2>
10     <ol>
11        <li>前端开发面试心法 </li>
12       <li>零基础学习html</li>
13        <li>javascript全攻略</li>
14     </ol>
15 </p>
16 <p>
17     <h2>web前端开发导学课程</h2>
18     <ul>
19        <li>网页专业名词大扫盲 </li>
20        <li>网站职位定位指南</li>
21        <li>为您解密Yahoo网站制作流程</li>
22     </ul>
23 </p>
24 </body>
25 </html>

我们把一些标签放进<p>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，

用id属性来为<p>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。

html基础教程之认识标签（三） - 文章图片

语法：

任务

来试试给网页的独立的版块添加“标记”

1、在编辑器中的第8行修改<p>代码为<p id="hotList">。

2、在编辑器中的第16行修改<p>代码为<p id="learningInstructed">。

别忘了标记版块名称的语法：

p相当于划分成一个个房间，id就是房间号了

p的ID号是为了使用CSS的ID选择器，应用CSS样式，否则毫无意义。

五、table标签，认识网页上的表格

有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：

html基础教程之认识标签（三） - 文章图片

想在网页上展示上述表格效果可以使用以下代码：

html基础教程之认识标签（三） - 文章图片

创建表格的四个元素：

table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

上述代码在浏览器中显示的默认的样式为：

html基础教程之认识标签（三） - 文章图片

总结：

1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

2、表头，也就是th标签中的文本默认为粗体并且居中显示

任务

来试试为数学成绩表添加一行内容

在右部编辑器中的第25-29行输入下列代码：

25.<tr>

26. <td>三班</td>

27. <td>32</td>

28. <td>80</td>

29.</tr>

结果图：

html基础教程之认识标签（三） - 文章图片

1、表格的行标签的语法：

2、一行中的单元格语法：

<tr>
   <td>…</td>
   <td>…</td>
   …
</tr>

tbody 防止那种因网速慢加载一点显示一点的情况，
如果把网页比作一个女士
加载样式的过程是化妆过程
那么tbody就相当于屏蔽了化妆的过程直到
女士化好妆在真正出来见人

tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。
td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。

table 创建表格
tbody全显示出来
th表头
tr每一行
td每一个单元格

<table>表格标签<tbody></tbody>表格完全下载完后才显示<tr>表格的一行标签<td>表格的一个单元格，有几个<td>就有几列。<th></th>表格表头标签。

tr是行，td是表头，td是单元格内容；
有几对tr就表示有几行，有几个td表示有几列。

六、用css样式，为表格加入边框

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>为表格添加边框</title>
 6 <style type="text/css">
 7 table tr td,th{border:1px solid #000;}
 8 </style>
 9 </head>
10 
11 <body>
12 <table summary="">
13   <tr>
14     <th>班级</th>
15     <th>学生数</th>
16     <th>平均成绩</th>
17   </tr>
18   <tr>
19     <td>一班</td>
20     <td>30</td>
21     <td>89</td>
22   </tr>
23   <tr>
24     <td>二班</td>
25     <td>35</td>
26     <td>85</td>
27   </tr>
28   <tr>
29     <td>三班</td>
30     <td>32</td>
31     <td>80</td>
32   </tr>
33 </table>
34 
35 </body>
36 </html>

Table 表格在没有添加 css 样式之前，是没有边框的。我们为表格添加一些样式，为它添加边框。

在代码编辑器中添加如下代码：

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。

结果窗口显示出结果样式：

html基础教程之认识标签（三） - 文章图片

表格风格改变代码头尾：<style type="text/css">...</style>
表格四元素：table tr td,th
边框大小与颜色：{border:1px solid #000;}

七、caption标签，为表格添加标题和摘要

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>认识table表标签</title>
 6 <style type="text/css">
 7 table tr td,th{
 8     border:1px solid #000;
 9 }
10 </style>
11 </head>
12 <body>
13 <table>
14   
15   <tr>
16     <th>产品名称 </th>
17     <th>品牌 </th>
18     <th>库存量（个） </th>
19     <th>入库时间 </th>
20   </tr>
21   <tr>
22     <td>耳机 </td>
23     <td>联想 </td>
24     <td>500</td>
25     <td>2013-1-2</td>
26   </tr>
27   <tr>
28     <td>U盘 </td>
29     <td>金士顿 </td>
30     <td>120</td>
31     <td>2013-8-10</td>
32   </tr>
33   <tr>
34     <td>U盘 </td>
35     <td>爱国者 </td>
36     <td>133</td>
37     <td>2013-3-25</td>
38   </tr>
39 </table>
40 </body>
41 </html>

表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：

html基础教程之认识标签（三） - 文章图片

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：<table summary="表格简介文本">

标题

用以描述表格内容，标题的显示位置：表格上方。

语法：

<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

来试试，为文章添加标题

1. 在编辑器中为表格添加摘要，摘要的内容为“本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量”。

2. 在编辑器中为表格添加标题，标题的内容为“2012年到2013年库存记录”。

别忘了caption标签的语法

  <caption>...</caption>

标题，肯定在最上面，也不能跑到表外面吧。所以在<table>下一行的位置写就行。
备注，是这个表的备注，所以，紧跟着table吧。 <table summary="本表是2012年的库存表">

table的summary属性目的是语义化标签，是为了SEO，和完全是两回事，

因为浏览器(除了ie)，百度，谷歌的引擎是不会读你的注释文字的。

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

以上就是html基础教程之认识标签（三）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的html基础教程之认识标签（三）全部内容，希望文章能够帮你解决html基础教程之认识标签（三）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/393475.html

来源：【匿名】

【上一篇】简述<video>标签的参数和属性【下一篇】PHP 和 HTML

更多 ►

【html基础教程之认识标签（三）】教程文章相关的互联网学习教程文章

表表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<table>标签正是你需要的,有许多和表有关的标签,它们都以<table>开始.表就是将一组数据用行列的形式排列,我们用<tr>标签创建一个表行(table row),<td>标签表示表数据(table date)<!DOCTYPE html><html><head><title>Table Time</title></head><body><table border="1px"><tr><td>One</td></tr><tr><td>Two</td></tr><tr><td>Three</td></tr><...

收集的web页面html中常用的特殊符号大全_基础教程

*特殊符号：·⊙①⊕◎Θ⊙*○¤㊣㈱＠の*□*☆** ▲△▼▽⊿ ▂ ▃ ▄ ▆ * * ▉ ▊▋▌▍▎▏* 回 □ **≡ ↑↓→←↘↙♀♂┇┅‖$ @ * & # ※ 卍卐 ∞Ψ §∮ № ⌒ ＊ *标点符号：．。，、；：？！ˉˇ¨`~ 々～‖∶＂＇｀｜·… — ～ - 〃 ‘'“”〝〞〔〕〈〉《》「」『』〖〗【】（）［］｛｝︻︼﹄﹃ *数学符号：＋－×÷﹢﹣±／＝ ∥∠ ≌ ∽ ≦ ≧ ≒﹤﹥ ≈ ≡ ≠ ＝ ≤ ≥ ＜＞ ≮ ≯ ∷ ∶ ∫ ∮ ∝ ∞ ∧ ∨ ∑ ∏...

JavaScript操作HTMLDOM节点的基础教程_基础知识【图】

因为 DOM 的存在，这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。 NOTE：下面提供的例子中的 element 均为元素节点。获取节点父子关系element.parentNode element.firstChild/element.lastChild element.childNodes/element.children兄弟关系element.previousSibling/element.nextSibling element.previousElementSibling/element.nextElementSibling通过节点直接的关系获取节点会导致代码维护性大大降低（节点之...

div+css与xhtml+css分别是什么意思?_基础教程

不知道从什么时候开始，在网络上到处可以看到div+css，到底什么是div+css呢？难道就是传说中的标准重构吗？标准从最简单的根源来说不是合理使用xhtml的标签吗？可为什么还是有这么多div+css呢？既然可以div+css，那为什么不可以叫span+css ul+css li+css等等呢？疑问，满脑子的疑问!为了这个疑问，我把自己脑子里的东西从最底层翻了一遍。在几年前大家都是用table来布局，一层套一层，没发现什么不妥，一直用到《网站重构》这本书...

《HTML5与CSS3基础教程》学习笔记--FourDay_html/css_WEB-ITnose

第十六章 1、输入和元素电子邮件框搜索框电话框 <inputtype="tel">URL 框 <inputtype="url">以下元素得到了部分浏览器的支持日期数字范围数据列表下面的输入或者元素得到的支持很少， W3C 指出它们在 2014 年定案之时很可能不会列入 HTML5颜色全局日期和时间<inputtype="datetime" />局部日期和时间月时间周输出 2、属性： 1) accept限制用户可上...

JavaScript操作HTML DOM节点的基础教程【图】

因为 DOM 的存在，这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。 NOTE：下面提供的例子中的 element 均为元素节点。获取节点父子关系 element.parentNode element.firstChild/element.lastChild element.childNodes/element.children 兄弟关系 element.previousSibling/element.nextSibling element.previousElementSibling/element.nextElementSibling 通过节点直接的关系获取节点会导致代码维护性大大降低（节...

HTML5Canvas绘制文本及图片的基础教程_html5教程技巧【图】

绘制文本在HTML5中，我们还可以在Canvas「画布」上绘制我们所需的文本文字，其中所涉及到的CanvasRenderingContext2D对象的主要属性和方法如下：属性或方法基本描述font设置绘制文字所使用的字体，例如20px 宋体，默认值为10px sans-serif。该属性的用法与css font属性一致，例如italic bold 14px/30px Arial,宋体fillStyle用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制...

html5基础教程常用技巧整理【图】

HTML5的一些新增属性和功能是让代码变得更简洁，这总归是一件好事，应该值得我们推崇，希望这篇HTML5的文章对你有一些帮助1. 新的Doctype声明 XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那...

前端获取http状态码400的返回值实例_基础教程【图】

下面我就为大家带来一篇前端获取http状态码400的返回值实例。现在就分享给大家，也给大家做个参考。如下所示：axios.get("/check_mobile_and_sent_code",{withCredentials:true,params:{mobile:formInline.mobile}}).then(res=>{console.log(res);//if(res.result==true){if (!this.timer) {this.count = this.TIME_COUNT;this.show = false;this.timer = setInterval(() => {if (this.count > 0 && this.count <= this.TIME_COUNT...

html基础教程之认识标签（三）【图】

一、使用ul，添加新闻信息列表 1 <!DOCTYPE HTML>2 <html>3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">5 <title> p标签</title>6 </head>7 <body>8 9 10 </body> 11 </html>在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。新闻列表图片列表这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。语法：<ul><li>信息</li><li>信息</li>........

html基础教程之与浏览者交互，表单标签【图】

一、使用表单标签，与用户交互 1 <!DOCTYPE HTML>2 <html>3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">5 <title>表单标签</title>6 </head>7 <body>8 <form>9 <label for="username">用户名:</label> 10 <input type="text" name="username" id="username" value="" /> 11 <label for="pass">密码:</label> 12 <input type="password" name="pass" id="pass" value=...

html基础教程之认识标签（二）【图】

八、<blockquote>标签，长文本引用 1 <!DOCTYPE HTML>2 <html>3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">5 <title>blockquote标签的使用</title>6 </head>7 <body>8 <h2>心似桂花开</h2>9 <p>大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？</p> 10 “暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。” 11 <p>这是李清照《咏桂》中的词句，在...

html基础教程之代码初体验【图】

一、代码初体验，制作我的第一个网页 1 <!DOCTYPE HTML>2 <html>3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">5 <title>制作我的第一个网页</title>6 </head>7 <body>8 <h1></h1>9 </body> 10 </html>代码中第8行<h1>和</h1>标签之间，输入Hello World 字符串。注意Hello World文字一定要写到<h1></h1>两个标签之间。如：<h1>Hello World</h1>二、Html...

swiper的基础教程（十二）

本节内容介绍swiper当中如何将导航变为滚动条样式。首先我们搭建一个swiper页面的基本布局。<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">H5EDU 1<img src="logo.png"></div><div class="swiper-slide">H5EDU 2<img src="logo.png"></div><div class="swiper-slide">H5EDU 3<img src="logo.png"></div><div class="swiper-slide">H5EDU 4<img src="logo.png"></div><div class="swiper-...

HTML基础教程：学习掌握HTML元素

HTML文档是由HTML元素构成的文本文件。HTML元素是通过使用HTML标签进行定义的。HTML标签HTML标签是用来标记HTML元素的。HTML标签被<和>符号包围。这些包围的符号叫作。HTML标签是成对出现的。例如和。位于起始标签和终止标签之间的文本是元素的内容。HTML标签对大小写不敏感，和的作用的相同的。HTML元素还记得上一节中的那个例子吗：这是我的第一个页面。此文本是粗体的。这就是一个HTML元素：此文本是粗体的。这个HTML元素由起始...

HTML - 技术教程分类

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 XHTML 简介 HTML 媒体(Media) HTML 插件 HTML 实例 HTML 标签列表（功能排序） HTML 属性 HTML 事件 HTML 画布 HTML 音频/视频 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML 语言代码 html 全部

HTML - 最热教程

html5代码如何实现进度条功能？（示例）javascript中html字符串转化为jquerydo...HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery打印指定区域Html页面并自动分页...jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...php删除html标签和标签内的内容的方法总...XMLHttpRequest中responseText如何获取...

首页 / HTML / html基础教程之认识标签（三）

html基础教程之认识标签（三）

内容导读

内容图文

二、使用ol，添加图书销售排行榜

使用ol，添加图书销售排行榜

四、给p命名，使逻辑更加清晰

任务

五、table标签，认识网页上的表格

任务

六、用css样式，为表格加入边框

七、caption标签，为表格添加标题和摘要

内容总结

内容备注

内容手机端

【html基础教程之认识标签（三）】教程文章相关的互联网学习教程文章

HTML/CSS基础教程二【代码】【图】

收集的web页面html中常用的特殊符号大全_基础教程

JavaScript操作HTMLDOM节点的基础教程_基础知识【图】

div+css与xhtml+css分别是什么意思?_基础教程

《HTML5与CSS3基础教程》学习笔记--FourDay_html/css_WEB-ITnose

JavaScript操作HTML DOM节点的基础教程【图】

HTML5Canvas绘制文本及图片的基础教程_html5教程技巧【图】

html5基础教程常用技巧整理【图】

前端获取http状态码400的返回值实例_基础教程【图】

html基础教程之认识标签（三）【图】

html基础教程之与浏览者交互，表单标签【图】

html基础教程之认识标签（二）【图】

html基础教程之代码初体验【图】

swiper的基础教程（十二）

HTML基础教程：学习掌握HTML元素

HTML - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程