首页 > 代码库 > HTML meta 文本 格式排版 链接图表 列表 表单 frame后台布局实例
HTML meta 文本 格式排版 链接图表 列表 表单 frame后台布局实例
meta标签
content属性必须和http-equiv或者name属性一起使用
http-equiv属性，就是http当量，用于和服务器发送数据前的提交交互使用。（另层含义这个当量在浏览器和服务器同价值，就是当量，采用的http协议）
服务器代码response.ContentType=“text/html”，先和浏览器提前交互。
<meta></meta>对搜索引擎和更新频度的描述和关键词 charset只是content的属性一个内容，用；分开。
比如<meta charset="utf-8"></meta>等价<meta http-equiv="content-type" content="text/html;charset=utf-8">
网站关键字 网站描述 网站定时刷新指向 网站缓存处理
1 <html> 2 <meta http-equiv="content-type" content="text/html;charset=utf-8"/><!-- <meta charset="utf-8"></meta>--> 3 <meta name="keywords" content="form 表单"/> 4 <meta name="description" content="最详细的表单描述讲解 表单原理 提交"/> 5 <meta http-equiv="refresh" content="3;url=http://www.baidu.com" /> 6 <meta http-equiv="cache-control" content="no-cache"/> 7 <head> 8 </head> 9 <body bgcolor="red"text="yellow">10 hanzi汉子海岸的拉了大苏打125616516511 </body>12 </html>
参考来源：
http://www.w3school.com.cn/tags/tag_meta.asp
http://blog.csdn.net/boat1980/article/details/2142291
<标签 属性=“” 属性=“” 属性=“”></标签>
在网页中显示出一个标签。比如<font>字</font>，在html中就要写<font>字<font>
显示商标® ® 版权© © 引号“ &quat 连字符& &空格  
文本标签（字体）
1，物理字体2，逻辑字体,主要的作用为SEO的优化而已。
1 <!--<b><b/>加粗 2 <i><i/>倾斜 3 <tt><tt/>打字机样本 4 <u><u/>加下划线 5 <sup><sup/>指数标签 6 <sub><sub/>脚标签 7 <s><s/>加删除线 8 --> 9 <!--我犯错：封闭标签是/标签，而不是标签/，单个标签是标签/-->10 <html>11 <meta charset="utf-8"></meta><!--此时gb2312字符集不对。utf-16可以utf-32不行-->12 <head>13 </head>14 <body>15 <b>我是</b>     <!-- 空格-->16 <i>一名</i>    17 <tt>大学生</tt>，   18 就是  19 <u>大学生</u><br/>     <br/>20 我知道一个函数：f<sub>n</sub>=3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup>，21 不是<s>小学生<s/>22 </body>23 </html>
1 <!--<strong></strong>粗体，相当于<b></b> 2 <code></code>文本代码 3 <samp></samp>样本代码 4 <kbd></kbd>键盘文本 5 <var></var>定义文本中变量部分 6 <dfn></dfn>定义定义项目 7 <cite><cite>定义引用 8 <small></small>小号文本 9 <big></big>大好文本-->10 <html>11 <meta charset="utf-8"></meta><!--此时gb2312字符集不对。utf-16可以utf-32不行-->12 <head>13 </head>14 <body>15 逻辑字体，没什么用处，主要SEO<br/>16 <em>斜体</em><br/>17 <strong>粗体</strong><br/>18 <code>文本代码system.web</code><br/>19 <samp>样本代码system.web</samp><br/>20 <kbd>键盘文本123dfgd</kbd><br/>21 <var>定义文本中变量部分</var><br/>22 <dfn>定义定义项目</dfn><br/>23 <cite>定义引用dada<cite><br/>24 <small>小号文本sadsdsa</small><br/>25 <big>打好文本sadassd</big><br/>26 </body>27 </html>
2，格式标签（文本排版 分割）
1 <!--<br/>换行 2 <hr/>水平线size width align noshade color 3 <p></p>段落 align=left/center/right 4 <center></center> 5 <pre></pre>--> 6 <html> 7 <meta charset="utf-8"></meta><!--此时gb2312字符集不对。utf-16可以utf-32不行--> 8 <head> 9 </head>10 <body>11 <h1 align="center">诗歌</h1> <!--align靠左右中对齐，在p和h1标签都可以-->12 <hr color="red" size="20px" width="50%" align="right"/>13 <hr size="20px" width="50%" align="left" noshade="noshade"/>14 <center><p>床前米单双打</p><p>一试的撒湖大</p><p>爱的计算大的</p><p>大带鱼大神的</p></center>15 <p align="right">-----李可2015-1-31</p>16 <pre>17 左8个空格18 右8个空格 19 有换行20 显示也是按照此显示21 </pre>22 </body>23 </html>
3，链接接与图表（跳转 锚定 显示图片）
target=“_blank”用的最多。
<a name="m">跳到这需要名字</a> <a href="http://www.mamicode.com/#m">跳转</a> 成对存在
<a href="http://www.mamicode.com/#">跳转顶部</a>没有名字
href还可以执行js代码。
还可以发邮件<a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">给李可发一个邮件</a>
图片链接<a href=""><img src=""></a>
<html> <meta charset="utf-8"></meta><!--此时gb2312字符集不对。utf-16可以utf-32不行--> <head> </head> <body> <a href="http://www.baidu.com" target="_blank">百度</a> <a href="./wenjian.html">本地文件链接</a><br/> <a name="m">跳到这里</a> <pre> 左8个空格右8个空格 有换行显示也是按照此显示</pre><a href="#m">跳</a><a href="#">一个#号就顶部</a><a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">给李可发一个邮件</a> </body></html>
/斜杠，除了操作系统文件都是斜杠
\反斜杠，window系统文件用反斜杠
相对路径：.\文件1 .\表示文件1所在在文件夹（文件1的上一级）
..\文件1，文件1所在的文件夹 所在在文件夹。文件的上级的上级文件夹。
图片标签：<img src="" width=""/ height="" alt=“图片显示的字” title=“鼠标移上显示的字” border=“10”>
宽高，只设定一个就会等比例缩放。同时设定就会拉伸。title：鼠标以上显示的字，在其他的标签也有这种功能。
body的属性以后用css代替
text link alink vlink bgcolor background
<body bgcolor="red"text="yellow"><!--text为文本颜色，超连接等都不属于文本--> <!--background=“.\wenjian.jpg””背景=“图片路径”--> <!--link=“ffffff” alink=“yellow” vlink=“blue”这些body下的属性，对body内的超连接点击之前，点击时候，点击过后的颜色变化--> <font color="fffcbc">这是字体修饰</font><!--此时的字体颜色覆盖body中的文本颜色-->
4，列表与表格（显示数据）
1 <html> 2 <meta charset="utf-8"></meta> 3 <head> 4 </head> 5 <body bgcolor="red"text="yellow"> 6 <a href=http://www.mamicode.com/"mailto:416960428@qq.com?subject=this is mail&body=neirong">给李可发一个邮件</a> 7 无序列表 8 <ul type="square"><!--type不是style哦 在ul内加=“disk" "circle"--> 9 <li>1</li>10 <li>2</li>11 <li>3</li>12 <li>4</li>13 </ul>14 有序列表15 <ol type="a"><!--A i I 1-->16 <li>5</li>17 <li>6</li>18 <li>7</li>19 <li>8</li>20 </ol>21 自定义列表<!--dl dt（引导词） dd元素 3个哦-->22 <dl>23 <dt>引导1</dt><dd>内容1</dd>24 <dt>引导2</dt><dd>内容2</dd>25 <dt>引导3</dt><dd>内容3</dd>26 </dl>27 </body>28 </html>
表格只有行的概念。写表格从上到下，从左到右。<table><tr><td><td>
1，看有几行。每个行有几个元素
2，每个元素跨几行几列 rowspan=“” colspan=“”
1 <html> 2 <meta charset="utf-8"></meta> 3 <head> 4 </head> 5 <body bgcolor="red"text="yellow"> 6 <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">给李可发一个邮件</a> 7 <table border="2"> <!--此时要给表格加上边框，便于好看--> 8 <tr><td rowspan="2">1</td><td>2</td></tr> 9 <tr><td>3</td></tr>10 <tr><td colspan="2">4</td></tr>11 <tr><td>5</td><td>6</td></tr>12 </table>13 </body>14 </html>
属性：<table> bgcolor border bordercolor cellspacing cellpadding width height
<td> align vlign bgcolor width height colspan rowspan
<html> <meta charset="utf-8"></meta> <head> </head> <body bgcolor="red"text="yellow"> <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">给李可发一个邮件</a> <table border="2" width="200" height="100" cellspacing="20" cellpadding="20"> <!--此时要给表格加上边框，便于好看--> <tr><td rowspan="2">1</td><td>2</td></tr> <tr><td>3</td></tr> <tr><td colspan="2">4</td></tr> <tr><td>5</td><td>6</td></tr> </table> </body></html>
<html> <meta charset="utf-8"></meta> <head> </head> <body bgcolor="red"text="yellow"> <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">给李可发一个邮件</a> <table border="2" width="200" height="200" > <!--此时要给表格加上边框，便于好看--> <tr><td rowspan="2" align="right">1</td><td align="left" valign="bottom">2</td></tr> <tr><td align="left" valign="top">3</td></tr> <tr><td colspan="2">4</td></tr> <tr><td>5</td><td>6</td></tr> </table> </body></html><!--去掉table的cellspacing和cellpadding便于观察-->
th就是一个加粗的td。
5，表单标签（提交数据服务器交互）
1 <html> 2 <meta charset="utf-8"></meta> 3 <head> 4 </head> 5 <body bgcolor="red"text="yellow"> 6 <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">给李可发一个邮件</a> 7 <!--<form action="http://www.baidu.com" method="get""><!--提交账号密码，用post不显示在地址栏 enctype="multipart/form-data上传数据--> 8 <form method="post"><!--向本页提交，post不显示地址栏--> 9 姓名：<input type="text"name="uid"value=""></input><br/><!--http://www.baidu.com/?uid=dasd&pwd=dasd 如果想提交，要具有name value属性-->10 密码：<input type="password"name="pwd"value=""></input><br/>11 <input type="hidden" name="h” value="http://www.mamicode.com/1"></input><!--viewstate-->12 <textarea rows="5" cols="20">协议内容，法律法律协议内容，协议内容，法律法律协议内容，法律法律协议内容，法律法律协议内容，法律法律法律法律协议内容，法律法律协议内容，法律法律协议内容，法律法律协议内容，法律法律</textarea><br/>13 <!--textarea内的空格等都会显示出来 格式不变-->14 <input type="submit"></input>15 <input type="reset"></input>16 <input size="10" maxlength="2"/><!--最多允许输入2个字符-->17 <input readonly="readonly"/><!--此文本框不能输入-->18 </form>19 </body>20 </html>
btn imgbtn checkbox radio select option combobox listbox
1 <html> 2 <meta charset="utf-8"></meta> 3 <head> 4 </head> 5 <body bgcolor="red"text="yellow"> 6 <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">给李可发一个邮件</a> 7 <hr/> 8 <form method="get"> 9 <input type="text" name="n" value=""/>10 <input type="button"value="按钮"onclick="alert(‘弹出js脚本双引号内有单引号,最后有分号‘);"/>11 <input type="image" src="./"><!--图片按钮，type=image，src来源，/斜线一般.\windows系统文件，这里都可以，因为在本机模拟-->12 <!--图片标签，可以做地图，点击图片时会记录坐标，显示对应位置的放大图-->13 <hr/>14 15 <!--复选框,可以多选check-->16 <input type="checkbox"name="eat"/>吃17 <input type="checkbox"name="play"/>玩18 <input type="checkbox"name="sleep"/>睡19 <!--file:///C:/Users/Administrator/Desktop/文本标签.html?n=&eat=on&play=on&sleep=on,当checkbox没有value时，=on-->20 <!--如果有了value就会eat=value取代on-->21 <!--为了用户体验，点字的时候也选中对应复选框，需要1，为input 添加id，2，为文本添加label 使用for与input关联-->22 <input type="checkbox"name="dian"id="4"><label for="4">乐乐</label>23 <!--可以checked="checked"-->24 <hr/>25 26 <!--单选框，radio，注意要分组“name属性”，男女一组，国籍一组，若果没有分组，选不中-->27 <!--是radio而不是radiobutton，也可默认选中，可以label-->28 <!--如果有了value就会eat=value取代on-->29 <input type="radio"name="gender"/>男30 <input type="radio"name="gender"/>女31 <input type="radio"name="guojia" checked/>中国32 <input type="radio"name="guojia"/>外国33 34 <hr/>35 <!--下拉列表框，组合框combobox size为1的listbox36 列表框listbox37 没有input=listbox combobox 而只有select option38 提交name value时，写的位置！！！name放select value放option39 默认选中checked="checked"，而是selected40 -->41 <input typt="text" name="uuid" value=""/>@42 <select name="email">43 <option value="1">@163.com</option> <!--没有value时候。?n=&guojia=on&email=@163.com-->44 <option value="2" selected>@126.com</option>45 <option value="3">@139.com</option>46 </select>47 <hr/>48 <!--列表框，-->49 <input typt="text" name="u" value=""/>@50 <select name="email2"size="6" multiple="multiple">51 <option value="1">@163.com</option> <!--没有value时候。?n=&guojia=on&email=@163.com-->52 <option value="2">@126.com</option>53 <option value="3">@139.com</option>54 <option value="2">@1296.com</option>55 <option value="3">@72.com</option>56 <option value="2">@156.com</option>57 <option value="3">@139.com</option>58 <option value="2">@126.com</option>59 <option value="3">@189.com</option>60 <option value="2">@196.com</option>61 <option value="3">@1397.com</option>62 </select>63 <!--n=&guojia=on&uuid=&email=2&u=&email2=3&email2=2&email2=3-->64 65 <input type="submit" value="提交"/>66 </form>67 </body>68 </html>
6，frameset框架集。cols 和rows不能同使用。代替body，不能有body。
如果包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
就是不支持框架的时候，<noframe><body>不支持框架时显示的内容</body></noframe>
frame 能否移动边框 noresize。
做一个导航框架。
文件：
1，1 <html> 2 <head> 3 </head> 4 <frameset rows="100,*"> 5 <frame src="top.html"/> 6 <frameset cols="100,*"> 7 <frame src="left.html"/> 8 <frame src="right.html" name="main"> 9 </frameset>10 </frameset>11 </html>
2，1 <html>2 <head></head>3 <body>4 <a href="xianshi01.html" target="main" >链接1</a><br/>5 <a href="xianshi02.html" target="main">链接2</a>6 </body>7 </html>
3，1 <html> 2 <head> 3 </head> 4 <body>框架1的left页面中的链接到的1页面。要显示在frame name=“main” 的的框内</body> 5 </html> 6 7 <html> 8 <head> 9 </head>10 <body>框架的left页面中的链接到的2页面。要显示在frame name=“main” 的的框内</body>11 </html>
4，1 <html> 2 <head> 3 </head> 4 <body>开始显示的内容没用，此框架为左面框架中的网页中超链接的网页显示的地方</body> 5 </html> 6 7 8 <html> 9 <head></head>10 <body><center><font size="50">顶部</font></center></body>11 </html>
7，iframe嵌套框架，在body内，和frameset不同。
比如
1 <html>2 <head></head>3 <body><iframe src="http://www.baidu.com" name="weizhi" width="100%" height="200"></iframe>4 <br/>5 <a href="http://www.qq.com" target="weizhi">腾讯网，显示在上个框内</a>6 </body>7 </html>
HTML meta 文本 格式排版 链接图表 列表 表单 frame后台布局实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。