欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

前端学习之HTML（1）

程序员文章站 2022-07-05 17:27:12
HTML标签学习 2018-10-31 记录一下学习的网站 http://www.w3school.com.cn http://www.runoob.com/ 部分代码例子引用于：http://www.w3school.com.cn ......

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

上一篇： windows terminal配置

下一篇： 小程序自定义底部导航栏

推荐阅读