HTML 基础【2】 -- 表格标签 / 表单标签
请先学习往期内容:HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签
作业分析
上一篇《HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签》给大家留了一个作业:
实现代码:
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title>
</head><body><!-- Banner --><div align="center"><imgsrc="https://img-blog.csdnimg.cn/db53b5efbe4943a48b862bfc7a3826ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdWl1aW5nJ3M=,size_16,color_FFFFFF,t_70,g_se,x_16"></div><hr><!-- content --><div><div><h2>HTML版本</h2><p> HTML是用来标记Web信息如何展示以及其他特性的一种语法规则,它最初于1989年由CERN的<a href="#">TimBerners-Lee</a>发明。HTML基于更古老一些的语言SGML定义,并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据,所以很早就得到各个Web浏览器厂商的支持。[5] HTML历史上有如下版本: [5]</p><ul><li>HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]</li><li>HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。 [5]</li><li>HTML 3.2:1997年1月14日,W3C推荐标准。 [5]</li><li>HTML 4.0:1997年12月18日,W3C推荐标准。 [5]</li><li>HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。 [5]</li><li>HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。[6]</li></ul><p> HTML在Web迅猛发展的过程中起着重要作用,有着重要的地位。但随着网络应用的深入,特别是电子商务的应用,HTML过于简单的缺陷很快凸现出来:HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式,但没有语义结构,即HTML显示数据是按照布局而非语义的。随着网络应用的发展,各行业对信息有着不同的需求,这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时,按照语义而非按照布局来显示数据会具有更多的优点。</p><p> 总而言之,HTML的缺点使其交互性差,语义模糊,这些缺陷难以适应Internet飞速发展的要求,因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。</p></div><hr><div><h2>特点</h2> 超文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下: [4]<ol type="1" start="1"><li>简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。 [4]</li><li>可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类元素的方式,为系统扩展带来保证。 [4]</li><li>平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。 [4]</li><li>通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。 [4]</li></ol></div></div>
</body></html>
优化版本:
- 样式与ui分离
- H5语义化
- 禁止图片拖动
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">/* Global style start */html,body{margin: 0;padding: 0;}p {text-indent: 2em;}/* end *//* Entire paragraph content style */.content{margin: auto;width: 768px;}/* Banner style start*/header{text-align: center;margin-top:50px;}header > img{width: 400px;}/* end */</style><body><div class="content"><!-- Banner --><header><img src="https://img-blog.csdnimg.cn/db53b5efbe4943a48b862bfc7a3826ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdWl1aW5nJ3M=,size_16,color_FFFFFF,t_70,g_se,x_16" draggable="false"></header><hr><!-- content - text --><section><h2>HTML版本</h2><p>HTML是用来标记Web信息如何展示以及其他特性的一种语法规则,它最初于1989年由CERN的<a href="#">TimBerners-Lee</a>发明。HTML基于更古老一些的语言SGML定义,并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据,所以很早就得到各个Web浏览器厂商的支持。[5] HTML历史上有如下版本: [5]</p><ul><li>HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]</li><li>HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。 [5]</li><li>HTML 3.2:1997年1月14日,W3C推荐标准。 [5]</li><li>HTML 4.0:1997年12月18日,W3C推荐标准。 [5]</li><li>HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。 [5]</li><li>HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer8及以前的版本不支持。[6]</li></ul><p>HTML在Web迅猛发展的过程中起着重要作用,有着重要的地位。但随着网络应用的深入,特别是电子商务的应用,HTML过于简单的缺陷很快凸现出来:HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式,但没有语义结构,即HTML显示数据是按照布局而非语义的。随着网络应用的发展,各行业对信息有着不同的需求,这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时,按照语义而非按照布局来显示数据会具有更多的优点。</p><p>总而言之,HTML的缺点使其交互性差,语义模糊,这些缺陷难以适应Internet飞速发展的要求,因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。</p></section><hr><section><h2>特点</h2><p>超文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:[4]</p><ol type="1" start="1"><li>简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。 [4]</li><li>可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类元素的方式,为系统扩展带来保证。 [4]</li><li>平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。 [4]</li><li>通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。[4]</li></ol></section></div></div>
</body></html>
表格标签
表格
表格是行和列排列而成的结构,常用来组织和展现数据。下图展示了一个表格的基本形态,并对表格的常用元素给出了标注。
一般而言,表格中除了表格标题外,通常还包含如图所示的其他三类元素。其中,单元格是表格的最小单位,多个单元格的纵横排列形成了表格,由一个或多个单元格的横向排列形成了行,纵向排列则形成了列。
对应于 HTML 文档,一个表格由表格标签<table>
、表格行标签 <tr>
、单元格标签<td>
组成,还可以包括标题标签 <caption>
、列标题标签 <th>
,通过这些标签能构建起 HTML 中的表格。
创建表格
标签 | 说明 | 选项 |
---|---|---|
table |
table 元素用来定义表格,整个表格内容都包含在 <table> 和 </table> 标签之中
|
必选 |
tr |
tr 元素用来定义表格中的一行,它是单元格的容器,每行可以包含多个单元格,由 <tr> 和 </tr> 标签表示
|
必选 |
td |
td 代表一个单元格,所有单元格都在 tr 元素内,每个单元格都由一对 <td> 和 </td> 标签
|
必选 |
th |
th 也代表一个单元格,同时也表示该表格的表头。每个单元格都由一对 <th> 和 </th> 标签
|
可选 |
caption | caption 代表为该表格的表格标题,位于 table 中的第一行 | 可选 |
基本语法
<table><caption>表格标题</caption><tr><th>1列表头</th><th>2列表头</th>…</tr><tr><td>1行1列的内容</td><td>1行2列的内容</td>…</tr><tr><td>2行1列的内容</td><td>2行2列的内容</td>…</tr>…
</table>
示例代码
<table border="1"><caption>xxx成绩表</caption><tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>张三</td><td>70</td><td>80</td><td>70</td></tr>
</table>
表格标签属性
<table>
标签属性
为了使创建的表格更加美观、醒目,可以对表格的属性进行设置,以达到诸如调整表格的颜色、单元格背景图像和背景颜色等目的。下表对每个属性对应的可取值和其作用作了解释。
属性 | 可取值 | 描述 |
---|---|---|
align | left、center、right | 定义表格相对周围元素的对齐方式 |
border | pixels | 定义表格边框的宽度 |
width | pixels、% | 定义表格的宽度 |
bordercolor | 颜色的表示方法 | 定义表格边框的颜色 |
bgcolor | 颜色的表示方法 | 定义表格的背景颜色 |
background | URL | 定义表格背景图像 |
下面通过一个简单的例子,演示设置 <table>
标签 align、border、width 这三个属性的作用
<table align="left" border="5" width="400"><caption>xxx成绩表</caption><tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>张三</td><td>70</td><td>80</td><td>70</td></tr>
</table>
效果
<tr>
属性
标签定义 HTML 表格中的行,tr 元素可包含一个或多个 th 或 td 元素。 标签有如下一些常用属性,下表列出了每个属性、可取值及其简单描述,接下来介绍其中的 valign 属性。
值 | 描 述 |
---|---|
top | 对内容进行上对齐 |
middle | 对内容进行居中对齐(默认值) |
bottom | 对内容进行下对齐 |
baseline | 与基线对齐 |
<td>
属性
<td>
标签定义 HTML 表格中的标准单元格,td
元素中的文本一般显示为正常字体且左对齐。<td>
标签有以下一些常用属性,本文主要介绍跨行(rowspan)和跨列(colspan)两个属性。
下表是对其属性的可取值和作用作了说明。
属 性 | 可 取 值 | 描 述 |
---|---|---|
align | left、right、center、justify | 定义单元格中内容的水平对齐方式 |
valign | top、middle、bottom、baseline | 定义单元格中内容的垂直对齐方式 |
bgcolor | 颜色的表示方法 | 定义单元格的背景颜色 |
height | pixels、% | 定义单元格的高度 |
width | pixels、% | 定义单元格的宽度 |
colspan | number | 定义单元格可横跨的列数 |
rowspan | number | 定义单元格可纵跨的行数 |
nowrap | nowrap | 定义单元格中的内容是否折行 |
单元格跨行跨列的基本语法:
<td colspan="所跨列数">单元格内容</td>
<td rowspan="所跨行数">单元格内容</td>
示例代码
<table width="800" border="1" cellspacing="1" cellpadding="1"><tr><td colspan="9" align="center">2020年度图书销售统计</td></tr><tr><td rowspan="2" align="center">图书分类</td><td colspan="2">一季度</td><td colspan="2">二季度</td><td colspan="2">三季度</td><td colspan="2">四季度</td></tr><tr><th width="60">销售量</th><th width="80">销售额</th><th width="60">销售量</th><th width="80">销售额</th><th width="60">销售量</th><th width="80">销售额</th><th width="60">销售量</th><th width="80">销售额</th></tr><tr><td align="center">小说</td><td align="center">23521</td><td align="center">¥559,940.00</td><td align="center">18423</td><td align="center">¥44,841.00</td><td align="center">32125</td><td align="center">¥829,870.00</td><td align="center">25188</td><td align="center">¥586,564.00</td></tr>…
</table>
效果
页面表格布局
页面可以说是构成网站的基本元素。当在网络中邀游时,轻点鼠标,就会呈现各种类型的网页。那么,页面精彩与否与什么因素相关呢?色彩的搭配、文字格式的变化、图片的处理等都是不可忽略的因素。除了这些不可忽略的因素外,还有一个非常重要的因素—页面布局。
使用 <div>
或 <table>
可进行页面布局。
万维网联盟 W3C 推荐用 <div>
元素和 CSS 来进行布局,而不是用表格进行页面布局,因为 table 元素本来的目的就是显示数据。不过纵观整个网络,仍然有不少网页在使用表格进行布局,而且有些采用 DIV+CSS 布局的页面,其页面内部的一些块也使用了表格进行微布局,此处不具体介绍了。
实例
效果
代码
<table border="1" width="500px" cellpadding="2"><caption>xxx 课程表</caption><tr align="center"><td colspan="2">时间\日期</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td></tr><tr align="center"><td rowspan="2">上午</td><td>8:30-10:00</td><td>语文</td><td>数学</td><td>外语</td><td>音乐</td><td>体育</td></tr><tr align="center"><td>10:20-12:00</td><td>数学</td><td>数学</td><td>物理</td><td>化学</td><td>生物</td></tr><tr><td colspan="7"> </td></tr><tr align="center"><td rowspan="2">下午</td><td>14:30-15:15</td><td>体育</td><td>语文</td><td>历史</td><td>政治</td><td>化学</td></tr><tr align="center"><td>15:25-16:10</td><td>音乐</td><td>语文</td><td>数学</td><td>美术</td><td>语文</td></tr></table>
表单标签
表单是网页中一个特定的区域,或者说是一个特殊的元素。表单用来描述需要用户输入的页面内容,在用户输入具体信息后,提交到指定位置进行处理。
表单的应用范围非常广泛,可以这么说,所有需要将信息提交给服务器的地方都可以使用表单。例如用户注册、用户登录、网上搜索、购物车和调查问卷等。
下图显示的是一个典型的用户注册表单。
input元素
介绍
在表单元素中,input 元素代表的元素最多。除了文本内容以外,还可以表示密码框、单选、多选等元素。这些元素统一使用 标签标识,只是各自的类型不同。通过 type 属性可以控制元素的类型。
input 元素基本语法:
<input type="元素类型" name="表单元素名称" />
input 的常用属性如下表:
属 性 | 可 取 值 | 描 述 |
---|---|---|
type | text、password、radio、checkbox、file、submit、reset、button、hidden、image | 定义 input 元素的类型 |
name | name | 定义 input 元素的名称 |
value | value | 定义 input 元素的值 |
accept | mime_type | 仅在文件上传中使用 accept 属性,规定能够通过文件上传进行提交的文件类型 |
align | left、right、top、middle、bottom | 仅能对图像类型使用 align 属性,定义图像的对齐方式 |
alt | text | 仅能对图像类型使用 alt 属性,定义图像输入的替代文本 |
src | URL | 仅能对图像类型使用 src 属性,规定图像的 URL |
checked | checked | 仅能对单选按钮或复选框使用 checked 属性,定义此 input 元素是否默认被选中 |
disabled | disabled | 禁用此 input 元素 |
size | number | 定义 input 元素的宽度 |
maxlength | number | 定义输入字段中字符的最大长度(注意和 size 的区别) |
readonly | readonly | 规定输入字段为只读 |
文本类表单元素
以文本框为代表的表单元素称之为文本类元素。示例如下:
<p> 用户名:<input type="text" name="name" size="22" maxlength="16" />
</p>
<p> 密 码:<input type="password" name="pass" size="22" /></p>
<p><input type="submit" name="submit" value="登录" /><input type="reset" name="reset" value="重置" /><input type="button" name="exit" value="退出" disabled="disabled" />
</p>
显示
选择类表单元素
选择类表单元素只要是指单选框和复选框。使用选择类元素需要注意两点:
- 使用相同的 name 属性来控制分组操作。
- value 属性为提交值,显示值为标签后紧跟的内容。
示例代码
性别:<input type="radio" name="sex" value="man" />男<input type="radio" name="sex" value="woman" />女 <br />爱好:<input type="checkbox" name="hobby" value="basketball" />篮球<input type="checkbox" name="hobby" value="football" />足球
显示效果
其他表单元素
input 元素中有几个特殊的元素和其他元素的使用不同。这里例举两个常用的文件上传元素和隐藏元素。
- 文件上传:文件需要以流的形式上传,所以在表单 form 中需要设置上传方式 enctype。
- 隐藏元素:该元素同文本类元素使用方法一致,区别在于该元素无法在文档中显示。
示例代码
<p><input type="file" name="img" accept="image/gif, image/jpeg" /></p><p><input type="hidden" name="imgdesc" value="bug截图" /></p><p><input type="submit" name="upload" value="上传" /></p>
显示效果
非input元素
在表单中,有两个常用的表单元素不属于 input 元素,它们分别是下拉列表框(<select>
和 <option
> 标签实现)和多行文本域(<textarea>
标签实现),接下来将介绍这两个表单元素。
下拉列表框
为了避免用户输入错误,节省页面空间,在可用输入项不是很多的情况下,会经常使用下拉列表框。前面填写用户注册信息页面中的出生年月,使用的就是下拉列表框。下拉列表框通过 <select>
和 <option>
标签实现,<select>
标签用于显示可供用户选择的下拉列表,其中的每个选项都由 <option>
标签标识。
下拉列表框中的内容可以单选或多选,当用户提交表单时,浏览器会将选定的项目合成一个单独的参数列表,随同 <select>
标签的 name 属性提交给服务器。
示例代码
<body><h3>请提交就业相关信息</h3><form><p>学历:<select name="edu"><option value="0">初中</option><option value="1">高中</option><option value="2">大专</option><option value="3" selected="selected">本科</option><option value="4">硕士</option><option value="5">博士</option><option value="6">其他</option></select>就业城市:<select name="city" multiple="multiple"><option value="A" selected="selected">北京</option><option value="B">上海</option><option value="C">深圳</option><option value="D">广州</option><option value="E">其他</option></select></p><p><input type="submit" name="submit" value="提交" /></p></form>
</body>
显示效果
多行文本域
多行文本域用于显示或输入多行的文本,通过 <textarea>
标签来实现。在文本域内可容纳无限数量的文本,通过 cols
和 rows
属性来规定 textarea 元素的尺寸,其中 cols 属性定义了文本域内的可见列数,rows 属性定义了可见行数。
示例代码
<h3>简答题</h3><textarea name="content" cols="30" rows="6" readonly="readonly">内容</textarea>
<p><input type="button" name="agree" value="同意" /></p>
显示效果
案例
显示效果
示例代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>个人信息提交</title>
</head><body><p>姓名:<input type="text" name="username" /></p><p>密码:<input type="password" name="password" /></p><p>性别:<input type="radio" name="gender" value="0" /> 男<input type="radio" name="gender" value="1" /> 女</p><p>爱好:<input type="checkbox" name="like" value="sing" /> <input type="checkbox" name="like" value="dancing" /> <input type="checkbox" name="like" value="Learn" /> </p><p>照片:<input type="file" name="person_pic" /></p><p>个人描述:<textarea name="about"></textarea></p><p>籍贯:<select name="select"><option value="成都">成都</option><option value="广州">广州</option><option value="四川">四川</option><option value="上海">湖南</option></select></p><p><input type="submit" name="" value="提交" /><input type="reset" name="" value="重置" /></p>
</body></html>
HTML 基础【2】 -- 表格标签 / 表单标签相关推荐
- 列表标签,表格标签,表单标签
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
- 03表格和表单标签的简单使用
表格和表单标签 一.表格 01.table标签 tr:表示一行 th(table head):表示表头的单元格 td(table body):表示单元格 border="1" :给 ...
- HTML5基础学习——列表标签表单标签
学习内容: 1.列表标签 表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用场景不同,列表可以分为三大类:无序列表.有序列表和自 ...
- python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
- HTML5+CSS3 02(表格、表单标签、语义化,字符实体标签)
一 表格的基本使用 1.1 表格的基本标签 场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表 基本标签: 标签名 说明 table 表格整体,可用于包裹多个tr tr 表格每行,可用 ...
- HTML基本标签、字体设置标签、表格标签,表单标签
区分: 1.HTML(hyper text markup language) 静态的网页技术 2.JSP (java server page)(实质是HTML+java) 动态的网页技术 3.Serv ...
- 【HTML基础】表格和表单
本次博客的主要内容如下: meta和link 表格 表单 meta和link meta meta的属性有两种:name和http-equiv. name属性主要用于描述网页内容,对应与网页内容. 1. ...
- WEB前端 | HTML基础——(5)表格和表单
一.表格 <!doctype html> <html><head><meta charset="utf-8"/><title& ...
最新文章
- Java第一个程序(CMD环境)
- phpstudy升级5.7
- Memcached安装和基本使用
- typedef 的四个用途和两大陷阱
- python正向切片_使Python切片正常(正/正向+无无+无负索引+在边界内)
- Python编码风格指南
- iplat62----loading层添加
- 使用docker私有化部署nuget server-proget
- 【5】OpenCV2.4.9实现图像拼接与融合方法【SURF、SIFT、ORB、FAST、Harris角点 、stitch 】
- 腾讯视频怎么下载 qlv视频怎么转换为MP4格式
- python使用opencv_玩转Python图片处理 (OpenCV-Python )
- php获取h5视频直链,一种H5播放实时视频的方法与系统与流程
- git获取所有branch_获取Git仓库的所有分支名字
- 基于支持向量机的量化选股模型
- 多智能体强化学习基本概念
- 电子学会2020年9月青少年软件编程(图形化)等级考试试卷(一级)答案解析
- 微信小程序-一次性订阅消息推送
- Ubuntu 输入法设置
- MySQL in、exists是否走索引
- SICK激光扫描仪(LD-LRS3601与LMS511)使用小结