前端基础(5):html语法(4): <br> <td><tr><label>标签

日期:2017/11/7

       今早学习了html语法中的几个标签: <br> <td><tr><label>:

<form name="form1" action=http://localhost/my/ManyParameters method=get>
	<table width="340" border="1">
		<tr>
			<td width="92">param1</td>
			<td width="94"><input name="param1" type="text"></td>
		</tr>
		<tr>
			<td width="92">param2</td>
			<td><lable>
				<input name="param2" type="text">
			</lable></td>
		</tr>
		<tr>
			<td width="92">param3</td>
			<td width="94"><input name="param3" type="text"></td>
		</tr>	
		<tr>
			<td><label>
				<td width="94"><input type=submit value="Submit"></td>
			</label></td>	
		</tr>		
	</table>
	<input type=hello name=Earth>
</form>


运行效果:


一、<br>标签--标准换行

         定义和用法:<br> 可插入一个简单的换行符。

         <br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。
         请注意,<br> 标签只是简单地开始新的一行,而当浏览器遇到 <p> 标签时,通常会在相邻的段落之间插入一些垂直的间距。请使用 <br> 来输入空行,而不是分割段落。

         该标签支持HTML 全局属性,如下列表:

属性 描述
accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名(引用样式表中的类)。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

二、<td>标签--标准单元格

        定义和用法:<td> 标签定义 HTML 表格中的标准单元格。
             HTML 表格有两类单元格:
                          表头单元 - 包含头部信息(由 th 元素创建)
                          标准单元 - 包含数据(由 td 元素创建)
                          td 元素中的文本一般显示为正常字体且左对齐。

可选择以下属性:

属性 描述
abbr text 规定单元格中内容的缩写版本。
align
  • left
  • right
  • center
  • justify
  • char
规定单元格内容的水平对齐方式。
axis category_name 对单元进行分类。
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式取而代之。

规定单元格的背景颜色。

char character 规定根据哪个字符来进行内容的对齐。
charoff number 规定对齐字符的偏移量。
colspan number 规定单元格可横跨的列数。
headers header_cells'_id 规定与单元格相关的表头。
height
  • pixels
  • %

不赞成使用。请使用样式取而代之。

规定表格单元格的高度。

nowrap nowrap

不赞成使用。请使用样式取而代之。

规定单元格中的内容是否折行。

rowspan number 规定单元格可横跨的行数。
scope
  • col
  • colgroup
  • row
  • rowgroup
定义将表头数据与单元数据相关联的方法。
valign
  • top
  • middle
  • bottom
  • baseline
规定单元格内容的垂直排列方式。
width
  • pixels
  • %

不赞成使用。请使用样式取而代之。

规定表格单元格的宽度。


三、<tr>标签--标准行

         定义和用法

               <tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。


可选属性列表:

属性 描述
align
  • right
  • left
  • center
  • justify
  • char
定义表格行的内容对齐方式。
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式取而代之。

规定表格行的背景颜色。

char character 规定根据哪个字符来进行文本对齐。
charoff number 规定第一个对齐字符的偏移量。
valign
  • top
  • middle
  • bottom
  • baseline
规定表格行中内容的垂直对齐方式。

四、<label>标签

       定义和用法

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。


     <label> 标签同样支持 HTML 中的全局属性。


<form action="xxx.jsp" method="post" > <table width="500"> <style> body { display: grid; place-content: center; min-height: 100vh; margin: 20px; font-family: 'Microsoft YaHei', sans-serif; font-size: 16px; } table { border-spacing: 10px; } </style> <tr> <td><b style="font-size: 16px;">性别</b></td> <td> <input type="radio" id="man" name="sex"/> <label for="man"><img src="images/man.jpg"> 男 </label> <input type="radio" id="women" name="sex"/> <label for="women"><img src="images/women.jpg"> 女 </label> </td> </tr> <tr> <td><b>生日</b></td> <td> <select name="year"> <option selected="selected">--请选择年--</option> <option>1990</option> <option>2000</option> <option>2010</option> </select> <select name="month"> <option selected="selected">--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select name="day"> <option selected="selected">--请选择日--</option> <option>11</option> <option>12</option> <option>13</option> </select> </td> </tr> <tr> <td><b>所在地区</b></td> <td> <input type="text" value="安徽" name="area"> </td> </tr> <tr> <td><b>婚姻状况</b></td> <td> <input type="radio" name="marital_status" id="spinsterhood"> <label for="spinsterhood"> 未婚 </label> <input type="radio" name="marital_status" id="married"> <label for="married"> 已婚 </label> <input type="radio" name="marital_status" id="divorce"> <label for="divorce"> 离婚 </label> <input type="radio" name="marital_status" id="secret"> <label for="secret">保密</label> </td> </tr> <tr> <td><b>学历</b></td> <td><input type="text" name="edu_bg"></td> </tr> <tr> <td><b>喜欢的类型</b></td> <td> <input type="checkbox" name="like_type" id="wumei"> <label for="wumei"> 妩媚的 </label> <input type="checkbox" name="like_type" id="keai"> <label for="keai"> 可爱的 </label> <input type="checkbox" name="like_type" id="xiaoxianrou"> <label for="xiaoxianrou"> 小鲜肉 </label> <input type="checkbox" name="like_type" id="laolarou"> <label for="laolarou"> 老腊肉 </label> <input type="checkbox" name="like_type" id="douxihuan"> <label for="douxihuan"> 都喜欢 </label> </td> </tr> <tr> <td><b>自我介绍</b></td> <td> <textarea cols="30" rows="10" name="self_introduction"></textarea> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <input type="submit" value=" 免费注册 "> </td> </tr> </table> </fieldset> </form>
04-01
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <div > <div class="card"><!-- 标题区域 --> <div class="card-header">学习计划表</div><!-- 提交区域 --> <div class="card-body"> <form> <div class="row g-4"><!-- 学习科目 --> <div class="col-auto"> <div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习科目</span><input type="text" class="form-control" placeholder="请输入学习科目"></div> </div><!-- 学习任务 --> <div class="col-auto"> <div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习内容</span><textarea class="form-control" placeholder="请输入学习内容" style="height: 32px;"></textarea></div> </div><!-- 学习地点 --> <div class="col-auto"> <div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习地点</span><select class="form-select form-select-sm"> <option value="自习室">自习室</option> <option value="图书馆">图书馆</option> <option value="宿舍">宿舍</option> </select></div> </div><!-- 添加按钮 --> <div class="col-auto"><button type="submit" class="btn btn-primary">添加</button></div> </div> </form> </div> </div> <table class="table table-striped table-hover table-bordered"> <thead> <tr> <th scope="col">序号</th> <th scope="col">学习科目</th> <th scope="col">学习内容</th> <th scope="col">学习地点</th> <th scope="col">完成状态</th> <th scope="col">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Vue.js前端实战开发</td> <td>学习指令,例如v-if、v-for、v-model等</td> <td>自习室</td> <td> <div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="cb1"><label class="form-check-label" for="cb1">未完成</label></div> </td> <td><a href="javascript:;">删除</a></td> </tr> <tr> <td>2</td> <td>1</td> <td></td> <td>自习室</td> <td> <div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="cb2"><label class="form-check-label" for="cb2">未完成</label></div> </td> <td><a href="javascript:;">删除</a></td> </tr> </tbody> </table> </div> </body>用vue3寫一個學習計劃表
最新发布
05-11
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>前端网-登录注册</title> </head> <body> <h1>wasai</h1> <p id="p1">不错</p> <img src="1.jbg" alt="示例图片"> <table border="1"> <caption>用户信息表</caption> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr> <td>2</td> <td>王五</td> <td>男</td> <td>22</td> </tr> </table> <br> <a href="login.html">登录</a> <form action="login.php" method="post" onsubmit="return test()"> <script> function test() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; alert(`用户名:${username}\n密码:${password}`); return false; // 阻止表单提交 } </script> <label>用户:<input type="text" id="username" name="username" required></label><br> <label>密码:<input type="password" id="password" name="password" required></label><br> 男:<input type="radio" name="sex" value="male" required> 女:<input type="radio" name="sex" value="female"><br> 打游戏:<input type="checkbox" name="hobby[]" value="gaming"> 听音乐:<input type="checkbox" name="hobby[]" value="music"> 看小说:<input type="checkbox" name="hobby[]" value="novel"><br> <select id="city" name="city"> <option value="chengdu">成都</option> <option value="guangan">广安</option> <option value="beijing">北京</option> </select> <input type="file" name="file"> <textarea id="comment" name="comment" rows="5" cols="20"></textarea> <input type="submit" value="提交"> <button type="button">注册</button> </form> <script src="test.js"></script> </body> </html> 添加if来判断密码输入错误
03-09
``` <form action="xxx.jsp" method="GET" name="性别;生日;所在地区;婚姻状况;学历;喜欢的类型;自我介绍;"> <table width="500"> <style> body{ display:grid; place-content: center; height: 100vh; margin: 0%; font-family: '黑体'; font-size: 100px; } </style> <tr> <td><b>性别</b></td> <td> <input type="radio" id="man" name="sex"/> <label for="man"><img src="images/man.jpg"> 男 </label> <input type="radio" id="women" name="sex"/> <label for="women"><img src="images/women.jpg"> 女 </label> </td> </tr> <tr> <td><b>生日</b></td> <td> <select name="year"> <option selected="selected">--请选择年--</option> <option>1990</option> <option>2000</option> <option>2010</option> </select> <select name="month"> <option selected="selected">--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select name="day"> <option selected="selected">--请选择日--</option> <option>11</option> <option>12</option> <option>13</option> </select> </td> </tr> <tr> <td><b>所在地区</b></td> <td> <input type="text" value="安徽" name="area"> </td> </tr> <tr> <td><b>婚姻状况</b></td> <td> <input type="radio" name="marital_status" id="spinsterhood"> <label for="spinsterhood"> 未婚 </label> <input type="radio" name="marital_status" id="married"> <label for="married"> 已婚 </label> <input type="radio" name="marital_status" id="divorce"> <label for="divorce"> 离婚 </label> <input type="radio" name="marital_status" id="secret"> <label for="secret">保密</label> </td> </tr> <tr> <td><b>学历</b></td> <td><input type="text" name="edu_bg"></td> </tr> <tr> <td><b>喜欢的类型</b></td> <td> <input type="checkbox" name="like_type" id="wumei"> <label for="wumei"> 妩媚的 </label> <input type="checkbox" name="like_type" id="keai"> <label for="keai"> 可爱的 </label> <input type="checkbox" name="like_type" id="xiaoxianrou"> <label for="xiaoxianrou"> 小鲜肉 </label> <input type="checkbox" name="like_type" id="laolarou"> <label for="laolarou"> 老腊肉 </label> <input type="checkbox" name="like_type" id="douxihuan"> <label for="douxihuan"> 都喜欢 </label> </td> </tr> <tr> <td><b>自我介绍</b></td> <td> <textarea cols="30" rows="10" name="self_introduction"></textarea> </td> </tr> <tr> <td> <input type="submit" value=" 免费注册 "> </td> </tr> </table> </form>```sans-serif是什么意思
04-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

后台技术汇

对你的帮助,是对我的最好鼓励。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值