html003：表格，表单

最新推荐文章于 2025-09-11 20:09:50 发布

原创最新推荐文章于 2025-09-11 20:09:50 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文围绕HTML展开，介绍了SEO关键字、网页描述、重定向等内容。还阐述了表格的属性、结构、单元格合并等知识，以及表单的组成、属性和各类表单控件。此外，强调了标签语义化的概念、意义和使用原则。

一，关键字
Seo:搜索引擎优化，就是通过这些关键字让你的网页排名靠前

这个标签是给搜索引擎看的:告诉搜索引擎，这个网页的关键词(keyword)内容(content)

 <meta name="keywords" content="NBA，CBA">

网页描述

 <meta name="Description" content="致力于为中国大学生观看篮球比赛，查看篮球资讯">

网页重定向
比如：www.xiaomi.com 跳到www.mi.com，你搜索小米，他会自动跳转到米，也就相当于它有两个官网
1秒之后跳到百度

 <meta http-equiv="refresh" content="1;http://baidu.com">

链接外部样式表
设置icon图标

<link rel="icon" href="nba-icon%5B1%5D.icon">

二表格
展示数据。是对网页重构css+div的一个有益补充

<table>    表格
<tr>       行
<td></td> 列
<td></td>
<td></td>
</tr>
</table>

在这里插入图片描述

◆属性：
Border=”1” 边框
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用，tr或者td内容居中。
bgcolor=”red” 背景颜色。

表格的标准结构（标准结构方便搜索引擎搜索）

<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>

３.2表头和单元格合并
◆ 表头
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
在这里插入图片描述
３.3表格标题、边框颜色、内容垂直对齐
◆表格标题用法和td一样
标题的文字自动加粗水平居中对齐

◆边框颜色

◆内容垂直对齐方式

Valign=”top | middle | bottom”

三，表单（表单在from里面）
表单的作用是收集信息。
表单的组成
◆提示信息
◆表单控件

◆表单域

属性：action:处理信息
Method=”get | post”
Get通过地址栏提供（传输）信息，安全性差。传送少量的数据（信息在搜索地址）
Post 通过1.php来处理信息，安全性高。传送大量的数据（信息在封装在http中）
◆文本输入框

maxlength=“6” 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled=“disabled” 输入框未激活状态
name=“username” 输入框的名称
value=“大前端” 将输入框的内容传给处理文件

◆密码输入框（写出来加密）
在这里插入图片描述
★注意：文本输入框的所有属性对密码输入框都有效。
◆单选框

 性别：<input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender" checked="checked">女

◆下拉列表

<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>

在这里插入图片描述
属性：
Multiple=”multiple” 将下拉列表设置为多选项（按住shift选）
Selected=”selected” 设置默认选中项目（加在选项上）

对下拉列表进行分组。

Label=”分组名称。”
在这里插入图片描述
◆多选框

Checked=”checked” 设置默认选中项
◆多行文本框

Cols 控制输入字符的长度。
Rows 控制输入的行数
◆ 文件上传控件

◆文件提交按钮

★：可以实现信息提交功能
◆普通按钮

★不能提交信息，配合JS使用。
◆图片按钮
在这里插入图片描述
★图片按钮可实现信息提交功能
◆重置按钮

★将信息重置到默认状态
◆表单信息分组

<fieldset></fieldset>

对表单信息分组

<legend></legend>

 表单信息分组名称

html5补充表单控件
在这里插入图片描述

５标签语义化
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

-标签语义化意义：
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护

1：尽可能少的使用无语义的标签div和span；

2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3：不要使用纯样式标签，如：b、font、u等，改用css设置。

4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

写一个学生注册信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>西安邮电大学官网</title>
    <h1>学生信息表</h1>
<body>
<from action="1.php" method="get">
    学校：<input type="text" value="西安邮电大学" readonly="readonly"><br>
    姓名：<input type="text" maxlength="3" name="username"><br>
    学号：<input type="number" maxlength="8"><br>
    密码：<input type="password" maxlength="6"><br>
    性别：<input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender" checked="checked">女<br>
    学历：<select>
    <option>大专</option>
    <option selected="selected">本科</option>
    <option>硕士</option>
    <option>博士</option>
</select><br>
    加入的社团：<select multiple="multiple">
    <optgroup label="西安邮电大学社团"></optgroup>
    <option>校学生会</option>
    <option >校科协</option>
    <option>心协</option>
    <option>创协</option>
</select><br>
   所选课程： <input type="checkbox" checked="checked">高数 <input type="checkbox" >线代
    <input type="checkbox" >光电子学 <input type="checkbox" >应用光学<br>
    <textarea cols="100" rows="15">请输入自我介绍：</textarea><br>
    上传照片：<input type="file"><br>
    <input type="submit"><br>
    <input type="button" value="普通确认提交"><br>
    <input type="image" src="201802172026198494%5B1%5D.jpg"><br>
    <input type="reset">
</from>
</body>
</html>

在这里插入图片描述