HTML5
HTML样式
<1>外部样式表
<link rel="stylesheet" type="text/css" href="样式.css">
<2>内部样式表
<style type="text/css">
body{background-color:red}
p{margin_left:20px}
</style>
<3>内联样式表
<p style="color:red">
//StyleTest.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>styleTest</title> <link rel="stylesheet" type="text/css" href="myStyle.css"> <style type="text/css"> p{ color: darkgreen; } </style> </head> <body> <h1>外部样式表</h1> <p>内部样式表</p> <p style="color: darkmagenta">内联样式表</p> </body> </html>
//myStyle.css h1{ color: darkorange; }
HTML链接
<1>文本链接
<2>图片链接
alt属性：src失效时出现文字提示
<3>文档内链接
点击 "文档内的链接" 跳转到 "跳到我这儿"
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>链接</title> </head> <body> <a href="http://www.baidu.com">文本链接</a> <a href="http://www.baidu.com"> <img src="html5.png" width="200px" height="200px" alt="html5logo"> </a> <br/> <a name="tips">跳到我这儿</a> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <a href="#tips">文档内的链接</a> </body> </html>
HTML列表
<1>无序列表
使用标签：<ul><li>
属性：disc(实体圆), circle(空心圆), square(方块)
<2>有序列表
使用标签：<ol><li>
属性：A(大写ABCD...), a(), l(), i(), start(从几开始增加)
<3>嵌套列表
使用标签：<ul><ol><li>
<4>自定义列表
使用标签：<dl><dt><dd>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>列表</title> </head> <body> <ul type="square"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <ul> <li>宠物</li> <ul> <li>猫</li> <li>狗</li> </ul> <li>人类</li> <ul> <li>男人</li> <li>女人</li> </ul> <li>植物</li> </ul> <dl> <dt>自定义1</dt> <dd>描述1</dd> <dt>自定义2</dt> <dd>描述2</dd> <dt>自定义3</dt> <dd>描述3</dd> </dl> </body> </html>
HTML布局
<1>div布局
<2>table布局
<1>div
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>布局</title> <style type="text/css"> body{ margin: 0px; } #container{ width: 100%; height: 550px; background-color: darkgray; } #heading{ width: 100%; height: 10%; background-color: aqua; } #content_menu{ width: 30%; height: 80%; background-color: aquamarine; float: left; } #content_body{ width: 70%; height: 80%; background-color: blueviolet; float: left; } #footing{ width: 100%; height: 10%; background-color: chocolate; /*清除float效果*/ 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>
<table>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>布局</title> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%" height="550px" 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 colspan="2" width="100%" height="10%" style="background-color: coral">底部</td> </tr> </table> </body> </html>
HTML表单
<!DOCTYPE html> <html> <head lang="en"> <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/> 你的性别?<br/> 男<input type="radio" name="sex"> 女<input type="radio" name="sex"><br/> <select> <option>下拉选项1</option> <option>下拉选项2</option> <option>下拉选项3</option> </select><br/> <textarea cols="20" rows="20">在此填写文本</textarea><br/> <input type="button" value="按钮"> <input type="submit"> </form> </body> </html>
HTML框架
//index.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>布局</title> </head> <br/> <iframe src="framec.html" frameborder="0" width="800px" height="800px"></iframe> </html>
//framec.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body bgcolor="#008b8b"> FrameC<br/> <iframe src="frameb.html" frameborder="0" width="600px" height="600px"></iframe> </body> </html>
//frameb.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body bgcolor="aqua"> FrameB<br/> <iframe src="framea.html" frameborder="0" width="400px" height="400px"></iframe> </body> </html>
//framea.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body bgcolor="#d2691e"> FrameA </body> </html>
HTML背景
<1>bgcolor背景颜色
<2>background背景图片
HTML实体
<, >, 不可直接显示, 需要用实体替代, 直接百度HTML实体即可
