编程技术

Document

HTML学习第二篇

HTML学习第二篇

1. 表格标签

1.1 表格的主要作用与基本语法

（1）主要作用：展示数据
（2）基本语法：
td：table data

<table>
	<tr>
		<td>单元格的文字</td>
		...
	</tr>
	...
</table>

1.2 表头单元格标签

th里的文本内容加粗居中显示

<table>
	<tr>
		<th>姓名</th>
		...
	</tr>
	...
</table>

1.3 表格相关属性

这些属性要写到表格标签table里面去（CSS运用得多）

属性名（属性值） 描述
align（left、center、right） 规定表格相对周围元素的对齐方式
border（1或“”） 规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding（像素值） 规定单元边沿与其内容之间的空白，默认为1像素
cellspacing（像素值） 规定单元格之间的空白，默认为2像素
width（像素值或百分比） 规定表格的宽度

例如：

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>56</td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td>58</td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td>51</td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td>57</td>
        </tr>
    </table>

在这里插入图片描述

1.4 表格结构标签

<thead></thead>   表格的头部区域
<tbody></tbody>   表格的主体区域

1.5 合并单元格

（1）合并单元格形式：
一.跨行：rowspan=“合并单元格的个数”
二.跨列：colspan=“合并单元格的个数”
（2）目标单元格：（写合并代码）
一.跨行：最上侧单元格为目标单元格，写合并代码
二.跨列：最左侧单元格为目标单元格，写合并代码
（3）合并单元格的步骤：
一.先确定是跨行还是跨列合并
二.找到目标单元格，写上合并方式=合并单元格数量
三.删除多余的单元格

合并前：

</table>
	<table width="500" height="250" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
        	<td></td>
            <td></td>
            <td></td>
        </tr>
</table>

在这里插入图片描述
合并后（第一行后两列and第二三行第一列）：

</table>
    <table width="500" height="250" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>

            <td></td>
            <td></td>
        </tr>
</table>

在这里插入图片描述

2. 列表标签

列表是用来布局的：
在这里插入图片描述

3. 表单标签

使用表单是为了收集用户信息

3.1 表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

在这里插入图片描述

3.2 表单域

注：这部分仅作了解，学服务器编程时会用到！
表单域是一个包含表单元素的区域

在HTML中，<form>标签用于定义表单域，
以实现用户信息的收集与传递。
<form>会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
</form>

<form action="demo.php" method="POST" name="name1">
</form>

常用属性：

属性（属性值） 作用
action（url地址） 用于指定接受并处理表单数据的服务器程序的url地址
method（get/post） 用于设置表单数据的提交方式，其取值为get或post
name（名称） 用于指定表单的名称，以区分同一个页面中的多个表单域

3.3 表单控件（表单元素）

3.3.1 input输入表单元素

（1）type属性：

属性值 描述
text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
password 定义密码字段。该字段中的字符被掩码
radio 定义单选按钮
checkbox 定义复选框
submit 定义提交按钮。提交按钮会把表单数据发送到服务器
reset 定义重置按钮。重置按钮会清楚表单中的所有数据
button 定义可点击按钮（多数情况下，用于通过Javascript启动脚本）
file 定义输入字段和“浏览”按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮 
    <form>
        <!-- text文本框 用户可以在里面输入任何文字 -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"><br>

        <!-- password密码框 用户看不见输入的密码 -->
        密码 ：<input type="password" name="pwd"> <br>

        <!-- radio单选按钮 可以实现多选一 -->
        性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"> <br>

        <!-- checkbox 复选框 可以实现多选 -->
        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭" checked="checked">
        睡觉<input type="checkbox" name="hobby" value="睡觉" checked="checked">
        打豆豆<input type="checkbox" name="hobby" value="打豆豆"> <br>

        <!-- 点击了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器 -->
        <!-- <input type="submit"> 这里默认出现按钮名称是提交-->
        <input type="submit" value="免费注册">

        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <!-- <input type="reset"> 这里默认出现按钮名称是重置 -->
        <input type="reset" value="重新填写">

        <!-- 普通按钮 button 后期结合js 搭配使用 -->
        <input type="button" value="获取短信验证码"><br>

        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像：<input type="file"><br>
    </form>

在这里插入图片描述
此处与下文属性相联系！

（2）其他常用属性

属性（属性值） 描述
name（由用户自定义） 定义input元素的名称
value（由用户自定义） 规定input元素的值
checked（checked） 规定此input元素首次加载时应当被选中
maxlength（正整数） 规定输入字段中的字符的最大长度

注意：

（1）name和value是每个表单元素都有的属性值，主要给后台人员使用
（2）name为表单元素的名字，要求单选按钮和复选框要有相同的name值
（3）checked属性主要针对单选按钮和复选框，主要作用是一打开页面，就默认选中某个表单元素
（4）maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

（3）label标签：

<label>标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，
当点击<label>标签内的文本时，
浏览器就会自动将焦点（光标）
转到或者选择对应的表单元素上，用来增加用户体验，

<label for="text">用户名：</label> <input type="text" id="text">
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label>

例如此处，点击“女”字，则其前面按钮被选中：
在这里插入图片描述

3.3.2 select下拉表单元素

（1）<select>中至少包含一对<option>
（2）在<option>中定义selected="selected"时，
	 当前项即为默认选中项

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        籍贯：
        <select>
            <option>广东</option>
            <option selected="selected">西安</option>
            <option>天津</option>
            <option>北京</option>
            <option>上海</option>
        </select>
    </form>
</body>

</html>

这里设置了默认为西安：
在这里插入图片描述
下拉列表，可以看到：
在这里插入图片描述

3.3.3 textarea文本域元素

文本框是写一行，文本域可以写多行

    <form>
        今日反馈：
        <textarea cols="50" rows="5">pink老师，我知道这个反馈留言是textarea来做的</textarea>
    </form>

在这里插入图片描述

4. 学会查阅文档

（1）百度：http://www.baidu.com
（2）W3C：http://www.w3school.com.cn/
（3）MDN：https://developer.mozilla.org/zh-CN/

后记

还未学习知识点：

（1）目标与目录未写入
（2）表单域知识