[HTML]入门基础标签

2021-10-26 22:57:58 阅读：142 来源： 互联网

1.标题字只有h1到h6

<!-- 标题字，只有H1到H6 -->
<h1>标题字H1</h1>
<h2>标题字H2</h2>

2.段落标签

<p>我的第一个段落。</p>
<p>我的第二个段落。</p>

3.换行

第一行<br>第二行

4.水平线

<hr color="red" width="100%">
<hr color="green" width="50%">
<hr color="yellow" width="30%">

5 .预留格式，写的时候是什么格式，网页上就是什么格式

<pre>
    for(String a : b){
        System.out.println(a);
    }
</pre>

6.各种字体

<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>

7.右上角，右下角标签

<!-- 右上角标签 -->
10<sup>2</sup>
<!-- 右下角标签 -->
10<sub>m</sub>

8.字体标签

<font  color="red" size="20">字体标签</font>

9.实体符号

实体符号以&开始，以;结束

     <!-- 小于号 -->
     a&lt;b
     <!-- 大于号 -->
     a&gt;c
     <!-- 空格 -->
     a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c

10.表格

<center><h1>员工信息表</h1></center>
    <hr color="red">
    <!-- border设置边框为1px -->
    <!-- thead,tbody,tfoot不是必须要写，方便以后js操作 -->
    <table border="1px" width="300px" height="150px">
        <thead>
        <!-- th比td多的是居中，加粗 -->
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
            </tr>
        </thead>
        <!-- align居中 -->
        <!-- colspan="2" 列合并，合并格数为2格  -->
        <tbody>
             <tr align="center">
                 <td colspan="2">a</td>
                 <td align="center">c</td>
             </tr>
        </tbody>
        <!-- rowspan="2" 行合并，合并格数为2格  -->
            <tr>
                <td>e</td>
                <td>f</td>
                <td rowspan="2">g</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
        <tfoot>
            <tr>
                <td>e</td>
                <td>f</td>
                <td>g</td>
            </tr>
        </tfoot>
    </table>

11.背景颜色和背景图片

<!-- 
    bgcolor:设置背景色
    background:设置背景图片，为相对路径
 -->
<body bgcolor="red" background="img/QQ截图20211024214023.png">

12.图片

    <!-- 图片设置宽度就行(高度会等比例缩放),设置高度会失帧 -->
    <!-- title设置鼠标悬停时显示的东西 -->
    <!-- alt设置图片加载失败时显示的图片信息 -->
    <img src="img/QQ截图20211024214023.png"  width="1000px" title="爱奇艺" /> 
    <br> 
    <img src="img/QQ截图202110242141023.png"  width="1000px" alt="图片找不到" />

13. 超链接

    <!-- href后面是一个资源的地址,路径可以是互联网上的路径，也可以是本地资源相对路径 -->
    <a href="http://www.baidu.com" >百度</a>
    <!-- 图片超链接 -->
    <!-- targt:
    _blank：新窗口
    _self：当前窗口（默认就是这种方式）
    _top:顶层窗口
    _parent:父窗口 -->
    <a href="http://www.baidu.com" target="_blank">
        <img src="img/QQ截图20211024214023.png" width="100px"></img>
    </a>

14.有序和无序列表

<!-- 无序列表 -->
     <ul type="circle">
         <li>中国
             <ul type="square">
                 <li>北京
                     <ul type="disc">
                         <li>丰台</li>
                         <li>房山</li>
                     </ul>
                 </li>
                 <li>天津</li>
                 <li>黑龙江</li>
             </ul>
         </li>
         <li>美国</li>
         <li>日本</li>
     </ul>
     <!-- 有序列表 -->
     <ol type="I">
         <li>吃
             <ol type="1">
                 <li>烤冷面</li>
                 <li>铁锅炖大鹅</li>
             </ol>
         </li>
         <li>喝</li>
         <li>玩</li>
         <li>乐</li>
     </ol>

标签：段落,入门,标签,标题,HTML,字体,nbsp,格式
来源： https://blog.csdn.net/qq_45985397/article/details/120982997

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

[HTML]入门基础标签