1.3.2
1.引用<blockquote>标签和<q>标签
<blockquote>定义长的引用,在浏览器中视为一段缩进的文本。
例如:
<p>
网页设计的主要学习内容为:
<blockquote>h5+css+js...</blockquote>
</p>
<q>定义短的引用,在浏览器中呈现为引号
<p>
网页设计的主要学习内容为:
<q>h5+css+js...</q>
</p>
2.<pre>标签
pre可定义为预格式化的文本被包围在pre元素中的文本通常会保留空格和换行符,常见应用:计算机源代码
例如:
<pre>
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
欢迎来到js
</body>
</head>
</pre>
3.<ins>标签和<del>标签(会改写为删除文本和下划线文本)
<ins>标签定义已经被插入文档中的文本
<del>标签定义文档中已被删除的文本
4.文本字体格式标签<b>,<i>,<small>,<em>,<strong>
<b>定义粗体文本,用于强调某些文本
<i>定义斜体文本
<small>标签将旁注呈现为小型文本
<em>定义强调文本,呈现斜体
<strong>定义更强烈的强调文本,呈现粗体
5.注音标签<ruby>和<rt>
<ruby>标签定义ruby注释(中文注释或者字符)
<rt>标签定义字符(中文注音或字符的解释或发音)
<ruby>
陈晓明<rt>chenxiaoming</rt>
</ruby>
6.下标<sub>和上标<sup>
<h1>H<sub>2</sub>O</h1><br />
<h1>P<sup>2</sup>O<sup>5</sup></h1>
7.突出显示文本<mark>
<mark>定义有记号的文本,需要突出显示文本使用
<p>欢迎学习<mark>html</mark>,<mark>css</mark>,<mark>js</mark></p>
1.3.3表单标签
<form>供用户输入的HTML表单
<input>定义输入控件
<textarea>文本框
<button>按钮
<select>选择下拉列表
<optgroup>选择列表中相关选项的组合
<option>选择列表中的选择
<label>input元素中的标签
<fieldset>定义围绕表单中元素的边框
<legend>fieldset元素的标题
<datalist>定义下拉列表
<keygen>定义生成密钥
<output>输出的一些类型
例如:
<form id="form" method="post" action="#">
<fieldset>
<legend>留言板</legend>
<label for="contactus">请您留言:</label>
<br />
<textarea cols="80" rows="10" id="book" name="book"></textarea>
</fieldset>
<input type="submit" value="提交" id="submit" name="submit"/>
<input type="reset" value="重置" />
</form>
Select
<form id="form" action="#" method="post">
<fieldset>
<legend>投票</legend>
<label for="select">选项:</label>
<br />
<select multiple="multiple" id="select" name="select">
<option>非常认真100分</option>
<option>比较认真80</option>
<option>很是一般60分</option>
<option>真是差劲40分</option>
</select>
</fieldset>
</form>
<option>
<optgroup>标签
<body>
<form id="form" action="#" method="post">
<fieldset>
<legend>投票</legend>
<label for="object">选项:</label>
<br />
<select multiple="multiple" id="object" name="object">
<optgroup label="文科">
<option>非常认真100分</option>
<option>比较认真80</option>
<option>很是一般60分</option>
<option>真是差劲40分</option>
</optgroup>
<optgroup label="理科">
<option>100分</option>
<option>80</option>
<option>60分</option>
<option>40分</option>
</optgroup>
</select>
</fieldset>
</form>
</body>
1.3.4框架标签
<frame />框架集的窗口或框架
<frameset>框架集
<noframes>针对不支持框架的用户替代内容
<iframe>内敛框架
1.3.5图像标签
<img />图像
<map>图像映射
<area />图像地图的内部区域
<canvas>图形
在使用canvas元素绘图时有下面两种方法
1.context.fill()填充
2.Context.stroke()绘制边框
在进行图形的绘制前要设置好绘图的样式
1.context.fillStyle填充的样式
2.Context.strokeStyle边框样式
3.context.lineWidth图形的边框宽度
颜色的表示方式如下
1.颜色名称
2.十六进制
3.rgb(1-255,1-255,1-255)
4.rgb(1-255,1-255,1-255,透明度)
<script>
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can=$$('can');
var cans=can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI/2,true);
cans.closePath();
cans.fillStyle='blue';
cans.fill();
}
</script>
</head>
<body οnlοad="pageLoad()">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
<figcaption>figure元素的标题
<figure>媒介内容的分组以及他们的标题
<figure>
<figcaption>主要浏览器的图标</figcaption>
<img src="../Pictures/rightmenu1.jpg" />
<img src="../Pictures/Screenshots/屏幕截图(1).png" />
</figure>
1.3.6音/视频标签
<audio>声音内容
H5支持三种音频wav,MP3,ogg格式
1)最少的代码:<audio src="" controls="controls"></audio>
2)带有不兼容提醒的代码
<audio src="" controls="controls">
你的浏览器不支持这种格式的播放
</audio>
3)尽量兼容浏览器的写法
<audio controls="controls">
<source src="" type="" />
你的浏览器不支持这种格式的播放
</audio>
autoplay: 唯一可选值autoplay,音频会自动播放
controls:唯一可选值controls,音频控件将会显示,包括播放,暂停,定位,音量,全屏切换,字幕,音轨
<source />媒介源
<track>用在媒体播放器的播放轨道
<video>视频
<video controls="controls" id="video">
<source src="柒个我 第16集 高清(480P).mp4" type="video/mp4" />
</video>
<br />
<button οnclick="bofang()">播放</button>
<button οnclick="zanting()">暂停</button>
<button οnclick="kuaitui()">快退</button>
<button οnclick="kuaijin()">快进</button>
<button οnclick="jingyin(this)">静音</button>
<button οnclick="jiansu()">减速</button>
<button οnclick="jiasu()">加速</button>
<button οnclick="normal()">正常播放</button>
<button οnclick="up()">增大音量</button>
<button οnclick="down()">减小音量</button>
<script>
var video=document.getElementById('video');
//播放方法
function bofang(){
video.play();
}
function zanting(){
video.pause();
}
function kuaijin(){
video.currentTime+=10;
}
function kuaitui(){
video.currentTime-=10;
}
function jingyin(obj){
if(video.muted){
obj.innerHTML='静音';
video.muted=false;
}else{
obj.innerHTML='关闭静音';
video.muted=true;
}
}
function jiansu(){
video.playbackRate=1/3;
}
function jiasu(){
video.playbackRate=3;
}
function normal(){
video.playbackRate=1;
}
function up(){
video.volume+=0.2;
}
function down(){
video.volume-=0.2;
}
</script>
1.3.7链接标签
<a>定义锚
<link>定义文档与外部资源的关系
<nav>定义导航链接
1.3.8列表标签
<ol>有序列表
<ul>无序列表
<li>列表的项目
<dir>不赞成使用,定义目录列表
<dl>定义列表
<dt>定义列表中的项目
<dd>定义列表中项目的描述
<menu>定义命定的菜单/列表
<menuitem>用户可以从弹出菜单中调用的命令/菜单项目
<command>命令按钮
1.3.9表格标签
<table>定义表格
<caption>定义表格标题
<td>定义表格中的单元
<tr>定义表格中的行
<th>表格中表头单元格
<thead>表格中表头内容
<tbody>表格中主体内容
<tfoot>表格中标注内容(脚注)
<col />表格中一个或多个列的属性值
<colgroup>表格中供格式化的列组