关于简单的Html一些知识

最新推荐文章于 2024-10-09 11:42:00 发布

JustDoIt_NotLast

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量570

点赞数 1

文章标签： html input keyboard download 浏览器编程

本文链接：https://blog.csdn.net/JustDoIt_NotLast/article/details/6570718

版权

最近弄一个项目，竟然还要写前台页面，好久没写了，匆匆看了些笔记，在此留下些比较容易忘记的Html知识。虽然说Html标签很简单，但是也是很容易忘记，特别像我这种常年写后台的，突然接手，还真是有点下不了手。

一、格式标签

1、文本格式标签：<b><big><i><strong><em><small><sub><sup>

例子：

<big>big</big> 效果：big

<b>b</b> 效果：b

<em>em</em> 效果：em

<small>small</small> 效果：small

<strong>strong<strong> 效果：strong

<i>i</i> 效果：i

2 * 3<sup>2</sup> 效果：2 * 3²

2 * 3<sub>2</sub> 效果：2 * 3₂

其实很多标签都是用不上的，还是有所了解会比较好的，以后用得着有地方找。

2、预格式文本：<pre><p>

pre标签有很好的编辑性，如果页面需要保留文本原来的空格和换行，特别是显示代码时，很管用。

p通常用在标题或者有类似需求的位置，主要功能是前后都自主跳一行。

例子：

<pre>会自主保留空格和

换行</pre>

效果：会自主保留空格和

换行

3、‘计算机输出’标签：<code><kbd><tt><samp><var>

这些标签有个共性就是保留空格和换行，与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>

                        效果：Computer code
                  Keyboard input
                  Teletype text
                  Sample text
                               Computer variable

注释：这些标签常用于显示计算机/编程代码。

4、架构标签 <frameset><frame>

<html>

</frameset>

</html>

5、链接标签 <a>链接<target>属性：

<a href="http://www.baidu.com/" target="_blank">百度</a>重新开启一页面

<a href="http://www.baidu.com/" target="_top">百度</a>覆盖

<name>属性:(锚)

<html>

<body>

<h2>女人1</h2>
<p>old woman</p>

<h2>女人2</h2>
<p>old woman</p>

<h2>女人3</h2>
<p>old woman</p>

<h2><a name="nr">女人4</a></h2>
<p>young woman</p>

<h2>女人5</h2>
<p>old woman</p>

</body>
</html>

邮箱链接：

<html>

<body>

                                       <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>

</body>
</html>

下载链接：

<a href="ftp://www.baidu.com/winzip.exe">Download WinZip</a>
7、列表：

<html>

<body>

                                          <h4>一个无序列表：</h4>
                                          <ul>
                                               <li>咖啡</li>
                                               <li>茶</li>
                                              <li>牛奶</li>
                                          </ul>

                                        </body>
                              </html>
                               <html>
                                        <body>

                                           <h4>一个有序列表：</h4>
                                           <ol>
                                                <li>咖啡</li>
                                              <li>茶</li>
                                                <li>牛奶</li>
                                           </ol>

</body>
</html>

             不同样式的有序列表：
                               <html>
                                         <body>

                                           <h4>小写字母列表：</h4>
                                           <ol type="a">
                                                 <li>苹果</li>
                                                 <li>香蕉</li>
                                                <li>柠檬</li>
                                                 <li>桔子</li>
                                          </ol>

                                          <h4>罗马字母列表：</h4>
                                          <ol type="I">
                                                 <li>苹果</li>
                                                <li>香蕉</li>
                                                <li>柠檬</li>
                                                <li>桔子</li>
                                          </ol>

                                          <h4>小写罗马字母列表：</h4>
                                          <ol type="i">
                                                 <li>苹果</li>
                                                 <li>香蕉</li>
                                                 <li>柠檬</li>
                                                 <li>桔子</li>
                                          </ol>

                                        </body>
                              </html>
               自定义列表：

<html>

<body>

<h2>一个定义列表：</h2>

                                         <dl>
                                         <dt>计算机</dt>
                                              <dd>用来计算的仪器 ... ...</dd>
                                         <dt>显示器</dt>
                                              <dd>以视觉方式显示信息的装置 ... ...</dd>
                                         </dl>

                                      </body>
                              </html>
         8、下拉框标签域：

<html>

<body>

                                        <form>
                                                 <select name="cars">
                                                 <option value="volvo">Volvo</option>
                                                <option value="saab">Saab</option>
                                                 <option value="fiat">Fiat</option>
                                                 <option value="audi">Audi</option>
                                                 </select>
                                         </form>

                                        </body>
                              </html>
          9、带边框的域：

<html>

<body>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>
</html>

10、重定向

                                          <title>无</title>
                                         </head>
                                         <body>
                                                  <p>
                                                 对不起。我们已经搬家了。您的 URL 是 <a href="http://www.baidu.com">www.baidu.com</a>
                                                  </p>

<p>您将在 5 秒内被重定向到新的地址。</p>

                                                  <p>如果超过 5 秒后您仍然看到本消息，请点击上面的的链接。</p>
                                         </body>
                               </html>