第03章-前端核心技术-HTML媒体
第03章-前端核心技术-HTML媒体
学习目标
掌握HTML区块元素和内联元素的特征 重点 难点
掌握HTML表单和表单元素的使用 重点
掌握HTML音视频的使用
掌握HTML5缓存的使用
HTML 区块内联
HTML的所有元素可以划分为 区块元素 和 内联元素
内联元素区:不可设置宽高，多个内联元素可以排在一行
如：
<span>、<b>、<img>、<a>
内联元素区:可设置宽高，独占一行
如：
<div>、<table>、<ul>、<li>
最原始的*区块元素*是div，最原始的内联元素的span
区块元素
案例01：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>区块元素</title>
</head>
<body>
<div>
<img src="image/avatar.jpg" height="40" align="left" />
<div>
作者：<ins>箫月</ins>
</div>
<div>
发布时间：<ins>2222-03-01</ins>
</div>
</div>
</body>
</html>
效果展示：
内联元素
案例02：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>区块元素</title>
</head>
<body>
<div>
<img src="image/avatar.jpg" height="40" align="center" />
<span>
作者：<ins>箫月</ins>
</span>
<span>
发布时间：<ins>一个神奇的人</ins>
</span>
</div>
</body>
</html>
效果展示：
HTML 表单
HTML 表单用于收集不同类型的用户输入。并且提交数据
1.表单是一个包含表单元素的区域。
2.表单元素是允许用户在表单中输入内容,如：
3.文本框(input)
4.文本域(textarea)
5.下拉列表(select-option)
6.单选框(radio)
7.复选框(checkbox)等等。
HTML 表单标签
<input>属性值类型
案例03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
</head>
<body>
<table width="40%" align="center">
<caption>
<h4>表单</h4>
</caption>
<tr align="center">
<td>
<form>
<fieldset>
<legend align="center">个人信息</legend>
<label for="name">姓名:</label>
<input type="text" id="name" size="30">
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" size="30">
</fieldset>
性别
<input type="radio" name="sex" value="Male">男
<input type="radio" name="sex" value="Female" checked="checked">女
<br><br>
爱好
<input type="checkbox" name="vehicle[]" value="唱歌">唱歌
<input type="checkbox" name="vehicle[]" value="跳舞" checked="checked">跳舞
<br><br>
课程
<select>
<optgroup label="前端">
<option value="css">css</option>
<option value="js">js</option>
<option value="html" selected="selected">html</option>
</optgroup>
<optgroup label="后端">
<option value="php">php</option>
<option value="java">java</option>
</optgroup>
</select>
<br><br>
使用的浏览器
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="百度">百度</option>
</datalist>
<br><br>
<button type="submit">提交</button>
</form>
</td>
</tr>
</table>
</body>
</html>
效果展示：
案例04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格布局</title>
</head>
<body>
<h2 align="center">注册</h2>
<hr>
<table width="800" border="0" align="center">
<tr>
<td width="100"><b>用户名:</b></td>
<td><input type="text" name="name" class="bule" />
</td>
</td>
<td class="font1">不超过7个汉字，或14个字节（数字，字母和下划线）</td>
</tr>
<tr>
<td><b>密码： </b></td>
<td>
<input type="password" name="password1" size="20" class="bule" /></td>
<td class="font1">最少6个字符，不超过14个字符（数字，字母和下划线）</td>
</tr>
<tr>
<td><b>确定密码：</b></td>
<td colspan="2">
<input type="password" name="password11" size="20" class="bule" />
</td>
</tr>
<tr>
<td><b>性别： </b></td>
<td colspan="2">
<input type="radio" name="gender" value="女" checked/>女
<input type="radio" name="gender" value="男" />男<br><br>
</td>
</tr>
<tr>
<td><b>个人爱好：</b></td>
<td colspan="2">
<input type="checkbox" name="intrest" value="文学" />文学
<input type="checkbox" name="intrest" value="影视" />影视
<input type="checkbox" name="intrest" value="音乐" />音乐
<input type="checkbox" name="intrest" value="体育" />体育
</td>
</tr>
<tr>
<td><b>所在城市：</b></td>
<td colspan="2">
<select size="1" name="province">省份
<option>浙江</option>
<option>山东</option>
</select>
<select size="1" name="city">省份
<option>绍兴</option>
<option>潍坊</option>
</select>
<br><br>
</td>
</tr>
<tr>
<td><b>家庭住址:</b></td>
<td><input type="text" name="address" class="bule" /></td>
<td class="font1">请输入详细的家庭住址，接受活动邮件</td>
</tr>
<tr>
<td><b>电子邮件：</b></td>
<td><input type="text" name="email" class="bule" /></td>
<td class="font1"> 请输入有效的邮件地址，当密码遗失时凭此领取</td>
</tr>
<tr>
<td><b>验证码：</b></td>
<td><input type="text" name="check-img" class="bule" /></td>
<td>5468</td>
</tr>
<tr>
<td colspan="3">
<form method="post" action="">是否同意条款内容
<input type="radio" name="aggree" value="aggree" /> 我同意
<input type="radio" name="aggree" value="disaggree" /> 我不同意<br><br>
<textarea name="textarea" cols="100" rows="10" wrap="hard" class="bule">
山东师创软件工程有限公司创建于1994年，是一家综合性信息产业公司，不仅拥有自主知识产权和软件研发能力，更专注于IT人才职业教育，拥有教育培训、软件开发以及国际人才服务等多种业务。山东师创首批通过了"双软"认定，是山东省软件行业协会会员单位，也是齐鲁软件园国际合作联盟成员企业，先后被山东省信息产业厅、科学技术厅认定为"山东省软件企业"、"山东省高新技术企业"，另外由于公司在软件人才培养方面所做的大量卓有成效的工作，还被授予"齐鲁软件园软件人才培养基地"、"行业应用工程师集训基地"、"齐鲁软件园对日软件人才培养基地"、"济南市退役军人计算机培训基地"等称号。
山东师创致力于高端IT人才培养工作，坚持"诚信教育"的经营理念，以"把需要工作的人变成工作需要的人"为经营宗旨，依托齐鲁软件园强大的产业优势，积极探索高质量软件人才培养方式，以"软件实训"模式进行软件人才集训，为有志于软件开发事业的人士提供更好的职业发展机会，为软件企业提供量身定制的专业化、适用型人才。
师创公司现有员工160余人，其中博士2人，硕士研究生12人，具有大学以上学历人员占职工总数89%以上。公司管理层科技意识好，创新能力强，均具有多年的IT企业管理经验和职业教育经验。公司一直将人才培养作为工作的重中之重，认为人才积累是企业成功的基础，队伍建设是事业发展的保障。通过近年来各项业务的历练，师创公司拥有了一支经验丰富、技术过硬、团结奋斗的软件开发、系统集成特别是职业教育培训队伍。
</textarea>
</form>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="reset" value="重置" />
<input type="submit" value="提交" />
</td>
</tr>
</table>
</body>
</html>
```
###效果展示：
####总结
输入框和标题<input>和<lable>
输入框和输入预选项
下拉选择框
语法：
<embed height="50" width="100" src="horse.mp3">
案例05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音视频播放</title>
</head>
<body>
<embed height="70" align="center" src="source/SAVE.mp3" />
<br>
<br>
<embed src="source/yun.mp4" />
</body>
</html>
效果展示：
<object> 元素
<object>标签也可以定义外部（非 HTML）内容的容器。
<object>标签用于包含对象，比如音频、视频、Java applets、ActiveX、PDF 以及 Flash。
object的初衷是取代 img 和applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。
不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。现在常用于插件
如：
<html>
<head>
<title></title>
</head>
<body>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
</body>
</html>
语法：
html
<object width="550" height="400">
<param name="movie" value="yun.mp4">
</object>
<object data="yun.mp4"></object>
<object type="application/pdf" data="xxx.pdf"></object>
案例06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音视频播放</title>
</head>
<body>
<object height="70" data="source/SAVE.mp3"></object>
<br>
<br>
<object data="source/yun.mp4"></object>
</body>
</html>
效果展示：
<audio>和<video>
<audio> 播放音频无画面，<video>播放音视频，有画面。
语法：
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
浏览器不支持
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
效果展示：
案例07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音视频播放</title>
</head>
<body>
<video controls>
<source src="source/save.mp3" type="audio/mpeg"></source>
<object data="source/save.mp3" width="320" height="240">
<embed height="50" width="100" src="source/save.mp3">
</object>
</video>
<br>
<video width="320" height="240" controls>
<source src="source/yun.mp4" type="video/mp4"></source>
<object data="source/yun.mp4" width="320" height="240">
<embed src="source/yun.mp4" width="320" height="240">
</object>
</video>
</body>
</html>
效果展示：
HTML5 语义元素
HTML5 添加了很多语义元素如下所示：
标签描述<article>定义页面独立的内容区域。
浙公网安备 33010602011771号