第一次网页前端培训笔记（HTML常用标签）

某科学的初学者

已于 2022-02-07 14:23:01 修改

阅读量376

点赞数

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

于 2022-02-03 22:55:13 首次发布

本文链接：https://blog.csdn.net/m0_61507413/article/details/122774071

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文提供了一套HTML基础教程，适合初学者。涵盖了HTML编辑器的下载与安装，如VSCode和HBuilder，以及基础操作。讲解了HTML的基本框架，包括标题、段落、列表、div和span标签的使用，并介绍了格式化标签、a标签和img标签的语法和应用。此外，还展示了如何利用这些标签创建简单的网页设计实例。

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

B站视频网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

菜鸟教程网址：HTML 教程 | 菜鸟教程 (runoob.com)

1.编辑器的下载与安装

1.1 可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程有以下两款安装教程

VS Code：Visual Studio Code - Code Editing. Redefined
Sublime Text：Sublime Text - Text Editing, Done Right

1.2 个人推荐HBuilder，全文的代码和运行效果基于HBuilder编辑器

软件下载链接：HBuilderX-高效极客技巧 (dcloud.io)

点击链接到页面然后点击DOWNLOAD，根据自己的需求以及电脑的品牌选择需要的版本进行下载，下载完成后解压，安装HBuilderX.exe文件

2.基础操作

3.HTML基本框架

3.1 基础页面

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

3.2 标题代码及运行效果截图

        <h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>

3.3 段落标签、换行标签、水平线标签

		<!--
			段落标签
				p标签，会自动换行
				块级元素
		-->
		<p>这是一个段落1</p>
		<p>这是一个段落2</p>
		<!--
			换行标签
				br单标签
				<br><br/>
		-->
		Hello<br>
		World
		<!--
			水平线标签
			hr单标签
			常用属性
				color 颜色
				size 粗细
				width 长度(百分比 或 px)
		-->
		<hr>
		<hr color="red" size="3" width="50%" align="left">

3.4 列表

       <!--
		列表
			有序列表
				<ol><li></li></ul>
			无序列表
				<ul><li></li></ul>
		-->
		<ul type="square">
			<li>周杰伦</li>
			<li>林俊杰</li>
			<li>陈奕迅</li>
		</ul>
		<ol type="I">
			<li>周杰伦</li>
			<li>林俊杰</li>
			<li>陈奕迅</li>
		</ol>

3.5 div标签、span标签

<!--
			div标签
				块级元素
				默认占全部宽度，有多少内容高度占多少
				可以设置div的宽(width)高(height)
				通过align设置内容的对齐方式
		-->
		<div style="width: 100px;height: 50px;" align="center">这是一个div</div>
		
		<!--
			span标签
				行内标签（不会自动换行）
		-->
		<span>这是一个span</span>

3.6 格式化标签

<!--
			格式化标签
				font标签
					color 字体颜色
					size 字体尺寸
					face 字体风格
				pre
					预格式化标签，保留空格和换行
				b 加粗
				i 倾斜
				u 下划线
				del 中划线
				sup 上标
				sub 下标
		-->
		-->
		<font color="aqua" size="5" face="楷体">你好</font>
		<pre>
			Hello   World
		</pre>
		<p><b>以后</b>的<strong>你</strong>会<i>感谢</i>现在<u>努力</u>的<del>自己</del></p>
		H<sub>2</sub>O

3.7 a标签

<!--
			a标签
				超链接标签，用于链接到一个新的URL
				常用属性：
					href:需要跳转的标签（必须属性）
					target:窗口打开方式
						_self：当前窗口（默认）
						_blank:在空白窗口
				作为锚点
					a标签的name属性
						<a name="top"></a>
					其他的id属性值
						<div id="top"</div>
					锚点的使用
						<a herf-"#top"></a>
					 
		-->

3.8 image标签

<!--
			img标签
				向网页中嵌入一张图标
				常用属性
						src:需要引入的图片的地址（必须属性）
						alt：当图片破损或不存在时，显示文本内容
						title：当鼠标悬停在图片上时显示的文本
						width：图片的宽度
						height：图片的高度
						broader：图片边框
		-->