[HTML]入门基础标签

2021/10/26 23:14:46

编程Tag： 标签标题 html 字体入门格式段落 nbsp

本文主要是介绍[HTML]入门基础标签，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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]入门基础标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

[HTML]入门基础标签

相关编程文章