HTML meta 文本格式排版链接图表列表表单 frame后台布局实例

meta标签

content属性必须和http-equiv或者name属性一起使用

http-equiv属性，就是http当量，用于和服务器发送数据前的提交交互使用。（另层含义这个当量在浏览器和服务器同价值，就是当量，采用的http协议）

服务器代码response.ContentType=“text/html”，先和浏览器提前交互。

比如<meta charset="utf-8"></meta>等价<meta http-equiv="content-type" content="text/html;charset=utf-8">

网站关键字网站描述网站定时刷新指向网站缓存处理

 <html>

     <meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--    <meta charset="utf-8"></meta>-->

     <meta name="keywords" content="form 表单"/>

     <meta name="description" content="最详细的表单描述讲解 表单原理 提交"/>

     <meta http-equiv="refresh" content="3;url=http://www.baidu.com" />

     <meta http-equiv="cache-control" content="no-cache"/>

     <head>

     </head>

     <body bgcolor="red"text="yellow">

     hanzi汉子海岸的拉了大苏打1256165165

     </body>

 </html>

参考来源：

http://www.w3school.com.cn/tags/tag_meta.asp

http://blog.csdn.net/boat1980/article/details/2142291

<标签属性=“” 属性=“” 属性=“”></标签>

在网页中显示出一个标签。比如<font>字</font>，在html中就要写&ltfont&gt字&ltfont&gt

显示商标® &reg 版权© &copy 引号“ &quat 连字符& &amp空格 &nbsp

文本标签（字体）

1，物理字体2，逻辑字体,主要的作用为SEO的优化而已。

 <!--<b><b/>加粗

 <i><i/>倾斜

 <tt><tt/>打字机样本

 <u><u/>加下划线

 <sup><sup/>指数标签

 <sub><sub/>脚标签

 <s><s/>加删除线

 -->

 <!--我犯错：封闭标签是/标签，而不是标签/，单个标签是标签/-->

 <html>

     <meta charset="utf-8"></meta><!--此时gb2312字符集不对。utf-16可以utf-32不行-->

     <head>

     </head>

     <body>

     <b>我是</b>&nbsp&nbsp&nbsp&nbsp  <!--&nbsp空格-->

     <i>一名</i>&nbsp&nbsp&nbsp&nbsp

     <tt>大学生</tt>，&nbsp&nbsp&nbsp

     就是&nbsp&nbsp

     <u>大学生</u><br/>&nbsp&nbsp&nbsp&nbsp&nbsp<br/>

     我知道一个函数：f<sub>n</sub>=3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup>，

     不是<s>小学生<s/>

     </body>

 </html>

字体标签物理字体

 <!--<strong></strong>粗体，相当于<b></b>

 <code></code>文本代码

 <samp></samp>样本代码

 <kbd></kbd>键盘文本

 <var></var>定义文本中变量部分

 <dfn></dfn>定义定义项目

 <cite><cite>定义引用

 <small></small>小号文本

 <big></big>大好文本-->

 <html>

     <meta charset="utf-8"></meta><!--此时gb2312字符集不对。utf-16可以utf-32不行-->

     <head>

     </head>

     <body>

     逻辑字体，没什么用处，主要SEO<br/>

     <em>斜体</em><br/>

     <strong>粗体</strong><br/>

     <code>文本代码system.web</code><br/>

     <samp>样本代码system.web</samp><br/>

     <kbd>键盘文本123dfgd</kbd><br/>

     <var>定义文本中变量部分</var><br/>

     <dfn>定义定义项目</dfn><br/>

     <cite>定义引用dada<cite><br/>

     <small>小号文本sadsdsa</small><br/>

     <big>打好文本sadassd</big><br/>

     </body>

 </html>

逻辑字体没用主要SEO

2，格式标签（文本排版分割）

 <!--<br/>换行

 <hr/>水平线size width  align noshade color

 <p></p>段落 align=left/center/right

 <center></center>

 <pre></pre>-->

 <html>

     <meta charset="utf-8"></meta><!--此时gb2312字符集不对。utf-16可以utf-32不行-->

     <head>

     </head>

     <body>

     <h1 align="center">诗歌</h1>   <!--align靠左右中对齐，在p和h1标签都可以-->

     <hr color="red" size="20px" width="50%" align="right"/>

     <hr size="20px" width="50%" align="left" noshade="noshade"/>

     <center><p>床前米单双打</p><p>一试的撒湖大</p><p>爱的计算大的</p><p>大带鱼大神的</p></center>

     <p align="right">-----李可2015-1-31</p>

 <pre>

         左8个空格

 右8个空格

 有换行

 显示也是按照此显示

 </pre>

     </body>

 </html>

h hr p center pre 属性

3，链接接与图表（跳转锚定显示图片）

target=“_blank”用的最多。

<a name="m">跳到这需要名字</a> <a href="#m">跳转</a> 成对存在

<a href="#">跳转顶部</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>

_blank 跳锚定发邮件 js

/斜杠，除了操作系统文件都是斜杠

\反斜杠，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中的文本颜色-->

text link avlink bgcolor backgound

4，列表与表格（显示数据）

 <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>

 无序列表

     <ul type="square"><!--type不是style哦 在ul内加=“disk" "circle"-->

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     </ul>

 有序列表

     <ol type="a"><!--A  i  I -->

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     </ol>

 自定义列表<!--dl dt（引导词） dd元素 3个哦-->

 <dl>

 <dt>引导1</dt><dd>内容1</dd>

 <dt>引导2</dt><dd>内容2</dd>

 <dt>引导3</dt><dd>内容3</dd>

 </dl>

     </body>

 </html>

ul ol dl（dt dd）

表格只有行的概念。写表格从上到下，从左到右。<table><tr><td><td>

1，看有几行。每个行有几个元素

2，每个元素跨几行几列 rowspan=“” colspan=“”

 <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">  <!--此时要给表格加上边框，便于好看-->

         <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>

rowspan colspan table border

属性：<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>

table cellspacing cellpadding

<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便于观察-->

td align valign

th就是一个加粗的td。

5，表单标签（提交数据服务器交互）

 <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>

     <!--<form action="http://www.baidu.com" method="get""><!--提交账号密码，用post不显示在地址栏  enctype="multipart/form-data上传数据-->

     <form method="post"><!--向本页提交，post不显示地址栏-->

     姓名：<input type="text"name="uid"value=""></input><br/><!--http://www.baidu.com/?uid=dasd&pwd=dasd 如果想提交，要具有name value属性-->

     密码：<input type="password"name="pwd"value=""></input><br/>

     <input type="hidden" name="h” value="1"></input><!--viewstate-->

     <textarea rows="5" cols="20">协议内容，法律法律协议内容，协议内容，法律法律协议内容，法律法律协议内容，法律法律协议内容，法律法律法律法律协议内容，法律法律协议内容，法律法律协议内容，法律法律协议内容，法律法律</textarea><br/>

     <!--textarea内的空格等都会显示出来 格式不变-->

     <input type="submit"></input>

     <input type="reset"></input>

     <input size="10" maxlength="2"/><!--最多允许输入2个字符-->

     <input readonly="readonly"/><!--此文本框不能输入-->

     </form>

     </body>

 </html>

form hidden submit reset readonly textarea maxlength

btn imgbtn checkbox radio select option combobox listbox

 <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>

     <hr/>

     <form method="get">

     <input type="text" name="n" value=""/>

     <input type="button"value="按钮"onclick="alert('弹出js脚本双引号内有单引号,最后有分号');"/>

     <input type="image" src="./"><!--图片按钮，type=image，src来源，/斜线一般.\windows系统文件，这里都可以，因为在本机模拟-->

     <!--图片标签，可以做地图，点击图片时会记录坐标，显示对应位置的放大图-->

     <hr/>

     <!--复选框,可以多选check-->

     <input type="checkbox"name="eat"/>吃

     <input type="checkbox"name="play"/>玩

     <input type="checkbox"name="sleep"/>睡

     <!--file:///C:/Users/Administrator/Desktop/文本标签.html?n=&eat=on&play=on&sleep=on,当checkbox没有value时，=on-->

     <!--如果有了value就会eat=value取代on-->

     <!--为了用户体验，点字的时候也选中对应复选框，需要1，为input 添加id，2，为文本添加label 使用for与input关联-->

     <input type="checkbox"name="dian"id="4"><label for="4">乐乐</label>

     <!--可以checked="checked"-->

     <hr/>

     <!--单选框，radio，注意要分组“name属性”，男女一组，国籍一组，若果没有分组，选不中-->

     <!--是radio而不是radiobutton，也可默认选中，可以label-->

     <!--如果有了value就会eat=value取代on-->

     <input type="radio"name="gender"/>男

     <input type="radio"name="gender"/>女

     <input type="radio"name="guojia" checked/>中国

     <input type="radio"name="guojia"/>外国

     <hr/>

     <!--下拉列表框，组合框combobox        size为1的listbox

                     列表框listbox

     没有input=listbox combobox  而只有select  option

     提交name value时，写的位置！！！name放select   value放option

     默认选中checked="checked"，而是selected

     -->

     <input typt="text" name="uuid" value=""/>@

     <select name="email">

     <option value="1">@163.com</option>   <!--没有value时候。?n=&guojia=on&email=@163.com-->

     <option value="2" selected>@126.com</option>

     <option value="3">@139.com</option>

     </select>

     <hr/>

     <!--列表框，-->

     <input typt="text" name="u" value=""/>@

     <select name="email2"size="6" multiple="multiple">

     <option value="1">@163.com</option>   <!--没有value时候。?n=&guojia=on&email=@163.com-->

     <option value="2">@126.com</option>

     <option value="3">@139.com</option>

     <option value="2">@1296.com</option>

     <option value="3">@72.com</option>

     <option value="2">@156.com</option>

     <option value="3">@139.com</option>

     <option value="2">@126.com</option>

     <option value="3">@189.com</option>

     <option value="2">@196.com</option>

     <option value="3">@1397.com</option>

     </select>

     <!--n=&guojia=on&uuid=&email=2&u=&email2=3&email2=2&email2=3-->

     <input type="submit" value="提交"/>

     </form>

     </body>

 </html>

6，frameset框架集。cols 和rows不能同使用。代替body，不能有body。

如果包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

就是不支持框架的时候，<noframe><body>不支持框架时显示的内容</body></noframe>

frame 能否移动边框 noresize。

做一个导航框架。

文件：

1，

 <html>

     <head>

     </head>

     <frameset rows="100,*">

         <frame src="top.html"/>

         <frameset cols="100,*">

             <frame src="left.html"/>

             <frame src="right.html" name="main">

         </frameset>

     </frameset>

 </html>

布局.html 在这里的右框架写上name

2，

 <html>

 <head></head>

 <body>

 <a href="xianshi01.html" target="main" >链接1</a><br/>

 <a href="xianshi02.html" target="main">链接2</a>

 </body>

 </html>

left.html 在这里的超连接上写上target

3，

 <html>

     <head>

     </head>

     <body>框架1的left页面中的链接到的1页面。要显示在frame name=“main” 的的框内</body>

 </html>

 <html>

     <head>

     </head>

     <body>框架的left页面中的链接到的2页面。要显示在frame name=“main” 的的框内</body>

 </html>

xianshi01.html xianshi02.html

4，

 <html>

     <head>

     </head>

     <body>开始显示的内容没用，此框架为左面框架中的网页中超链接的网页显示的地方</body>

 </html>

 <html>

 <head></head>

 <body><center><font size="50">顶部</font></center></body>

 </html>

right.html top.html 这里没大用，只是开始显示的东西

7，iframe嵌套框架，在body内，和frameset不同。

比如

 <html>

 <head></head>

 <body><iframe src="http://www.baidu.com" name="weizhi" width="100%" height="200"></iframe>

 <br/>

 <a href="http://www.qq.com" target="weizhi">腾讯网，显示在上个框内</a>

 </body>

 </html>

iframe将原来显示百度的框，点击下面的链接，在此框显示腾讯网

HTML meta 文本格式排版链接图表列表表单 frame后台布局实例的更多相关文章

BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)
前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...
4 htmlCSS&图像&表格&列表&表单&框架&颜色
CSS: Cascading Style Sheeet 层叠样式表 cascadig:瀑布 html:网页的结构 css:网页的外观 JavaScript:网页的动作 CSS的使用方式: 内联样 ...
python正则-字符串处理，主要用于处理请求参数格式为application/x-www-form-urlencoded的表单数据
#当提交的表单数据格式为application/x-www-form-urlencoded,直接从浏览器复制出来的格式是str_lin(chrome,也是最常见的)或者str_in2(火狐)这两种格式 ...
Vue 实例之事件操作样式（文本、事件、属性、表单、条件）指令
Vue 可以独立完成前后端分离式web项目的JavaScript框架三大主流框架之一: Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲 ...
点击含下拉菜单的列表/表单按钮：通过JS创建虚拟按钮并点击
${JsCode} | Get Element Attribute | XPATH=//table[@class='mnubar']//tr//td//span[text()='${MenuArr[0 ...
使用mysqldump以分隔文本格式转储数据
1.使用mysqldump以分隔文本格式转储数据 mysqldump --tab=/tmp/data --fields-terminated-by=, --fields-enclosed-by=&qu ...
python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
serializeArray()获取的表单参数转化成json格式的对象
目标:将serializeArray()这个方法获取的表单对象转换成json格式 function serializeObject(){ //easyui提交表单 $('#form').form( ...

随机推荐

访问php网站报500错误时显示错误显示
调试时可在访问的php文件开头输入 ini_set("display_errors", "On"); error_reporting(E_ALL | E_STR ...
安全测试chicklist
垃圾收集器之：CMS收集器
HotSpot JVM的并发标记清理收集器(CMS收集器)的主要目标就是:低应用停顿时间.该目标对于大多数交互式应用很重要,比如web应用.在我们看一下有关JVM的参数之前,让我们简要回顾CMS收集器 ...
SqlBulkCopy 快速插入数据
[转]本文来自http://msdn.microsoft.com/zh-cn/library/system.data.sqlclient.sqlbulkcopy(v=vs.80).aspx 此代码用于 ...
Quectel module USB driver for linux
The environment settings are as follows: 1. ubuntu 14.04 , linux kernel: linux-lts-xenial-4.4.0 2. m ...
golang web框架 beego 学习（三） beego获取参数
直接上常用的例子吧: A: 获取URL中的参数 router func init() { beego.Router("/task/?:id/?:name", &co ...
关闭浏览器时的友情提醒jQuery写法
$(window).bind('beforeunload', function () { return '您确定退出该页面吗?'; }); 支持以下浏览器(对号表示支持,叉号表示不支持.):
unity3d中gameObject捕获鼠标点击
gameObject需加上Colider 一.在update中(推荐) void Update () { //左键 )) disFlag = true; //右键 )) disFlag = true; ...
php 数组函数实例
数组的概念数组(array)是 PHP 中一个非常重要的概念,我们可以把数组看做一系列类似的数据的集合,实际上数组是一个有序图. PHP 还提供了超过 70 个内建函数来操作数组. 由于数组在php ...
Openstack kvm win7镜像制作
本文地址http://www.cnblogs.com/tcicy/p/7790956.html 网上找了很多为openstack制作win7镜像的文章,总是不成功自己写一下,以便大家查看. 我使用c ...

HTML meta 文本 格式排版 链接图表 列表 表单 frame后台布局实例

HTML meta 文本 格式排版 链接图表 列表 表单 frame后台布局实例的更多相关文章

随机推荐

热门专题

HTML meta 文本格式排版链接图表列表表单 frame后台布局实例

HTML meta 文本格式排版链接图表列表表单 frame后台布局实例的更多相关文章