文档章节

前端基础(二):HTML之列表、表格、表单标签

angel_Beat
 angel_Beat
发布于 07/02 18:28
字数 2359
阅读 0
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

下面是小凰凰的简介,看下吧!
💗人生态度:珍惜时间,渴望学习,热爱音乐,把握命运,享受生活
💗学习技能:网络 -> 云计算运维 -> python全栈( 当前正在学习中)
💗您的点赞、收藏、关注是对博主创作的最大鼓励,在此谢过!
有相关技能问题可以写在下方评论区,我们一起学习,一起进步。
后期会不断更新python全栈学习笔记,秉着质量博文为原则,写好每一篇博文。

一、列表标签

1、无序列表(使用较多) —— 快捷语法 ul>li*4

<ul> <!--无序列表英语:unorder list-->
        <li>第一项</li>
        <li>第二项</li>
        <li>第二项</li>
        <li>第二项</li>
</ul>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签

在这里插入图片描述

2、有序列表(了解) —— 快捷语法 ol>li*3

<!--有序列表英语:order list-->
<ol type="1" start="5"> <!--start = '5':序号从5开始-->
    <li>大家好!</li>
    <li>我是来自四川的小伙子!</li>
    <li>如果觉得我写的好就点个关注吧!</li>
</ol>

<!-- type属性: 1 数字列表,默认值 A 大写字母 a 小写字母 Ⅰ 大写罗马 ⅰ 小写罗马-->

渲染效果展示:
在这里插入图片描述

3、标题列表(了解)

<dl>
    <dt>标题1</dt> 
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
    <dt>标题3</dt>
    <dd>内容3</dd>
</dl>

在这里插入图片描述

二、table 表格标签

(1)table最简单使用
<!-- 表格标签 <thead> 表头 <tbody> 表单数据 <tr> 一个<tr> 就是一行 <th> 加粗文本,一般用于表头标题 <td> 正常文本,一般用于其他表格内容 属性(一般加在开始标签里) <table border="1"> 加外边框 <td colspan="2"></td> 水平方向占2个单元格(合并同一行中的单元格) <td rowspan="2"></td> 垂直方向占2个单元格(合并同一列中的单元格) -->
    <table>  <!-- 表格标签里,由<thead></thead>和<tbody></tbody> 组成 -->
        <thead>
            <tr>
                <th>username</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>mili</td>
                <td>1314</td>
            </tr>
            <tr>
                <td>cc</td>
                <td>520</td>
            </tr>
        </tbody>
</table>

渲染效果:
在这里插入图片描述

(2)添加三个重要属性,再看效果
加上下面三个属性,再看渲染效果:
border: 表格边框 
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
<table border = '1'>
        <thead>
            <tr>
                <th>username</th>
                <th>password</th>
                <th>hobby</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>吴晋丞</td>
                <td>123456</td>
                <td>cloud computing</td>
            </tr>
            <tr>
                <td colspan="2">陈媛媛</td>
                <td>dancing queen</td>
            </tr>
            <tr>
                <td>华晨宇</td>
                <td>best singer</td>
                <td rowspan="2">sing song</td>
            </tr>
            <tr>
                <td>本兮</td>
                <td>singer</td>
            </tr>
        </tbody>
</table>

渲染效果:
在这里插入图片描述

三、form 表单标签

1、form表单中所有标签的属性归纳

(1)form标签属性

能够获取前端用户数据(用户输入的、用户选择、用户上传…)基于网络发送给后端服务器
在这里插入图片描述

<!-- 格式:<form action= method= enctype=> </form> action属性控制数据提交的后端路径(给哪个服务端提交数据) 1.什么都不写 默认就是朝当前页面所在的url提交数据 2.写全路径:https://www.baidu.com 朝百度服务端提交 3.只写路径后缀action='/index/' 自动识别出当前服务端的ip和port拼接到前面 form表单提交文件需要注意 1.method属性必须指定为 post (form表单默认提交数据的方式是get请求,数据是直接放在url后面的,       无法保证数据安全 http://127.0.0.1:5000/index/?username=吴晋丞&password=5188891&gender=on)        2.enctype="multipart/form-data" enctype属性类似于数据提交的编码格式 默认是urlencoded 只能够提交普通的文本数据 formdata 就可以支持提交文件数据 -->
            
例如:<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
	 </form>

这个标签是表单的定义标签,下面介绍的标签都是接收用户输入的各种方法的标签。都应该放在form标签里面,这样form标签才能传给服务器

(2)input标签属性
1. name:相当于给标签起个名,以性别为例,,女标签的name值相同,'实现单选!',说明都属于性别这个标签,那么表单提交时,用户要么选择男,要么选择女进行提交
2. value:表单提交时对应项的值
3. type:实现表单中各式各样的用户输入方式
4. readonly:text和password设置只读
5. disabled:所有input均适用
6. checked:设置默认值,checked = 'checked',因为属性名和属性值一致,因此可以简写为checked

valuetype可以联合使用
	(1type="button""reset""submit"时,value为按钮上显示的文本内容
	(2type="text""password""hidden"时,value为输入框的初始值
	(3type="checkbox""radio""file"value为输入相关联的值

解释下第(3)点:比如性别我们用的是radio,可选男、女,但是这只是给用户看的,我们给后端传输数据时,不能传男、女,应该传male、female,这个value就是这个male、female
<p>gender:
         <input type="radio" name="gender" value='male' checked># 给性别男设置为默认选中
         <input type="radio" name="gender" value = 'female'><input type="radio" name="gender">其他
</p >

input中的type属性的属性值列表:
在这里插入图片描述

# label 和 input都是行内标签。ps:input不跟label关联也没有问题
label 标签的默认属性 forfor的值要与相关联的 input标签的 id值一致

-------- 第一种:直接将input框写在label内 --------
<label for="d1">  # label标签主要实现点击username,跳到d1,也就是text框里去!
    username:<input type="text" id="d1">
</label>

-------- 第二种 通过id链接即可 无需嵌套 -------- 
<label for="d2">password:</label>
<input type="text" id="d2">   

input标签 就类似于前端的变形金刚 ,通过type属性变形
    1. text:普通文本
    2. password:密文
    3. date:日期    
    4. submit:用来触发form表单提交数据的动作
    5. button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的,学完js之后可以给它自定义各种功能
    6. reset:重置内容
    7. radio:单选
        默认选中要加checked='checked'
        <input type="radio" name="gender" checked='checked'>男
        当标签的属性名和属性值一样的时候可以简写
        <input type="radio" name="gender" checked>8. checkbox:多选
        <input type="checkbox" checked>DBJ
    
    9. file:获取文件 也可以一次性获取多个
        <input type="file" multiple>
        
    10. hidden:隐藏当前input框     钓鱼网站伎俩
(3)select标签
select 标签 默认是单选 可以加mutiple参数变多选 默认选中selected
<!--单选-->
  <p>province:
            <select name="" id="">
                <option value="">上海</option>
                <option value="" selected>北京</option> # selected设置默认选中北京(与input中的checked一样),selected='selected',简写
                <option value="">深圳</option>
            </select>
  </p >
<!-- select标签-多选 使用 multiple 属性 -->
        <p>前女友:
            <select name="" id="" multiple>
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
            </select>
        </p >
<p>province1:
         <!-- select标签-多级单选列表 嵌套 <optgroup>标签 -->
           <select name="" id="">
               <optgroup label="上海">
                   <option value="">浦东</option>
                   <option value="">黄埔</option>
                   <option value="">青浦</option>
               </optgroup>
               <optgroup label="北京">
                   <option value="">朝阳</option>
                   <option value="">昌平</option>
                   <option value="">沙河</option>
               </optgroup>
               <optgroup label="深圳">
                   <option value="">111</option>
                   <option value="">222</option>
                   <option value="">333</option>
               </optgroup>
           </select>
</p >

2、实战演练

(1)html源码
<form action="">
        <!-- 用户输入框 -->
        <p>
            <label for="d1">username:<input type="text" id="d1"></label>
        </p >
        <p>
            <label for="d2">password:<input type="password" id="d2"></label>
        </p >
        <!-- 日期选择功能 -->
        <p>birthday:
            <input type="date">
        </p >
        <!-- input标签-单选 (将 name 的值设为一样的,就可实现 单选) -->
        <p>gender:
            <input type="radio" name="gender" value='male'><input type="radio" name="gender" value='female' checked></p >
        <!--input标签-多选 -->
        <p>hobby:
            <input type="checkbox">read
            <input type="checkbox" checked>DBJ
            <input type="checkbox" checked>JBD
            <input type="checkbox">hecha
        </p >

        <!-- select标签-单选 -->
        <p>province:
            <select name="" id="">
                <option value="">上海</option>
                <option value="" selected>北京</option>
                <option value="">深圳</option>
            </select>
        </p >
         <!-- select标签-多选 使用 multiple 属性 -->
        <p>前女友:
            <select name="" id="" multiple>
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
            </select>
        </p >
         <!-- select标签-多级单选列表 嵌套 <optgroup>标签 -->
       <p>province1:
           <select name="" id="">
               <optgroup label="上海">
                   <option value="">浦东</option>
                   <option value="">黄埔</option>
                   <option value="">青浦</option>
               </optgroup>
               <optgroup label="北京">
                   <option value="">朝阳</option>
                   <option value="">昌平</option>
                   <option value="">沙河</option>
               </optgroup>
               <optgroup label="深圳">
                   <option value="">111</option>
                   <option value="">222</option>
                   <option value="">333</option>
               </optgroup>
           </select>
       </p >
       
       <!-- 上传文件 multiple属性可支持用户能上传多种文件 -->
        <p>文件:
            <input type="file" multiple>
        </p >
        <!-- 文本输入框 -->
        <p>自我介绍:
            <br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p >
        <input type="submit" value="注册">
        <!-- 当你没有使用 value属性 指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致-->
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <button>点我</button>
    </form>
(2)渲染效果图及实现说明

在这里插入图片描述

angel_Beat
粉丝 1
博文 393
码字总数 0
作品 0
宜春
私信 提问
加载中
请先登录后再评论。
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
619
1
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
首列固定的列表

实现特殊的表格(UITableView)效果:即表格中的首列固定不动,而每一行除了首列均可左右拖动,以展现每一行更多内容。 作者谭林江(@无法越狱的痛)说:去益盟面试回来,感觉聊得有点郁闷,...

匿名
2013/01/24
1.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

连续数据包采集:数据包——硬盘

nBox Recorder是一个网络流量磁盘记录器应用程序。使用nBox Recorder,您可以从实时网络接口以千兆位速率捕获全尺寸的网络数据包,并将其写入文件中。它的设计和开发主要是因为大多数网络安全...

osc_8ki1usvn
23分钟前
0
0
Docker中级篇|深入探究Docker

简介: 深入探究Docker Docker镜像理解 Docker镜像是什么 镜像是一种轻量级、可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件,它包含运行某个软件所需的所有内容,包括代...

阿里云技术博客
23分钟前
0
0
一口气说出 9种 分布式ID生成方式,面试官有点懵了

一、为什么要用分布式ID? 在说分布式ID的具体实现之前,我们来简单分析一下为什么用分布式ID?分布式ID应该满足哪些特征? 1、什么是分布式ID? 拿MySQL数据库举个栗子: 在我们业务数据量不...

漫话编程
今天
0
0
tiktok如何运营

TK的模式 TK 是字节跳动(Byte Dance)公司原创的短视频社交 App,一家成立 8 年、以数据驱动的技术公司。 我们平时用的今日头条、西瓜视频、悟空问答、抖音等等都是字节跳动的产品。 字节跳...

osc_xs2d5ls9
24分钟前
22
0
《OpenCv视觉之眼》Python图像处理三 :Opencv图像属性、ROI区域获取及通道处理

本专栏主要介绍如果通过OpenCv-Python进行图像处理,通过原理理解OpenCv-Python的函数处理原型,在具体情况中,针对不同的图像进行不同等级的、不同方法的处理,以达到对图像进行去噪、锐化等...

osc_tjhvpz8x
25分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部