前端学习之HTML（1）

HTML标签学习

2018-10-31

记录一下学习的网站

http://www.w3school.com.cn

http://www.runoob.com/

 <!DOCTYPE html>
 <html>

 <head>
     <meta http-equiv="Content-Type" content="text/html" ;charset="gb2312" />
     <meta http-equiv="Content-Language" content="zh-cn" />
 </head>

 <body bgcolor="yellow">
     <h2>请看: 改变了颜色的背景。</h2>
     <p>普通的段落。</p>
     <b>This text is bold</b>
     <br />
     <strong>This text is strong</strong>
     <br />
     <big>This text is big</big>
     <br />
     <em>This text is emphasized</em>
     <br />
     <i>This text is italic</i>
     <br />
     <small>This text is small</small>
     <br />
     <pre>
         这是
         预格式文本。
         它保留了      空格
         和换行。
     </pre>
     <pre>
         for i range(1,10):
             print i
     </pre>

     <code>Computer code</code>
     <br />
     <kbd>Keyboard input</kbd>
     <br />
     <tt>Teletype text</tt>
     <br />
     <samp>Sample text</samp>
     <br />
     <var>Computer variable</var>
     <br />
     <p>
         <b>注释：</b>这些标签常用于显示计算机/编程代码。
     </p>

     <address>
         Visit <a href="https://www.baidu.com/">百度</a>
     </address>
     <p>
         创建超级链接
     </p>

     <abbr title="etcetera">etc.</abbr>
     <br />
     <acronym title="World Wide Web">WWW</acronym>
     <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

     <p>仅对于 IE 5 中的 acronym 元素有效。</p>

     <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

     <p>
         如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
     </p>

     <bdo dir="rtl">
         Here is some Hebrew text
     </bdo>
     <br/>
     <bdo dir="ltr">
             Here is some Hebrew text
     </bdo>
     <br/>
     <blockquote>
             这是长的引用。....................................................................................................................................
             这是长的引用。....................................................................................................................................
             这是长的引用。....................................................................................................................................
     </blockquote>
     <q>
         这是短的引用。
     </q>
     <p>
         使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
     </p>
     <p>
         <a href="#C4">查看 Chapter 4。</a>
     </p>
     <h2>Chapter 1</h2>
     <p>This chapter 1</p>
     <h2>Chapter 2</h2>
     <p>This chapter 2</p>
     <h2>Chapter 3</h2>
     <p>This chapter 3</p>
     <h2><a name="C4">Chapter 4</a></h2>
     <p>This chapter 4</p>
     <p>本例演示如何使用链接跳转至文档的另一个部分</p>

     <p>
         您也可以使用图像来作链接：
         <a href="https://www.baidu.com/">
             <img border="0" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1013001331,1929596129&fm=26&gp=0.jpg" />
         </a>
     </p>

     <a href="http://www.baidu.com/" target="_blank">Visit 百度</a>

     <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

     <p>被锁在框架中了吗？</p>
     <a href="https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E7%BE%8E%E5%A5%B3&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&cs=3522970723,1359610582&os=4178563129,976385697&simid=0,0&pn=4&rn=1&di=17209534320&ln=3700&fr=&fmq=1540972667401_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fdb%2Ff1%2Fec%2Fdbf1ec353b17dce848676e2fdb7f9bb4.jpg&rpstart=0&rpnum=0&adpicid=0"  target="_top">请点击这里！</a>
     <p>本例演示如何跳出框架，假如你的页面被固定在框架之内</p>
     <br/>

     <p>
         这是邮件链接：
         <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
     </p>

     <p>
         <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
     </p>

     <p>
         这是另一个 mailto 链接：
         <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
     </p>

     <p>
         <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
     </p>

     <br/>

 </body>

 </html>

部分代码例子引用于：http://www.w3school.com.cn