前端学习之HTML(1)
HTML标签学习
2018-10-31
记录一下学习的网站
http://www.w3school.com.cn
http://www.runoob.com/
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html" ;charset="gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 </head> 8 9 <body bgcolor="yellow"> 10 <h2>请看: 改变了颜色的背景。</h2> 11 <p>普通的段落。</p> 12 <b>This text is bold</b> 13 <br /> 14 <strong>This text is strong</strong> 15 <br /> 16 <big>This text is big</big> 17 <br /> 18 <em>This text is emphasized</em> 19 <br /> 20 <i>This text is italic</i> 21 <br /> 22 <small>This text is small</small> 23 <br /> 24 <pre> 25 这是 26 预格式文本。 27 它保留了 空格 28 和换行。 29 </pre> 30 <pre> 31 for i range(1,10): 32 print i 33 </pre> 34 35 <code>Computer code</code> 36 <br /> 37 <kbd>Keyboard input</kbd> 38 <br /> 39 <tt>Teletype text</tt> 40 <br /> 41 <samp>Sample text</samp> 42 <br /> 43 <var>Computer variable</var> 44 <br /> 45 <p> 46 <b>注释:</b>这些标签常用于显示计算机/编程代码。 47 </p> 48 49 <address> 50 Visit <a href="https://www.baidu.com/">百度</a> 51 </address> 52 <p> 53 创建超级链接 54 </p> 55 56 <abbr title="etcetera">etc.</abbr> 57 <br /> 58 <acronym title="World Wide Web">WWW</acronym> 59 <p>在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。</p> 60 61 <p>仅对于 IE 5 中的 acronym 元素有效。</p> 62 63 <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p> 64 65 <p> 66 如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl); 67 </p> 68 69 <bdo dir="rtl"> 70 Here is some Hebrew text 71 </bdo> 72 <br/> 73 <bdo dir="ltr"> 74 Here is some Hebrew text 75 </bdo> 76 <br/> 77 <blockquote> 78 这是长的引用。.................................................................................................................................... 79 这是长的引用。.................................................................................................................................... 80 这是长的引用。.................................................................................................................................... 81 </blockquote> 82 <q> 83 这是短的引用。 84 </q> 85 <p> 86 使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。 87 </p> 88 <p> 89 <a href="#C4">查看 Chapter 4。</a> 90 </p> 91 <h2>Chapter 1</h2> 92 <p>This chapter 1</p> 93 <h2>Chapter 2</h2> 94 <p>This chapter 2</p> 95 <h2>Chapter 3</h2> 96 <p>This chapter 3</p> 97 <h2><a name="C4">Chapter 4</a></h2> 98 <p>This chapter 4</p> 99 <p>本例演示如何使用链接跳转至文档的另一个部分</p> 100 101 102 103 <p> 104 您也可以使用图像来作链接: 105 <a href="https://www.baidu.com/"> 106 <img border="0" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1013001331,1929596129&fm=26&gp=0.jpg" /> 107 </a> 108 </p> 109 110 <a href="http://www.baidu.com/" target="_blank">Visit 百度</a> 111 112 <p>如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。</p> 113 114 <p>被锁在框架中了吗?</p> 115 <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> 116 <p>本例演示如何跳出框架,假如你的页面被固定在框架之内</p> 117 <br/> 118 119 <p> 120 这是邮件链接: 121 <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> 122 </p> 123 124 <p> 125 <b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。 126 </p> 127 128 <p> 129 这是另一个 mailto 链接: 130 <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> 131 </p> 132 133 <p> 134 <b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。 135 </p> 136 137 <br/> 138 139 140 </body> 141 142 </html>
部分代码例子引用于:http://www.w3school.com.cn