web前端开发html文件的的入门教程（一）

凶手是你吗

已于 2024-05-01 23:00:56 修改

阅读量296

点赞数 13

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

于 2024-05-01 20:16:44 首次发布

本文链接：https://blog.csdn.net/2302_80085677/article/details/138378113

版权

web前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

web前端开发html文件的的入门教程（一）

这里是一篇为初学者小白写的入门HTML文章，后期可能根据读者反馈或笔者能力提升再进行修改。

首先咱们介绍一下什么是HTML

HTML，即超文本标记语言（HyperText Markup Language），是用于创建和设计网页内容的标准标记语言。

HTML的主要特点和用途包括：

1. 结构与内容：

HTML定义了网页的结构和内容，包括文本、图片、链接等元素。它使用一系列标签来标记不同类型的内容，从而让浏览器知道如何呈现这些内容。

2. 标准语言：

HTML是一种标准的标记语言，由万维网联盟（W3C）制定规范，确保不同平台和浏览器之间的兼容性。

3. 易于学习：

HTML相对容易上手，基本的HTML知识可以让初学者快速开始创建简单的网页。

4. 多媒体整合：

通过HTML，可以将文字、图片、音频、视频等多媒体内容嵌入到网页中。

5. 互动性：

结合CSS和JavaScript，HTML可以创建出丰富的用户界面和动态互动效果。

6. 可访问性：

HTML提供了许多标签和属性来帮助残障用户更好地访问网页内容，如屏幕阅读器的支持。

7. 响应式设计：

结合CSS媒体查询，HTML可以创建适应不同设备屏幕大小的响应式网页。

8. SEO优化：

合理的HTML结构有助于搜索引擎更好地理解网页内容，从而提高搜索排名。

9. 跨平台兼容：

HTML编写的网页可以在多种操作系统和浏览器上显示，实现了跨平台的兼容性。

10. 扩展性：

HTML可以通过各种APIs和其他编程语言进行扩展，以实现更复杂的功能和交互。

11. 版本迭代：

随着技术的发展，HTML也在不断进化，目前最新的版本是HTML5，它在原有基础上增加了许多新特性，如语义化标签、表单控件、图形和多媒体功能等。

总的来说，HTML是构建Web的基础，无论是静态页面还是复杂的Web应用程序，都离不开HTML的基本框架。学习和掌握HTML是进入Web开发领域的重要一步。

html六大模块功能代码实现

下面我们会将html前端开发分成六个功能模块，对面每个功能逐步介绍，以下代码均为注释型伪代码，无法直接运行，需适当修改后方可进行。

以下代码在“h-builder"上均可正常实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html入门教程</title>
	</head>
	<body>
		<!-- 一、文本编辑
		<font
		 size="3"（文字大小，1-7之间，逐级增大）
		face="宋体"（设置字体）
		color=#f31b8b（设置颜色）>
		测试用文字谢谢（文本）
		</font> -->
		
		<!-- 二、活动字幕标记
		<marquee>
			behavior=scroll从单方向循环；slide从单方向一次性；alternate双向来回
			direction=right left up down;四个方向
			scrollamount=文字移动距离，以像素为单位
			scrolldelay=文字每次移动后间歇时间（ms）
		</marquee> -->
		
		<!-- 三、图像
		<img src="地址" width="" height=" "
		hspace="" vspace=""水平与竖直间距
		align=""对齐方式
		border=""边框宽度
		alt=""文字说明
		title=""提示说明/>
		 -->
		 
		 <!-- 四、超链接
		 <a href="地址" target="打开方式">
			 文本或图像等说明（点击）
		 </a> 
		 
		 锚点链接（链接到网页指定位置）
		 1.标记
		 <a name='锚点名称'>文本图像等元素</a>
		 2.设置转向目标位置的超链接
		 <a href="(锚点所在文件名称)地址（#锚点名称）">链接文本等</a>
		 
		 邮件地址
		 <a href="mailto:邮件地址">联系我们</a>
		 -->
		 
	<!-- 	五、表格
		1.正常表格
		 <table
		border=""边框宽带>
		width="" height="" 
		cellspacing=""单元格之间间隙
		cellpading=""单元格内容与单元格边界之间间隙>
		<caption>表格标题</caption>
		<tr>
			<td colspan="跨行合并">列（单元格）标签</td>
			<td  rowspan="跨列合并">列（单元格）标签</td>
			<td>列（单元格）标签</td>
		</tr>行标签
		<th>表头标签</th>
		</table> 
		2.嵌套表格
		再插入表格，frame=void cellspacing=5 width=100% height="100%"
		3.内联框架
		浮动框架代码在显示页面
		<iframe name="名字" src="地址" align=""对齐方式
		width="" height="" border="" padding=" scrolling=""> 
		</iframe>
		链接到浮动框架的代码
		<a href="地址" target="名字">文本图像等元素</a>
		-->
		
		<!-- 多媒体
		六、嵌入式多媒体
		1.embed多媒体嵌入
		<embed src="地址(路径)" height="" width=""  autostart="True"是否自动播放 
		hiddden="False"是否隐藏  loop="1"循环几次>
		2.audio嵌入音频文件（部分版本浏览器可能不兼容）
		<audio src="地址(路径)"></audio>
		3.video嵌入视频文件（部分版本浏览器可能不兼容）
		<video src="地址(路径)"></video> 
		-->
        </body>
</html>