Java web-HTML网页开发基础

最新推荐文章于 2025-06-24 18:07:56 发布

PreyHard

最新推荐文章于 2025-06-24 18:07:56 发布

阅读量607

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javaweb

本文链接：https://blog.youkuaiyun.com/PreyHard/article/details/86532775

Javaweb 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML网页开发的基础知识，包括HTML文档结构的<html>、<head>、<title>和<body>标记，以及常见的HTML标记，如换行、段落、标题、列表、超链接和表单等。通过学习，读者可以掌握创建简单HTML网页的基本步骤。

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

一.简介

在浏览器的地址栏中输入一个网址，就会查阅到相应的网页内容。在网页中包含很多内容，如文字、图片、动画等，以及声音和视频等。网页的最终目的是为访问者天宫有价值的信息。提到网页设计，不得不提到HTML标记语言，HTML的全称是Hypertext Markup Language，即超文本标记语言。HTML用于描述超文本中内容的显示方式。使用HTML可以实现在网页中定义一个标题、文本或者表格等。

二.简单的HTML文件

1.新建一个文本文档。
2.在文本文档中编写代码。如下：

<html>
	<head>
		<title>HTML页面</title>
	</head>
	<body>
		<b>应用记事本编写HTML代码</b>
	</body>
</html>

3.将文件后缀改为.html，双击运行。
在这里插入图片描述

三.HTML文档结构

HTML文档由四个主要标记构成，这四个标记是<html>、<head>、<title>和<body>。他们构成了HTML页面最基本的元素。

1. <html>标记

<html>标记是HTML文件的开头。所有HTML文件都是以<html>开头，以</html>标记结尾的，HTML页面所有的标记都要放在<html>与</html>中，此标记没有实质性的功能，但却是HTML文件不可缺少的内容。

2.<head>标记

<head>标记是HTML文件的头标记，作用是放置HTML文件的信息。如定义CSS样式的代码可以放置在<head>与</head>中。

3.<title>标记

<title>标记为标题标记。可以将网页的标题定义在<title>与</title>标记中。

4.<body>标记

</body>标记是HTML页面的主体标记。页面中所有内容都定义在<body>标记中。<body>标记也是成对使用的，以<body>标记开头，以</body>标记结束，标记本身也具有控制页面的一些特性，例如控制页面的背景图片和颜色等。

四.HTML常用标记

HTML中提供了很多标记，可以用来设计页面中的文字，图片，定义超链接等。

1.换行标记

要让网页中的文字实现换行，在HTML文件中输入换行符（enter）是没有用的，必须用一个标记告诉浏览器在哪里要实现换行操作。在HTML语言中，换行标记为<br>，单独使用。

2.段落标记

HTML中的段落标记也是一个很重要的标记，段落标记以<p>标记开头，以</p>标记结束。段落标记在段前和段后各添加一个空行，而定义在段落标记中的内容不受影响。

3.标题标记

要在HTML页面中创建不同级别的标题，可以使用HTML语言中的标题标记。在HTML设定了6个标题标记，分别为<h1>~<h6>，其中<h1>代表1级标题，<h2>代表2级标题，…<h6>代表6级标题。数字越小，代表级别越高，文字的字号也就越大。如<h1>标题</h1>,需要成对使用。

4.居中标记

HTML页面中的内容有一定的布局方式，默认的布局方式是从左到右依次排序。如果想要让页面中的内容在居中位置显示，可以使用HTML中的<center>标记。<center>标记以<center>开头，以</center>标记结尾。标记中的内容为居中显示。

5.文字列表标记

（1）无序列表

无序列表是在每个列表项前添加一个圆点符号。通过符号<ul>与</ul>可以创建一组无序列表，每个列表项以<li>表示，实例如下图。

<html>
	<head>
		<title>无序列表演示</title>
	</head>
	<body>
		<b>Java后台开发的几个阶段</b></br>
		<ul>
			<li>Java SE阶段
			<li>Java Web阶段
			<li>Java EE阶段
		</ul>
	</body>
</html>

在这里插入图片描述

（2）有序列表

有序列表和无序列表的区别是，使用有序列表标记可以将列表项进行排号。有序列表的序号为<ol>,每一个列表项前使用<li>。有序列表中的项目是有一定顺序的。
在这里插入图片描述

6.head中的常见标签

（1）meta标签
<meta charset=“utf-8”>告诉浏览器用什么编码方式显示网页内容
（2）script标签
<script></script>用来包含网页的脚本
（3）link标签
<link>用来包含外部的样式表

7.分割线

<hr>
在这里插入图片描述

8.超链接标签

普通链接
<a href=“链接地址”>链接文字
图片链接
<a href=“链接地址”><img src=“图片地址” width=“宽度” height=“高度” ></a>
页面内的链接
首先在目的标签添加唯一id=“唯一编号”，然后在超链接的href="#唯一id"

9.iframe标签

10.表单标签（重点）

<!-- 用以收集用户的输入，把填写的信息收集起来发送给服务器
        有name属性的表单，会把信息发送给服务器
-->
<form action="http://www.baidu.com">
    1.文本框 <input type="text" name="username">
    <br>
    2.密码框 <input type="password" name="password">
    <br>
    3.按钮 <input type="button" value="点我">
    <br>
    4.单选框 <!-- name 用来给单选框分组 checked 表示默认勾选-->
    男 <input type="radio" name="sex" value="男"> 
    女 <input type="radio" name="sex" checked value="女">
    <br>
    5.多选框
    唱歌 <input type="checkbox" name="hobby" checked value="1">
    跳舞 <input type="checkbox" name="hobby" value="2">
    游戏 <input type="checkbox" name="hobby" value="3">
    睡觉 <input type="checkbox" name="hobby" value="4">
    <br>
    <input type="file">
    <br>
    <input type="date" value="2018-12-30">
	6.下拉列表框
	 <select name="gender">
            <option value="0">男</option>
            <option value="1" selected="true">女</option>
        </select>
    <br>
    <input type="submit" value="提交">
    <input type="reset" vlaue="重置">
</form>