02_HTML常用标签（font标签、标题标签、超链接、列表标签、img标签、表格(table)标签、div标签、span标签、p标签）

2024-03-20 23:40:02 分类：前端 热度：353 评论： 0

02_HTML常用标签（font标签、标题标签、超链接、列表标签、img标签、表格(table)标签、div标签、span标签、p标签）

一、font标签

示例

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font标签</title>
</head>
<body>
<!--
font标签是字体标签，它可以用来修改字体的属性（颜色、大小等）

font标签 部分常用属性：
    color属性：修改颜色
    face属性：修改字体（类型）
    size属性：修改文本大小
-->

<!-- 需求： 在网页上显示 我是字体标签 ， 并修改字体为 宋体， 颜色为红色。-->
<font color="red" face="黑体" size="7">font字体标签</font>

</body>
</html>

运行效果


二、特殊字符

HTML中某些字符是被预留的。
例如不能使用小于号（<）和大于号（>），浏览器会误认为它们是标签的一部分。
如果希望正确地显示预留字符，必须在 HTML 源码中使用字符实体。

有关html字符实体的更多详细内容可以参考：
https://www.w3school.***.***/html/html_entities.asp

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>特殊字符</title>
    </head>
    <body>
        <!--
            &lt;    <(小于号)
            &gt;    >(大于号)
            &nbsp;  空格
            -->
        
<!--需求： 把 <br> 换行标签 变成文本 转换成字符显示在页面上-->
        我是&lt;br&gt;特殊字符<br>
        
<!--通常情况下，HTML 会裁掉文档中的空格。
	假如你在文档中连续输入 10 个空格，那么 HTML 会去掉其中的9个。-->
        你好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是特殊字符
    </body>
</html>

运行效果


三、标题标签

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题标签</title>
    </head>
    <body>
        <!--
        标题标签
        h1-h6都是标题标签
        超过了7就是按原来的字符大小
        
        align属性是对齐属性
                left    左对齐（默认）
                center  居中
                fight   右对齐
        -->
        
        <h1 align="left">h1</h1>
        <h2 align="center">h2</h2>
        <h3 align="right">h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
        
        <h7>这里是h7超过了h6所以标题没有变化</h7>
    </body>
</html>

运行效果


四、超链接

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>

<!--
a标签是 超链接
    href属性设置链接的地址
    target属性设置那个目标进行跳转
           _self    表示当前页面进行跳转（默认）
           _blank   表示打开新页面进行跳转
-->
<a href="https://www.baidu.***/">百度</a><br/>
<a href="https://www.baidu.***/" target="_self">百度_self</a><br/>
<a href="https://www.baidu.***/" target="_blank">百度_blank</a><br/>

</body>
</html>

运行效果

1.当target="_self"时表示当前页面进行跳转（默认）



2.当target="_blank"时表示打开新页面进行跳转


五、列表标签

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
    
<body>
<!--使用无序列表，展示甲、乙、丙、丁-->
<!--ul  是无序列表
            type属性可以修改列表项前面的符号
                disc（默认）     实心圆
                square          正方形
                circle          空心圆
    li  是列表项-->
<ul type="disc">
    <li>甲</li>
    <li>乙</li>
    <li>丙</li>
    <li>丁</li>
</ul>

<!--使用有序列表，展示一、二、三、四-->
<!--ol是无序列表-->
<!--li是列表项-->
<ol>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
</ol>

</body>
</html>

运行效果


六、img标签

img 标签可以在 html 页面上显示图片。
示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>img标签</title>
    </head>
    <body>
        <!--
        javaSE中路径分为相对路径和绝对路径
            相对路径：从工程名开始算
            绝对路径：盘符:/目录/文件名
        
        web中路径分为相对路径和绝对路径
            相对路径：
                   .           表示当前文件所在目录
                   ..          表示当前文件所在的上一级目录
                   文件名       表示当前文件所在目录的文件，相当于 ./文件名(./ 可以省略)
            绝对路径：
                   正确格式是：http://ip:port/工程名/资源路径
                   错误格式是：盘符:/目录/文件名
        
        img标签的常用属性：
                src属性设置图片路径
                width属性设置图片宽度
                height属性设置图片高度
                border属性设置图片边框大小
                alt属性设置当前指定路径找不到图片时，用来代替显示的文本内容
        -->
        
        <!--需求：使用img标签显示一张图片，并修改宽高和边框属性，若找不到对应图片则用文本来提示。-->
        <img src="./about.png" width="100" height="150" border="5"/>
        <img src="./青蛙.png" width="100" height="150" alt="找不到青蛙"/>
        <img src="./狗.png" width="100" height="150" alt="找不到狗"/>
        <img src="./兔.png" width="100" height="150" alt="找不到兔"/>
        <img src="./鸡.png" width="100" height="150" alt="找不到鸡"/>
    
    </body>
</html>

运行效果

下图文件路径：这里的html文件和图片文件都在同一个目录，所以使用./来表示当前文件目录，故./图片名.png为图片文件的路径。

alt属性效果：因为指定文件路径中无法找到 鸡.png，所以用指定文本"找不到鸡"来代替。


七、表格(table)标签

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格(table)标签</title>
    </head>
    <body>
        <!--
            table标签 是表格标签
                border  设置表格标签
                width   设置表格宽度
                height  设置表格高度
                align   设置表格相对于页面的对齐方式
                cellspacing   设置单元格间距
        
            tr  是行标签
            th  是表头标签(一般形式都是粗体居中：单元格文本居中+字体加粗)
            td  是单元格标签
                align 设置单元格文本对齐方式
                
            b   是加粗标签
        -->
        
        <!--
                需求 1： 做一个带表头的，三行，三列的表格，并显示边框。
                需求 2： 修改表格的宽度，高度，表格的对齐方式，单元格间距。
        -->
        <table align="center" border="1" width="300" height="300" cellspacing="5">
            <tr>
                <!--为了给设计表格表头部分的时候提供方便，可以使用th标签-->
                <th>1.1</th><!--th表头标签的效果就是：单元格文本居中+字体加粗。和下面的1.2效果一样-->
                <td align="center"><b>1.2</b></td><!--单元格文本居中+字体加粗-->
                <td>1.3</td>
            </tr>
            <tr>
                <th>2.1</th>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <th>3.1</th>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>
    
    </body>
</html>

运行效果

部分属性对应效果：

当border="0"或者没有设置border属性，即没有边框
效果如下：


八、其他标签(div、span、p)

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他标签</title>
</head>
<body>
<!--
        div标签   默认独占一行
        span标签  它的长度是封装数据的长度
        p段落标签  默认会在段落上方或下方各空出一行来（如果已有就不再空 ）
-->
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p标签1</p>
    <p>p标签2</p>
</body>
</html>

运行效果

span标签1和span标签2之间有个空格是因为在跨行时中间的空格部分
又因为html会把多个空格看作成一个，所以中间会有一个空格的效果。

如下蓝色的部分：

转载请说明出处内容投诉
CSS教程_站长资源网 » 02_HTML常用标签（font标签、标题标签、超链接、列表标签、img标签、表格(table)标签、div标签、span标签、p标签）
翔宽

翔宽

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买