黑马程序员技术交流社区
标题: 【黑马程序员杭州】PHP课程笔记day02-HTML组标签 [打印本页]
作者: 鱼丸儿 时间: 2017-10-17 16:33
标题: 【黑马程序员杭州】PHP课程笔记day02-HTML组标签
本帖最后由 鱼丸儿 于 2017-11-7 10:36 编辑
各位同学们，没想到这么快我们又见面了，上次课我们学习了一些相对简单的HTML标签。今天我们将一同学习一部分更有挑战性的两个HTML组标签。希望大家能够跟着小编一同练习，达到对HTML标签的融汇贯通哦。
概念：组标签------多个标签协同作用完成特性功能。
一、列表标签列表标签总共有三种：无序列表、有序列表、定义列表
1.1无序列表 ps：无序列表是整个列表标签中最为重要的哦！！！
无序列表是用来表示一种没有先后顺序之分的列表项！
语法：
[PHP] 纯文本查看 复制代码
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ul：是英文中“unordered list”简写 无序列表的意思
li：是英文中“list item”简写 列表项的意思
ul----li两个标签共同作用，所以无序列表为组标签
注意：
l 我们会发现，这是我们学习的第一个“组标签”就是要么不写，要么就写一组！
l li标签它不能单独的存在，必须是包裹在ul标签的里面反过来说，ul的子元素必须是li标签，而不能是其它的任何标签！
l li标签里面可以存放任何内容！
无序列表在整个HTML网页制作是使用的最多的！
以下是一个简单的新闻网页的代码示例，当中的新闻标题就是无序列表实现的。
无序列表前面 默认会有一个实心的小圆点。
ul或者li标签有一个属性：
type：表示列表前面的符号的类型
取值：disc(默认值 实心的小圆点)、circle(空心园)、square(实心小方块)
1.2有序列表 相对于无序列表使用的较少
有序列表是用表示一种有顺序之分的列表项
语法格式：
[PHP] 纯文本查看 复制代码
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
[/mw_shl_code]ol：是英文中“ordered list”的简写 有序列表的意思
li：是英文中“list item”的简写 列表项的意思
效果图：
代码：
[PHP] 纯文本查看 复制代码
<ol>
<li>小苹果</li>
<li>月亮之上</li>
<li>演员</li>
<li>星星点灯</li>
</ol>
ol与li的属性：
type：用来设置列表前面的序号
取值：1(默认值)、a、A、i(小罗马)、I(大罗马)
start：用于表示序号从哪里开始 取值：数值
从第四个开始取值
其实有序列表使用的非常少 ，因为能够使用有序实现的其实也可以使用无序列表来实现！
1.3定义列表
定义列表是一个组标签，不过比较复杂，因为它出现了三对标签！
dl：它是英文中“defintion list”简写 表示定义列表的意思
dt：它是英文中“defintion title”简写 表示定义标题
dd：它是英文中“definition description ”简写 表示对定义标题的描述
注意：
dt、dd这两对标签它只能出现在dl标签里面 反过来说dl里面只能有dt与dd
上图中的代码表示了两层含义：
1. 是一个定义列表，列出了北京，上海，广州三个列表顶
2. 每一个列表项都有对应的描述信息
定义列表使用非常灵活，每一个dt是可以配多个dd的
jd首页使用定义列表来实现：
上面为一个购物网站的导航栏 ps很大一部分导航栏都是由自定义列表完成的。
二、表格标签 ps:表格标签为我们学习的第二个组标签！！！
当网页中出现下面这样的表格结构时，我们要知道下面这样的表格也是一个组标签！！！！2.1表格的基本用法
[PHP] 纯文本查看 复制代码
<table>
<tr> //这里是每一行
<td>这里是每个格子</td>
</tr>
</table>
table-tr-td共同作用完成功能所以表格标签为组标签
结构说明：
l <table></table>表示表格开始表格结束
l <tr></tr>表示表格中的行标签 一个表格中有多少行就应该书写多少对tr标签
l <td></td>表示表格中的单元格标签 一行中有多少个单元格就应该书写多少对td标签
l 表格中所有的内容都必须在放置在td标签里面 也就是说只有td标签才能存放内容
l <th></th>表示标题单元格 这个单元格里面的文本会加粗显示并且会居中
warning！！warning！！！
前方高能，请自动打开您的编辑器。
接下来我们分别来体会table的各个标签属性，各位看官老爷们一定要跟随着小编的脚步，一同敲写代码，自己切身的体会各个属性能够完成的功能哦！！！！！！
2.2table标签的常用属性
在以上这些属性为整个表格的属性其中
cellpadding 内填充
cellspacing 外边距
两个属性最为重要，要求看官老爷们一定要按照以下的代码进行练习，体会各个属性的使用以及作用
[PHP] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<!--插入一个2行3列的表格-->
<table border="1" width="500" align="center" cellspacing="20" cellpadding="40">
<tr>
<th>序号</th>
<th>商品名称</th>
<th>价格</th>
</tr>
<tr>
<td>1001</td>
<td>小米手机</td>
<td>1999</td>
</tr>
</table>
</body>
</html>
代码具体实现的效果为：
接下来我们用一张图来展示一下
cellpadding cellspacing 的区别
以上为表格标签中作用于一行的属性，其中
align 水平方向对齐方式
valign 垂直方向对齐方式
两个最为重要，大家也一定要跟着小编一同完成代码的练习哦！！！！
[PHP] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tr标签</title>
</head>
<body>
<table width="500" border="1" align="center">
<tr>
<td>序号</td>
<td>商品名称</td>
<td>价格</td>
</tr>
<tr align="center" bgcolor="red">
<td>1001</td>
<td>小米手机</td>
<td>1999</td>
</tr>
<tr valign="middle" align="center" height="200">
<td>1002</td>
<td>三星手机</td>
<td>299</td>
</tr>
<tr>
<td>1003</td>
<td>华为手机</td>
<td>2999</td>
</tr>
</table>
</body>
</html>
具体代码实现的效果为：
注意这里的背景颜色发生改变，宽高发生改变。
接下来我们来学习table组标签中的最后一个标签属性。
2.4td标签的属性
前面学习过的align、valign、bgcolor、height、width已经在上面具体使用过了，这里不做赘述，
这里的重点讲解
rowspan 跨行合并单元格
colspan 跨列合并单元格
！！！！！！！！！重点
在实现合并单元格：
1. 一定要明白我们是跨列合并还是跨行合并
2. 要明确的知道在哪一个单元格中书写合并单元格的属性
3. 要明确的知道要合并多少个单元格 合并多少个单元格 那么就是多少
4. 合并后要删除对应的单元格 n-1
今天的学习就该一段落喽，各位看官老爷记得练习对应属性，我们明天见喽
阅读推荐
【黑马程序员杭州】PHP课程笔记day01-HTML简介及标签
【黑马程序员杭州】PHP课程笔记day03-HTML网页框架及表单标签
【黑马程序员杭州】PHP课程笔记day04表单控件
【黑马程序员杭州】PHP课程笔记day05-CSS基础
作者: 鱼丸儿 时间: 2017-11-8 10:47
努力研发新帖子ヾ(◍°∇°◍)ﾉﾞ
作者: 小浙姐姐 时间: 2017-11-10 14:41
鱼丸儿老师，继续加油，辛苦辛苦哈，继续造福php学员
，给力
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |