html的表-CSDN博客

本文链接：https://blog.csdn.net/zwb0303/article/details/132046833

本文详细介绍了HTML中的各种元素，包括表格的使用（如表格、表格头、单元格）、列表类型（有序、无序和自定义），以及表单组件如文本输入、密码字段、单选/复选按钮、提交按钮、下拉选项等。同时涵盖了框架整合和内联框架的基本概念。

摘要由CSDN通过智能技术生成

表

列表

有序列表

ol>li*n
ol是有序列表
li是表示行
n表示创建几行

	<!--默认为1的序号-->
	<ol>
        <li>1</li>
    </ol>
    <!--A大写字母-->
	<ol type="A">
        <li>1</li>
    </ol>
    <!--a小写字母-->
	<ol type="a">
        <li>1</li>
    </ol>
    <!--罗马顺序-->
	<ol type="I">
        <li>1</li>
    </ol>
   	<!--reversed倒序；start起始数字-->
	<ol reversed start="10">
        <li>1</li>
    </ol>

无序列表

ul>li*n
ul是无序列表
li是表示行
n表示创建几行

	<!--默认为圆点-->
	<ul>
        <li>gjks</li>
    </ul>
    <!--空心圆-->
	<ul type="circle">
        <li>1</li>
    </ul>
    <!--正方形-->
    <ul type="square">
        <li>1</li>
    </ul>

自定义列表

自定义列表以 < dl> 标签开始。每个自定义列表项以 < dt> 开始。每
个自定义列表项的定义以 < dd> 开始

	<dl>
        <dt>大标题</dt>
            <dd>小标题1</dd>
            <dd>小标题2</dd>
            <dd>小标题3</dd>
            <dd>小标题4</dd>
    </dl>

表格

table>tr>td*n
table是表格
tr是表头
td是表格单元

一个tr等于一行，一个td等与一个单元格

colspan跨列合并
rowspan跨行合并
border线
cellspacing单元格的间距
cellpadding单元格里面的间距

	<table border="1px" cellspacing="20px" cellpadding="20px">
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
        <tr>
            <td colspan="2">1</td>
        </tr>
    </table>

表单

表单：HTML 表单用于收集不同类型的用户输入
< from> 里面是表单元素< /from>

文本表单

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

密码字段

	<label for="password">密码</label>
    <input type="password" id="password">

单选按钮

	<label for="">性别：</label>
    <input type="radio" name="sex">女
    <input type="radio" name="sex">男

复选按钮

	<label for="">你喜欢干什么：</label>
    <input type="checkbox">吃
    <input type="checkbox">喝
    <input type="checkbox">玩
    <input type="checkbox">乐

提交按钮

	<input type="submit" value="提交">

下拉选框

	<label for="">你来自哪里：</label>
    <select name="" id="">
        <option value="">山西</option>
        <option value="">陕西</option>
        <option value="">河南</option>
        <option value="">河北</option>
        <option value="">山东</option>
        <option value="">重庆</option>
    </select>

点击拖拉

<input type="button" value="按钮">

重置按钮

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

搜索框

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

文本域

size:none意思不能拖动；cols：高；rows：宽

<textarea name="" id="" cols="30" rows="10" style="size: none;"></textarea>

边框线

<fieldset> <legend>表单名</legend></fieldset>

框架

整合框架

	<!--cols是列分，rows是行分，第一个百分比是第一个页面的占比-->
	<frameset cols="30%,*">
        <frame src="路径">
        <frame src="路径">
    </frameset>

内联框架

<iframe src="https://www.huya.com/" width="1000px"height="700px" name="Inline"></iframe>