阅读模式:

HMTL 基本结构标签 (下)

阅读量:10  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:<table></table> //表格标签 cellpadding单元格内边距 cellspacing单元格间距的空白<tr></tr&am......

HMTL 基本结构标签 (下)

<table></table>  //表格标签 cellpadding单元格内边距 cellspacing单元格间距的空白

<tr></tr>  //定义表格行

<th></th>  //定义表头

<td></td>  //定义单元格

<thead></thead> 和 <tbody></tbody>  //表格结构标签,便于区分头部和主体

rowspan="" 和 colspan=""  //合并单元格,跨行合并和跨列合并

<ul></ul> //无序列表,列表项<li></li>

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

<dl></dl>  //定义列表,列表项<dt> <dd></dd> </dt>

<form></form>标签

<input type="属性值" /> //属性还有:name value checked maxlength

button  //可点击按钮

submit  //提交按钮

reset  //重置按钮

password  //密码

text  //文本

checkbox  //复选框

radio  //单选

……

<label for="id"></label>  //标注标签 for id和input id相同

<select></select>  //下拉列表

<option></option>  //下拉选项  默认选中selected=“selected”

<textarea></textarea>  //多行文本输入控件

1. 表格标签

1.1 表格的主要作用

表格主要用于显示、展示数据。

1.2 表格的基本语法

<table>
  <tr>
  	<td>单元格内的文字<td>
  </tr>
</table>

<table> </table> 是用于定义表格的标签。

<tr> </tr> 用于定义表格的行,必须嵌套在 <table> </table>标签中。

<td> </td> 用于定义表格中的单元格,必须嵌套在 <tr></tr> 标签中。td 指表格数据 table data

<table>
  <tr>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>18</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>女</td>
    <td>28</td>
  </tr>
</table>

<table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三张三</td> <td>男</td> <td>1888888</td> </tr> <tr> <td>李四</td> <td>女</td> <td>28</td> </tr> </table>

属性名 属性值 描述 align left、center、right 表格相对周围元素的对齐方式 border 1 或 "" 表格是否有边框,默认为"",表示没有边框  cellpadding 像素值 单元边沿与其内容之间的空白,默认1像素【单元格填充】 cellspacing 像素值 单元格之间的空白,默认2像素【单元格间距】 width/height 像素值或百分比 表格的宽度/高度

<table align="center" border="1">

--> 位于浏览器中部,单元格都有边框

<table align="center" border="1" cellpadding="10" cellspacing="0">

-->内边距为10px,将空隙设置为0

<table align="center" border="1" cellpadding="10" cellspacing="0" width="400" height="200">

-->宽度为400px,高度为200px

练习案例:小说排行榜

点击查看代码
	<table align="center" border="1" cellpadding="5" cellspacing="0">
		<tr>
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
			<th>今日搜索</th>
			<th>最近七日</th>
			<th>相关链接</th>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼畜灯</td>
			<td>↓</td>
			<td>345</td>
			<td>123</td>
			<td><a href="#">贴吧</a>&nbsp;<a href="#">百科</a></td>
		</tr>
		<tr>
			<td>2</td>
			<td>盗暮笔记</td>
			<td>↓</td>
			<td>245</td>
			<td>123</td>
			<td><a href="#">贴吧</a>&nbsp;<a href="#">百科</a></td>
		</tr>
		<tr>
			<td>3</td>
			<td>西游记</td>
			<td>↑</td>
			<td>1245</td>
			<td>14423</td>
			<td><a href="#">贴吧</a>&nbsp;<a href="#">百科</a></td>
		</tr>
	</table>

1.5 表格结构标签

因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部 和 表格主体 两大部分:

<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域。这样可以更好的分清楚表格结构。

<table align="center" border="1" cellpadding="10" cellspacing="0">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>张三张三</td>
      <td>男</td>
      <td>1888888</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>28</td>
    </tr>
  </tbody>
</table>

1.6 合并单元格

特殊情况下,可以把多个单元格合并为一个单元格。

合并单元格两种方式:

 (1) 跨行合并:rowspan = "合并单元格的个数"

 (2) 跨列合并:colspan = "合并单元格的个数"

<table align="center" border="1" cellpadding="10" cellspacing="0">
  <thead>
    <tr>
      <th colspan="5">个人简历</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>姓名</td>
      <td width="20"></td>
      <td>性别</td>
      <td width="20"></td>
      <td rowspan="2">照片</td>
    </tr>
    <tr>
      <td>年龄</td>
      <td></td>
      <td>出生日期</td>
      <td></td>
    </tr>
  </tbody>
</table>


2. 列表标签

表格是用来显示数据的,那么列表就是用来布局的。

列表分为三类:<ul>无序列表、<ol>有序列表 和 <dl>定义列表

2.1 无序列表

<ul> 标签是无序列表,列表项使用 <li> 标签定义。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<ol> <li>列表项1</li> <li>列表项2</li> </ol>

<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> </dl>


3. 表单标签

3.1 为什么需要表单

使用表单的目的是为了收集用户信息。

3.2 表单的组成

一个完整的表单通常由 表单域、表单控件(表单元素) 和 提示信息 3个部分构成。

3.3 表单域

表单域是一个包含表单元素的区域

<form>标签用于定义表单域,以实现用户信息的收集和传递。

<form> 会把它范围内的表单元素信息提交给服务器。目前不涉及后台,现阶段了解<form>属性就行。

<form action="url地址" method="提交方式" name="表单域名称">
  表单元素控件……
</form>

<form>常用属性:

属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址 【行动】
method get/post 用于设置表单的提交方式,取值为get或post 【方法】
name 名称 用于指定表单的名称,以区分同一页面的多个表单域

3.4 表单控件(表单元素)

在表单域可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。如:input、select、textarea。

3.4.1 <input> 表单元素

<input>标签用于收集用户信息。

<input type="属性值" />

type属性的属性值如下:

属性值 描述
button 定义可点击按钮(多数配合javascript添加脚本)
checkbox 定义复选框。
file 定义输入字段和"浏览"按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式和提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度20字符
<form>
  用户名:<input type="text"> <br>
  密码:<input type="password"> <br>
  性别:<input type="radio">男 <input type="radio">女 <br>
  爱好:<input type="checkbox">跑步 <input type="checkbox">篮球 <input type="checkbox">游戏 
</form>

进一步完善需要使用如下属性↓

除了type属性外,<input>标签还有很多其他属性,如:

属性 属性值 描述
name 用户自定义 定义input元素的名称
value 用户自定义 规定input元素的值
checked checked 规定此input元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度

1.name 和 value 是每个表单元素都有的属性值,主要给后台人员使用。

2.name 表单元素的名字,要求单选按钮和复选框要有相同的 name 值。

3.checked 属性主要针对单选按钮和复选框,主要作用一打开页面,就可以默认选中某个表单元素。

4.maxlength 是用户可以在表单元素输入的最大字符数,一般较少使用。

5.placeholder=“提示文本”

<form>
  用户名:<input type="text" name="username" value="11222333"> <br>
  密码:<input type="password" name="pwd" maxlength="6"> <br>
  <!--两个按钮需要设置同一个name属性值,才能多选一。checked默认选中-->
  性别:<input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女 <br>
  爱好:<input type="checkbox" name="hobby" value="跑步" checked="checked">跑步 <input type="checkbox" name="hobby" value="篮球">篮球 <input type="checkbox" name="hobby" value="游戏" checked="checked">游戏 
</form>

<input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="普通按钮"><br> 上传头像:<input type="file">

<input type="radio" id="male" name="sex"> <label for="male">男</label> <input type="radio" id="female" name="sex"> <label for="female">女</label>

3.4.3 <select>表单元素

当有多个选项时,可以使用<select>标签控件定义下拉列表。

<select>至少包含一对<option> 【select选择 option选项】

在<option>中定义selected="selected",当前项即为默认选中。

<form>
  籍贯:
  <select>
    <option>广东</option>
    <option>山东</option>
    <option>河南</option>
    <option selected="selected">四川</option>
    <option>江苏</option>
  </select>
</form>

 3.4.4 <textarea>表单元素

 当用户输入内容较多的情况下,可以使用<textarea>标签,定义多行文本输入控件

 cols属性:每行中的字符数;rows属性:显示的行数。注意:实际开发中用CSS改变大小,不会使用这两个属性。

<form>
  留言板:
  <textarea cols="30" rows="5">输入你的留言</textarea>
</form>

 

 练习案例-注册页面

 

点击查看代码
<h4>青春不常在,抓紧谈恋爱</h4>
<table width="500">
  <tr>
    <td>性别</td>
    <td>
      <input type="radio" id="nan" name="sex"><label for="nan">男</label>
      <input type="radio" id="nv" name="sex"><label for="nv">女</label>
    </td>
  </tr>
  <tr>
    <td>出生日期</td>
    <td><input type="date"></td>
  </tr>
  <tr>
    <td>所在地区</td>
    <td>
      <select>
        <option>北京</option>
        <option>上海</option>
        <option selected="selected">西藏</option>
        <option>内蒙古</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>婚姻状况</td>
    <td>
      <input type="radio" id="unmarried" name="marriage"><label for="unmarried">未婚</label>
      <input type="radio" id="married" name="marriage"><label for="married">已婚</label>
      <input type="radio" id="divorce" name="marriage"><label for="divorce">离婚</label>
    </td>
  </tr>
  <tr>
    <td>学历</td>
    <td>
      <input type="text" value="幼儿园">
    </td>
  </tr>
  <tr>
    <td>喜欢的类型</td>
    <td>
      <input type="checkbox" id="charming" name="like" value="颜值型"><label for="charming">颜值型</label>
      <input type="checkbox" id="muscle" name="like" value="肌肉型"><label for="muscle">肌肉型</label>
      <input type="checkbox" id="talent" name="like" value="才华型"><label for="talent">才华型</label>
      <input type="checkbox" id="humor" name="like" value="幽默型"><label for="humor">幽默型</label>
    </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" name="Terms" value="Terms">我同意<a href="javascript:;">注册条款</a>和<a href="javascript:;">会员加入标准</a>
    </td>
  </tr>
  <tr>
    <td></td>
    <td><a href="javascript:;">我是会员,立即登录</a></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <h4>我承诺</h4>
      <ul>
        <li>年满18岁、单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
      </ul>
    </td>
  </tr>
</table>
分享到:
相关阅读:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: