<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>页面标题</title><meta name="keywords" content="关键字" /><meta name="description" content="页面描述" /><!--<meta http-equiv="refresh" content="3;URL=http://www.baidu.com/" />--><meta http-equiv="pragma" content="no-cache" /></head>
<body> <hr /> <hr />是一条直线 <h1>小标题</h1> <h2>小标题</h2> <!--h1至h6是小标题，标题会越来越小--> <p><p> </p>指的是段落 </p> <br />指的是换行，放在一句话的后面,重复用可以多空几行<br /> &nbsp; 指的是空格。圆角状态下的空格也可以在网页中表现出来。<br /> Tab指缩进<br /> title放上去的时候会显示 <dl> <dt>苹果</dt> <dd>苹果是一种水果</dd> <dt>香蕉</dt> <dd>香蕉也是一种水果</dd> </dl> <dl/> </dl/> 是指定义<br /> <table border="1" cellpadding="10" cellspacing="10"> <tr><th>姓名</th><th>性别</th><th>学科</th></tr> <tr><td colspan="2">李培能</td><td>男</td><td>语文</td></tr> <tr><td rowspan="2">胡习平</td><td>男</td><td>语文</td></tr> <tr><td>王小康</td><td>男</td><td>语文</td></tr> <tr><td>戴晓</td><td>男</td><td>语文</td></tr> </table> <p>表格由table标签创建，tr标签创建行，td(colspan可以横跨几列, rowspan可以横跨几行)或th(使第一行粗一点)创建列; border标签表示表格边框的宽度,cellpadding标签表示字和框线的距离, cellspacing标签表示每个单元格的间距</p> <h1>会员注册</h1> <form action="http://www.baidu.com" target="_blank" name="form1"> 姓名:<input type="text" value="李培能" disabled="disabled" /><br /> 密码:<input type="password" /><br /> 头像:<input type="file" /><br /> <input type="hidden" /><br /> <input type="button" value="点我" /><br /> 性别:<input type="radio" id="boy1" name="sex1" checked="checked" /> <label for="boy1">男</label> <input type="radio" id="girl1" name="sex1" /> <label for="girl1">女</label><br /> 爱好:<input type="checkbox" checked="checked" />读书 <input type="checkbox" />上网 <input type="checkbox" />旅游<br /> 自我介绍：<textarea cols="20" rows="3">默认填写</textarea><br /> <select name="city"> <optgroup label="中国"> <option value="武汉">武汉</option> <option value="天门">天门</option> <option value="深圳">深圳</option> </optgroup> </select> <input type="submit" value="确认提交" /> <input type="reset" /><br /> </form> <p>form表示表单；input标签定义表单的输入界面，通过type属性来展示不同 的输入界面，通过value来改变默认值，file可以用来上传头像,hidden表示隐 藏,button表示普通按钮，radio表示单选(但是要加name来关联)，checkbox用 来表示多选（爱好）,submit表示提交，rest表示重置; action表示表单要提交到哪里,method表示提交方式（post和get）; checked=“checked”表示单选或复选的默认选择,disabled="disabled"表示默认 选择无法改变，readonly=“readonly”表示只读，size表示框的长度,textarea 是双标签，表示多行输入(cols表示长度,rows表示行数)； label用来提升用户体验，使勾选更容易(需要id和for配合使用)； select用来创建下拉栏{用option【用disabled(不能选)，selected="selected" （默认）,value】来配合，还有disabled，name，multiple="multiple"（展开）}; optgroup用来表示组合（用label来配合），给选项进行分组 </p> <img src="从前有座灵剑山/灵剑山扉页08.jpg" usemap="#img1" /> <map id="img1" name="img1"> <area shape="rect" coords="440,161,570,300" href="http://ac.qq.com/Comic/ComicInfo/id/524356" target="_blank" title="从前有座灵剑山" alt="从前有座灵剑山" /> </map> <br /> <!-- rect为矩形 circle为圆形(其坐标变现为440,161,30（半径）) 用来表示图形的一部分的超链接，坐标是相对于图片的左上角而言，且都为正数，通过截图框来得出坐标。alt是解释。 --> 相对路径，指的就是图片的名字 ./等于当前目录 ../等于上一级目录 文件夹名称/等于当前目录内的文件夹 <a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的贴吧" target="_blank"> <img src="174330602201403241309561585826451753_014.jpg" width="50%" /> </a> <!-- 这是用来表示图片超链接 --> <a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的贴吧" target="_blank"> 百度贴吧 </a> <a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的贴吧" target="_blank"><input type="button" value="点我" /></a> <div>换行</div> <!-- div快级元素，可以用来存放标签 --> <span>不换行</span> <p>我是一<span>句话</span></p> <!-- span内联元素，以便通过css来美化它们 --> <ul> <li> 网友A：我喜欢小说。 <ul> <li> 网友B：我喜欢漫画。 <ul> <li> 网友A：小说更好看。 </li> </ul> </li> </ul> </li> <li>列表</li> </ul> <ol> <li>列表</li> <li>列表</li> </ol> <marquee direction="down">向下卷动</marquee> <!-- 我是被注释的内容，不会显示 --> <div>ANSI格式对应的charset=“gb2312”</div> <h1>标签写法以及嵌套的探讨</h1> 1、不容许写结束标签的元素有（单标签）：area,bass,br,col,command,embed,hr,img, input,keygen,link,meta,paran,source,track,wbr.<br /> 可以省略结束标签的元素有：li,dt,dd,p,rt,rp,optgroup,option,colgroup, thead,tbody,tfoot,tr,td,th.<br /> 可以省略全部标签的元素有：html,head,body,colgroup,tbody.<br /> 2、具有boolean值(是/否)的属性：disabled，readonly，checked. 这些元素写的话就是true，不写的话就是false<br /> 属性值的引号可以省略，但属性值不可以包括空字符串，<，>,=,+<br /> 3、块级元素可以嵌套内联元素，比如：<div><span>；<br /> 但内联元素不可以嵌套块级元素，span不可以在div的前面；<br /> 内联元素可以嵌套内联元素，比如：<a href="#"><span></span></a>；<br /> 块级元素不能放在p标签内，比如：<p><ul><li></li></ul></p>是错的， <p><div></div></p>也是错的；<br /> li内可以包含div标签和ul、ol标签；<br /> 块级元素和内联元素是可以相互转化的。 <div><p></p></div>是对的。 <h1>其他标签</h1> head中合法的标签有：bass,link,meta,title,style,script. 1、为html页面添加描述信息用于搜索引擎抓取 使用name属性，配合content来实现！（放在head中，title的下面） <meta name="keywords" content="关键字" /> <meta name="description" content="页面描述" /> 2、引入css文件 css代码是写在一个单独的文件中的 <link rel="stylesheet" href="文件位置" type="text/css" /> 3、为html文档加入使用的语言，在国际化网站中使用 <html lang="zh-CN"> </html> 英文使用en 4、用html来实现网页的跳转 <meta http-equiv="refresh" content="等待秒数;URL=跳转 URL地址" /> 5、告诉浏览器不要加载页面的缓存（即获取网站的最新内容） <meta http-equiv="pragma" content="no-cache" /> 6、iframe标签，框架(把一个网页以小框框的形式插入到另一个网页) 创建包含另一个文档的内联框架（即行内框架）【是在body内】。 属性： frameborder 值：1,0 作用：规定是否显示框架周围的边框 width scrolling 值:yes,no,auto（自动） 作用：规定是否在iframe中显示滚动条 src 规定在iframe中显示文档的URL,可以是本地的html文件，也可以是远程的html文件 <iframe src="http://www.baidu.com/" width="50%" height="600" frameborder="0"> </iframe></body></html>