《Day01》javaweb史上最详细的HTML知识【一篇让你可以制作简单网页】_java制作一个简单的html5网页网页中有4个标题-优快云博客

本文链接：https://blog.youkuaiyun.com/HZMMC/article/details/110009161

本文详细介绍了HTML的基本概念、语言特点及常用标签，包括标题、分割线、字体、图片、列表、超链接、表格和表单等，帮助初学者快速掌握创建简单网页的技能。

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

一、HTML语言介绍

（一）什么是HTML

html成为超文本标记语言，是一种标识性的语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一，是分散的Internet资源链接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，可以说明文字、图像、动画、声音、表格、链接等等

（二）第一个HTML文件

在这里插入图片描述

（三）HTML语言特点

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

二、HTML常见标签 HTML只做网页排版

（一）标题标签< h1 > – < h6 >

1、h1—h6 加粗，变大，换行。数字越小，字体越大
2、属性：align 位置
left 居左
center 居中
right 居右
注意：html是一个松散型语言，语法格式不严谨，标签只看前，不看后，属性可以不用带双引号尽量按照标准的语法来书写大小单位使用 px 像素一个小黑点

<h1 align='center'>标题1</h1> 
<h2 align="left">标题2</h2> 
<h3 align="right">标题3</h3>
<h4>标题4</h4> 
<h5>标题5</h5>
<h6>标题6</h6> 123456

（二）分割线标签 < hr >

<hr size="7" color="red" width="20%" align="left" />

size:线条粗细 1-7
color：颜色单词，#16进制 ,rgb()
width:线条宽度像素，百分比
align:位置 left/center/right

（三）字体标签< font >

<font color="red" size="7" face="楷体">静夜思</font> 1

color : 颜色
size ： 1–7 字体大小，数字越大，字体越大
face ：字体类型

（四）加粗标签 < b > < strong >文本加粗不换行

唧唧复<b>唧唧</b>

在这里插入图片描述

（五）斜体标签 < i >

唧唧复<b><i>唧唧</i></b>

在这里插入图片描述

（六）段落标签和换行标签< p > < br >

p:段落标签【换段】
align ：位置
特点：段落换行，间距较大
br：换行标签【换行】

<body>
		<p>头戴三叉束发紫金冠，体挂西川红棉百花袍，
		身披兽面吞头连环铠，腰系勒甲玲珑狮蛮带；</p>
		<p>弓箭随身，手持画戟，坐下嘶风赤兔马：
		果然是“人中吕布，马中赤兔”！</p>
		
		头戴三叉束发紫金冠，体挂西川红棉百花袍，
		身披兽面吞头连环铠，腰系勒甲玲珑狮蛮带；<br />
		弓箭随身，手持画戟，坐下嘶风赤兔马：
		果然是“人中吕布，马中赤兔”！
	</body>

在这里插入图片描述

（七）实体字符了解

在这里插入图片描述

&lt; &lt;三国演义 &gt;
&gt; <<三国演义>>

（八）注释 ctrl+/

<!-- 头戴三叉束发紫金冠，体挂西川红棉百花袍，
		身披兽面吞头连环铠，腰系勒甲玲珑狮蛮带；<br />
		弓箭随身，手持画戟，坐下嘶风赤兔马：
		果然是“人中吕布，马中赤兔”！ -->

三、HTML图片标签

img 图片
src：资源路径
width:图片宽度 px 和百分比
height：图片高度 px 和百分比
title：图片标题
alt：当图片加载失败后，显示的文字

<img src="img/艾弗森.jpg" title="艾弗森" alt="艾弗森" width="300px" height="300px" />

四、HTML列表标签

OL:标签有序
type：表示标签类型
start：起始的数字

UL :无序列表
type: 无序的项目符号 : circle空心，disc实心，square正方形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<ul type="circle">
			<li>水果
			<ol type="1">
				<li>苹果</li>
				<li>香蕉</li></ol></li></ul>
		<ul type="circle">
			<li>家具
			<ol type="a">
				<li>床</li>
				<li>衣柜</li></ol></li></ul>
		<ul type="circle">
			<li>电子产品
			<ol type="i">
				<li>手机</li>
				<li>电脑</li></ol></li></ul>
	</body>
</html>

在这里插入图片描述

五、HTML超链接标签 < a >

href：连接地址本地地址 | 网络地址
连接方式：文本连接+图片连接
target:打开方式目标
_blank 新的网页
_parent:父级网页
_self：当前页面
_top:顶级页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="01_HTML.html" target="_blank">本地地址</a>
		<a href="http://www.baidu.com" target="_parent">网络地址</a>
			
			<!-- 网络图片链接 -->
		<a href="https://baike.baidu.com/item/%E5%BE%B7%E6%80%80%E6
			%81%A9%C2%B7%E9%9 F%A6%E5%BE%B7/5457042?fromtitle=%E9%9F%
			A6%E5%BE%B7&fromid=64575&fr=aladdin"><img src="img/2.jpeg" ></a>
	</body>
</html>

在这里插入图片描述

锚标记： href指向 name属性的地方

< a herf =“我是底部” >回到底部
< a name=“我是底部” >我是底部

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="#我是底部">回到底部</a>
		
		<a href="01_HTML.html" target="_blank">本地地址</a><br />
		<a href="http://www.baidu.com" target="_parent">网络地址</a><br />
			
			<!-- 网络图片链接 -->
		<a href="https://baike.baidu.com/item/%E5%BE%B7%E6%80%80%E6
			%81%A9%C2%B7%E9%9 F%A6%E5%BE%B7/5457042?fromtitle=%E9%9F%
			A6%E5%BE%B7&fromid=64575&fr=aladdin"><img src="img/2.jpeg" ></a><br />
		<a href="https://baike.baidu.com/item/%E5%BE%B7%E6%80%80%E6
			%81%A9%C2%B7%E9%9 F%A6%E5%BE%B7/5457042?fromtitle=%E9%9F%
			A6%E5%BE%B7&fromid=64575&fr=aladdin"><img src="img/2.jpeg" ></a><br />
		<a href="https://baike.baidu.com/item/%E5%BE%B7%E6%80%80%E6
			%81%A9%C2%B7%E9%9 F%A6%E5%BE%B7/5457042?fromtitle=%E9%9F%
			A6%E5%BE%B7&fromid=64575&fr=aladdin"><img src="img/2.jpeg" ></a><br />
		<a href="https://baike.baidu.com/item/%E5%BE%B7%E6%80%80%E6
			%81%A9%C2%B7%E9%9 F%A6%E5%BE%B7/5457042?fromtitle=%E9%9F%
			A6%E5%BE%B7&fromid=64575&fr=aladdin"><img src="img/2.jpeg" ></a><br />
		
		<a name="我是底部">我是底部</a>
	</body>
</html>

在这里插入图片描述

六、HTML表格标签掌握

table：表格标签
tr：行标签
th: 表头列标签加粗+居中
td:列标签单元格
capation：标题

属性:
tabel:
align: 整个表格位置的排列方式。内容不会发生改变
widht:宽度
height:高度（一般不设置）自适应随着内容增高发生改变
cellspacing：外边距（边框到边框的距离）
cellpadding：内边距（内容到边框的距离）
border:边框默认是实线边框
bordercolor：边框颜色
bgcolor：背景颜色
background：背景图片优先级高于颜色

tr：
align：内容位置 left/right/center 水平位置
valign: 内容位置 top/middle/bottom 垂直位置

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8"> <title></title> 
	</head> 
	<body>
		<table align="center" background="./img/2.jpeg"
		bgcolor="lightskyblue" border="1px" width="500px" 
		height="300px" cellspacing="0px" cellpadding="0px"> 
			<caption><font size="7">学生信息表</font></caption>
			<tr >
				<th>学号</th> 
				<th>姓名</th>
				<th>爱好</th>
				</tr> 
				
				<!-- 左上 -->
				<tr align="left" valign="top"> 
					<td>1001</td> 
					<td>王路飞</td> 
					<td>女</td> 
			</tr>
			<tr align="center"> 
				<td>1002</td> 
				<!-- 右下 -->
				<td align="right" valign="bottom">阿福</td> 
				<td>男</td>
			</tr> 
				
				</table>
	</body>
</html>

在这里插入图片描述

表格的跨行和跨列

在这里插入图片描述快捷键：table > tr3>td3 +tab
1、colspan:跨列
2、rowspan:跨行

七、HTML表单标签重点掌握 form

form 表单标签
action：向后台提交的地址
method：请求方式 get/post
get:以url的方式字符串的形式传值不安全，效率高最多一次传递4kb数据
post:以form data的类型传递，不会再url中显示数据，效率较低，适合传递大数据，理论上不没有数据上限
登录，注册，搜索，问卷调查重点掌握

1. 输入域 < input >

type属性：表单控件的类型
text:普通文本

用户名:<input type="text" /> 1

password:密码框

密码:<input type="password" />

radio：单选按钮要实现单选效果，需要添加相同的name属性

性别: 
<input type="radio" name="sex" /> 男 
<input type="radio" name="sex" /> 女

checkbox:复选框

爱好:<input type="checkbox" /> 抽烟 
	<input type="checkbox" /> 喝酒 
	<input type="checkbox" /> 烫头

file：文件域

头像:<input type="file" />

submit:提交按钮

<input type="submit" value="提交" />

reset:重置按钮

<input type="reset" value="重置" />

button:普通按钮没有效果，JS时候需要用到

<input type="button" value="普通按钮" />

size：输入框的宽度
readonly=“readonly” 只读浏览器可以解析当前这个标签
disabled=“disabled” 禁用置灰浏览器不能解析当前这个标签
value="文本框的值
placeholder=“请输入用户名…” 文本提示
name：标签名后期服务器开发常用
id:标签的唯一标识符 css和js的时候使用

2. 下拉列表框< select >

multiple=“multiple” ：一直展开列表
< option >：选项列表

学历:<select> 
			<option>请选择学历</option> 
			<option>博士</option> 
			<option>硕士</option> 
			<option>本科</option> 
			<option>大专</option>
 </select> 1234567

3. 多行文本域

<textarea cols="20" name="txt" readonly="readonly" rows="10">你好吗 </textarea>

4. 使用表格布局表单元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<h2 align="center">用户注册</h2>
	<table border="0px" bgcolor="aliceblue" width="500px"
	height="500px" cellspacing="0px" align="center">
		<form action="http://www.baidu.com" method="post">
		<tr>
			<td>用户名</td>
			<td><input type="text" name="name" placeholder="请输入用户名"/></td>
			<td><font color="red" size="2">*必填项</font></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" name="pwd" value="123456"
			/></td>
			<td><font color="red" size="2">*必填项</font></td>
		</tr>
		<tr>
			<td>确认密码</td>
			<td><input type="password" name="pwd2" /></td>
			<td><font color="red" size="2">*必填项</font></td>
		</tr>
		<tr>
			<td>性别</td>
			<td>
				<input type="radio" name="sex" value="男" /> 男
				<input type="radio" name="sex" value="女" /> 女
			</td>
			<td><font color="red" size="2">*必填项</font></td>
		</tr>
		<tr>
			<td>爱好</td>
			<td>
				<input type="checkbox" name="hobby" /> 抽烟
				<input type="checkbox" name="hobby" /> 喝酒
				<input type="checkbox" name="hobby" /> 烫头
			</td>
			<td></td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="text" name="email" /></td>
			<td><font color="red" size="2">*必填项</font></td>
		</tr>
		<tr>
			<td>头像</td>
			<td><input type="file" name="file" /></td>
			<td></td>
		</tr>
		<tr>
			<td>学历</td>
			<td>
				<select name="sel">
					<option>请选择学历</option>
					<option>博士</option>
					<option>硕士</option>
					<option>本科</option>
					<option>大专</option>
				</select>
			</td>
			<td></td>
		</tr>
		<tr>
			<td>阅读协议</td>
			<td>
				<textarea cols="20" name="txt" readonly="readonly"
			rows="10">你好吗</textarea>
			</td>
			<td></td>
		</tr>
		<tr>
			<td colspan="3" align="center">
				<input type="submit" value="提交" />
				<input type="reset" value="重置" />
				<input type="button" value="普通按钮" />
			</td>
		</tr>
	</form>
	</table>
</body>
</html>

5、表单提交方式get与post区别
get:以url的方式字符串的形式传值不安全，效率高最多一次传递4kb数据
post:以form data的类型传递，不会再url中显示数据，效率较低，适合传递大数据，理论上不
没有数据上限

八、HTML框架标签

（一）框架集的应用场合

后台系统网站
eclipse，hbuilder等都使用这种布局

（二）框架集页面实现方式

frameSet:框架
rows=”20%，“：分割上下页面页面的占比率
cols = 20%，分割左右页面页面的占比率
frame：表示每个页面
src：子文件的路径
name：文件访问地址
noresize=“noresize”：禁止拖动

<frameset rows="20%,*">
	<frame src="top.html" noresize="noresize" />
	<frameset cols="20%,*">
		<frame src="left.html" noresize="noresize" />
		<frame src="right.html" name="right" />
	</frameset>
</frameset>