HTML学习小记--No.2

最新推荐文章于 2025-11-25 15:30:00 发布

原创最新推荐文章于 2025-11-25 15:30:00 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #学习 #前端

HTML学习小记专栏收录该内容

4 篇文章

订阅专栏

这篇文章详细展示了HTML的各种基础元素，包括段落、颜色和边距控制、链接设置、键盘和代码输入表示、按钮创建、变量声明、空格处理、地址格式、首字母缩写和全首字母缩写、从右到左的文本方向、文本插入删除、图片链接、页面内部跳转、邮件链接以及表格和列表的构建。同时，还包括了表单元素如文本输入和密码字段的使用。

<p style="background-color:lightsteelblue">段落</p>
<p style="color:navy;margin-left:20px">另一个段落,显示水平线</p>
<hr />
<a href="https://www.baidu.com">这是一个链接使用了 href 属性</a>
<a href="https://www.baidu.com" target="_blank"> 新网页</a>
<a href="https://www.baidu.com" target="_top"> 网页</a><!--同效果一-->

2. 输入输出

<code>计算机输出</code>
<kbd>键盘输入</kbd>

3. 按钮

<button>按钮</button>

4. 变量

<swamp>定义计算机样本。

<swamp>代码</swamp>
<var>计算机变量</var>

5. 空格处理

<pre>aaa
           bbb   cc</pre><!--空格-->

6. 地址

<address>
        <!--地址-->
        written by<a href="xxx">Run&Win</a>.<br />
        visit us at:<br />
        。。。<br />
        。。。<br />
</address>

7. 首字母缩写

<!--缩写-->
    <abbr title="etcetera">etc.</abbr>
    <br />
    <acronym title="World Wide Web">WWW</acronym><!--首字母缩写-->

8. 从右到左显示

<bdo dir="rtl">右到左abcd</bdo>

9. 插入删除

<p>My favorite color is <del>blue</del> <ins>red</ins></p><!--删除插入-->
<p>wwf is:<q>AAAAA</q>景区</p><!--引号-->

10. 图片链接

<p>
   创建图片链接:
    <a href="http://www.runoob.com">
        <img border="1" src="smiley.gif" alt="HTML 教程" width="32" height="32">
    </a>
</p>

<p>
   无边框的图片链接:
   <a href="http://www.runoob.com">
       <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
   </a>
</p>

11. 跳到指定内容

<a href="#c4">查看第四节</a>
<h2><a id="c4">章节四</a></h2><p>这边显示该章节的内容……</p>

12. 邮件

<a href="mailto:zhangrr601@163.com?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">普通发送邮件</a>

13. 表格

    <!--表格-->
    <table border="1" cellspacing="5" cellpadding="10" style="text-align:center;color:blueviolet">
        <caption>Monthly savings</caption>
        <tr>
            <th colspan="3">Month</th><!--colspan分行-->
            <th>savings</th>
        </tr>
        <tr>
            <td>April</td>
            <td>May</td>
            <td>Jane</td>
            <td>100 dollor</td>
        </tr>
        <tr>
            <td>January</td>
            <td>Ferabury</td>
            <td>March</td>
            <td>200 dollor</td>
        </tr>
    </table>
    <table border="1" cellpadding="5" cellspacing="8">
        <tr>
            <th rowspan="3">Month</th><!--rowspan分列-->
            <td>April</td>
        </tr>
        <tr>
            <td>May</td>
        </tr>
        <tr>
            <td>Jane</td>
        </tr>
        <tr>
            <th>savings</th>
            <td>200 dollors</td>
        </tr>
    </table>

显示效果

14. 列表

14.1 无序列表

<ul>
   <li>coffee</li>
   <li>tea</li>
   <li>milk</li>
</ul>

14.2 有序列表

<ol start="100">
   <li>coffee</li>
   <li>tea</li>
   <li>milk</li>
</ol>

14.3 自定义列表

<dl>
   <dt>Coffee</dt>
   <dd>- black hot drink</dd>
   <dt>Milk</dt>
   <dd>- white cold drink</dd>
</dl>

15. 表单

 <form action="demo form.php">
    <fieldset>
       <legend>personal information</legend>
        Name:<input type="text" size="30"><br />
        Password:<input type="password" size="30"><br />
       <input type="submit" value="submit" size="10" />
    </fieldset>
 </form>
<!--下拉表单-->
 <form action="">
    <select name="cosmetics">
        <option value="Dior">Dior</option>
        <option value="Lancome">Lancome</option>
         <option value="Chanel" selected>CHANEL</option><!--默认选项-->
    </select>
 </form>

运行结果