#5 HTML常用标签介绍

最新推荐文章于 2024-04-24 09:27:42 发布

VIP文章今晚滿天星

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量164

点赞数

分类专栏： # html+css 文章标签： html css web html5

本文链接：https://blog.csdn.net/weixin_45832571/article/details/116839840

版权

HTML常用标签

1.font字体标签
规定文本的字体、字体尺寸、字体颜色。
需求1：在页面上显示我是字体标签，并修改字体为宋体，颜色为红色。

<body>
<!-- 在页面上显示 我是字体标签，并修改字体为 宋体，颜色为红色 -->
<!-- font上划线表示已经过时了 但是还可以使用 -->
<!-- color属性修改颜色 face属性修改字体 size修改字体大小，取值范围为0~7-->
<font color="red" face="宋体">我是字体标签</font>

</body>

2.特殊字符
一些常用的特殊字符：
在这里插入图片描述

<body>
<!-- 需求：把<br>换行标签变成文本 转换成字符显示在页面上-->
<!-- 了解一些常用的特殊字符 -->
我是&lt;br&gt;标签

<!-- html中连续的空白字符 比如空格、回车、制表符等 全部只保留一个 -->
<br>
2021&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年

</body>

3.标题标签
标题标签是h1到h6

<body>
<!-- 演示标题1到标题6 -->
<!-- h1到h6都是标题标签 h1最大 h6最小-->
<!-- align属性是对齐属性 其中left是左对齐(默认值) center是居中 right是右对齐-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>

效果图：
在这里插入图片描述

4.超链接标签(重点标签！)
在网页中所有点击之后可以跳转的内容都是超链接。
使用a标签

<body>
<!-- 超链接 -->
<a href="http://wwww.baidu.com">百度</a><br>
<a href="http://localhost:8080">测</a><br>

<!-- 很多网站是点击之后弹出新页面-->
<!-- a标签是超链接
          href属性设置连接的地址
          target属性设置哪个目标进行跳转
              _self 表示当前页面跳转(默认值)
              _blank 表示打开新页面进行跳转
          -->
<a href="http://localhost:8080">测试</a><br>
<a href="http://localhost:8080" target="_self">测试_self</a><br>
<a href="http://localhost:8080" target="_blank">测试_blank</a><br>
</body>

5.列表标签
列表标签通常分为三种：无序列表(最常用)、有序列表、定义列表(几乎不用)。

<body>
<!-- 需求1：使用无序 列表方式 把1、2、3、4展示出来-->
<!-- ul是无序列表
         type属性可以修改列表项前面的符号
     li是列表项-->
<!-- 注意：只要跟浏览器有关的 或多或少都有兼容问题 比如这里设置type="none"，使用IE打开会发现设置无效-->
<ul type="none">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<!-- 使用有序列表 将ul改成ol(order list)即可 -->
<ol type="none">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>

</body>

6.img标签
img标签可以在html页面中显示图片

<body>
<!-- 需求1：使用img标签显示一张图片 并修改宽高和边框属性 -->
<!-- img标签是图片标签，用来显示图片
         src属性可以设置图片的路径
         width属性设置图片的宽度
         height属性设置图片的高度
         border属性设置图片的边框大小
         alt属性设置属性当制定路径找不到图片时，用来代替显示的文本内容

     在JavaSE中路径分为相对路径和绝对路径
         相对路径：从工程名开始算
         绝对路径：盘符:/目录/文件名

     在web中路径分为相对路径和绝对路径
         相对路径：
             .表示当前文件所在的目录
             ..表示当前文件所在的上一级目录
             文件名表示当前文件所在目录的文件，相当于./文件名 ./可以省略
         绝对路径：
             正确格式为http://ip:port/工程名/资源路径
-->
<img src="../imgs/图片1.jpg" width="300" height="360" border="2" alt="无法加载"/>
</body>

效果图：
在这里插入图片描述

7.table标签(重点标签)
表格可以实现的效果：
在这里插入图片描述
这里实现一个基本框架：

<body>
<!-- 需求1：做一个带表头的 三行、三列 的表格 并显示边框
     需求2：修改表格的宽度、高度、表格对齐方式、单元格间距  -->
<!-- table标签是表格标签
         border设置表格边框
         width设置表格宽度
         height设置表格高度
         align设置表格相对于页面的对齐方式
         cellspacing设置单元格间距
     tr是行标签
     th是表头标签
     td是单元格标签
         align设置单元格文本对齐方式
     b标签是加粗标签
          -->

<table border="1" width="300" height="300" align="center" cellspacing="0"

最低0.47元/天解锁文章

今晚滿天星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
#5 HTML常用标签介绍

HTML常用标签***1.font字体标签 ***规定文本的字体、字体尺寸、字体颜色。需求1：在页面上显示我是字体标签，并修改字体为宋体，颜色为红色。<body><font color="red" f
复制链接

扫一扫