转载请注明出处:http://blog.csdn.net/u011569040/article/details/46833017
排版标签:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>排版标签</title>
</head>
<script type="text/javascript">
<!--
function fun(){
var div = document.getElementById("d");
div.style.display = "none";
}
//-->
</script>
<body>
<p align="center">刘德华</p>
<p>刘德华,p标签会换行</p>
我喜欢<br>芙蓉姐姐
<hr width="50%" size="10" color="red">
<pre>
里面的格式就是
pre标签里面的格式
</pre>
<!--div是一个块级标签,就是把标签中的内容作为一个块来对待-->
<div id="d" align="center">
林志玲
<p οnclick="fun()">刘德华</p>
</div>
<!--span标签的作用和div一样,区别是:不换行-->
<span>林志玲</span><span>林志玲</span>
<div>刘德华</div> <div>刘德华</div>
</body>
</html>
字体标签:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<h1>刘德华</h1>
<h2>刘德华</h2>
<h3>刘德华</h3>
<h4>刘德华</h4>
<h5>刘德华</h5>
<font face="幼圆" size="+7" color="#cc3399" style="font-size:100px">size:1~7</font>
这是一个html的标签<p>空格是 还有其他的:&©™" <br/>
<b>b标签是粗体bold</b>
<i>i是斜体</i><em>em是斜体</em>
<u>u是下划线</u><s>s是中划线</s>
O<sub>2</sub> 5<sup>3</sup>
</body>
</html>
图片标签:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<!--images的路径分为绝对路径和相对路径:
相对路径:相对于当前页面的路径;
绝对路径:a:以逻辑盘符开始的路径;
b:网络路径 http://www.baidu.com/images/aaa.jpg
-->
<img src="images/aaa.jpg" width="300" height="300" title="当指向图片时显示的文字,优先于alt标签"
alt="当指向图片时或者图片不存在时显示的文字" border="100" ></img>
<p title="ppppp">当鼠标指向时显示字母</p>
</body>
</html>
超链接:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<!--超链接:3种链接形式:
a.外部链接:链接到一个外部文件
b.锚链接: 是指链接到本页面或者其它页面的特定位置
c.邮件链接:mailto:meizu@xxx.cn
target是告诉浏览器该用什么方式来打开目标页面
_self
_parent
_top
_blank -->
<a href="login.html" name="a" target="_top">排版标签.html</a>
<a href="446945045@qq.com">进入我的邮箱</a>
<pre>
里面很多内容,比如淘宝,已经有几页了
</pre>
<a href="#a">回到本页面的顶部(必须加#)</a>
</body>
</html>
热点问题:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<!--热点问题:就是指对图片的局部区域加超链接(使用dw更方便)-->
<img src="images/aaa.jpg" usemap="#map"/>
<map name="map" id="map">
<area shape="circle" coords="109,68,28" href="login.html"/>
</map>
</body>
</html>
清单标签:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<!--清点标签有3种:
a.无序清单
type:取值:disc,square,circle
b.有序清单:
type:取值:l(数字),a(小写字母),A(大写字母),i(罗马),I
start:从几开始
c.定义清单 define list
dt: 清单标题-->
<ul type="cicle">
<li type="circle">中国</li>
<li type="square">美国</li>
<li >日本</li>
</ul>
<ol type="I" start="10">
<li >中国</li>
<li >美国</li>
<li >日本</li>
<li >日本</li>
</ol>
<dl>
<dt>第一条</dt>
<dd>不得随地吐痰</dd>
<dd>不得随地扔纸</dd>
</dl>
</body>
</html>
表格标签:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<table border="1" width="500" hight="300" align="center"
cellpadding="20" cellspacing="20" bordercolordark="red" bordercolorlight="blue"
bgcolor="#ffcccc" background="images/aaa.jpg" dir="rtl">
<tr bgcolor="#6633ff">
<td >刘德华</td>
<td>51</td>
<td>男</td>
<td>香港</td>
</tr>
<tr>
<td valign="top">成龙</td>
<td>59</td>
<td>男</td>
<td>香港</td>
</tr>
<tr>
<td>林志玲</td>
<td>32</td>
<td>女</td>
<td>台湾</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<!--
align是指图片和周围文字的相对位置
-->
刘德华<img src="images/aaa.jpg" align="center">刘德华
</body>
</html>
框架标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>框架集</title>
</head>
<frameset rows = "200,*" bordercolor = "red">
<frame src = "top.html" noresize scrolling = "no" name = "top"></frame>
<frameset cols = "100,*" >
<frame src = "left.html" noresize name = "left"></frame>
<frame src = "right.html" name = "right"></frame>
</frameset>
</frameset>
</html>
表单标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>表单标签</title>
</head>
<body>
姓名:<input type = "text" value = "请输入姓名" size = "50" name = "name" ><br>
<form action = "02-字体标签.html" method = "get">
<fieldset>
<legend>必填信息</legend>
姓名:<input type = "text" value = "请输入姓名" size = "50" readonly disabled><br>
密码:<input type = "password" value = "请输入姓名" size = "50" ><br>
隐藏框:<input type = "hidden" value = "请输入姓名" size = "50"><br>
性别:<input type = "radio" name = "gender" value = "male" checked>男
<input type = "radio" name = "gender" value = "female">女<br>
</fieldset>
<br>
<fieldset>
<legend>选填信息</legend>
国籍:<input type = "radio" name = "country" value = "china" checked>中国
<input type = "radio" name ="country" value = "america">美国<br>
爱好:<input type = "checkbox" name = "love" value = "eat" checked>吃饭
<input type = "checkbox" name = "love" value = "sleep" checked>睡觉
<input type = "checkbox" name = "love" value = "study" checked>学java<br>
学历:<select name = "xueli" multiple>
<option value = "大学">大学</option>
<option value = "高中">高中</option>
<option value = "小学">小学</option>
</select>
备注:<textarea rows = "5" cols = "20" >大神留点话吧</textarea><br>
</fieldset>
<input type = "button" value = "普通按钮" onclick = "alert(this.type)">
<input type = "submit" value = "提交按钮">
<input type = "reset" value = "重置按钮">
<input type = "image" src = "images/1.jpg" width = "80" height = "30">
</form>
<button onclick = "alert('大家好')">普通按钮</button>
</body>
</html>
多媒体标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>多媒体标记</title>
</head>
<body>
<!-- <bgsound src = "天仙子.mp3" loop = "3"></bgsound> -->
<embed src = "天仙子.mp3" autostart = "false" volume = "0" loop = "5"></embed>
<marquee behavior = "alternate" >我来啦</marquee>
<marquee behavior = "scroll" scrollamount = "50" loop = "3" scrolldelay = "1000">我来啦</marquee>
<marquee direction = "up" behavior = "slide" width = "300" height = "300" bgcolor = "#ff9999" >我来啦</marquee>
</body>
</html>
头标签
<!doctype html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!-- <meta http-equiv= "refresh" content = "3;url=http://www.sohu.com" > -->
<title>头标签</title>
</head>
<body bgcolor = "" background = "" text = "red" link = "red" alink = "blue" vlink = "yellow" leftmargin = "0" topmargin = "0">
大家好
<a href = "#">你好</a>
<label onclick = "alert(this.innerHTML)">林志玲</label>
</body>
</html>