HTML基础入门——常用标签

一之十六

已于 2022-05-23 15:25:23 修改

阅读量821

点赞数 1

分类专栏：前端文章标签： html 前端

于 2022-05-23 15:19:10 首次发布

本文链接：https://blog.csdn.net/weixin_52164430/article/details/124927586

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础入门

1、html概述

HTML(Hyper Text Markup Language):

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2、html标签

HTML标签：

HTML 标记标签通常被称为 HTML 标签 (HTML tag)
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML标签不区分大小写

2.1、标题标签

标题标签：h1~h6，h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		搴汀洲兮杜若，将以遗兮远者。
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
	</body>
</html>

<!--
 注释快捷键：ctrl+/  ctrl+shift+c
 
 DOCTYPE：文档说明
 html：根标签，网页所有内容都放在html标签对里
	head：头信息标签，里面的内容不在页面上显式
		meta：元信息
			charset：字符集  utf-8，gb2312，gbk
			title：设置页面的标题
	body：体标签，用来在页面显式标签内容
 -->

调试结果：
在这里插入图片描述

2.2、链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链接标签</title>
	</head>
	<body>
		<!-- <a href="http://i.chaoxing.com">点击我跳转到超星</a> -->
		<a href="http://i.chaoxing.com" target="_blank">点击我跳转到超星</a>
	</body>
</html>

<!--
链接标签：a
href：表示跳转哪个网页
target：以什么方式跳转 
	_self:在自己的页面上打开新网页，默认值；
	_blank:打开一个心得网页。

路径：
绝对路径：文件从根盘符开始，直到文件所在的位置
相对路径：以当前文件所在的路径为基准，如果要访问的文件在该文件的上级目录，使用../去获取，如果在该文件的下级目录，使用目录/文件格式访问
-->

调试结果：
在这里插入图片描述

2.3 、图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片标签</title>
	</head>
	<body>
		<img src="G:\picture\盘州古城.jpg" width="500" height="280" title="盘州古城" border="3"
		alt="加载图片失败">
	</body>
</html>

<!--
img:图片标签
 width:图片的宽
 height：图片的高
 title：图片的标题，当鼠标移动到图片上时，会自动显式title的内容
 alt：当图片加载失败时会做提示
 border：图片的边框
-->

调试结果：
在这里插入图片描述

2.4、段落标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签</title>
	</head>
	<body>
		<p>第一个段落</p>
		<p>第二个段落</p>
		<p>第三个段落</p>
	</body>
</html>

<!--
段落标签：p
独占一行
-->

调试结果：
在这里插入图片描述

2.5、列表标签 + div标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签 + div标签</title>
	</head>
	<body>
		<ol type="A" start="1">
			<li>mysql</li>
			<li>java</li>
			<li>python</li>
			<li>php</li>
		<br>
		<ul style="square">
			<li>mysql</li>
			<li>java</li>
			<li>python</li>
			<li>php</li>
		<br>
		<div style="width: 200px; height: 200px; background-color: hotpink; border: 3px solid white;">这是一个div标签</div>
		</ul>
		</ol>
	</body>
</html>

<!-- 
 有序列表 OrderList简写ol
 属性：
	type：显示的类型：A、a、I、i、1 
	start：从第几个开始

无序列表,UnOrderList简写ul
属性：
	type：显示的类型：disc实心圆圈、square方块、circle空心圆圈

div标签
最常用块级容器，用来分块，经常与CSS一起使用，来布局网页。
div 是 division 的简写，division 意为分割、区域、分组。
比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。 
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。
实际上，换行是 <div> 固有的唯一格式表现。
 -->

调试结果：
在这里插入图片描述

2.6、表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<table border="1" width="600" cellspacing="0" cellpading="10" align="left">
			<tr>
				<th>书名</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr align="center">
				<td>java基础入门</td>
				<td>48.00</td>
				<td>60</td>
				<td>2880.00</td>
			</tr>
			<tr align="center">
				<td>数据分析</td>
				<td>54.00</td>
				<td>2</td>
				<td>108.00</td>
			</tr>
			<tr align="center">
				<td>爬虫</td>
				<td>68.00</td>
				<td>1</td>
				<td>68.00</td>
			</tr>
			<tr align="center">
				<td>合计</td>
				<td colspan="3">3056.00</td>
			</tr>
		</table>
	</body>
</html>

<!--
table：表格
	border：表格的边框
	width：表格宽度
	cellspacing：单元格空间
	cellpadding：单元格填充
	align：对齐方式，left、right、center
tr：表示一行
td：表示一列
	rowspan：行合并
	colspan：列合并
	align：位置，center、left、right
th：表示表头列
-->

调试结果：
在这里插入图片描述

2.7、表单标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单标签</title>
	</head>
	<body>
		<form action="regSuccess.html" method="get">
			<table>
				<tr>
					<td>账号:</td>
					<td><input type="text" name="userName" /></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="pwd" /></td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" name="sex" value="male" />男 
						<input type="radio" name="sex" value="female" />女
					</td>
				</tr>
				<tr>
					<td>爱好：</td>
					<td>
						<input type="checkbox" name="hobby" value="basketball" /> 篮球 
						<input type="checkbox" name="hobby" value="sing" />唱歌
					</td>
				</tr>
				<tr>
					<td>星座</td>
					<td>
						<select name="star"> 
						<option value="1">白羊座</option> 
						<option value="2">射手座</option> 
						<option value="3">处女座</option> 
						<option value="4">天秤座</option> 
						</select>
					</td>
				</tr>
				<tr>
					<td>备注：</td>
					<td><textarea name="remark" rows="4" cols="50"></textarea></td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<input type="submit" /> 
						<!-- <button id="btn" name="btn">提交</button> -->
						<input type="reset" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

<!--
form:表单标签
	action:表示表单数据提交到哪里
	method：提交方式 get post
	
input：文本框
	type：文本框类型
		text：表示文本输入框
		password：表示密码框
		radio：单选框，单选框的name保持一致
		checkbox：复选框，复选框的name建议保持一致
		submit：提交按钮，可以触发提交事件
select：下拉列表框
	option：列表项
		value：表示选择列表项后可以获取的值
textarea：文本域
	rows：表示行
	cols：表示列，一行能写入多少个文字
button：普通按钮		
-->

regSuccess.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
	</head>
	<body>
		注册成功！
	</body>
</html>

调试结果：
在这里插入图片描述

2.8、常用标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo08</title>
	</head>
	<body>
		<span>这是一段文字</span>
		<hr>
		<span>zheshiyiduanwenzi</span>
		<hr>
		我喜欢<b>蓝天</b>
		<br>
		red
		green
		blue
		<br>
		大于：&gt;
		小于：&lt;
		大于等于：&ge;
		小于等于：&le;
		空格：&nbsp;
		注册商标：&reg;
		版权：&copy;
	</body>
</html>

<!--
span:把文字包围起来，没有其他的效果，宽高是有内容撑开的，没有自动换行
br：换行标签，单标签
hr：水平线标签，单标签，自动换行
b：加粗
i：斜体
u：下划线
strong：加粗，有强调的效果
em：斜体，有强调的效果
sup：上标
sub：下标

字符实体：
	&lt;小于  &gt;大于  &le;小于等于  &ge;大于等于 
	&nbsp;空格  &reg;注册商标  &copy;版权
-->

调试结果：
在这里插入图片描述

一之十六

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础入门——常用标签

HTML基础入门1、html概述HTML(Hyper Text Markup Language):HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页2、html标签HTML标签：HTML 标记标签通常被称为 HTML 标签 (HTML tag)HTML 标签是由尖括号包围的关键词，比如
复制链接

扫一扫