Python web模版Django-21 模版学习知识准备－html－3 body常用标签

最新推荐文章于 2024-07-16 14:33:07 发布

Pansc2004

最新推荐文章于 2024-07-16 14:33:07 发布

阅读量340

点赞数

本文链接：https://blog.csdn.net/Pansc2004/article/details/80525208

版权

Django 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

body常用标签比较多，接着上一篇笔记：

多行文本框
form表单:　在form表单中加入"submit" input，可以将客户的输入，比如text, password, 选项用get 或 post发到服务器。　但这些text, password, 选项包括"submit”本身需要在同一个<form></form>下。

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<h1>多行文本框<br/></h1>
		<textarea style="height: 100px ; width: 200px;" placeholder="这里用户可以输入多行文本。"></textarea>		
		
		<h1>from表单</h1><br/>
		<form action="http://www.sogou.com/" method="get">
			<p>user:<input type="text"/></p>
			<p>password:<input type="password"/></p>
			<input type="submit" value="提交"/>	　<!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->	
		</form>
	</body>
</html>

label标签　为input元素定义标注（标记）。　label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果你在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。　label标签的for 属性应当与相关元素的id属性相同。

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<h1><label for="texta" >多行文本框</label><br/></h1>
		<textarea style="height: 100px ; width: 200px;" placeholder="这里用户可以输入多行文本。" id="texta"></textarea>		
		
		<h1>from表单</h1><br/>
		<form>
		  <label for="male">Male</label>
		  <input type="radio" name="sex" id="male" />
		  <br />
		  <label for="female">Female</label>
		  <input type="radio" name="sex" id="female" />
		</form>
	</body>
</html>

点击“多行文本框”，就会直接聚焦到文本框；点击"Male"就会直接选中"Male"。

列表 <ul></ul>　：　无序列表，ul列表会在项目前自动加“点”，　用<li>标签定义列表项目
列表 <ol></ol> : 无序列表, ol列表会在项目前自动加"数字" 用<li>标签定义列表项目
列表　<dl></dl> : dl列表自动分组，<dl> 标签定义了定义列表（definition list）；<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>		
		<h1>无序列表</h1><br/>
			<ul>
				<li>line1</li>
				<li>line2</li>
				<li>line3</li>
			</ul>
		<h1>有序列表</h1><br/>
			<ol>
				<li>line1</li>
				<li>line2</li>
				<li>line3</li>
			</ol>
		<h1>分组列表</h1><br/>
		<dl>
			<dt>河北省</dt>
			<!--dt是标签，dd是标签里的内容-->
				<dd>石家庄</dd>			
				<dd>衡水市</dd>
			<dt>山东省</dt>
			<!--dt是标签，dd是标签里的内容-->
				<dd>济南市</dd>
				<dd>烟台市</dd>
		</dl>
	</body>
</html>

表格 <table>

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>		
		<h1>表格演示</h1><br/>
			<table border="1">
			<!--border用来加上边框-->
				<tr>
					<td>第一行第一列</td>
					<td>第一行第二列</td>
					<td>第一行第三列</td>
				</tr>
				<!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
				<!--如果想加多个行就加多个tr即可-->
				<tr>
					<td>第二行第一列</td>
					<td>第二行第二列</td>
					<td>第二行第三列</td>
				</tr>		
				<tr>
					<td>第三行第一列</td>
					<td>第三行第二列</td>
					<td>第三行第三列</td>
				</tr>				
			</table>
	</body>
</html>

单元格合并

<!DOCTYPE html>
<table border="1">
    <!--border这里是加上边框-->
    <tr>
        <td colspan="3">1</td>
        <!--这里colspan，就告诉html解析的时候占3个格-->
    </tr>
    <!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
    <!--如果想加多个行就加多个tr即可-->
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
        <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

更标准的表格标签: 用 <th>定义表头字段,　用<thead>定义表头；　　用<tbody>定义表的主体内容

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<table border="1">
		<thead>
		<!--表头-->
			<tr>
				<th>表1</th>
				<th>表2</th>
				<th>表3</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
				<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
				<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

fieldset标签　可以将表单内的相关元素分组，将一组表单元素放到<fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果、或者甚至可以创建一个子表单来处理这些元素。用<legend>标签为fieldset元素定义标题。

<!DOCTYPE HTML>
<html>

<body>

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
	<input type="submit" value="提交"/>
  </fieldset>

</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>