HTML基础入门

热爱编程的申同学

已于 2022-08-11 14:18:19 修改

阅读量869

点赞数

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

于 2022-08-11 13:53:26 首次发布

本文链接：https://blog.csdn.net/select_myname/article/details/126279978

版权

前端专栏收录该内容

5 篇文章 9 订阅

订阅专栏

前言

在Java后端学习过程中，HTML、CSS、JS等前端知识也需要去学习，不过学习的内容肯定没有前端专业的深入，这里只是去简单了解，搞懂会用就可以了，如果是前端学习者，那么可以把这篇文章当作巩固基础知识，复习一下也是不错的。

1、什么是HTML？

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言；即除了文字之外还可以有视频、音频等内容。

2、开发工具选择

工具名称	工具logo	下载地址
Sublime Text		Download - Sublime Text
HBuilder		https://www.dcloud.io/hbuilderx.html
VS code		Download Visual Studio Code - Mac, Linux, Windows
WebStorm		Download WebStorm: The Smartest JavaScript IDE by JetBrains

我使用的是HBuilder X开发工具，这四款软件都是可以的，目前来说用的相对多的就是VS code和HBuilder。

注意：这里推荐大家安装一个Chrome浏览器，开发会很简洁方便。

3、Head头部

3.1、网页结构

<html>
  <!--head中指定网页标题及要用到的样式、js或其他需要进行引入的内容-->
  <head>
    <!-- charset用于设置网页的统一字符编码 -->
    <meta charset='utf-8'/>
    <!-- 网页的标题（名称） -->
    <title>第一个网页</title>
  </head>
  <body>
    <!--body中写的都是要在网页中展示的内容-->
   Hello HTML！
  </body>
</html>

网页结构想要在浏览器上打开并被浏览器解析，需要文件的后缀为.html或.html。

3.2、ico图标

ico图标指的是网页主题左边有个图标，这个图标默认在不同浏览器上是不同的，如图在谷歌浏览器上默认是个地球。那么如何去改变这个图标呢，那就要用到ico图标。

改变ico图标的话就需要用到一个在线转ico格式的网站，如下：制作ico图标 | 在线ico图标转换工具方便制作favicon.ico - 比特虫 - Bitbug.net轻松制作ico图标,在线提供ico图标转换工具,可以将jpg、jpeg、gif、png等图像转换成ico图像,方便浏览器制作并生成favicon.ico图标,提供ico图标下载,png to ico,jpg to ico,gif to icohttp://www.bitbug.net/

进入以后，选择文件，选择自己需要改变为ico格式的图片，然后点击生成ico图标。

生成完以后，把ico图片文件放到项目下的img包中。

在html中头部敲下这段代码

	<head>
		<meta charset="utf-8" />
		<title>标题</title>
         <!--href中填入你的ico图标路径 -->
		<link rel="shortcut icon" type="image/x-icon" href="img/01.ico" media="screen" />
	</head>

运行，然后就可以看到ico图标添加到了网页标签上了。

3.3、面页倒计时

有时想要让网页在多少秒之后进行跳转到另一个网页，那么就可以添加一个网页倒计时，就在head中添加meta标签，http-equiv属性填写refresh，content属性中先写秒数用；分隔，后面就是网页地址，这里我以跳转百度为例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
         <!-- 设置当前网页刷新时间 -->
		<meta http-equiv="refresh" content="10;https://www.baidu.com">
		<title> 倒记时 </title>
	</head>
	<body>
        <!--下面是js代码，这里用来演示网页倒计时效果，可以先复制粘贴，后面js学习会用到  --> 
		<script type="text/javascript">
			var time = 9;
			window.onload = function(){
				window.setInterval("showTime()", 1000);
			}
			function showTime(){
				document.getElementById("s").innerHTML = time;
				time--;
			}
		</script>

		<font class=p2>&nbsp;&nbsp;&nbsp;&nbsp;无法访问<span id="s" style="color: orange;font-size: 28px;">10</span>秒后跳到<a href="https://www.baidu.com">百度</a>

	</body>
</html>

4、HTML常用标签

4.1、标题标签

标题标签默认具有加粗效果，最小字体是16像素，最大是42像素

this is a normal text!
<!-- 注意点：在网页中默认字体大小最小为16px/1em，1em=16px -->
<!-- 标题标签 -->
<h1>一级标题标签，有加粗效果，字体比较大</h1>
<h2>二级标题标签，有加粗效果，字体比一级的小</h2>
<h3>三级标题标签，有加粗效果，字体比二级的再小点</h3>
<h4>四级标题标签，有加粗效果，字体比三级的再小点</h4>
<h5>五级标题标签，有加粗效果，字体比四级的再小点</h5>
<h6>六级标题标签，有加粗效果，字体比五级的再小点</h6>
<h7>没有该标签，但是浏览器依然可以解析，因为其符合标签的格式。所以不会报错，只是没有任何的效果</h7>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<h1>再别康桥</h1>
		<h2>再别康桥</h2>
		<h3>再别康桥</h3>
		<h4>再别康桥</h4>
		<h5>再别康桥</h5>
		<h6>再别康桥</h6>
	</body>
</html>

4.2、段落&换行标签

段落标签包裹的内容代表是一个段落，但是，该段落没有任何的形式上的效果和语文中段落不一样，它仅仅只是有这么一个段落的含义而已。段落标签独占一行。

        <h1>再别康桥</h1>
		<h2>再别康桥</h2>
		<h3>再别康桥</h3>
		<h4>再别康桥</h4>
		<h5>再别康桥</h5>
		<h6>再别康桥</h6>
        <p>轻轻的我走了,</p>
		<p>正如我轻轻的来；</p>
		<p>我轻轻的招手，</p>
		<p>作别西天的云彩</p>

4.3、水平线标签

<hr/>标签在 HTML 页面中创建一条水平线。

<body>
    <!--这就是一条水平线-->
    <hr />
</body>

属性名	描述	取值
color	颜色	单词、RGB、6位16进制的颜色值
size	大小	取值1~7
width	宽度	数值px、数值%
align	对齐方式	center：居中、left：左对齐、right：右对齐

<body>
    <!--这就是一条水平线-->
    <hr />
    <hr  width="100px" size="7" align="center" color="red"/>
    <hr  width="50%" size="7" align="left" color="#EFEFF4"/>
</body>

4.4、字体标签

font标签属性：

属性名	描述
color	设置字体颜色
size	设置字体大小

strong标签: 字体加粗
em标签: 斜体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>徐志摩诗词</title>
	</head>
	<body>
		<h2 align="center"><font color="red">再别康桥</font></h3>
		<hr width="100px" size="2" color="green">
		<div align="center">
			<p>轻轻的我走了,</p>
			<p><font size="5" color="yellow">正如我轻轻的来；</font></p>
			<p><strong>我轻轻的招手，</strong></p>
			<p><em>作别西天的云彩</em></p>
		</div>
		
	</body>
</html>

4.5、列表标签

将内容以列表的形式按从上往下进行排列，以及自定义样式。

ul：无序列表，没有顺序，ul只是语义上表示其是一个列表标签，但是里面是没有内容的，内容要通过li标签来书写。

ol：有序列表，带有顺序，type指定排序类型，start指定开始的位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>无序列表</h2>
		<ul type="disc">
			<li>水杯</li>
			<li>竹子</li>
			<li>文具</li>
			<li>沙发</li>
			<li>凳子</li>
		</ul>
		<h2>有序列表</h2>
		<ol type="A" start="3">
			<li>水杯</li>
			<li>竹子</li>
			<li>文具</li>
			<li>沙发</li>
			<li>凳子</li>
		</ol>
        <!-- 自定义列表 -->
		<dl>
			<dt>新冠疫情</dt>
			<dd>1、成都出现新冠疫情</dd>
			<dd>2、出现疫情后所有相关人员已经进行了隔离及检测</dd>
		</dl>
	</body>
</html>

4.6、图片标签

img标签：

src：引入的图片的路径。
width：设置图片的大小，一般只设置width自动匹配高（px是一个固定的像素 %随着浏览器大小而定）。
title：当你鼠标悬浮图片时要显示的内容。
alt：表示当前图片加载不到或者丢失，提示显示内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/02.jpg" title="理想老婆"  alt="对不起，图片崩溃了">
	</body>
</html>

4.7、超链接标签

超链接就是网页中常用的用于页面跳转的标签，还可以用于锚点，例如：网页中常见的返回顶部效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 普通链接 -->
		<a href="https://www.baidu.com">百度一下，你就知道</a>
		<br>
		<!-- 图片链接 -->
		<a href="https://www.baidu.com"><img src="img/01.ico" alt="对不起，出错了"></a>
		<br>
		<!-- 邮件链接 -->
		<a href="mailto:812449131@qq.com">发生email</a>
		<br>
		<!-- 取消链接 -->
		<a href="javascript:void(0)">取消链接</a>
		
	</body>
</html>

锚点

锚点的使用需要满足两个点：一是要有跳转的标记点，二是可以进行跳转。例如：网页中常见的返回顶部功能。

需要使用id属性设置超链接标签一个名字，头部超链接href中写#尾部超链接标签名，尾部超链接href写#头部超链接id名。

同时也可以进行页面跳转，需要在超链接写另一个页面名+#另一个页面中超链接id名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="top" href="#button">
			跳转到尾部
		</a>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>
		<p>内容内容内容内容内容内容内容内容</p>	
		<a id="button" href="#top">跳转到头部</a>
		<br>
		<a href="A.html#a_id">跳转到A页面中的指定位置</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="a_id"></a>
		<h1>我是A页面</h1>
		
	</body>
</html>

4.8、table表格

和办公软件Excel表格是类似的，都有行（tr）和列（td），行及列都可以进行合并操作

table:定义表格。
tr:定义行。
td:定义列。
th:定义表格中头部（加粗）。
border: 边框大小。
bordercolor:连框的颜色。
cellpadding：内容与单元格之间距离。
cellspacing：单元格与单元格之间距离。

<body>
		<h1 align="center">员工表</h1>
		<hr width="90px" color="red" />
		<table border="1px" align="center" bordercolor="blue" cellpadding="20px" cellspacing="0px">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>工作</th>
				<th>薪资</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>jack</td>
				<td>男</td>
				<td>后端开发</td>
				<td>8000</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td>rose</td>
				<td>女</td>
				<td>前端开发</td>
				<td>7000</td>
				<td><a href="#">删除</a></td>
			</tr>
		</table>
	</body>

表格的跨行跨列

rowspan跨行

colspan跨列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 跨行 -->
		<table border="1px" align="center" cellspacing="0px" cellpadding="20px">
			<tr>
				<th>姓名</th>
				<th>联系方式</th>
			</tr>
			<tr>
				<td rowspan="2">jack</td>
				<td>0371-6666</td>
			</tr>
			<tr>
				<td>0371-6666</td>
			</tr>
		</table>

        <!-- 跨列 -->
		<table border="1px" align="center" cellspacing="0px" cellpadding="20px">
			<tr>
				<th>姓名</th>
				<th colspan="2">联系方式</th>
			</tr>
			<tr>
				<td>李四</td>
				<td>0371-6666</td>
				<td>0371-8888</td>
			</tr>
		</table>
	</body>
</html>

结构区分

表格通常会有对应的头部信息、具体的内容信息、还有一些底部的备注，此时就需要考虑一个问题如果不同区域中的位置因为跨行或跨列被占据了，那么整个表格都会发生错乱；为了避免出现跨行或跨列超出区域的问题，提供了区域划分的标签：thead、tbody、tfooter，内容默认都在tbody中。

<table border="1px" cellpadding="0" cellspacing="0" align="center" width="50%">
			<!-- 头部 -->
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
				</tr>
			</thead>
			
			<!-- 内容 -->
			<tbody>
				<tr>
					<td>jack</td>
					<td>男</td>
				</tr>
			</tbody>
			
			<!-- 脚部 -->
			<tfoot>
                	<tr>
					<td>rose</td>
					<td>女</td>
				</tr>
			</tfoot>
</table>

表格的优缺点

优点

1.布局简单（因为就是纯表格的区域划分）

2.样式统一（只要确认好第一行的样式，后面的都会跟着变）

缺点

维护的时候超级麻烦（表格中有跨行和跨列的操作，一旦需要添加或者删除某一行或某一列的时候，相关联的所有的合并操作都需要重来）

应用场景

布局简单，变动的可能性比较小的情况下考虑使用表格。

例如：登录、注册页，百度新闻的热搜新闻词模块，查询数据，用于数据展示。

4.9、form表单

表单通常用于让用户能够进行输入操作使用的，例如常见的登录、搜索、注册、图片上传等等。

action：指定服务器地址。

method：指定表单数据的提交方式。

get：默认的提交方式，get方式提交的数据会在地址栏中显示出来，很不安全，所能提交的数据量比较小，效率高。

post：效率低，安全，携带大量的数据，不会在地址栏中显示。

注意：表单中的数据想要提交，一定要有name属性存在表单中所有的内容都是通过以下三个标签组成的： input、textarea、select

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			<table align="center">
				<tr>
					<td>账号：</td>
					<td><input 
					type="text" 
					name="username" 
					placeholder="请输入账号"
					title="请输入账号"
					autocomplete="off"
					maxlength="15"
					value="小米"
					readonly="readonly"
					disabled="disabled"
					
					></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="pwd" placeholder="请输入密码"></td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="登录">
						<input type="reset">
					</td>
						
				</tr>
			</table>
		</form>
	</body>
</html>

4.10、表单中的其他标签

<form action="" method="">
			文本输入框:<input type="text" name="username" /><br>
			密码输入框:<input type="password" name="pwd" /><br>
			日期:<input type="date" name="date" /><br>
			月：<input type="month" name="month"/><br>
			日期日分秒：<input type="datetime-local" name="local" /><br>
			数据：<input type="number" name="number"/> <br>
			多选框：
				<input type="checkbox" name="box" value="吃饭"/>吃饭
				<input type="checkbox" name="box" value="睡觉"/>睡觉
				<input type="checkbox" name="box" value="打豆豆"/>打豆豆
				<input type="checkbox" name="box" value="敲代码"  checked="checked"/>敲代码<br>
			单选框：
				<input type="radio" name="sex" value="男" checked="checked" />男
				<input type="radio" name="sex" value="女" />女
				<input type="radio" name="sex" value="人妖" />人妖<br>
			文件上传：<input type="file" name="file"/><br>
			提交按钮：<input type="submit" value="登录"/><br>
			重置按钮：<input type="reset" /><br>
			按钮:<input type="button" id="button" value="点我啊"/>
				 <button>我是一个button</button><br>
			隐藏域：<input type="hidden" name="hidden" /><br>
			下拉框：
				<select>
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="郑州" selected="selected">郑州</option>
					<option value="杭州">杭州</option>
				</select><br>
			文本域：<textarea rows="10" cols="30"></textarea>
		</form>

4.11、Label标签

为了解决单选或者多选时只能通过点击选择框才能勾选上的问题，加入Label标签，点击相对应的文字就可以勾选。注意：label里的for属性填写对应input标签里的id名，这样才能绑定勾选框，点击文字就可以勾选。

<input type="checkbox" name="box" value="吃饭" id="a"/> <label for="a">吃饭</label>
<input type="checkbox" name="box" value="睡觉" id="b"/> <label for="b">睡觉</label>
<input type="checkbox" name="box" value="打豆豆"/>打豆豆
<input type="checkbox" name="box" value="敲代码"  checked="checked"/>敲代码<br>

4.12、iframe标签

后台管理的前台门户通常都是以单页面为主实现的，此时需要进行页面内容的嵌套，iframe标签可以在一个页面中嵌套其他页面的内容。

frameborder：控制是否显示边框线 1显示 0不显示。
scrolling：控制是否显示滚动条 yes显示 no不显示 auto根据页面大小浏览器自动控制。

aaa.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>学生信息表</h1>
	</body>
</html>

bbb.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
       <h1>教师信息表</h1>
	</body>
</html>

ccc.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <h1>后勤员工信息表</h1>
	</body>
</html>

main.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				text-decoration:none;
			}
			li{
				padding: 30px;
				width: 180px;
				text-align: center;
				margin-left: -40px;
			}
		
		</style>
	</head>
	<body>
		<div style="width:250px; height: 680px; position: absolute; background-color: aquamarine;">
			<ul style="list-style-type: none;">
				<li><a href="aaa.html" target="myiframe">学生信息表</a></li>
				<li><a href="bbb.html" target="myiframe">教师信息表</a></li>
				<li><a href="ccc.html" target="myiframe">后勤员工信息表</a></li>
			</ul>
			
		</div>
		 
		  <iframe src="xxx.html" name="myiframe" frameborder="1" width="1250px" height="680px" style="margin-left: 250px;"></iframe>
	</body>
</html>

xxx.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>校园信息管理系统</h1>
	</body>
</html>

4.13、标签划分及嵌套规则

从行业的官方规范来讲，对标签的划分分两种

块元素：单独占整行（自带换行符），可以设置宽高属性的。

行元素：可以在同一行显示，设置宽高不生效。

目前行业中的程序员喜欢的划分，分三种

块元素：单独占整行（自带换行符），可以设置宽高属性的。

行元素：可以在同一行显示，设置宽高不生效。

行内块元素：既可以设置宽高，也可以在同一行显示（img-本身自带了宽高属性，display属性控制）。

嵌套规则

1、行元素之间可以互相嵌套，行元素中不能嵌套块元素（html中是可以的，但是理论上来讲是不允许的）。

2、块元素中可以嵌套任意的行元素，块元素之间也可以互相嵌套，但是有两种标签需要注意 p标签中是不允许嵌套其他任意的块元素 h系列的标签是不能互相嵌套（因为每个h标签都有默认的字体大小）。

4.14、音频&视频

加入背景音乐

在项目下创建一个mp3包，里面存放下载好的MP3格式音乐，在代码中导入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<embed src="mp3/施雨凡 - 成都（女声）.mp3" hidden="true">
		
	</head>
	<body>
		<audio controls="controls">
			<source src="mp3/施雨凡 - 成都（女声）.mp3" type="audio/mp3">
		</audio>
        <!--弹幕滚动-->
		<marquee direction="right">成都.mp3</marquee>
	</body>
</html>

4.15、input正则效验

required属性是指必须书写，pattern里面书写正则表达式。

<form action="" method="">
	用户名：<input type="text" name="phoneNum" required="required" pattern="^1[356789]\d{9}$"/>
		   <input type="submit" value="提交"/>
</form>