HTML5标签2

表格 table(会使用)

表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。

创建表格

在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

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

在上面的语法中包含三对HTML标签,分别为 <table></table>、<tr></tr>、<td></td>,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释

1.table用于定义一个表格。

2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。

3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。

注意:

1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签,他就像一个容器,可以容纳所有的元素

表格属性

表头标签

表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

表格结构(了解)

在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示:
​
<thead></thead>:用于定义表格的头部。
​
必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。
​
​
<tbody></tbody>:用于定义表格的主体。
​
位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。

表格标题

表格的标题: caption

定义和用法

caption 元素定义表格标题。

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格(难点)

跨行合并:rowspan 跨列合并:colspan

合并单元格的思想:

将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。

公式: 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

总结表格

  1. 表格提供了HTML 中定义表格式数据的方法。
  2. 表格中由行中的单元格组成。
  3. 表格中没有列元素,列的个数取决于行的单元格个数。
  4. 表格不要纠结于外观,那是CSS 的作用。 表格的学习要求: 能手写表格结构,并且能合并单元格。

表单标签(掌握)

现实中的表单,类似我们去银行办理信用卡填写的单子。

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

在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。

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

表单控件:

包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息:

一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

表单域:

他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

input 控件(重点)

在上面的语法中,<input />标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type属性之外,<input />标签还可以定义很多其他的属性,其常用属性如下表所示。

label标签(理解)

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

作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢?

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要输入大量的信息,就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:

<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意:

  1. <select></select>中至少应包含一对<option></option>。
  2. 在option 中定义selected =" selected "时,当前项即为默认选中项。

表单域

在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性:

  1. Action 在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
  2. method 用于设置表单数据的提交方式,其取值为get或post。
  3. name 用于指定表单的名称,以区分同一个页面中的多个表单。

注意: 每个表单都应该有自己表单域。

HTML5新标签与特性

文档类型设定

  • document
    • HTML: sublime 输入 html:4s
    • XHTML: sublime 输入 html:xt
    • HTML5 sublime 输入 html:5 <!DOCTYPE html>

字符设定

  • <meta http-equiv="charset" content="utf-8">:HTML与XHTML中建议这样去写
  • <meta charset="utf-8">:HTML5的标签中建议这样去写

常用新标签

w3c 手册中文官网 : http://w3school.com.cn/

  • header:定义文档的页眉 头部
  • nav:定义导航链接的部分
  • footer:定义文档或节的页脚 底部
  • article:定义文章。
  • section:定义文档中的节(section、区段)
  • aside:定义其所处内容之外的内容 侧边 <header> 语义 :定义页面的头部 页眉</header> <nav> 语义 :定义导航栏 </nav> <footer> 语义: 定义 页面底部 页脚</footer> <article> 语义: 定义文章</article> <section> 语义: 定义区域</section> <aside> 语义: 定义其所处内容之外的内容 侧边</aside>
  • datalist 标签定义选项列表。请与 input 元素配合使用该元素 <input type="text" value="输入明星" list="star"/> <!-- input里面用 list --> <datalist id="star">   <!-- datalist 里面用 id 来实现和 input 链接 -->     <option>刘德华</option>   <option>刘若英</option>   <option>刘晓庆</option>   <option>郭富城</option>   <option>张学友</option>   <option>郭郭</option> </datalist>
  • fieldset 元素可将表单内的相关元素分组,打包 legend 搭配使用 <fieldset>   <legend>用户登录</legend> 标题   用户名: <input type="text"><br /><br />   密 码: <input type="password"> </fieldset>

新增的input type属性值:

类型****

使用示例****

含义****

email****

<input type="email">

输入邮箱格式

tel****

<input type="tel">

输入手机号码格式

url****

<input type="url">

输入url格式

number****

<input type="number">

输入数字格式

search****

<input type="search">

搜索框(体现语义化)

range****

<input type="range">

自由拖动滑块

time****

<input type="time">

小时分钟

date****

<input type="date">

年月日

datetime****

<input type="datetime">

时间

month****

<input type="month">

月年

week****

<input type="week">

星期 年

常用新属性

属性****

用法****

含义****

placeholder****

<input type="text" placeholder="请输入用户名">

占位符 当用户输入的时候 里面的文字消失 删除所有文字,自动返回

autofocus****

<input type="text" autofocus>

规定当页面加载时 input 元素应该自动获得焦点

multiple****

<input type="file" multiple>

多文件上传

autocomplete****

<input type="text" autocomplete="off">

规定表单是否应该启用自动完成功能 有2个值,一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字

required****

<input type="text" required>

必填项 内容不能为空

accesskey****

<input type="text" accesskey="s">

规定激活(使元素获得焦点)元素的快捷键 采用 alt + s的形式

综合案例

<form action=""> <fieldset> <legend>学生档案</legend> <label for="userName">姓名:</label> <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br> <label for="userPhone">手机号码:</label> <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br> <label for="email">邮箱地址:</label> <input type="email" required name="email" id="email"><br> <label for="collage">所属学院:</label> <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br> <datalist id="cList"> <option value="前端与移动开发学院"></option> <option value="java学院"></option> <option value="c++学院"></option> </datalist><br> <label for="score">入学成绩:</label> <input type="number" max="100" min="0" value="0" id="score"><br> <form action=""> <fieldset> <legend>学生档案思密达</legend> <label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br /> <label>手机号: <input type="tel" /></label> <br /><br /> <label>邮箱: <input type="email" /></label> <br /><br /> <label>所属学院: <input type="text" placeholder="请选择学院" list="xueyuan"/> <datalist id="xueyuan"> <option>java学院</option> <option>前端学院</option> <option>php学院</option> <option>设计学院</option> </datalist>

<br /><br />

<label>出生日期: <input type="date" /></label> <br /><br /> <label>成绩: <input type="number" /></label> <br /><br /> <label>毕业时间: <input type="date" /></label> <br /><br /> <input type="submit" /> <input type="reset" /> </fieldset> </form> <label for="inTime">入学日期:</label> <input type="date" id="inTime" name="inTime"><br> <label for="leaveTime">毕业日期:</label> <input type="date" id="leaveTime" name="leaveTime"><br> <input type="submit"> </fieldset> </form>

多媒体标签

  • embed:标签定义嵌入的内容
  • audio:播放音频
  • video:播放视频

多媒体 embed(会使用)

embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" 

allowFullScreen="true" quality="high" width="480" height="400" align="middle" 

allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

多媒体 audio

(谷歌浏览器把视频音频自动播放禁止了)

HTML5通过<audio>标签来解决音频播放的问题。

使用相当简单,如下图所示

并且可以通过附加属性可以更友好控制音频的播放,如:

autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = "-1" 无限循环

由于版权等原因,不同的浏览器可支持播放的格式是不一样的

 多浏览器支持的方案,如下图

多媒体 video

HTML5通过<audio>标签来解决音频播放的问题。

同音频播放一样,<video>使用也相当简单,如下图

同样,通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

由于版权等原因,不同的浏览器可支持播放的格式是不一样的

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 表单

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

    星辰_大海
  • Vue概述

    星辰_大海
  • 节点操作

    网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。

    星辰_大海
  • 前端基础-HTML表单

    多学一招:maxlength属性可以限制最大输入长度,为了让服务器端接收到输入的数据,表单元素都需要加name属性

    cwl_java
  • 机器视觉镜头基础知识详解

    镜头相当于充当晶状体这一环节,简而言之,镜头主要的作用就是聚光。为什么要聚光?比如说在大晴天用放大镜生火,你会发现阳光透过放大镜聚集到一点上,也就是说,想通过一...

    小白学视觉
  • 工业镜头和民用镜头的区别在哪里?

    光学镜头一般称为摄像镜头或摄影镜头,简称镜头,其功能就是光学成像。镜头是机器视觉系统中的重要组件,对成像质量有着关键性的作用,它对成像质量的几个最主要指标都有影...

    小白学视觉
  • xamarin.forms uwp app部署到手机移动设备进行测试,真机调试(device portal方式部署)

    最近学习xamarin。刚好 手上有一个lumia 930.所以试一试把uwp app部署到手机上,并真机调试一把。

    旺财的城堡
  • 世界旅游联盟发布《2019中国入境旅游数据分析报告》

    ? 日前,世界旅游联盟联合酷旅互动数据完成了 《2019中国入境旅游数据分析报告》,并正式对外发布。 该报告整合了酷旅互动数据、TripAdvisor(猫途鹰...

    腾讯文旅
  • JS自定义事件原生

    空空云
  • python 基础学习

    #此代码关于python函数调用的理解学习 #还不明白这段代码如何实现调用的!!! def apply_twice(func, arg): return fun...

    py3study

扫码关注云+社区

领取腾讯云代金券