JavaWeb——HTML基本标签详解及案例实战（文件标签、文本标签、图片标签、列表标签、链接标签、块标签、语义化标签、表格标签）

最新推荐文章于 2023-02-10 16:56:54 发布
最新推荐文章于 2023-02-10 16:56:54 发布
阅读量934 收藏 6
点赞数 3
分类专栏： JavaWeb开发实战 文章标签： 文件标签、文本标签、图片标签 列表标签、链接标签、块标签 语义化标签 表格标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w464960660/article/details/106157304
版权

目录

1、文件标签

2、文本标签

3、图片标签

4、列表标签

5、链接标签

6、块标签

7、语义化标签

8、表格标签

9、综合案例

上一节介绍了HTML的基本概念，和基本语法，本节介绍下HTML的基本标签和表单标签。这部分学习可以参照W3Cschool，一个很好的网站。

1、文件标签

文件标签是构成HTML最基本的标签，包括：

  • html：html文档 的根标签
  • head：头标签，用于指定html文档的一些属性，引入外部的资源
  • title：标题标签
  • body：体标签
  • <!DOCTYPE html>：html5中定义该文档是html文档

2、文本标签

文本标签是和文本相关的标签，包括：

注释：<!-- 注释内容  -->

  • <br> 换行标签，自闭和标签
  • <h1 ~h6> 标题标签，字体大小逐渐递减，自带换行效果
  • <p> 段落标签
  • <hr/>显示一条水平线，可以修改属性（color、width、size、align），但是不建议使用了，后续学习CSS时进行样式优化
  • <b> 字体加粗
  • <i>  斜体
  • <font> 字体标签，可以设置属性（color、size、face等）
  • <center>  居中标签

【举例】：利用IDEA新建HTML文件，观察使用以上几个标签的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!-- 注释 -->
<!--    br 换行-->
    hello, <br>
    world <br>
<!--    标题标签 h1 ~ h6 -->
    环游世界<br>
    <h1> 环游世界 </h1>
    <h2> 环游世界 </h2>
    <h3> 环游世界 </h3>
    <h4> 环游世界 </h4>
    <h5> 环游世界 </h5>
    <h6> 环游世界 </h6>
<!--段落标签-->
    <p>
        第一段：环游世界环游世界环游世界环游世界环游世界环游世界
    </p>
    <p>
        第二段：环游世界环游世界环游世界环游世界环游世界环游世界
    </p>
    <p>
        第三段：环游世界环游世界环游世界环游世界环游世界环游世界
    </p>
<!--hr 显示一条水平线-->
    <hr color="red" width="200" size="10" align="left"/>
    <hr>
<!--加粗 b -->
    江山无限好<br>
    <b>江山无限好</b><br>
    <br>
<!--斜体-->
    确实不错噢<br>
    <i>确实不错噢</i>
    <br>
    <br>
<!--字体标签-->
    <center>
        <font color="red" size="5" face="楷体">
            确实不错噢
        </font>
    </center>

</body>
</html>

另外，HTML中有一些特殊字符，要每个特殊字符标识不同，列表如下：

3、图片标签

<img> 展示图片，其重要属性 src：指定图片的位置，其余还有设置长宽、对齐属性等；

【举例】：图片标签的使用，注意下src 设置路径的两种形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--展示一张图片-->
    <img src="../image/1.png" align="right" alt="运动" width="500" height="500">
<!--图片的相对路径，以.开头的路径
    ./ ：表示当前目录，默认就是这种形式
    ../ ：表示后退上一级目录
-->
</body>
</html>

4、列表标签

列表标签包括有序列表ol和无序列表ul，列表的每一项用li闭合。

【举例】：使用有序列表和无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--有序列表 ol-->
    <ol type="A" start="2">
        <li> 上厕所 </li>
        <li> 洗脸 </li>
        <li> 刷牙 </li>
        <li> 吃饭 </li>
    </ol>
<!--无序列表-->
    <ul type="disc">
        <li> 上厕所 </li>
        <li> 洗脸 </li>
        <li> 刷牙 </li>
        <li> 吃饭 </li>
    </ul>
    <ul type="square">
        <li> 上厕所 </li>
        <li> 洗脸 </li>
        <li> 刷牙 </li>
        <li> 吃饭 </li>
    </ul>

</body>
</html>

5、链接标签

a：定义一个超链接，关键属性：

  • href：指定访问资源的URL
  • target：指定打开资源的方式
      _self：默认值，在当前页面打开
      _blank：在空白页面打开

【举例】：使用链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--超链接 a -->
   <a href="https://www.baidu.com"> 点我 </a>
    <br>
    <a href="https://www.baidu.com" target="_self"> 点我_本页面跳转 </a>
    <br>
    <a href="https://www.baidu.com" target="_blank"> 点我_新选项卡跳转 </a>
    <br>
    <a href="https://www.baidu.com">
        <img src="../image/1.png">
    </a>
</body>
</html>

6、块标签

次此处简单介绍div和span标签，后续一般配合css使用。

【举例】：div 和 span 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>
<!--div  每一个div占一行，块级标签
    span 文本信息在一行展示，行内标签，内联标签
-->
   <span> 百度 </span>
    <span> 一下 </span>
    <hr>
    <div> 百度 </div>
    <div> 一下 </div>
</body>
</html>

7、语义化标签

html5中，为了提高程序的可读性，使用的标签，一般也是结合css一起使用。

【举例】使用header、footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>

<header>
    我是头
</header>

<footer>
    我是尾
</footer>
</body>
</html>

8、表格标签

html中表格的形式，先有行，然后每个行中定义单元格。

  • table：定义表格，一下属性了解即可，一般使用css控制表格样式
        width：宽度
        border：边框
        cellpadding：定义内容与单元格之间的距离
        cellspacing：定义单元格之间的距离，若为0，则单元格的线会合为一条
        bgcolor：表格背景色
        align：表格对齐方式
  • tr：定义行
  • td：定义单元格
  • th：定义表头单元格

【举例】：使用表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>

<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>99</td>
    </tr>
</table>

</body>
</html>

其他相关标签：

  • caption：定义表格标题
  • thead：表示表格头部分
  • tbody：表示表格体部分
  • tfoot：表示表格尾部分

9、综合案例

做一个模拟百度网站的首页，早期没有css时，基本都用的是table进行布局：

  • 1.确定使用table进行布局
  • 2.如果某一行只有一个单元格，则使用<tr> <td></td></tr>
  • 3.如果某一行有多个单元格，则使用，内嵌单元格，避免使用合并单元格方式，不利于维护

    <tr>

         <td>

                 <table> </table>

         </td>

    </tr>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟百度</title>
</head>
<body>

<table width="100%" align="center">
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <table width="100%" align="center">
                        <tr>
                            <td> <a href="https://www.baidu.com"> 新闻</a> </td>
                            <td> hao123 </td>
                            <td> 地图 </td>
                            <td> 视频 </td>
                            <td> 贴吧 </td>
                            <td> 学术 </td>
                            <td> 更多 </td>
                            <td> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>
                            <td> 抗击肺炎 </td>
                            <td> 南京 </td>
                            <td> 晴15℃ </td>
                            <td> 设置 </td>
                            <td> 账号 </td>

                        </tr>
                    </table>
                </tr>

                <tr>
                    <td align="center">
                        <img src="../image/3百度.png" width="20%">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <img src="../image/4百度搜索.png" width="60%">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

 

作于202005181145，已归档

———————————————————————————————————

本文为博主原创文章，转载请注明出处！

若本文对您有帮助，轻抬您发财的小手，关注/评论/点赞/收藏，就是对我最大的支持！

祝君升职加薪，鹏程万里！

Winter_world
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【Java 代码实例 7】jsoup解析html
学Java，找哪吒
03-13 2781
一、Jsoup简介 Jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。 二、Jsoup的主要功能 1、从一个URL，文件或字符串中解析HTML 2、使用DOM或CSS选择器来查找、取出数据 3、可操作HTML元素、属性、文本 注意：jsoup是基于MIT协议发布的，可放心使用于商业项目。 三、Jsoup用法简介 1、获得Document对象 Docum
JavaWeb 标准标签
weixin_62270300的博客
04-13 715
web.xml的欢迎界面 新建一个项目 点两下Next 就会出现如下选项 将Generate web.xml deployment descriptor选项勾上 完成之后就会在WEB-INF目录底下就会出现一个web.xml文件 点开之后在页面左下方选择Source 下方界面是修改后的（注意：改了web.xml的代码都必须重新发布重启服务） 常用的jsp标签（自带） <jsp:include page="页面"> 包含 <jsp:param name="n...
java web 标签大全
03-20
NULL 博文链接：https://fly533.iteye.com/blog/784117
JavaWeb---HTML
weixin_65440201的博客
07-27 458
1.1web概念概述 1.2软件架构： 1. 2.1C/S: Client/Server 客户端/服务器端 1.2.2.B/S: Browser/Server 浏览器/服务器端 1.3.1静态资源： 1.3.2 动态资源： 2.HTML 2.1概念：是最基础的网页开发语言 2. 2快速入门： 2.3标签学习： 2.3.1文件标签：构成html最基本的标签 2.3.2 文本标签：和文本有关的标签 2.3.2案例：简介 2.4图片标签： 2.5列表标签： 2.6链接标签： 2.7
JavaWeb标准标签
m0_61857264的博客
04-15 188
目录 使用web.xml设置网页首选项 双击web.xml 标准标签 包含：把别的页面的属性包含到该界面 传参：与上面一起连用 转发 相当于实例化 setproperty:给userBean属性设置 getproperty:拿userBean属性的值 login.jsp 界面 index.jsp 使用web.xml设置网页首选项 新建项目，按next，勾选Generate web.xml deployment descripor 双击web.xml ...
java web的标签_java web标签
weixin_39637151的博客
02-20 200
一：国庆结束了，回来上班，结果老大说过两天才出差，所以这两天就用来补自己不太懂的知识或者以前没有熟悉的知识，jsp的标签就是，因为在项目中自己封装了一些标签，但是我自己只是会用，真正的原理性的东西我还是不是很明白，所以今天一天的时间基本上都是在网上找资料来熟悉jsp标签的知识。二：标签中tld中的属性rtexprvalue的用处rtexprvalue的全称是 Run-time Expression...
JavaWeb：HTML基础标签
weixin_50905233的博客
02-10 144
HTML基础标签
JAVA生成word解析HTML标签
mxasd的博客
12-15 1584
Springboot生成word解析HTML标签 最近由于项目问题需要在生成的word中保留html的标签,花了一下午的时间总结出来了两种方法，因为我们使用POI 生成的word 我们控制的实在太少，以至于传进去的html页面他直接就自动识别成了字符串，String，但是在外面写一个html的网页，在外面可以直接改后缀名就可以使html转成word于是我就想到了流的方法，用java 生成一个html文件，然后在去改本地文件的后缀名。以下是代码 @Test void FileTestDemo(){
HTML基本标签+表格基础+表单和框架
08-15
HTML基本标签+表格基础+表单和框架，基础知识点，初学者了解，后期将逐步加载CSS样式表与JS的使用基础知识点，大家共同使用
GUI动作实例
轻轻的你来了，那么可爱！
04-16 735
import javax.swing.*;import java.awt.*;import java.awt.event.*;public class ActionTest{ public static void main(String[] args) {  ActionFrame frame = new ActionFrame();  frame.setDefaultCloseOperati
JavaWeb——HTML基础标签table标签与form标签的学习与理解
01-08
使用表格标签制作规整的表格 table标签是表格标签， border属性设置表格的边框厚度， width属性设置表格的宽度， align设置表格的对齐方式， cellspacing设置单元格的间距 tr是行标签， td是单元格标签， th是字体...
javaWeb自定义标签用法实例详解
08-30
主要介绍了javaWeb自定义标签用法,结合实例形式分析了javaweb自定义标签的功能、定义方法及执行原理,需要的朋友可以参考下
Java_Web标签大全.zip_java web_javaweb标签大全
09-23
java web编程中用到的标签大全，含示例
JavaWeb-标签库应用方法初探.docx
12-16
JavaWeb-标签库应用方法初探.docx
javaweb标签大全
07-22
资源名称：java web 标签大全资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Javaweb常用的标签
小明的博客
11-22 1022
html常用的标签 html常用的标签： ~ 表示是一个标题   段落标签      水平线标签    换行标签      下标      上标      原样标签： 原样标签会保留空格和换行符。     有序的列表标签、     无序的列表标签。     项目列表标签(dl dt dd)     行内标签(span)      块标签    di
从零开始实战机器学习（3）—朴素贝叶斯算法
笑着流浪的博客
08-02 594
朴素贝叶斯算法原理其实比较简单，就是基于贝叶斯原理。在此先介绍一下贝叶斯原理。条件概率：P(A|B)就是在B发生的条件下A发生的概率。而P(AB) = P(A|B) *P(B) = P(B|A) *P(A)，由此可以推出P(B|A) = [P(A|B) *P(B)]/P(A)，这个公式就给出了P(A|B)和P(B|A)之间相互转换的公式。也就是先验概率与后验概率之间的相互转换，这也是贝叶斯学派与频率
Java文本标签处理
weixin_30329623的博客
04-02 323
public void findText(List<String> textList, List<String> labelList) { if (null == textList || textList.size() == 0 || null == labelList || labelList.size() == 0) { ...
HTML基础（二）
dayunhanIT的博客
05-31 367
表格标签 table <table></table> 用来定义表格 <tr></tr> 用来定义行，嵌套在 <table></table> 中 <td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中 <tr></tr> 中只能嵌套<...
Javaweb插入图片的标签
最新发布
04-04
标签用于在网页中插入图片，它的基本语法如下： 图片地址" alt="图片描述" width="宽度" height="高度"> 其中，src属性用于指定图片的地址，这可以是相对地址或绝对地址；alt属性用于指定图片的描述文字，当图片...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Winter_world

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值