欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML的入门世界(3)

程序员文章站 2022-03-08 08:37:01
...

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.在网页中展示如下图所示表格:

HTML的入门世界(3)

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 实现如下所示注册页面案例

HTML的入门世界(3)

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>
相关标签： HTML基础 table表格标签 form表单标签

上一篇： ServletContextListener 应用

下一篇： Hadoop的MR on Yarn

推荐阅读