企业官网建设流程全解析

表格

<table></table> 用来创建表格

<tr></tr> 表示行

<td></td> 表示列 普通单元格（内容）

<th></th> 和 td 的用法一样表头单元格，文字默认加粗、居中

HTML 表格：colspan 跨列、rowspan 跨行

✅colspan：跨列（横向，左右合并）

✅rowspan：跨行（纵向，上下合并）

1. colspan 跨列（横向合并单元格）

含义：当前单元格占据向右多少列写法：<td colspan="数字">

2. rowspan 跨行（纵向合并单元格）

含义：当前单元格占据向下多少行写法：<td rowspan="数字">

长表格专用标签：<thead><tbody><tfoot>

<thead></thead>

<tbody></tbody>

<tfoot></tfoot>

作用：把长表格分区，浏览器识别表格结构；打印时，换页可以重复打印表头。

标签说明

• <thead>：表格头部（表头区域，只写一份）
• <tbody>：表格主体（大量数据，可出现多次）
• <tfoot>：表格底部（汇总、备注）

语法硬性规则： 书写顺序必须：thead → tbody → tfoot显示顺序依旧：表头 → 主体 → 表尾

表单

<form action=""></form>

<input type="text">

<textarea name="" id=""></textarea>

HTML 表单<form>

作用

收集用户输入的数据（文字、选择、勾选、按钮等），提交给服务器。

基础结构

<form> <!-- 各种表单控件 input、select、textarea、button --> </form>

form 两个核心属性

1. action：提交数据的目标地址
2. method：提交方式，常用get/post

<form action="login.php" method="post"> </form>

最常用控件<input>（单标签）

依靠type区分类型

1. 单行文本框 text

姓名：<input type="text" name="username">

2. 密码框 password

密码：<input type="password" name="pwd">

3. 单选框 radio

同一组 name 必须相同，只能选一个

性别： <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女

4. 复选框 checkbox

可以多选，name 建议加[]

爱好： <input type="checkbox" name="hobby[]" value="game">游戏 <input type="checkbox" name="hobby[]" value="sport">运动

5. 提交按钮 submit

点击发送表单数据

<input type="submit" value="登录">

6. 重置按钮 reset

清空所有输入内容

<input type="reset" value="重填">

7. 普通按钮 button

默认无功能，配合 JS 使用

<input type="button" value="点击">

在button标签中包含img标签 --- 意味着可以让按钮中的图像变成你所需要的

<button><img src="" alt="" width="" height=""> 但是需要注意 --- 需要在img中为图片设置长宽高

8. 文件上传 file

<input type="file">

<p>uplode your song in mp3 format:</p>

<input type="file" name="user-song"/>

<br/>

<input type="submit" value="uplode"/>

其他表单标签

下拉选择框<select>+<option>

城市： <select name="city"> <option value="wh">武汉</option> <option value="tm">天门</option> </select>

multiple 通过添加multiple属性来创建多选框

添加multiple属性 ---- 最好是能告诉用户在选项选择的时候需要同时按下control键

<p>what device do you listen to music on?</p>

<select name="devices" size="3" multiple = "multiple">

<option value="ipod">ipod</option>

<option value="radio">radio</option>

<option value="computer">computer</option>

</select>

多行文本域<textarea>

留言：<br> <textarea rows="4" cols="30" name="msg"></textarea>

rows = 行数，cols = 宽度

label 标签（优化点击体验）

点击文字也能选中输入框

<label> <input type="radio" name="sex"> 男生 </label>

maxlength 用来限制用户在文本区域输入字符数量

<input type="hidden" name="" value=""/> hidden --- 隐藏表单控件（允许程序员向表单中添加用户看不到的值）

<label>标签 点击文字也能选中控件

作用

把文字和表单控件绑定在一起👉 点击文字，和点击输入框 / 单选框 / 多选框效果一样！

两种写法

方式 1：for + id

label的for值 = 控件的id

<label for="username">用户名：</label> <input type="text" id="username" name="user">

单选框示例：

<input type="radio" id="man" name="sex" value="male"> <label for="man">男生</label>

方式 2：直接包裹控件（不用 for、id）

<label> <input type="checkbox" name="hobby"> 运动 </label>

完整多选框搭配示例

<form> <input type="checkbox" id="music" name="hobby" value="music"> <label for="music">听音乐</label> <label> <input type="checkbox" name="hobby" value="game"> 打游戏 </label> </form>

<fieldset>和<legend>表单分组标签

作用

• <fieldset>：给表单控件划分分组区域，自带边框，把一组相关选项框起来
• <legend>：fieldset 的标题，显示在边框线上

语法规则

1. legend必须写在fieldset内部最开头
2. 一组相关表单控件放进同一个 fieldset

表单验证：减少服务器的工作量

required 属性（HTML5 表单验证重点）

作用

给表单控件添加required，代表必填项。

点击提交时，如果该输入框为空，浏览器阻止表单提交，并弹出提示。

写法（两种都有效）

<!-- 完整写法 --> <input type="text" name="username" required="required"> <!-- 简写（推荐，考试常用） --> <input type="text" name="username" required>

HTML 日期控件 input type="date"

基础语法

<input type="date" name="birthday">

页面会弹出原生日期选择器，用来选择年 - 月 - 日格式。

相关时间系列控件

1. type="date"→ 年月日

<input type="date">

1. type="time"→ 时分

<input type="time">

1. type="datetime-local"→ 年月日 + 时分（本地时间，考试最常考）

<input type="datetime-local">

1. type="month"→ 年月

<input type="month">

1. type="week"→ 年份 + 第几周

<input type="week">

电子邮件和url输入

1、电子邮件输入框type="email"

作用

自带 HTML5 原生验证，提交时浏览器自动检查内容是否符合邮箱格式。

代码

邮箱：<input type="email" name="email" required>

合法示例：test@qq.com非法示例：testqq.com、test@

补充：允许多个邮箱（逗号分隔）

<input type="email" multiple name="emails">

2、网址输入框type="url"

作用

原生校验，要求输入完整网址，必须带有http://或https://

代码

个人主页：<input type="url" name="homepage" required>

搜索输入控件：<input type="search">

基础语法

<input type="search" name="q">

规范习惯：搜索框name通常取名q（query 查询）