<!DOCTYPE html>
<html lang="en">
<head>
<!-- 页面编码-->
<meta charset="UTF-8">
<!-- 手机页面适配 定义页面宽度等于手机宽度，不允许用户进行手动缩放，初始缩放比例， 最大放大比例， 最小缩小比例 -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 解决页面渲染时ie版本不兼容问题 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="content-language" content="zh-CN"/>
<!-- 页面定时刷新，单位：秒-->
<!-- <meta http-equiv="refresh" content="5"/>-->
<!-- 页面定时跳转到指定地址，单位：秒-->
<!-- <meta http-equiv="refresh" content="5;url=https://www.baidu.com/"/>-->
<!-- 不适用缓存-->
<meta http-equiv="prahma" content="no-cache"/>
<!-- 设置作者-->
<meta name="author" content="yuxiang"/>
<!-- 设置禁止搜索引擎检索-->
<meta name="robots" content="none"/>
<title>HTML5的语法</title>
<style>
article,section,nav,aside,main,header,hgroup,footer{display: block}
table{color: deeppink;border: aqua}
.coll{width: 25%;color: orange;font-size: 30px}
</style>
</head>
<body>
<h1>HTML5的目标</h1>
<p>HTML5的目标是为了能够创建更简单的Web程序，书写出更简洁的HTM代码</p>
<br>换行
<input type="text">
<article>
<header>
<h1>article用来标记一块独立的内容，该内容包括头部header，内容，尾部footer</h1>
<time pubdate="pubdate">time用来标识时间，属性pubdate标识该元素为发布时间</time>
</header>
<p>这是article内容</p>
<aside>aside是用来标记侧边栏</aside>
<nav draggable="true"><!--draggable=true表示该元素可以被拖动-->
<h3>nav用于导航栏，默认横向</h3>
<a href="#">html——网页包含框</a>
<a href="#">html——网页包含框</a>
<a href="#">html——网页包含框</a>
</nav>
<footer><p>这是article尾部</p></footer>
</article>
<section>
<h2>section用于标识一块区域，通常是一个标题+内容，这是用section做的评论区</h2>
<article>
<header><h3>网友昵称</h3><p> <time pubdate datetime="2017-9-26 19:40-08:00">1小时前</time></p></header>
<p>ok</p>
</article>
<article>
<header><h3>网友昵称</h3><p> <time pubdate datetime="2017-9-26 19:40-08:00">1小时前</time></p></header>
<p>ok</p>
</article>
<article>
<header><h3>网友昵称</h3><p> <time pubdate datetime="2017-9-26 19:40-08:00">1小时前</time></p></header>
<p>ok</p>
</article>
</section>
<section cite="http://music.baidu.com/" style="background-color: aqua">
<h1>新歌榜</h1>
<ol><li><a href="#">房间<p>刘瑞琪</p></a> </li></ol>
</section>
<h1>h1标题最大</h1>
<h2>h2标题最大</h2>
<h3>h3标题最大</h3>
<h4>h4标题最大</h4>
<h5>h5标题最大</h5>
<h6>h6标题最大</h6>
<p>p定义段落文本，短的文本</p>
<cite>cite定义转载地址</cite>
<blockquote cite="#"><p>blockquote用于从周围内容分离出来比较长的部分</p></blockquote>
<em>em用于强调文本，让文本显示斜体</em><br/>
<strong>strong用于强调文本，强调程度强于em，让文本显示粗体</strong><br/>
<b>b定义粗体文本</b><br/>
<i>i定义斜体文本</i><br/>
<big>big定义大号字体，比周围字体大一号</big><br/>
<small>small定义小号字体，比周围字体小一号</small><br/>
<sup>sup定义上标文本</sup><br/>
<sub>sub定义下标文本</sub><br/>
<code>
code用来让文本字体显示代码字体类型
</code><br/>
<pre>
pre表示预定义的源代码，即保留源代码中的空格大小
</pre><br/>
<tt>tt表示打印机字体</tt><br/>
<kbd>kbd表示键盘字体</kbd><br/>
<dfn>dfn表示定义的术语</dfn><br/>
<var>var表示变量字体</var><br/>
<samp>samp表示代码范例</samp><br/>
<ins>ins定义插入的文本，文本增加下划线</ins><br/>
<del>del定义删除的文本,文本增加删除线</del><br/>
<bdo dir="rtl">bdo让字符从左到右或从右到左排列，适用于段落里的短语和句子，不能包含多个段落 ，必须包含dir属性，ltr从左到右，rtl从右到左</bdo><br/>
<mark>mark定义带有记号的文本,给文本加背景阴影</mark><br/>
<p>progress可以标识任务的进度<progress max="100" value="0"><span>0</span>%</progress></p>
<input type="button" onclick="click1(0)" value="显示进度" /><br/>
<p>meter用于展示已知范围或分数值内的标量，进度，用于显示结果，但不应用于指示进度（在进度条中）</p>
<meter id="pg" value="0" max="100" min="0"></meter>
<footer>
<section>
<address>
<a title="这是a的标题" href="#">address用来标识作者的联系信息，默认斜体</a>
</address>
</section>
</footer>0
<p><wbr>wbr用于换行断点，两个wbr中间的内容不会被打断换行<wbr></p>
<ruby>ruby<rt>注释zhushi</rt>用来给字符注释拼音或解释字符，需要注释内容要加rt标签，</ruby><br/>
<img src="img/22.jpg" width="300" height="168" usemap="map1"/>
<map name="map1" id="map1">
<area shape="rect" coords="0,0,150,84" alt="图片" href="img/1.png" target="_blank">
</map>
<p>object用来定义一个嵌入对象，可以嵌入网页，音乐，视频，Java applets，pdf等等多媒体信息</p>
<p>param标签必须包含在object内部，用来定义嵌入对象的配置参数，通过name和value</p>
<audio controls>
<source src="music/123.mp3" type="audio/mpeg">
</audio>
<video width="100%" src="video/v1.mp4" controls></video>
<ul>
<h3>ul用于无序列表，默认纵向，带标题</h3>
<li>
<a href="#">li用于标识选项</a>
</li>
<li>
<a href="#">head——头部区域</a>
</li>
<li>
<a href="#">body——主体内容</a>
</li>
</ul>
<ol>
<h3>ol用于有序列表，默认纵向，带标题</h3>
<li>
<a href="#">li用于标识选项</a>
</li>
<li>
<a href="#">head——头部区域</a>
</li>
<li>
<a href="#">body——主体内容</a>
</li>
</ol>
<p>dl标识描述列表</p>
<dl>
<dt>
dt标识词条
</dt>
<dd>
dd标识解释
</dd>
</dl>
<menu>
<comment onclick="alert('按钮一')" type="radio" style="background-color: deeppink">comment按钮</comment>
<button type="button" onclick="alert('按钮')">button按钮</button>
<comment onclick="alert('按钮二')" type="radio" style="background-color: deeppink">按钮二</comment>
</menu>
<a href="word/1.docx" target="_blank">打开文档</a>
<table border="1" >
<colgroup span="2" class="coll"></colgroup>
<thead>
<tr><th>标题1</th><th>标题2</th></tr>
<tr><td>aaaaaaaa</td><td>123456789</td></tr>
</thead>
<tbody>
<tr><th>标题1</th><th>标题2</th></tr>
<tr><td>aaaaaaaa</td><td>123456789</td></tr>
</tbody>
<tfoot>
<tr><th>标题1</th><th>标题2</th></tr>
<tr><td>aaaaaaaa</td><td>123456789</td></tr>
</tfoot>
</table>
<script type="text/javascript">
function click1(ppp) {
var progress=document.getElementById('pg');
if(ppp==101)return;
setTimeout(function (){
progress.value=ppp;
click1(ppp+1);
},100);
}
</script>
</body>
</html>
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
