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

随机推荐

spark数据倾斜
数据倾斜的主要问题在于,某个分区数量很巨大,在做map运算的时候,将会发生别的分区task很快计算完成,但是某几个分区task的计算成为了系统的瓶颈,明显超过其他分区时间: 1.方案:Kafka的 ...
【appium】keyevent的keycode
方法1 AppiumDriver实现了在上述功能,代码如下(java版本) driver.sendKeyEvent(66); 方法2 HashMap<String, Integer> ke ...
码出高效，阿里巴巴JAVA开发手册1.4.0
码出高效,阿里巴巴JAVA开发手册1.4.0阅读笔记一.编程规约(三) 代码格式// 关键词if与括号之间必须有一个空格,括号内的f与左括号,0与右括号不需要空格 if (flag == 0) { ...
关于 eclipse startexplorer插件快速打开文件夹
转自:http://basti1302.github.io/startexplorer/ Just drag-and-drop the button to the Eclipse menu bar t ...
【Spring学习笔记-MVC-11--】Spring MVC之表单标签
一.使用方法 1.要使用Spring MVC提供的表单标签,首先需要在视图页面添加: <%@ taglib prefix="form" uri="http://ww ...
【Spring学习笔记-MVC-3】SpringMVC返回Json数据-方式1
<Spring学习笔记-MVC>系列文章,讲解返回json数据的文章共有3篇,分别为: [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://www ...
ASP.NET Web Pages：目录
ylbtech-.Net-ASP.NET Web Pages:目录 1. 官网返回顶部 1. https://www.asp.net/web-pages 2. https://msdn.microso ...
杂项：Unity3D
ylbtech-杂项:Unity3D Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具 ...
读取 Excel 之 NPOI
HSSFWorkbook hssfworkbook; void InitializeWorkbook(string path) { //read the template via FileStream ...
1012 The Best Rank （25 分）
1012 The Best Rank (25 分) To evaluate the performance of our first year CS majored students, we cons ...

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

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

随机推荐

热门专题

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

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