HTML编程(网页的基本标签)

最新推荐文章于 2025-07-16 11:49:03 发布

每一刻都是崭新的71

最新推荐文章于 2025-07-16 11:49:03 发布

阅读量6.8k

点赞数 9

CC 4.0 BY-SA版权

分类专栏：新手求指教求一起探讨文章标签： Java HTML

本文链接：https://blog.youkuaiyun.com/qq_43298772/article/details/91913769

新手求指教同时被 2 个专栏收录

90 篇文章

订阅专栏

求一起探讨

79 篇文章

订阅专栏

本文详细介绍HTML编程的基础知识，包括环境配置、基本结构、常用标签如标题、段落、换行等，以及如何预览运行结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML编程环境准备

在讲解HTML编程之前我们要先将Java环境和浏览器建立连接
在这里插入图片描述点击上图按钮进入设置，在设置界面搜索框中搜索web
点击Web Browers按钮，可以看到右边有多个浏览器选项
选中自己使用的浏览器，在后面Path中添加浏览器在计算机中的绝对路径，添加完成后保存设置，退出设置，之后浏览器就和环境建立好了连接，之后就可以在环境中编程，在浏览器界面中查看运行结果

HTML编程

和之前编写Java程序一样，先新建一个包，在包中建立HTML File文件，之后在文件中进行编程
在这里插入图片描述在新建的HTML文件中可以看到自动生成的代码块：

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

</body>
</html>

这是HTML的基本结构，之后我们只需要按照自己的意愿在基本结构中添加内容来完善整个网页

HTML基本结构

基本结构：

<!--声明 : 告诉浏览器使用什么规范-->
<!DOCTYPE html>

<html lang="en">

<!--标签是成对出现-->

<!--头部标签-->
<head>

<!--网页编码-->
<meta charset="UTF-8">
gb2312 ----> 包含全部的中文字符
UTF-8 ---->包含了全世界所有地方的文字和符号

<!--网页标题-->
<title>Java code</title>
</head>

<!--网页主体-->
<body>
Hello,World!
</body>


</html>

运行程序：
在这里插入图片描述将鼠标向右上角滑动，出现箭头所指的东西，选择之前建立连接的浏览器，点击运行程序，运行结果：
可以在网页看到我们自己设置的标题和内容

< title > 标签 : 网页的标题标签

< meta > 标签 : 关键字标签

<!--搜索关键字-->
<meta name="keywords" content="狂神,Java,Python,linux,大数据">
<!--网页的描述-->
<meta name="description" content="狂神有点cool!">

HTML注释:
使用快捷键Ctrl+/生成注释格式，在中间添加需要的注释

网页基本标签

标题标签：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
 	
<body>
<!--段落标签-->
<!--p:表示段落标签-->
<!--标题标签-->
<!--H1最大 , H6最小-->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
	
</html>

运行结果：
在这里插入图片描述可以看到标题等级不同标题字体大小也不同

段落标签：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--段落标签-->
<!--p:表示段落标签-->		
<h1>段落标签</h1>
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴       哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
   	 或哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p>
<p>真奇怪      真奇怪</p>
<p>两只老虎     两只老虎</p>
<p>跑得快        跑得快</p>
<p>一只没有耳朵    一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到根据段落标签划分的段落，在一段中两句话之间不论有多少个空格，但显示的只有一个空格

换行标签：

代码示例：

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

<body>
<!--换行标签-->
<!--br:单标签-->
<h1>换行标签</h1>
两只老虎                   两只老虎<br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪      真奇怪<br/>
</body>

</html>

在这里插入图片描述和段落标签去除多余空格一样，但是这只是换行，并不划分段落

水平线标签

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平线标签</title>
</head>

<body>
<!--水平线标签-->
<!--hr表示水平线标签-->
<h1>水平线标签</h1>
<hr/>
两只老虎    两只老虎<br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪      真奇怪<br/>
</body>

</html>

在这里插入图片描述可以看到在标题后面加上了一条水平线

字体标签

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式标签</title>
</head>

<body>
<!--字体加粗 , 斜体-->
<!--strong : 粗体-->
<!--em : 斜体-->
<h1>字体样式</h1>
I love you
加粗后 : <strong>I love you</strong>
斜体 : <em>I love you</em>
</body>

</html>

在这里插入图片描述可以看到加了字体样式标签后的字体和原字体的变化，因为没有加换行符，所以三句话都在一行

特殊符号

HTML中的特殊字符的格式为：& + 符号字符 + 分号结束

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式标签</title>
</head>

<body>
<!--特殊符号-->
<h1>特殊符号</h1>
<p>大于号 : &gt; </p>              
<p>小于号 : &lt; </p>
<p>空格 :   你                好 | 你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好</p>
<p>引号 : &quot;&quot;</p>
<p>版权符号 : &copy; 版权所有葫芦娃</p>
</body>

</html>

在这里插入图片描述可以看到每个特殊符号在编写程序时应该如何表示