HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42230478/article/details/80925652

这篇博客介绍了HTML的基本概念，包括超文本标记语言的含义和作用。详细讲解了常用的HTML标签，如标题、换行、加粗、段落、水平分割线、字体、图片、无序列表、有序列表、超链接、表格、输入标签以及表单元素。并提供了相关标签的属性和使用案例，帮助初学者入门。

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

HTML概述：

HTML：Hyper Text Markup Lanuage 超文本标记语言

超文本：比普通文本功能更加强大，可以添加各种样式

标记语言：通过一组标签，来对内容进行描述.<关键字> 是有浏览器来解释执行

常用标签：

换行标签<br/>

<hr/> 水平分割线标签

<font> 改变字体标签</font>

常用属性 color ：颜色

size：改变字体大小范围1~7

face：改变字体

<img /> 加载图片标签

常用属性 src：相对路径 ./ 代表当前路径

../ 代表上一级路径

../../ 代表上上一级路径

i标签：斜体

strong标签：带语义的加粗

em标签：斜体标签带语义

入门案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
	<h1>今日美句</h1><hr/>
	<p>
		<font color="red" size="5">
		愿你一生努力，一生被爱。最想要的都拥有，得不到的都释怀。
		</font>
	</p>
	
	<p>
		<b>
			<font color="green" size="6" face=楷体>
				我还是喜欢你，像春风十里，不问归期。
			</font>
		</b>
	</p>
	
	<p>
		<font color="gray" size="5">
			我爱你，<br/>
			不光因为你的样子，<br/>
			还因为，<br/>
			和你在一起时，我的样子。
		</font>
	</p>
	
	<img alt="图片加载失败" src="imgs/731741.png" width="660" height="440"/>
</body>
</html>	<h1>今日美句</h1><hr/>
	<p>
		<font color="red" size="5">
		愿你一生努力，一生被爱。最想要的都拥有，得不到的都释怀。
		</font>
	</p>
	
	<p>
		<b>
			<font color="green" size="6" face=楷体>
				我还是喜欢你，像春风十里，不问归期。
			</font>
		</b>
	</p>
	
	<p>
		<font color="gray" size="5">
			我爱你，<br/>
			不光因为你的样子，<br/>
			还因为，<br/>
			和你在一起时，我的样子。
		</font>
	</p>
	
	<img alt="图片加载失败" src="imgs/731741.png" width="660" height="440"/>
</body>
</html>

运行结果：

超链接标签：无序列表ul 跟有序列表ol

<ul>无序列表标签</ul>

属性 type: circle(小圆圈）、disc(小黑圆点)、square（小方块）

<ol>有序列表标签</ol>

属性 type: 指定序号类型

start:从几开始数字

属性：href：指定要跳转去的链接地址，需要加上http协议，如果是访问本项目的html网站可以直接写路径

target：以什么方式打开

self：（默认打开方式）在当前窗口打开

blank：新起一个标签页打开

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ul type="square">
		<li><a href="http://www.baidu.com/" target="_blank">百度</a></li>
		<li>知乎</li>
		<li>优酷</li>
	</ul>
	
	<hr>
	
	<ol type="a" start="2">
		<li><a href="http://www.baidu.com/">百度</a></li>
		<li>知乎</li>
		<li>优酷</li>
	</ol>
	
</body>
</html>

运行结果：

表格标签：table

属性：border 边框、width 宽度、 height 高度、 bgcolor 背景颜色、align 对齐方式

合并： colspan：跨列

rowspan：跨行

入门案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1" width="400" bgcolor="yellow" align="center">
		<tr align="center">
			<td colspan="2">11</td>
			<td>13</td>
			<td>14</td>
			<td>15</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td colspan="2" rowspan="2">
				<!-- 表格嵌套 -->
				<table border="1" width="100%">
					<tr>
						<td>0</td>
						<td>0</td>
						<td>0</td>
					</tr>
					<tr>
						<td>0</td>
						<td>0</td>
						<td>0</td>
					</tr>
				</table>
			</td>
			<td>25</td>
		</tr>
		<tr>
			<td>31</td>
			<td>32</td>
			<td rowspan="2">35</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
		
	</table>
</body>
</html>

运行结果：

输入标签：

<input /> 输入标签

属性：type 输入项类型

可选值：text 文本框、password 密码框、file 上传文件、radio 单选按钮、checkbox 勾选框

tel 手机号码、number 只允许输入数字、date 日期类型、hidden 隐藏域、submit 提交按钮

button 普通按钮、reset 重置按钮、hidden 隐藏域

placeholder：指定默认的提示信息

name :在表单提交的时候，当作参数的名称

id:给输入项取一个名字，以便于我们后期去找到他操作

<textarea cols="宽度" rows=“高度”>大文本框标签</textarea>

<option>子标签选择项</option>

get：会将参数拼接在链接后面

post：会将参数封装在请求体中

入门案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="http://www.baidu.com/">
		帐号：<input type="text"><br>
		密码：<input type="password"><br>
		性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
		籍贯：
		<select>
			<option>广东</option>
			<option>广西</option>
			<option>湖南</option>
			<option>其他</option>
		</select><br>
		出生日期：<input type="date"><br>
		爱好：<input type="checkbox">跑步
			  <input type="checkbox">看书
			  <input type="checkbox">打球
			  <input type="checkbox">其他<br>
		个人介绍：
		<textarea rows="4" cols="40"></textarea><br>
		
		<input type="submit" value="提交">
		<input type="reset" value="重置">
		<input type="button" value="普通按钮">
	</form>
</body>
</html>