【HTML学习笔记】基础部分-优快云博客

本文介绍HTML的基本概念及使用方法，包括标签的嵌套结构、常用标签及其属性，如标题、段落、超链接、图像等，并展示了如何创建简单的网页结构。

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

课堂示例

<!DOCTYPE html>//文档类型：符合HTML5标准
<html lang="en">//语言为英文
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>web前端开发</title>
</head>
<body>
	<div align="center"><!--align属性设置为居中对齐-->
		<table border="1"><!--表格标签,设置表格边框，会出现双层，为表格本身的边框和内部单元格的边框-->
			<tr><!--行标签-->
				<td><h1>star top 10</h1></td>
			</tr><!--第一行结束-->
			<tr>
				<td><!--每行中的单元格标签-->
					<ol><!--有序列表-->
						<li><a href="#">bigbang</a></li>
						<li><a href="#">abe</a></li>
						<li><a href="#">gds</a></li>
						<li><a href="#">gkjdf</a>></li>
						<li><a href="#“>Loremipsum.</a></li>
						<li><a href="#">Lorem ipsum.</a></li>
						<li><a href="#">Lorem ipsum.</a></li>
						<li><a href="#">Lorem ipsum.</a></li>
						<li><a href="#">Lorem ipsum.</a></li>
						<li><a href="#">Lorem ipsum.</a></li>
					</ol>
				</td>
			</tr>
		</table>
	</div>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1">
		<tr>
			<td>red</td>
			<td>yello</td>
			<td>gfvm</td>
		</tr>
		<tr>
			<td>njgdfk</td>
			<td>ndkj</td>
			<td>vgndk</td>
		</tr>
	</table>
	
</body>
</html>

图像

交错：图片加载过程中的显示，从不清晰到清晰。

JPG格式：有损压缩，色彩丰富
GIF格式：简单动画，可透明
PNG格式：支持无损压缩，可透明。

<img src="C:/site/logo.gif" />src属性带有图片的名字和后缀和完整路径（相对路径：以网页文件夹为基准点）；alt属性为图片的替代文字。通常把站点里的所有图片放在images文件夹里<img src="image/logo.gif" />。..代表上一级文件夹。

区域div

可以将不同标签组织在一起，统一管理。<div> </div>结合CSS样式很好用。

列表

<ul></ul>无序列表，用<li></li>表示列表项。
<ol></ol>有序列表，每个列表项会出现标号。
<table></table>表格，其中<tr></tr>表示行，<td></td>表示单元格，<th></th>为表头单元格，表头文字会加粗。

表单

表单元素包括：文本框、按钮、单选、复选、下拉列表、文本域······
4. <form></form>表单标签，包含action="数据处理网页"属性，表示数据交给哪个页面处理。
5. <input />文本框标签，包含type="text|password|submit"属性：password为密码框，文本用星号显示；submit为提交，将数据传给后端，后可用value="提交"定义按钮上显示的文字；reset为重置按钮，<input type="reset" value="重置" />；radio|checkbox为单选框和复选框，check="checked"表示当前项被默认选择。name属性，方便读取表单元素。
6. <select></select>下拉列表框标签，嵌套<option></option>来表示选项，<option>中有selected="selected"属性表示默认被选择。
7. <textarea>默认提示性文本</textarea>文本域标签，包含rows="行数" cols="列数"