HTML的入门世界(3)-CSDN博客

本文链接：https://blog.csdn.net/busyingtry/article/details/102219539

HTML的入门世界(3)

文章目录

HTML的入门世界(3)

1.table表格标签

1.语法

<table border="" width="" height="" bgcolor="" align="">
     <tr>
     	  <td>需要显示的内容</td>
     </tr>
</table>

1.说明: table标签代表整个表格 , tr标签代表表格中的一行 ,td标签是一行中的一个单元格

2.注意: 表格标签有边框属性(border),这个属性决定了边框的宽度,默认情况下边框的属性值为0,所以看不到边框; 表格标签与列表标签一样,是一个组合标签,table/tr/td同时出现,不会单个出现.

2.表格中的属性介绍

width:宽度

height:高度

border:边框的粗细

align:对其方式(居中,靠右,靠左对齐)

cellspacing:指定单元格之间的间隔

cellpadding:单元格与内容之间的间隔

rowspan:跨几行

colspan:跨几列

3.表格的其它标签

<table>
	<caption>表格标题</caption>
	<tr>
		<th>第一列的标题</th>
		<th>第二列的标题</th>
		<th>第三列的标题</th>
	</tr
	...
</table>
1.caption表格标题:在表格标签中提供了一个标签专门用来设置表格的标题,这个标签叫做caption.只要将标题写在caption标签中,那么标题就会自动相对于表格的宽度居中.
2.th列标题:在表格标签中提供了一个标签专门用来存储每一列的标题,这个标签叫做th标签,只要将当前列的标题存储在这个标签中就会自动居中+加粗文字.表格中有两种单元格,一种是td,一种是th.td是专门用来存储数据的,th是专门用来存储当前列的标题的.

4.表格的完整结构

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>
caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息

5.案例实现

1.在网页中展示如下图所示表格:

在这里插入图片描述

2.思路分析

创建页面
创建标题
创建8行6列的表格,居中
每个格子里面定义内容

3.代码实现:

    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<!--创建一个8行6列的表格-->
<!--表格中的第3列数据是img标签-->
<!--表格中的第6列数据是a标签-->
<table border="1px" width="50%" align="center" cellspacing="0">
    <caption><h1>今日小说排行榜</h1></caption>
    <tr bgcolor="#F1F1F1">
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>修罗武神</td>
        <td><img src="../img/up.jpg" /></td>
        <td>2704</td>
        <td>167878</td>
        <td>
            <a href="http://www.baidu.com">贴吧</a>
            <a href="http://www.baidu.com">图片</a>
            <a href="http://www.baidu.com">百科</a>
        </td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>我们是兄弟</td>
        <td><img src="../img/down.jpg" /></td>
        <td>2704</td>
        <td>167878</td>
        <td>
            <a href="http://www.baidu.com">贴吧</a>
            <a href="http://www.baidu.com">图片</a>
            <a href="http://www.baidu.com">百科</a>
        </td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>修罗武神</td>
        <td><img src="../img/up.jpg" /></td>
        <td>2704</td>
        <td>167878</td>
        <td>
            <a href="http://www.baidu.com">贴吧</a>
            <a href="http://www.baidu.com">图片</a>
            <a href="http://www.baidu.com">百科</a>
        </td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>我们是兄弟</td>
        <td><img src="../img/down.jpg" /></td>
        <td>2704</td>
        <td>167878</td>
        <td>
            <a href="http://www.baidu.com">贴吧</a>
            <a href="http://www.baidu.com">图片</a>
            <a href="http://www.baidu.com">百科</a>
        </td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>我们是兄弟</td>
        <td><img src="../img/up.jpg" /></td>
        <td>2704</td>
        <td>167878</td>
        <td>
            <a href="http://www.baidu.com">贴吧</a>
            <a href="http://www.baidu.com">图片</a>
            <a href="http://www.baidu.com">百科</a>
        </td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>修罗武神</td>
        <td><img src="../img/down.jpg" /></td>
        <td>2704</td>
        <td>167878</td>
        <td>
            <a href="http://www.baidu.com">贴吧</a>
            <a href="http://www.baidu.com">图片</a>
            <a href="http://www.baidu.com">百科</a>
        </td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>我们是兄弟</td>
        <td><img src="../img/up.jpg" /></td>
        <td>2704</td>
        <td>167878</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
</table>
</body>
</html>

2.form表单标签

1.语法

<form action="" method="">
...
</form>
作用:把用户输入的数据提交到服务器. action属性:提交路径,默认是当前页面,#  method属性:提交方式,常用的是get和post,默认是get.

2.form的常见子标签

input: 输入域,通过type属性指定类型
select: 选择列表
textarea: 文本域

2.1 input:输入类型

<input type="xxx" name="" value="" />

type属性,类型是由属性(type)定义的

text: 文本输入框
password: 密码域
radio: 单选框
checkbox: 复选框
file: 文件
submit: 提交按钮
reset: 重置按钮
button: 空白按钮
hidden: 隐藏字段

2.2 select:选择菜单

<select name="">
	<option value="">显示的内容</option>
</select>

option: 选择菜单的选项

注意: name在select里面指定, value在option里面指定, option定义在select里面.

2.3 textarea:文本域

<textarea rows="20" cols="30" name="introduce"></textarea>

属性:

cols:列
rows:行

3.通用属性

3.1.name属性

作为单选和多选框的分组
作为key上传到后台程序,后台程序通过key得到相应的value. 如果想要把数据提交到后台程序,一定要指定name属性

3.2.value属性

给按钮起名字
作为值提交到服务器

4.案例实现

4.1 实现如下所示注册页面案例

在这里插入图片描述

4.2 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录实现</title>
</head>
<body>
<form action="#" method="get">
    用户名:<input type="text" name="username" value=""/><br/>
    密码:<input type="password" name="password" /><br/>
    性别:<input type="radio" name="sex" value="1"/>男
         <input type="radio" name="sex" value="0">女<br/>
    爱好:<input type="checkbox" name="hobby" value="basketball">篮球
         <input type="checkbox" name="hobby" value="movies">看电影
         <input type="checkbox" name="hobby" value="movies">足球
         <input type="checkbox" name="hobby" value="coding">敲代码
    <br/>
    图像:<input type="file" name="icon"/> <br/>
    籍贯:<select name="address">
    <option value="sz">深圳</option>
    <option value="bj">北京</option>
    <option value="ty">太原</option>
    </select><br/>
    自我介绍:<br/><textarea rows="10" cols="10" name="introduce">我叫</textarea> <br/>
    <input type="submit" />  <input type="reset"/> <input type="button" value="按钮"/>
</form>

</body>
</html>