HTML学习记录：HTML基本标签总结

最新推荐文章于 2024-10-14 16:05:05 发布

玩具玩具遥控车

最新推荐文章于 2024-10-14 16:05:05 发布

阅读量225

点赞数 1

文章标签： html web

本文链接：https://blog.csdn.net/toytoytelecar/article/details/109756012

版权

本文是HTML学习的初步总结，涵盖了行内元素和块级元素的区别，如<p>、<hn>、<ol>、<ul>等，以及表格的创建和表格单元格的合并。还介绍了<form>表单中的单标签和双标签，如<input>、<select>和<textarea>，并简要提及了过时的frame框架。

摘要由CSDN通过智能技术生成

在学习web技术时，最基础的东西便是HTML；作为刚入坑的小白，我对于我所学习过的HTML基础知识进行系统的总结。

一.行内元素和块级元素

1.行内元素

行内元素顾名思义，就是当我们写入标签时，元素的长度和宽度只包裹内容，不会自动换行；

常见的行内元素有以下几种，我们不妨举一些实例：

		<b>百度</b>  	<!--加粗-->
		<i>百度</i>		<!--斜体-->
		<del>百度</del>	<!--删除斜线-->

每一种行内元素对应一种效果，我们不妨把它们放入网页中看具体的效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>

	<body>
<!--行内元素，长度和宽度包裹内容，不会自动换行-->
		<b>百度</b>  	<!--加粗-->
		<i>百度</i>		<!--斜体-->
		<del>百度</del>	<!--删除斜线-->
	</body>
</html>

可以看出每一种行内元素都对应了一个效果，我们在浏览器中按下F12键，也可以看出行内元素的共同特点就是元素的长宽只包裹里面的内容，而且不自动换行。

2.块级元素

我们可以引入一个和行内元素不同的元素：块级元素；该元素长度填充整个父标记，高度包裹内容，单独成行；为了更加直观，我们可以在前面代码的基础上添加一些块级元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>

	<body>
<!--行内元素，长度和宽度包裹内容，不会自动换行-->
		<b>百度</b>  	<!--加粗-->
		<i>百度</i>		<!--斜体-->
		<del>百度</del>	<!--删除斜线-->
<!--块级元素，长度填充整个父标记，高度包裹内容，单独成行  文本居中只能应用于块级元素-->
		<p>工业大学</p>
		<!--hn标签   n 1~6 类似于标题-->
		<h1>计算机</h1>	
		<h6>手机</h6>
		<!--有序列表 ordered list-->
		<ol>			
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ol>
		<!--无序列表 unordered list-->
		<ul>				
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
	</body>
</html>

代码中从上至下的标签依次为：</