当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

HTML基础学习第三天

2020-04-04 00:22前端开发基础 人已围观文章来源:成都SEO文章作者:小成站长

简介3.6 表格属性 align:表格居中 cellpadding:文字和表格的距离 cellspacing:单元格个单元格之间距离 -----------------------------...

3.6
 
表格属性
 
align:表格居中
cellpadding:文字和表格的距离
cellspacing:单元格个单元格之间距离
 
-------------------------------------------------
合并单元格
 
跨行合并:rowspan
跨列合并:colspan
 
合并单元格三步:
1.确定是跨行还是跨列 
2.找到单元格,  写上代码: 合并几个填写几个
3.删除多余单元格
 
个人简历表格
-----------------

个人简历

个人资料
姓名 程小姐 性别 照片
出身日期: 1983.1.2 籍贯: 南京  
身高: 178cm 体重: 65kg
学历: 本科 毕业院校: 华中师范大学
源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简历单元格</title>
</head>
<body>
    
    <h1 align="center">个人简历</h1>
    <table align="center" border="1" cellspacing="0" cellpadding="5" >
        
        <thead>
                
            <tr><td colspan="5">个人资料</td>
 
                </tr>
        </thead>
        <tbody>
                <tr><td>姓名</td>
                    <td>程小姐</td>
                    <td>性别</td>
                    <td>女</td>
                    <td>照片</td>
                    </tr>
                    <tr><td>出身日期:</td>
                        <td>1983.1.2</td>
                        <td>籍贯:</td>
                        <td>南京</td>
                        <td width="120" rowspan="3"></td>
                        </tr>
                        <tr><td>身高:</td>
                            <td>178cm</td>
                            <td>体重:</td>
                            <td>65kg</td>
                            
                            </tr>
                            <tr><td>学历:</td>
                                <td>本科</td>
                                <td>毕业院校:</td>
                                <td>华中师范大学</td>
                                
                                </tr>  
        </tbody>
    </table>
</body>
</html>
 
---------------------------
 
列表标签
 
列表就是用来布局的
三种类型
 
1.无序列表
ul > li   ul嵌套li
<ul></ul>只能放<li>
<li> 可以容纳所有元素</li>
 
使用场景:经常使用布局
 
 
2.有序列表  
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<ol>
 
ol > li   ul嵌套li
<ol></ol>只能放<li>
<li> 可以容纳所有元素</li>
 
使用场景:排行榜
 
3.自定义列表
 
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
<dd>名词解释3</dd>
<dd>名词解释4</dd>
</dl>
 
<dl></dl>  只能包含  <dt></dt> <dd></dd> 标签  也可以 出现多个 <dt></dt> <dd></dd>
使用场景:用于解释名词
 
列表总结:
标签名 定义 说明 应用场景
<ul></ul> 无序标签 里面只包含li,没有顺序。li里面可以包含任何标签 用于无序列表布局
<ol></ol> 有序标签 里面只包含li,有顺序。    li里面可以包含任何标签 用于排行榜
<dl></dl> 自定义列表 里面只包含dt和dd dt和dd可以放任何标签 用于解释标题。名词列表
 
 
 
课程表源码

课程表

项目 上课 休息
星期 星期一 星期二 星期三 星期四 星期五 星期六 星期日
上午 语文 数学 英语 英语 物理 计算机 休息
数学 数学 地理 历史 化学 计算机
化学 语文 体育 计算机 英语 计算机
政治 英语 体育 历史 地理 计算机
下午 语文 数学 英语 物理 计算机 英语 休息
数学 数学 地理 历史 化学 计算机
 
--------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>0.2课程表制作</title>
</head>
<body>
    <p align="center">课程表</p>
    <table align="center" border="1" cellpadding="8" border-color="yellow">
        <thead>
            <tr>
                <th>项目</th>
                <th colspan="5">上课</th>
                
                
                
                
                <th colspan="2">休息</th>
                
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>星期</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
                <td rowspan="4">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>英语</td>
                <td>物理</td>
                <td>计算机</td>
                <td rowspan="4">休息</td>
            </tr>
            <tr>
                 
                    <td>数学</td>
                    <td>数学</td>
                    <td>地理</td>
                    <td>历史</td>
                    <td>化学</td>
                    <td>计算机</td>
                    
                </tr>
                <tr>
                       
                        <td>化学</td>
                        <td>语文</td>
                        <td>体育</td>
                        <td>计算机</td>
                        <td>英语</td>
                        <td>计算机</td>
                        
                    </tr>
                    <tr>
                           
                            <td>政治</td>
                            <td>英语</td>
                            <td>体育</td>
                            <td>历史</td>
                            <td>地理</td>
                            <td>计算机</td>
                            
                        </tr>
                    <tr>
                        <td rowspan="2">下午</td>
                        <td>语文</td>
                        <td>数学</td>
                        <td>英语</td>
                        <td>物理</td>
                        <td>计算机</td>
                        <td>英语</td>
                        <td rowspan="2">休息</td>
 
                    </tr>
                    <tr>
                            
                            <td>数学</td>
                            <td>数学</td>
                            <td>地理</td>
                            <td>历史</td>
                            <td>化学</td>
                            <td>计算机</td>
                            
                    </tr>
        </tbody>
 
 
    </table>
</body>
</html>
 
-----------------------------
表单标签
 
收集信息
 
表单域
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们