A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 鱼丸儿 于 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>

olli的属性:
        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   的区别
2.3tr标签的属性
以上为表格标签中作用于一行的属性,其中

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基础

2 个回复

倒序浏览
努力研发新帖子ヾ(◍°∇°◍)ノ゙
回复 使用道具 举报
鱼丸儿老师,继续加油,辛苦辛苦哈,继续造福php学员,给力
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马