• 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汉子海岸的拉了大苏打1256165165
    11     </body>
    12 </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的优化而已。

     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>&nbsp&nbsp&nbsp&nbsp  <!--&nbsp空格-->
    16     <i>一名</i>&nbsp&nbsp&nbsp&nbsp
    17     <tt>大学生</tt>&nbsp&nbsp&nbsp
    18     就是&nbsp&nbsp
    19     <u>大学生</u><br/>&nbsp&nbsp&nbsp&nbsp&nbsp<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>
    逻辑字体没用主要SEO

     

    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>
    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,列表与表格(显示数据

     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 无序列表
     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>
    ul ol dl(dt dd)

     表格只有行的概念。写表格从上到下,从左到右。<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>
    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,表单标签(提交数据服务器交互)

     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="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>
    form hidden submit reset readonly textarea maxlength

     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的listbox
    36                     列表框listbox
    37     没有input=listbox combobox  而只有select  option
    38     提交name value时,写的位置!!!name放select   value放option
    39     默认选中checked="checked",而是selected
    40     -->
    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>
    布局.html  在这里的右框架 写上name
    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>
    left.html  在这里的超连接上写上target
    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>
    xianshi01.html xianshi02.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>
    right.html top.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>
    iframe将原来显示百度的框,点击下面的链接,在此框显示腾讯网

  • 相关阅读:
    layer满屏/禁止最大化最小化 可以做选择框使用
    layer关闭弹窗
    导出excel
    linux中安装软件的集中方法
    nginx负载均衡
    zookeeper部署搭建
    git 分支合并处理
    前端框架
    云计算基本概念
    Android 单元测试四大组件Activity,Service,Content Provider , Broadcast Receiver
  • 原文地址:https://www.cnblogs.com/leee/p/4263540.html
Copyright © 2020-2023  润新知