一文搞定前端HTML5——列表、表格、媒体元素与表单

文章目录

HTML5基础
- 概念
- 基本结构及网页基本信息
- 基本标签
- 特殊符号
- 图像标签
- 链接标签
- 行内元素和块元素
列表、表格与媒体元素
- 列表
- 表格
- 媒体元素
- 结构元素
- 内联框架
表单
- 语法
- 元素
- 表单验证

HTML5基础

概念

HTML

Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等

2013-5-6 HTML5

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度。

优势

世界知名浏览器厂商对HTML5的支持：微软、Google、苹果、Opera、Mozilla
市场的需求
跨平台

W3C

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

http://www.w3.org/
http://www.chinaw3c.org/

包括

结构化标准语言（XHTML 、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

基本结构及网页基本信息

<!DOCTYPE html>
<!-- 声明规范 -->
<html>
    <head lang="en">
        <!-- head 网页头部 -->
        <meta charset="utf-8"/>
        <title>标题</title>
        成对标签分别叫开放标签和闭合标签
    </head>
    <body>
        <hr/>
        空元素，/表示关闭空元素
        <!-- body 主体部分 -->
    </body>
</html>

<meta>标签

<meta charset="UTF-8"/>
<meta charset="gb2312"/>
<!-- charset 网页字符编码
	gb2312：包含全部中文字符
	utf-8：包含全世界所有国家需要用到的字符
	页面编码应与页面文件保存时的编码一致
-->
<meta name="keywords" content="鸿卓乐学，IT培训" />
<!-- name="keywords" 搜索关键字 -->
<meta name="description" content="鸿卓乐学是国内最大的……" />
<!-- name="description" 内容描述 -->

基本标签

基本标签	写法
标题标签	<h1>…</h1>/<h6>…</h6>
段落标签	<p>…</p>
换行标签	<br/>
水平线标签	<hr/>
字体样式标签–加粗	<strong>…</strong>
字体样式标签–斜体	<em>…</em>
字体样式标签–删除	<del>…</del>

特殊符号

特殊符号	字符实体
空格
大于号(>)	>
小于号(<)	<
引号(")	"
版权符号@	©

图像标签

常见图像格式

JPG
GIF
PNG(受浏览器兼容性的限制)
BMP

<img src="path" alt="text" title="text"  width="x"  height="y" />
<!-- src 图像地址(必选)
	alt 图像的替代文字 图片错误时显示
	title 鼠标悬停提示文字
	width & height 图像宽高
-->

内部路径

相对路径（图像与文件的相对位置）
绝对路径（从根目录开始）

外部路径（需要带http）

链接标签

<a href="path" target="目标窗口位置">链接文本(文本超链接)或图像(图像超链接)</a>
<!-- href 链接路径
	target 链接在哪个窗口打开
		_self：默认，当前窗口或框架打开
		_blank：新窗口或标签页打开
-->

常用的超链接用法及应用场景

页面间链接：从一个页面链接到另外一个页面(网站导航菜单、新闻列表、商品列表)

锚链接：从一个页面的甲位置跳转到本页面或另一个页面的乙位置

<a name="marker">创建跳转标记---乙位置</a>
<a href="#marker">创建跳转链接---甲位置</a>

功能性链接(电子邮件、QQ、MSN)

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

<a href="tencent://message/?uin=QQ号&Site=&Menu=yes" class="icon icon-qq first">打开qq聊天页面(需好友)</a>
<a href="tencent://message/?Menu=yes&uin=QQ号& Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45">强制打开临时会话</a>

行内元素和块元素

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)
块元素：无论内容多少，该元素独占一行（p、h1-h6…）

列表、表格与媒体元素

列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

分类

有序列表
无序列表
定义列表

<!-- 声明无序列表 -->
<ul>
    <!-- 声明列表项 -->
	<li>范冰冰演藏族女孩</li>
	<li>撞死两个人后自拍</li>
	<li>诗隆甜蜜出游</li>
	<li>一线城市楼市退烧</li>
</ul>

无序列表的特性

没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

<!-- 声明有序列表 -->
<ol>
    <!-- 声明列表项 -->
	<li>范冰冰演藏族女孩</li>
	<li>撞死两个人后自拍</li>
	<li>诗隆甜蜜出游</li>
	<li>一线城市楼市退烧</li>
</ol>

有序列表的特性

有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等

<!-- 声明定义列表 -->
<dl>
    <!-- 声明列表项 -->
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>

定义列表的特性

没有顺序，每个<dt>标签、<dd>标签独占一行，默认没有标记
一般用于一个标题下有一个或多个列表项的情况

在这里插入图片描述

类型	说明	项目符号
无序列表	以<ul>标签来实现以<li>标签实现列表项	无序列表中的每项都是平级的，没有级别之分，且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表	以<ol>标签来实现以<li>标签实现列表项	有序列表ol li一般用于显示带有顺序编号的特定场合
定义列表	以<dl>标签来实现以<dt>标签实现列表项以<dd>标签定义内容	定义列表一般适用于带有标题和标题解释性内容的场合

表格

表格常用于结构一致的数据，例如学员成绩表、购物网站上购物车中的列表信息等

学生基本信息表
<table>
    <tr>
        <td rowspan="2">学号</td>
        <td colspan="3">个人信息</td>
        <td colspan="2">入学信息</td>
    </tr>
    <!-- colspan="n" 跨n列 
		rowspan="n" 跨n行
	-->
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>班级</td>
        <td>入学年月</td>
    </tr>
    <tr>
        <td>001</td>
        <td>小王</td>
        <td>男</td>
        <td>23</td>
        <td>20020922</td>
        <td>2000年9月</td>
    </tr>
    <tr>......</tr>
</table>
<!-- 
align 内容水平居中(left左，center居中，right右)
valign 内容垂直居中(top上，center居中，bottom下)
-->

在这里插入图片描述

html5新标准
<table>
    <thead>
        <tr><th></th></tr>
    </thead>
    <tbody>
    	<tr><td></td></tr>
    </tbody>
    <tfoot>
    	<tr><td></td></tr>
    </tfoot>
</table>

媒体元素

如何实现在网页上播放视频和音频？

第三方自主开发的播放器
Flash
HTML5媒体元素 (视频元素video 音频元素audio)

视频元素

<video src="视频路径"  controls></video>
<!-- src 指定要播放的视频文件的路径
	controls 提供播放、暂停和音量的控件
-->

<video loop muted controls autoplay >
    <source src="img/1.avi" />
    <source src="img/3.webm" type="video/webm" />
    <source src="img/2.mp4" type="video/mp4" />
</video>
<!-- 1.属性值等于属性名时 可简写
	 2.type 可省略-->

loop 循环播放
muted autoplay 自动播放
controls 底部播放组件

音频元素

<audio src="音频路径" controls></audio >
<!-- src 指定要播放的音频文件的路径
	controls 提供播放、暂停和音量的控件
-->

<audio controls>
    <source src="music/music.mp3" type="audio/mpeg"/>
    <source src="music/music.ogg" type="audio/ogg"/>
</audio>

结构元素

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

<header><h2>网页头部</h2> </header>
<section><h2>网页主体部分</h2></section>
<footer><h2>网页底部</h2></footer>

内联框架

<iframe src="path" 
        name="mainFrame" 
        scrolling="no"
        frameborder="0" 
        width="800"
        height="500"
        src="http://www.taobao.com/"></iframe>
<!-- src 引用页面地址
	 name 框架标识名
	 scrolling 是否显示滚动条
	 frameborder 边框线
-->
<a href="http://www.baidu.com" target="mainFrame">百度</a>
<a href="http://www.taobao.com" target="mainFrame">淘宝</a>
<!-- 注意:target属性值与iframe的name属性要一致 a标签的href会将iframe标签中的src替代 -->

表单

语法

<form  method="post" action="">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填"/> 
   </p>
</form>
<!-- 
action 请求地址
method 请求方式
	get  查询
	post 增删改 登录
在实际网页开发中通常采用post方式提交表单数据 -->

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

元素

文本框

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

密码框

<input  type="password "  name="pass"  size="20" />

单选按钮

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女
<!-- checked 选按钮选中状态
     name属性一组要一致-->

复选框

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
<!-- checked 复选框选中状态
	 name属性一组要一致-->

列表框

<select name="列表名称" size="行数">
	<option value="选项的值" selected>…</option >
	<option value="选项的值">…</option >
</select>
<!-- size 显示的行数(不常用) -->

按钮

<input  type="reset" name="butReset" value="reset重置按钮">
<input  type="submit" name="butSubmit" value="submit提交按钮">
<input  type="button" name="butButton" value="button普通按钮"/>

<!-- 图片按钮 -->
<input  type="image"  src="images/login.gif" />

<!-- 常用button 标签按钮 -->
<button>提交</button>

多行文本域 | 文本框

<textarea  name="showText"  cols="x"  rows="y">文本内容</textarea>
<!-- cols 显示的列数
	 rows 显示的行数-->

文件域

<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>
<!-- enctype="multipart/form-data" 表单编码属性-->

邮箱 (H5新-不常用)

<p>邮箱:<input type="email"  name="email"/></p>
<input type="submit"/>
<!-- 会自动验证Email地址格式是否正确 -->

网址 (H5新-不常用)

<p>请输入你的网址:<input type="url"  name="userUrl"/></p>
<input type="submit"/>
<!-- 会自动验证URL地址格式是否正确 -->

数字

<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>
<!-- min&max 允许的最小/最大值
	step 合法的数字间隔
-->

滑块

<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>
<!-- 无自带数值 需使用js设置 较鸡肋 -->

搜索框

<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
<input type="submit"/>

表单的高级应用

隐藏域
只读
禁用（常用，可作用于所有组件）
标注

<!-- 隐藏域 -->
<input type="hidden" value="666" name="userid">
<!-- 只读 -->
<input name="name" type="text" value="张三"  readonly>
<!-- 禁用 -->
<input type="submit "  disabled   value="保存" >
<!-- W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略 -->

<!-- 标注 -->
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
<!-- 
- 增强鼠标的可用性
- 自动将焦点转移到与该标注相关的表单元素上
-->

表单验证

好处

减轻服务器的压力
保证数据的可行性和安全性

表单的初级验证

placeholder

input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

required

规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

<input type="text" name="username"  required/>

pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />
<!-- 验证规则，正则表达式 -->