首页 > 代码库 > HTML5基础小结（二）——标签小例

HTML5基础小结（二）——标签小例

2024-07-29 13:57:36   222人阅读




        随篇博客的思维导图，继续：


   二，看下标签的使用，这里看几个小例子（效果图不再给出）：


           1，结构标签的使用，这里来看一个页面的布局：

<!doctype html>
<html>
	<head>
		<style>
			/* 
			*{border:1px solid red;height:20px}
			所有的HTML5结构标签本质上来说就是一个div标签，只不过有意义
			*/
			/*页面头部 header*/
			header{height:150px;background:#ABCDEF}
			nav{height:30px;background:#ff9900;margin-top:100px}
			nav ul li{width:100px;height:30px;float:left;line-height:30px}
			/*页面中间 div */
			div{margin-top:10px;height:1000px;}
			section{height:1000px;background:#ABCDEF;width:70%;float:left}
			article{background:#F90;width:500px;margin:0 auto;text-align:center}
			
			aside{height:1000px;background:#ABCDEF;width:28%;float:right}
			/*页面底部 footer*/
			footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}
		</style>
	</head>
	<body>
		<header>
			<p>这是一个header标签</p>
			<nav>
				<ul>
					<li>首页</li>
					<li>起夜</li>
					<li>论坛</li>
					<li>商城</li>
					<li>社区</li>
				</ul>
			</nav>
		</header>
		<div>
			<section>
				<p>这是一个section标签</p>
				<article>
					<h2>春晓</h2>
					<p>
					春眠不觉晓，<br />
					处处蚊子咬，<br />
					打上敌敌畏，<br />
					不至死多少。<br />
					</p>
				
				</article>
				<hr />
				<article>
					<h2>上学歌</h2>
					<p>
					太阳当空照，<br />
					花儿对我笑，<br />
					小鸟说早早早，你为什么背上小书包?<br />
					我要炸学校老师不知道，一拉线，赶快跑，<br />
					轰的一声，学校炸没了。<br />
					</p>
				
				</article>
				<hr />
				<figure>
					<figcaption>UFO</figcaption>
					<p>不明飞行物 Unknown Flying Object</p>
				</figure>
				<figure>
				     <dt>DDS</dt>
					 <dd>nihaome </dd>
				</figure>
				<hr />
				<dialog>
					<dt>唐僧:悟空，你又调皮了，观音姐姐的月光宝盒怎么能乱扔呢？</dt>
					<dd>悟空:...(看着)</dd>
					<dt>唐僧:乱扔是不对的，砸到小朋友怎么办？就算砸不到小朋友，砸到花花草草也是不好的嘛</dt>
					<dd>悟空:...(纠结)</dd>
					<dt>唐僧:悟空你想要么？想要你就告诉我呀，你不告诉我怎么知道你想要呢？。。。。</dt>
					<dd>悟空:我靠!(一棍子抡上去！)</dd>
				</dialog>
				<hr />
				<menu>
					<li>点击</li>
					<li>右键单击</li>
				</menu>
				<hr />
				<span contextmenu="candan">右键单击我试试</span>
				<menu type="context" id="candan">
					<menuitem label="菜单一" onclick="alert(‘我是一个寂寞‘)" icon="http://www.baidu.com/img/bdlogo.gif"></menuitem>
				</menu>
				<hr />
				<meter min="0" max="10" value=http://www.mamicode.com/"5" low="3" high="7" >>
    2，Canvas画布，可以在这个上边进行画图，例如直线，折线，圆，矩形等，这个要是学好了发挥的控件特别大，这里主要是JS来调用它的一些方法和属性：
         a，画直线：
<!DOCTYPE html>
<html>
	<head>
		<title>Learning the basic of canvas</title>
		<meta charset="utf-8" />
		<script src=http://www.mamicode.com/"js/jquery.min.js" type="text/javascript" charset="utf-8"></script>>
    b，画矩形；
<!DOCTYPE html>
<html>
	<head>
		<title>Learning the basic of canvas</title>
		<meta charset="utf-8" />
		<script src=http://www.mamicode.com/"js/jquery.min.js" type="text/javascript" charset="utf-8"></script>>

    c,画圆（弧等）：

<!DOCTYPE html>
<html>
	<head>
		<title>Learning the basic of canvas</title>
		<meta charset="utf-8" />
		<script src=http://www.mamicode.com/"js/jquery.min.js" type="text/javascript" charset="utf-8"></script>>


         d，对文字样式的设置：
<!DOCTYPE html>
<html>
	<head>
		<title>Learning the basic of canvas</title>
		<meta charset="utf-8" />
		<script src=http://www.mamicode.com/"js/jquery.min.js" type="text/javascript" charset="utf-8"></script>>


       3,Video/Audio使用
<!doctype html>
<html>
	<head></head>
	<body>
	<!--
		 <video src=http://www.mamicode.com/"movie.webm" controls="controls">>


         4,智能表单的简单实例：
<!doctype html>
<html>
	<head></head>
	<body>
		<form action="http://localhost/test.php" method="post" id="register"></form>
		
		<input type="text" name="user" value=http://www.mamicode.com/"" form="register" />>


          以上为标签的一些简单例子，通过例子来学习这些表单，挺快的，这里推荐W3CSCHOOL网站:http://www.w3school.com.cn/html5/,结合理论来学习，很不错的。下篇简单小结一下HTML5一些扩展。
HTML5基础小结（二）——标签小例


联系
我们