html基本语法

silverljh

已于 2022-03-12 16:46:32 修改

阅读量99

点赞数 2

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

于 2022-03-12 16:43:24 首次发布

本文链接：https://blog.csdn.net/weixin_46726946/article/details/123446129

版权

前端学习专栏收录该内容

16 篇文章 3 订阅

订阅专栏

本文详细介绍了HTML中的表格语法，包括表格的基本结构、表头单元格、表格属性、合并单元格等。此外，还讲解了列表标签如无序列表、有序列表和自定义列表的用法。重点阐述了表单标签及其控件，如文本框、密码输入、单选按钮、复选框、提交和重置按钮，以及如何使用lable标签绑定表单元素。并提供了一个实际的注册表单案例，展示了如何结合使用这些元素创建交互式的网页表单。

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

表格基本语法

<table>   //表示表格
    <tr>   //行元素
         <td></td>  //列元素
         <td></td>
         <td></td>
    </tr>
</table>

表头单元格标签

<th></th> //一般会加粗居中显示     单元格的第一行

表格属性

后期一般通过css设置

cellpadding  //文字与边框之间的距离
cellspacing //单元格之间的空白距离

表格结构标签

让表格更加清晰、明了化

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

合并单元格

rowspan   //跨行合并
colspan  //跨列合并

列表标签

用来布局

无序列表

<ul>   //无序列表  ul只能放li  ，li中可以放置任何标签
    <li></li>   //列表项
    <li></li>
    <li></li>
</ul>

有序列表

<ol>  //有序列表
    <li></li>
     <li></li>
     <li></li>
</ol>

自定义列表

<dl>   //一列
    <dt>关注我们</dt>   //大哥，下面的围绕上面的来解释
    <dd>官方微信</dd>
    <dd>新浪微博</dd>
    <dd>联系我们</dd>
</dl>

表单标签

目的：收集用户信息

可以将信息提供给服务器。

    <form action="" method="post" name="name1">
        action：提交地址   method：提交方式 name：表单名称
    </form>

表单控件

    <form action="" method="post" name="name1">
       文本框：<input type="text" name=“username” value=“”>   input是单标签  name：表单名字
       密码： <input type="password">  value：具体值，给后台人员使用
       性别：<input type="radio" name=“sex”>男  <input type="radio" name=“sex”>女   //radio:单选按钮
       <br>
       <input type="checkbox">  //多选框
       <input type="submit" value="免费注册"> //submit把表单元素提交给action里的地址
       <input type="reset" value="重新设置">
    </form>

lable标签：绑定表单元素

    <form action="">
        <label for="next"> 名字</label>   id、for表签名称相同  
        <input type="text" id="next">    点击“名字”选定输入框

    </form>

select

    <form action="">
        籍贯：
        <select name="" id="">
            <option value="">山东</option>
            <option value="">陕西</option>
        </select>
    </form>

textarea：文本域

<textarea name="" id="" cols="30" rows="10">文本</textarea>

案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>

<body>
    <table width="500">
        <h4>青春不常在，抓紧谈恋爱</h4>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex">男
                <input type="radio" name="sex">女
            </td>
        </tr>

        <!-- 第二行 -->
        <tr>
            <td>生日：</td>
            <td>
                <select>
                    <option>请选择年份</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                    <option>请选择月份</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select>
                    <option>请选择日</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区:</td>
            <td><input type="text" value="陕西"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况：</td>
            <td>
                <input type="radio" name="marry" checked="checked">未婚
                <input type="radio" name="marry">已婚
                <input type="radio" name="marry">离婚
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历:</td>
            <td><input type="text" value="研究生"></td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型：</td>
            <td>
                <input type="checkbox" name="love">妩媚的
                <input type="checkbox" name="love">可爱的
                <input type="checkbox" name="love">小鲜肉
                <input type="checkbox" name="love">老腊肉
                <input type="checkbox" name="love">都喜欢
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>自我介绍:</td>
            <td><textarea >个人简介</textarea></td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"></td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!-- 第十一行 -->
        <tr> </tr>
        <!-- 第十二行 -->
        <tr>
            <td> </td>
            <td>
                <h3>我承诺</h3>
                <ul>
                    <li>年满十八、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>

</html>

结果图：

查阅文档

百度：https://www.baidu.com/

W3C：https://www.w3school.com.cn/

MDN：https://developer.mozilla.org/zh-CN/

silverljh

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html基本语法

表格基本语法<table> //表示表格 <tr> //行元素 <td></td> //列元素 <td></td> <td></td> </tr></table>表头单元格标签<th></th> //一般会加粗居中显示单元格的第一行表格属性后期一般通过css设置
复制链接

扫一扫

专栏目录