HTML学习.阶段2

最新推荐文章于 2024-09-11 14:09:02 发布

`流年づ

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量284

点赞数

分类专栏： HTML学习文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_63792137/article/details/122413286

版权

HTML学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML学习目录·阶段2

表格标签
列表标签
表单标签

表格标签

1.基本格式

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

2.标准格式

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

3.标签的作用

标签	作用
<table></table>	用于定义表格的标签
<caption></caption>	表格的标题
<thead></thead>	表头区域部分
<tr></tr>	用于定义表格的行（<table>内）
<th></th>	表头单元格（加粗，居中）
<td></td>	用来定义表格中的单元格
<tbody>< /tbody>	表格的主体区域
<tfoot></tfoot>	定义表格的页脚（脚注或表注）

4.<table>标签里可使用的属性

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

5.合并单元格

跨行：
rowspan=”合并个数“，以合并的最上侧为基准，删去多余单元格。
跨列：
colspan=”合并个数“，以合并最左侧为基准，删去多余单元格。

<table border="1" cellpadding="8" cellspacing="0.5" width="300" height="300" align="right">
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
    </thead>
    <tbody>
        <tr><td>你</td><td>我</td><td>她</td></tr>
        <tr><td colspan="3" align="center">丑小鸭</td></tr>
        <tr><td>5</td><td>2</td><td>1</td></tr>
    </tbody>
</table>

显示如下

列表标签

1.无序列表

其它元素只能放在<li>中

<ul>
	<li>列表1</li>
	<li>列表2</li>
</ul>

2.有序列表

其它元素只能放在<li>中

<ol>
	<li>列表1</li>
	<li>列表2</li>
</ol>

3.自定义列表

<dl>
	<dt>名词</dt>（自定义表头）
	<dd>解释1</dd>
	<dd>解释2</dd>
</dl>

表单标签

使用表单的目的：收集用户的信息
表单的组成：表单域，表单控件（也称为表单元素），提示信息

1.表单域

表单域是一个包含表单元素的区域
<form>会把它范围内的表单元素信息提交给服务器

<form action = "url地址"  methord = "提交方式"  name = "表单域名称">
	各种表单元素控件
</form>

常见属性

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

2.表单控件

$\color{olive}{input表单元素}$

英文单词中input是输入的意思，在表单元素中input用于收集用户信息

<input  type ="属性值" />
属于单标签

type的属性

属性值	描述
text	定义单行输入字段，用户可在其中输入文本
password	定义密码字段，该字符中的字符被掩码
radio	定义单选按钮 ¹
checkbox	定义复选框¹
submit	定义提交按钮其会把表单数据发送服务器（默认“提交”二字）
reset	定义重置按钮，可将表所有单数据清楚（默认“重置”二字）
button	定义可点击按钮（多数与javascrip启动脚本）
file	定义输入字段和“浏览”按钮，用于文件上传

除type以外其它属性

属性	属性值	描述
name 用户自定义	定义input元素的名称，用于区分不同的表单元素
value²	用户自定义	规定input元素的值
checked	checked	规定input元素首次被加载是被选中
maxlengh	正整数	规定输入字符的最多数

$\color{olive}{label标签}$

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

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

其for属性要与相关元素id相同

$\color{olive}{select标签单元素}$

在页面中有多个选项让用户选择，并且要节约网页空间时，使用该标签出现下拉表
在<option>里面加入slsected="slsected"默认该选项被选中

<select>
	<option>选项1</option>
	<option>选项2</option>
</select>

$\color{olive}{textarea文本域元素}$

当用户输入输入内容较多的情况下。我们就不能使用文本框了，此时可以使用<textarea>标签

<textare cols = “每行字符个数” rows = “显示行数”>

必须具有相同的name，才可以实现多选一
例(单选)：性别:
男<input type=“radio” name=“sex”>
女<input type=“radio” name=“sex”> ↩︎ ↩︎
:可以更改type属性里面文本内容，其中单选和复选框中内容无法使用户看到
例：提交
<input type=“submit” value=“免费注册”>,提交改为免费注册 ↩︎