html5元素及使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="#faebd7">
<a href="hrefht.html" target="_self">打开本地</a>
<h1 align="right">标题1</h1>
<h2 class="h2ID">标题2</h2>
</body>
</html>html5格式化及使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="#faebd7">
<b>欢迎来到jikexueyuan.com</b>
<br/>
<big>欢迎来到jikexueyuan.com</big>
<br/>
<em>欢迎来到</em>
<br/>
<i>欢迎来到</i>
<br/>
<small>欢迎来到</small>
<br/>
<strong>欢迎来到</strong>
<br/>
大家好<sub>欢迎</sub>来到
<br/>
大家好<sup>欢迎</sup>来到
<br/>
<ins>欢迎</ins>
<br/>
<del>欢迎来到</del>
<br/>
</body>
</html>html5样式，链接和表格
<head>
<meta charset="UTF-8">
<title>样式</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
p{
color: aqua;
}
</style>
</head>
<body bgcolor="#faebd7">
<h1>标题h1</h1>
<p>欢迎来到极客学院：www.jikexueyuan.com</p>
<a href="http://www.jikexueyuan.com" style="color: chartreuse">点击我跳转到极客学院</a>
</body>
#外部样式表css文件内容
h1{
color: red;
}链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接</title>
</head>
<body >
<a href="http://www.jikexueyuan.com">点击我</a>
<a href="http://www.jikexueyuan.com">
<img src="拼图.jpg" width="100px" height="100px" alt="html5logo">
</a>
<br/>
<a name="tips">hello</a>
<a href="#tips">跳转到hello</a>
<br/>
</body>
</html>表格
<body >
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>表格内的标签
<body >
<table border="1">
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>菠萝</li>
<li>香蕉</li>
</ul>
</td>
<td>
我想吃了
</td>
</tr>
</table>
</body>列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body >
<ul type="circle">
<li>ios</li>
<li>android</li>
<li>html5</li>
<li>swift</li>
</ul>
<ol type="i">
<li>ios</li>
<li>android</li>
<li>html5</li>
<li>swift</li>
</ol>
<ul>
<li>宠物</li>
<ul>
<li>猫</li>
<li>狗</li>
</ul>
<li>人类</li>
<ul>
<li>英国人</li>
<li>中国人</li>
</ul>
<li>植物</li>
</ul>
<dl>
<dt>helloworld</dt>
<dd>打印helloworld</dd>
<dt>helloworld</dt>
<dd>打印helloworld</dd>
<dt>helloworld</dt>
<dd>打印helloworld</dd>
</dl>
</body>
</html>块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
span{
color: aqua;
}
</style>
</head>
<body >
<!--块 -->
<b>加重标签</b>
<a>超链接标签</a>
<div id="divid">
<p>hello jikexueyuan</p>
<a>点击我啊</a>
</div>
<div id="divspan">
<p><span>这是一个测试效果</span>span是一个什么样子</p>
</div>
</body>
</html>布局
<!-- div布局 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
margin: 0px;
}
div#container{
width:100%;
height:950px;
background-color: darkgray;
}
div#heading{
width:100%;
height:100px;
background-color: aqua;
}
div#content_menu{
width:30%;
height:80%;
background-color: aquamarine;
float: left;
}
div#content_body{
width:70%;
height:80%;
background-color: blueviolet;
float: left;
}
div#footing{
width:100%;
height:10%;
background-color: black;
clear: both;
}
</style>
</head>
<body >
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="footing">底部</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: darkgray">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: aqua">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: blue">左菜单</td>
<td width="70%" height="80%" style="background-color: blueviolet"></td>
</tr>
<tr>
<td width="100%" height="10%" colspan="2" style="background-color: darkcyan">这是底部</td>
</tr>
</table>
</body>
</html>表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body >
<form>
用户名：
<input type="text">
<br/>
密码：
<input type="password">
<br/>
你喜欢的水果有：
<br/>
苹果<input type="checkbox">
西红柿<input type="checkbox">
香蕉<input type="checkbox">
<br/>
请选择你的性别
男<input type="radio" name="sex">
女<input type="radio" name="sex">
选择您常用的网站
<select>
<option>www.jikexueyuan.com</option>
<option>www.google.com</option>
</select>
<input type="button" value="按钮">
<input type="submit" value="确定">
</form>
<textarea cols="30" rows="30">请在此前填写个人信息</textarea>
</body>
</html>框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<a href="http://www.jikexueyuan.com" target="_self">极客学院</a>
<iframe src="framec.html" frameborder="0" width="800px" height="800px"></iframe>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>framea</title>
</head>
<body bgcolor="#faebd7">
FrameA
<br/>
<a href="http://www.jikexueyuan.com" target="_blank"></a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="aqua">
FrameB
<br/>
<iframe src="framea.html" width="400px" height="400px"></iframe>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="blue">
FrameC
<br/>
<iframe src="frameb.html" width="600px" height="600px"></iframe>
</body>
</html>背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
</head>
<body bgcolor="#FF0000">
</body>
</html>实体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
abcd<html>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
