HTML5超级简单免费入手教程

用户9184480

发布于 2024-12-13 17:02:26

6500

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

HTML

HTML概念

引用百度百科

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

静态页面概念

静态页面指的不是页面不动，指的是内容、数据是不动的。

常说的浏览器中的视觉效果，不需要与用户进行交互（浏览器对用户操作的操作做出的回应）动作

开发工具

工具名称	工具logo	下载地址
Sublime Text		http://www.sublimetext.com/3
HBuilder		https://www.dcloud.io/hbuilderx.html
VS code		https://code.visualstudio.com/Download
WebStorm		https://www.jetbrains.com/webstorm/download/

本课堂使用的是Hbuilder X，因为在学习前端的网页框架的时候需要使用本地服务器，但是还没有学到JavaWeb课程，而HbuilderX自带了服务器

Head头部

网页结构

通过F12或在页面中右键-审查元素等方式查看页面的HTML构建结构

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

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

ico图标

在线转ico格式 http://www.bitbug.net/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下，你就知道</title>
		<link rel="shortcut icon" href="img/001.ico" />
	</head>
	<body>
	</body>
</html

面页倒记时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
         <!-- 设置当前网页刷新时间 -->
		<meta http-equiv="refresh" content="10;https://www.baidu.com">
		<title> 倒记时 </title>
	</head>
	<body>
		<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 rel="nofollow" href="https://www.baidu.com">百度</a>

	</body>
</html>

HTML常用标签

前端页面中只有指定的标签才能被浏览器的内核解析，对于未知或自定义的标签浏览器会当成常规的文本识别

标题标签

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

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

段落&换行标签

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

<p>
  我是一个段落，但是没有任何的特点，只具备段落的含义而已
</p>
		<!-- p标签：段落 -->
		<!-- <br> 换行标签 -->

		<!-- <p></p> 为双标签，有开始和结束
			<br> 为单标签	
		-->
		<p>轻轻的我走了,</p>
		正如我轻轻的来；<br>
		我轻轻的招手，<br>
		作别西天的云彩<br>

水平线标签

<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>

字体标签

    <!-- 
        font标签：字体样式标签
            color属性: 设置字体颜色
            size属性: 设置字体大小

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

            html主要作网页架构  相当于房子结构
            css 主要样式美化    相当于家装(美化)
    -->	
		
		<h2 align="center"><font color="green">再别康桥</font></h2>
		
		<!-- 水平线 -->
		<hr width="15%" size="3" color="red"/>
		<center>
			<p><strong>轻轻的我走了，</strong></p>
			<p><font color="orange" size="3">正如我轻轻的来；</font></p>
			<p><font color="#4C99FF">我轻轻的招手，</font></p>
			<p><em>作别西天的</em><font color="coral">云彩</font> </p>
		</center>

列表标签

将内容以列表的形式按从上往下进行排列，开发需要自定义样式，此处只针对标签演示学习

<!-- 无序列表，没有顺序，ul只是语义上表示其是一个列表标签，但是里面是没有内容的，内容要通过li标签来书写-->
<ul type="disc">
  <li>马克杯</li>
  <li>笔记本</li>
  <li>麦克风</li>
</ul>

<!-- 有序列表，带有顺序，type指定排序类型，start指定开始的位置 -->
<h5>热搜排行榜</h5>
<ol type="A" start="3">
  <li>新冠疫情</li>
  <li>外交部发言回击</li>
  <li>中国台湾出现5.8级地震</li>
</ol>

<!-- 自定义列表 dt相当于标题 dd相当于是描述 -->
<dl>
  <dt>新冠疫情</dt>
  	<dd>1、成都出现新冠疫情</dd>
  	<dd>2、出现疫情后所有相关人员已经进行了隔离及检测</dd>
  <dt>中国台湾</dt>
  	<dd>1、台湾是中国的宝岛</dd>
  	<dd>2、想台独想了很多年，也只能想想</dd>
</dl>

图片标签

用于引入图片在网页中进行显示，开发常用，重点注意其相对路径的使用方式

绝对路径:带盘符、文件夹路径;

相对路径：

<body>	

    <!-- 图片 
        src：引入的图片的路径
        width：设置图片的大小，一般只设置width自动匹配高（px是一个固定的像素 %随着浏览器大小而定）
        title：当你鼠标悬浮图片时要显示的内容
        alt：表示当前图片加载不到或者丢失，提示显示内容
    -->
    <img src="../img/一燕.jpg" width="400px" title="你是我的小饼干" alt="不好意思,小饼干走丢了!!" />

</body>

超链接标签

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

超链接跳转

	<body>
		
		普通链接：<a rel="nofollow" href="https://www.baidu.com" target="_blank">百度一下</a><br />
		
		图片链接：<a rel="nofollow" href="https://image.baidu.com/search/index?tn=baiduimage&ps"> 
					<img src="../img/一燕.jpg" width="100px"> 
				 </a><br>
				 
		邮件链接：<a rel="nofollow" href="mailto:xx@126.com">发送e-mail</a>
		
		取消链接：<a rel="nofollow" href="javascript:void(0)">你是我的小面包</a>
				 
	</body>

锚点

锚点的使用需要满足两个点：一是要有跳转的标记点，二是可以进行跳转

常见举例 1.网页中常见的返回顶部功能 2.火影中四代火影的瞬雷术

<!-- 头 -->
<a rel="nofollow" id="top" href="#buttom">跳到尾部</a>
<p>wq我是头</p>
<p>中间省略一千行</p>
<p>wq我是尾</p>
<!-- 尾 -->
<a rel="nofollow" id="buttom" href="#top">跳到首页</a>

<!--页面A中指定位置-->
<!-- 做个标记 -->
<a id="a_id"></a>
我是A页面

<!--页面B中进行跳转-->
<a rel="nofollow" href="A.html#a_id">跳转到a页面的内容中</a>
我是B页面

table表格 *

表格标签

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

<body>
		<!-- 
			table:定义表格
			tr:定义行
			td:定义列
			th:定义表格中头部（加粗）
			border: 边框大小
			bordercolor:连框的颜色
			cellpadding：内容与单元格之间距离
			cellspacing：单元格与单元格之间距离		 
		 -->
		员工表
		<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 rel="nofollow" href="#">删除</a></td>
			</tr>
			<tr>
				<td>rose</td>
				<td>女</td>
				<td>前端开发</td>
				<td>7000</td>
				<td><a rel="nofollow" href="#">删除</a></td>
			</tr>
			<tr>
				<td>yiyan</td>
				<td>女</td>
				<td>小秘</td>
				<td>10000</td>
				<td><a rel="nofollow" href="#">删除</a></td>
			</tr>
		</table>
	</body>

跨行跨列

rowspan跨行

		<!-- 原始表格 
			table>tr*3>td*2 快捷方式书写
		-->
		<table border="1px" cellspacing="0px" cellpadding="20px" align="center" width="700px">
			<tr>
				<th>姓名</th>
				<th>联系方式</th>
			</tr>
			<tr>
				<td>jack</td>
				<td>0371-6666</td>
			</tr>
			<tr>
				<td>jack</td>
				<td>0371-8888</td>
			</tr>
		</table>

		<!-- 实现跨行 -->
		<table border="1px" cellspacing="0px" cellpadding="20px" align="center" width="700px">
			<tr align="center">
				<th>姓名</th>
				<th>联系方式</th>
			</tr>
			<tr align="center">
				<!-- 跨行 -->
				<td rowspan="2">jack</td>
				<td>0371-6666</td>
			</tr>
			<tr align="center">
				<td>0371-8888</td>
			</tr>
		</table>

colspan跨列

		<!-- 原始table表 -->
		<table border="1px" cellspacing="0px" cellpadding="20px" align="center" width="600px">
			<tr>
				<td>姓名</td>
				<td>联系方式</td>
				<td>联系方式</td>
			</tr>
			<tr>
				<td>rose</td>
				<td>0371-8888</td>
				<td>0371-9999</td>
			</tr>
		</table>

		<!-- colspan 实现跨列 -->	
		<table border="1px" cellspacing="0px" cellpadding="20px" align="center" width="600px">
			<tr align="center">
				<td>姓名</td>
				<!-- colspan 实现跨列 -->
				<td colspan="2">联系方式</td>
			</tr>
			<tr align="center">
				<td>rose</td>
				<td>0371-8888</td>
				<td>0371-9999</td>
			</tr>
		</table>

案例-简历表

		<!-- 简易的简历表 -->
		<h2 align="center">简历表</h2>
		<table border="1px" align="center" cellspacing="0px" width="600px">
			<!-- 第一行 -->
			<tr align="center">
				<td width="20%">姓名</td>
				<td width="20%"></td>
				<td width="20%">专业</td>
				<td width="20%"></td>
				<td width="20%" rowspan="2"></td>
			</tr>
            
			<!-- 第二行 -->
			<tr align="center">
				<td>出生日期</td>
				<td></td>
				<td>联系方式</td>
				<td></td>
			</tr>
            
			<!-- 第三行 -->
			<tr align="center">
				<td>籍贯</td>
				<td colspan="4"></td>
			</tr>
            
			<!-- 第四行 -->
			<tr align="center">
				<td colspan="5">工作经历</td>
			</tr>
            
			<!-- 第五行 -->
			<tr>
				<td colspan="5" height="100px"></td>
			</tr>
            
			<!-- 第六行 -->
			<tr align="center">
				<td colspan="5">教育经历</td>
			</tr>
            
			<!-- 第七行 -->
			<tr align="center">
				<td>起止时间</td>
				<td colspan="2">学校名称</td>
				<td colspan="2">证明人</td>
			</tr>
            
			<!-- 第八行 -->
			<tr>
				<td height="40px"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
            
			<!-- 第九行 -->
			<tr>
				<td height="40px"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
            
			<!-- 第十行 -->
			<tr>
				<td colspan="5" height="120px">备注</td>
			</tr>
		</table>

结构区分

表格通常会有对应的头部信息、具体的内容信息、还有一些底部的备注，此时就需要考虑一个问题

如果不同区域中的位置因为跨行或跨列被占据了，那么整个表格都会发生错乱；为了避免出现跨行或跨列超出区域的问题，提供了区域划分的标签：thead、tbody、tfooter，内容默认都在tbody中

<!-- 表格中默认会将所有的内容都放在一个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.样式统一（只要确认好第一行的样式，后面的都会跟着变）

缺点

维护的时候超级麻烦（表格中有跨行和跨列的操作，一旦需要添加或者删除某一行或某一列的时候，相关联的所有的合并操作都需要重来）在布局的时候，千万别嵌套，嵌套表格：地狱模式。

表格应用场景

布局简单，变动的可能性比较小的情况下考虑使用表格例如：登录、注册页，百度新闻的热搜新闻词模块，查询数据，后台用于数据展示。

form表单 *

表单中的基础标签

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

客户端和服务器端交互，使用的都是表单。

表单是让用户进行信息输入的，将输入的数据提交到服务器上，服务器再根据提交的数据进行分析验证反馈结果 action：指定服务器地址 method：指定表单数据的提交方式 get：默认的提交方式，get方式提交的数据会在地址栏中显示出来，很不安全，所能提交的数据量比较小，效率高 post：效率低，安全，携带大量的数据，不会在地址栏中显示开发的过程中post方式使用的较多，考虑安全问题注意：表单中的数据想要提交，一定要有name属性存在表单中所有的内容都是通过以下三个标签组成的： input、textarea、select

		注册页面
		<table align="center">
			<!-- 
 			定义这是表单,表单是用于数据提交
			 action：提交到后台的请求路径(自己写的后台)
			 method：提交到后台的请求方式
					post: 不会把提交的内容在浏览器地址栏中显示，安全，提交的内容理论上来是无限
					get：xxx/?username11=jack&passwrold22=123
						 把提交的内容在浏览器地址栏中显示，不安全，对内容有限制一般为1kb,提交的内容有限
                      type:表示当前输入框是什么类型	
                      name:表示给这个输入框起的名字（也是用于后台提交的名字）	
                      placeholder:输入框中提示
                      title：鼠标悬浮时显示提示
                      autocomplete：关闭输入框中已提交历史记录
                      maxlength：设置当前输入框的最大长度（仅仅表示长度）
                      value：当前输入框中的默认值
                      readonly：设置当前输入框为 只读状态，但不影响数据提交
                      disabled：设置当前输入框为 不可用状态，不能数据提交
			-->
			<form action="xxx" method="get">
				<tr>
					<td>用户名：<font color="red">*</font></td>
					<td><input  type="text" 
								name="username11" 
								placeholder="请输入用户名" 
								title="请输入用户名" 
								autocomplete="off" 
								maxlength="3" 
								value="小江" 
								readonly="readonly" 
								disabled="disabled"/></td>
				</tr>
				<tr>
					<td>密&nbsp;&nbsp;&nbsp;码：<font color="red">*</font></td>
					<td><input type="password" name="passwrold22" placeholder="请输入密码" /></td>
				</tr>
				<tr>
					<td><input type="submit" value="注册"></td>
					<td><input type="reset"></td>
				</tr>
				
			</form>
		</table>

表单中的其他标签

		<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>

Label标签

<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>

iframe标签

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

<!-- 引入其他页面
frameborder：控制是否显示边框线 1显示 0不显示
scrolling：控制是否显示滚动条 yes显示 no不显示 auto根据页面大小浏览器自动控制
-->
<iframe src="../day01/常用标签01.html" width="100%" height="800px" frameborder="0" scrolling="auto"></iframe>

<a rel="nofollow" href="aa.html" target="myiframe">教职员工</a>
<a rel="nofollow" href="bb.html" target="myiframe">在校学生</a>
<a rel="nofollow" href="cc.html" target="myiframe">毕业校友</a>

<iframe frameborder="0" scrolling="auto" src="aa.html" name="myiframe" width="1000px" height="600px"></iframe>

标签划分及嵌套规则

标签划分

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

块元素：单独占整行（自带换行符），可以设置宽高属性的 <h1>~<h6>、<p>、<div>、<ul>、<table>.. 行元素：可以在同一行显示，设置宽高不生效 <a>、<strong>、<em>、<span>..

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

块元素：单独占整行（自带换行符），可以设置宽高属性的行元素：可以在同一行显示，设置宽高不生效行内块元素：也可以在同一行显示，既可以设置宽高（img-本身自带了宽高属性，display属性控制）

嵌套规则

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

<span>价格：<strong style="color: red;">998</strong>元</span>
<hr>
<p>
  <a rel="nofollow" href="http://news.baidu.com">百度新闻</a>
  <a rel="nofollow" href="http://www.baidu.com">百度首页</a>
</p>
<hr>
<div>
  <p>在div中嵌套任意的块元素是很常见的</p>
</div>
<p>
<div>在p标签中嵌套任意的块元素都会发生页面结构的变化</div>
</p>
<h3>
  <h2>在一个小的字体中嵌套了一个大的字体</h2>
</h3>

div和span *

		<!-- span是行内元素 ,span有内容就显示,span没有内容就不显示 -->
		<span>百度新闻</span>
		<span></span>
		<span>百度首页</span>
		
		<!-- 应用场景 -->
		<form action="" method="">
			用户名：<input type="text" name="" /><span id="uid">对不起，用户名不存在</span><br>
			密码：<input type="text" name="" /><span id="pid"></span><br>
			<input type="submit"/>
		</form>
		
		<!-- div是块元素, div有内容就显示, div没有内容就不显示-->
		<div>新联</div>
		<div></div>
		<div>hao123</div>
		
		<!-- 应用场景：一般把div当作一个盒子来用，可以页面框架 -->
		<div>
			<div>
				<a rel="nofollow" href="http://news.baidu.com" target="_blank" class="mnav">新闻</a>
			</div>
			<div>
				<a rel="nofollow" href="https://www.hao123.com" target="_blank" class="mnav">hao123</a>
			</div>
		</div>

音频&视频

加入背景音乐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<embed src="mp3/只要平凡.mp3" hidden="true" ></embed>
	</head>
	<body>
		<marquee direction="right">只要一燕.mp3</marquee>
	</body>

		<!-- 加入mp3 -->
		<audio controls="controls">
			<source src="mp3/只要平凡.mp3" type="audio/mp3"></source>
		</audio>

加入视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<video width="800px" height="300px" controls="controls">
			<source src="./mp4/甘南游.MP4" type="audio/mp4"></source>
		</video>
		
	</body>
</html>

input框校验

<form action="" method="">
    用户名：<input type="text" name="phoneNum" required="required"/>
    	   <input type="submit" value="提交"/>
</form>

input框正则

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

特殊字符

<!-- 
			空格： &nbsp;
			大于号： &gt;
			小于号： &lt;
			版本符： &copy;
			人民币： &yen;
-->

本章小结

1.网页基本结构的组成需要了解，方便后期JavaScript中对DOM结构进行操作 2.图片标签的相对路径使用及超链接的跳转使用要熟练 3.表单的action及method属性要掌握，input标签注意其name属性一定要存在 4.标签的嵌套规则没有明确的要求，只是根据其特征从理论上进行划分从而规范开发

本章作业

结合表单及表格实现一个登录页、注册页

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-08-18，如有侵权请联系 cloudcommunity@tencent.com 删除

表格

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度