HTML,Code片段,代码实例,代码示例,代码片段库

HTML Robots.txt隐藏目录而不显示目录名称

# robots.txt for http://www.apimagazine.com.au/
User-agent: *
Disallow: /as
Disallow: /ca
Disallow: /cg
Disallow: /do
Disallow: /la
Disallow: /ma
Disallow: /op
Disallow: /st
Disallow: /te

HTML HTML 4 Doctype

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
&lt;html&gt;....

HTML 设置Iphone视口 - MetaTag

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,user-scalable=no&quot; /&gt;

HTML 状态栏

&lt;body&gt;

    &lt;style type=&quot;text/css&quot;&gt;
      .ProgressBar     { width: 13em; border: 1px solid black; background: #ffffff; height: 1.35em; display: block; }
      .ProgressBarText { position: absolute; font-size: 0.75em; width: 17em; text-align: center; font-weight: bold; }
      .ProgressBarFill { height: 100%; background: #a0c43f; display: block; overflow: visible; }
    &lt;/style&gt;



&lt;div class=&quot;ProgressBar&quot;&gt;
      &lt;div class=&quot;ProgressBarText&quot;&gt;Status bar 1&lt;/div&gt;

      &lt;div class=&quot;ProgressBarFill&quot; style=&quot;width: 85%;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;div class=&quot;ProgressBar&quot;&gt;
      &lt;div class=&quot;ProgressBarText&quot;&gt;Status bar 2&lt;/div&gt;

      &lt;div class=&quot;ProgressBarFill&quot; style=&quot;width: 92%;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;div class=&quot;ProgressBar&quot;&gt;
      &lt;div class=&quot;ProgressBarText&quot;&gt;Status bar 3&lt;/div&gt;

      &lt;div class=&quot;ProgressBarFill&quot; style=&quot;width: 75%;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;div class=&quot;ProgressBar&quot;&gt;
      &lt;div class=&quot;ProgressBarText&quot;&gt;Status bar 4&lt;/div&gt;

      &lt;div class=&quot;ProgressBarFill&quot; style=&quot;width: 60%;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;&lt;/html&gt;

HTML XSS

&quot; onmouseover=&quot;alert('hacker')&quot; &lt;!-- in email or url field --&gt;

&lt;image src=javascript:alert('ok')&gt; &lt;!-- in textarea --&gt;

&lt;script&gt;alert('Hacking by hacker')&lt;/script&gt;

&lt;script&gt;alert(document.cookie)&lt;/script&gt;

HTML 使IE8像IE7一样

&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; /&gt;

HTML 元标记标题

&lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;
&lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;
&lt;meta name=&quot;revisit-after&quot; content=&quot;28 days&quot; /&gt;
&lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;
&lt;meta name=&quot;distribution&quot; content=&quot;Global&quot; /&gt;
&lt;meta name=&quot;robots&quot; content=&quot;all&quot; /&gt;

HTML 隐藏即图像工具栏

&lt;meta http-equiv=&quot;imagetoolbar&quot; content=&quot;no&quot; /&gt;

HTML HTML块级元素指南

&lt;div id=&quot;block-elements&quot;&gt;
        &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
        turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
        amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
        est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
        Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
        fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
        lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
        dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
        eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
        facilisis luctus, metus&lt;/p&gt;
        &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
        turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
        amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
        est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
        Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
        fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
        lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
        dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
        eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
        facilisis luctus, metus&lt;/p&gt;
        &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
        turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
        amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
        est. Mauris placerat eleifend leo.&lt;/p&gt;
        &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
        turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
        amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
        est. Mauris placerat eleifend leo.&lt;/p&gt;
        &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
        turpis egestas.&lt;/p&gt;
        &lt;div&gt;
            This is a &lt;code&gt;div&lt;/code&gt; element. Lorem ipsum dolor sit amet, elit, sed diam nonummy
            nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
            tincidunt ut laoreet dolore magna aliquam erat volutpat. (End of &lt;code&gt;div&lt;/code&gt;.)
        &lt;/div&gt;
        &lt;blockquote&gt;
            &lt;p&gt;This is a block quotation containing a &lt;em&gt;single&lt;/em&gt; paragraph. Lorem ipsum
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
            ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
        &lt;/blockquote&gt;
        &lt;p&gt;The following contains address information about the author, in an &lt;code&gt;address&lt;/code&gt;
        element and may be used by authors to supply contact information for a document or a major part of a document such as a form. 
        This element often appears at the beginning or end of a document.&lt;/p&gt;
        &lt;address class=&quot;vcard&quot;&gt;
            &lt;a href=&quot;http://leerjohnson.com&quot;&gt;Lee R. Johnson&lt;/a&gt; &lt;br /&gt;
            &lt;a class=&quot;tel&quot; href=&quot;voice:+15038516041&quot;&gt;+1 503 851 6041&lt;/a&gt; | 
	        &lt;a class=&quot;email&quot; href=&quot;mailto:design@leerjohnson.com&quot;&gt;design@leerjohnson.com&lt;/a&gt;&lt;br /&gt;
            &lt;span class=&quot;adr&quot;&gt;
	            &lt;span class=&quot;street-address&quot;&gt;3454 Ipsum Lane N.E.&lt;/span&gt; |
	            &lt;span class=&quot;locality&quot;&gt;Kiezer&lt;/span&gt;, &lt;span class=&quot;region&quot;&gt;Oregon&lt;/span&gt; &lt;span class=&quot;postal-code&quot;&gt;97303&lt;/span&gt; |
	            &lt;span class=&quot;country-name&quot;&gt;United States&lt;/span&gt;
            &lt;/span&gt;    
        &lt;/address&gt;
        
        &lt;p&gt;This next bit shows that PREformatted text is working.&lt;/p&gt;
        &lt;pre&gt;1
 2
  3
   4
    5
&lt;/pre&gt;
    &lt;/div&gt;

HTML YUI 2.7 HTML Skeleton

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML Basic 1.1//EN&quot;
	&quot;http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;application/xhtml+xml; charset=UTF-8&quot; /&gt;
    &lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;max-age=200&quot; /&gt;
    &lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;
    &lt;link rel=&quot;icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;
    &lt;link rel=&quot;author&quot; href=&quot;http://design.leerjohnson.com&quot; /&gt;
    &lt;title&gt;YUI 2.7 Document Template&lt;/title&gt;
    &lt;!-- CSS and Script Tags Configured at:
        http://developer.yahoo.com/yui/articles/hosting/?autocomplete#configure --&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/base/base-min.css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!--    #doc = 750px width, centered
            #doc2 = 950px width, centered
            #doc3 = 100% width 
            #doc4 = 974px width, centered 
        Grids: Templates (yui-tâ€™s)
            .yui-t1 160 on left
            .yui-t2 180 on left
            .yui-t3 300 on left
            .yui-t4 180 on right
            .yui-t5 240 on right
            .yui-t6 300 on right
    --&gt;
    &lt;div id=&quot;doc3&quot; class=&quot;yui-t6&quot;&gt;
        &lt;!-- overall document wrapper --&gt;
        &lt;div id=&quot;hd&quot;&gt;
            &lt;!--header / masthead--&gt;
            &lt;h1&gt;YUI 2.7 Document Template&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div id=&quot;â€bdâ€&quot;&gt;
            &lt;!--body--&gt;
            &lt;div id=&quot;yui-main&quot;&gt;
                &lt;div class=&quot;yui-b&quot;&gt;
                    &lt;!--primary--&gt;
                    &lt;!--
                    Grids: Nesting Grids (yui-gâ€™s)
                    .yui-g 1/2, 1/2
                    .yui-gb 1/3, 1/3, 1/3
                    .yui-gc 2/3, 1/3
                    .yui-gd 1/3, 2/3
                    .yui-ge 3/4, 1/4
                    .yui-gf 1/4, 3/4                
                !--&gt;
                    &lt;div class=&quot;yui-g&quot;&gt;
                        &lt;div class=&quot;yui-u first&quot;&gt;
                            &lt;h2&gt;Headings&lt;/h2&gt;
                            
                                &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat. &lt;/p&gt;
                               
                            
                        &lt;/div&gt;
                        &lt;div class=&quot;yui-u&quot;&gt;
                             &lt;h2&gt;Headings&lt;/h2&gt;
                        
                            &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                            euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
                            tincidunt ut laoreet dolore magna aliquam erat volutpat. &lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;yui-b&quot;&gt;
                &lt;!--secondary--&gt;
                &lt;h3&gt;Helpful links and tools&lt;/h3&gt;
                &lt;ul id=&quot;nav&quot;&gt;
                    &lt;li&gt;&lt;a href=&quot;http://developer.yahoo.com/yui/grids/builder/&quot; &gt;The YUI Grids Builde&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;http://developer.yahoo.com/yui/articles/hosting/?autocomplete#configure&quot;&gt;YUI Dependency Configurator:&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;http://html-ipsum.com/&quot;&gt;HTML Ipsum&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;http://snipplr.com/users/LeeRJohnson/&quot; &gt;Snipplr&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;http://www.typetester.org/&quot; &gt;Typetester&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id=&quot;ft&quot;&gt;
            &lt;!--footer--&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;