网页——HTML篇

最新推荐文章于 2025-07-15 22:23:14 发布

原创最新推荐文章于 2025-07-15 22:23:14 发布 · 1.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

新手HTML 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了HTML作为网页基础结构的语言，解释了HTML与CSS、JavaScript的区别，并通过‘建房子’的比喻生动说明了前端开发流程。文中详细阐述了HTML的特征，包括其非编程语言性质和标记标签的使用。此外，还提供了创建第一个HTML网页的步骤，以及HTML标签和全局属性的简介，强调了alt属性和表格在页面布局中的作用。

一、第一个HTML网页
（一）HTML概述
HTML是超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。通俗来说HTML就是网页的基础结构。
如何区分HTML、CSS、JavaScript

前端开发的过程比喻成”建房子“，做一个网页就像盖一栋房子，先把房子的地基结构（HTML）打好、建好之后给房子装修（CSS），粉刷墙面、贴瓷砖、安装电路等。最后，装修好了之后，晚上，我们要开灯

（JavaScript）。
（二）特征

不是一种编程语言，而是一种标记语言
标记语言是一套标记标签
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
（1） HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

开始第一个网页
Windows，使用记事本。 Mac，使用 SimpleText。

<html>              //这个 HTML 文件的开始点
	<head>
		<title>第一个HTML网页</title>                  //标签中的文本是文件的标题。标题会显示在浏览器的标题栏。
	</head>        //head 标签之间的文本是头信息,不会显示在浏览器窗口中。
	<body>
		<font color="red" size="7" face="楷体">Hello HTML</font>
	</body>                      //标签中的文本是将被浏览器显示出来的文本。
</html>            //文件中最后一个标签,这是 HTML 文件的结束点

步骤：
（1）打开记事本录入以上内容。
（2）将这个文件存为 “第一个HTML网页.htm”，保存至桌面。
（3）使用浏览器方式打开。
二、第二个网页

<html>
 <head>
  <title>第二个网页</title>
 </head>
 <body>
	一去二三里，<br>
	烟村四五家。<br>
	亭台六七树，<br>
	八九十枝花。<br>
	<hr color="red" size="1px" width="50%" align="center" noshade="noshade" />
	<hr size="1px" noshade="noshade"/>
	<!-- 
		分割线的属性
		color 颜色
		size 线的宽度
		width 线的长度可以用像素 也可以用百分比
		align="left" 线条的对齐方式 left center right
		noshade="noshade" 线条的阴影
	-->
	<font color="#ff00cc" size="7" face="楷体">
	//字体属性
	<!-- 标签会带带有一些属性 格式 属性名="值" 多个属性用空格隔开
		color="red" 设置颜色 颜色的取值 除了使用颜色的英文单词外，我们也可以设置颜色的 16进制值
		size="7"  设置字体大小 最大取值 7
		face="隶书" 设置字体
	-->
 </body>
</html>

三、HTML标签列表

标签	描述
基础
<!DOCTYPE>	定义文档类型
h1——h6	定义 HTML 标题
p	定义段落
br	换行
hr	定义水平线
<！–…-->	定义注释
格式
address	模拟信封上的字体
b	文本粗体
center	文本居中
code	定义计算机代码文本
em	强调
font	定义文字的字体、尺寸和颜色。
q	定义短的引用
small	定义小号文本
strong	加强
sup	定义上标文本
sub	定义下标文本
表单
input	定义输入控件
button	定义一个按钮
select	定义选择列表（下拉列表）
图像
img	定义图片
链接
a	超文本链接
link>	定义文档与外部资源的关系
列表
ul	定义无序列表
li	定义列表的项目
表格
table	定义表格
caption	定义表格标题
th	定义表格中的表头单元格
tr	定义表格中的行
td	定义表格中的单元
&nbsp	转意字符表示空格
&copy	版权符
&trade	TM
&quot	双引号
样式
style	定义文档的样式信息
div	定义文档中的节
span	定义文档中的节
head	定义关于文档的信息
程序
script	定义客户端脚本
其他
pre	预编译
bgcolor	背景标签
id	规定元素的唯一 id
translate	指定是否一个元素的值在页面载入时是否需要翻译

属性代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body           //bgcolor="aquamarine">//背景标签
	
background="img/5ef58360cf6b43f786e2cebd203af195.jpg">
		<bgsound src="mp3/月亮代表我的心.mp3"></bgsound>//背景图片
<table align="center">
		<tr>
			<td>
				<font color="azure">
				<h1>再别康桥</h1>
				<marquee behavior="scroll" direction="up" align="center">
				轻轻的我走了，正如我轻轻的来；<br>我轻轻的招手，作别西天的云彩。
				</font>
					</marquee>	
			</td>
		</tr>
	</table>

//标题
		<h1 align="center">最大的标题</h1>
		<h2>二级标签</h2>
		<h3 align="left">三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级别标题</h5>
		<h6 align="right">六级标题</h6>

//超链接
<!-- href 链接的页面路径 target 打开的页面在新窗口打开_blank 还是在本窗口打开_self-->
		<a href="http://www.baidu.com" target="_blank">进入百度</a>
		<a href="http://www.163.com">进入网易</a>
		<a href="http://www.sina.com">进入新浪</a>
		<!-- 跳转本站的页面 -->
		<a href="index.html">进入首页</a>

//图片标签
<!-- src 图片的地址、width height 图片的宽高、 border 图片的边框、 alt 图片无法显示时，的文字代替、	 title 鼠标移动上图片后，会有文字提示、 align="right" center left right 图片的对齐方式 -->
		<img src="img/c1.jpg" border="5px"/>
		<img src="img/c1.jpg" alt="这是一张图片" name="hahahhaha" title="这是一张图片"/>
		<img src="img/c1.jpg" />
		<img src="http://www.westos.org/images/mi.png" />//网络图片
		<img src="http://pic-bucket.ws.126.net/photo/0001/2019-06-04/EGQ4O4II00AN0001NOS.jpg" width="400px" height="500px" align="right"/>

//锚点链接
<a name="top"></a>
		<ul>
			<li><a>第一章</a></li>
			<li><a href="#er">第二章</a></li>
			<li><a>第三章</a></li>
		</ul>
		一起来为绿色发展、<br>
		一起来为绿色发展、<br>
		<a name="er"></a>
		<h1>第二章开始</h1>
		一起来为绿色发展、<br>
		一起来为绿色发展、<br>
		<a href="#top">调到顶部</a>

//列表标签
<!-- 无序列表  	type 列表项前面的小图标	-->
		<ul type="circle">
			<li>列表项目</li>
			<li>列表项目</li>
			<li>列表嵌套
				<ol>
					<li>列表项目</li>
					<li>列表项目</li>
				</ol>
			</li>
		</ul>
		<!-- 有序列表 type 设置列表项前面的各种序号 比如 数组，大小写字母，罗马字母 	start  序号从几开始	-->
		<ol type="I" start="6">
			<li>列表项目</li>
			<li>列表项目</li>
		</ol>
		<!-- 自定义列表 -->
		<dl>
			<dt>列表标签</dt>
			<dd>列表的描述</dd>
			<dt>列表标签</dt>
			<dd>列表的描述</dd>
		</dl>

//合并单元格
<table border="1" cellspacing="0" align="center" width="50%" height="500px">
			<!--  rowspan 上下合并 -->
			<tr align="center">
				<td rowspan="2">Data</td>
				<td>Data</td>
			</tr>
			<tr align="center">
				<td>Data</td>
			</tr>
			<tr align="center">
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr align="center" >
				<!--  colspan="2" 左右合并-->
				<td colspan="2">Data</td>
			</tr>
		</table>

//合并单元格2
<table border="1" cellspacing="0" align="center" width="500px" height="500px">
			<tr>
				<td>Data</td>
				<td colspan="3">Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td rowspan="3">Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td colspan="2">Data</td>
			</tr>
		</table>
		<hr>
		<table border="1" cellspacing="0" width="500px" height="500px" align="center">
			<tr>
				<td rowspan="5">Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
			</tr>
			<tr>
				<td colspan="2" align="right"><button type="button">添加购物车</button></td>
			</tr>
		</table>
	</body>
</html>

四、全局属性介绍
alt——提示键
（一）窗口事件（由窗口触发该事件）
（二）表单
（三）键盘
（四）鼠标
（五）多媒体

//表单标签
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--   action="#" 后台地址  method: 提交方式   get ：将表单中的填的数据，拼接到地址栏后面提交
			  post：将表单中的数据放到请求体里面提交  每个表单项的 name属性必须有	 -->
	
			<form action="#" method="get">
			<!--  placeholder="请输入你的用户名"  默认提示文字 	 maxlength="8" 最大输入字符数	 -->
			
			用户名:<input type="text" name="username" value="" placeholder="请输入你的用户名" maxlength="8"/> <br>
			密码:<input type="password" name="password"  value="" placeholder="请输入你的密码" /><br>
			<!-- 单选框的name 的属性值必须一样 	checked="checked" 默认选中项-->
		
			性别:<input type="radio" name="sex" value="1" id="nan" checked="checked"/> <label for="nan" >男</label> 
			<input type="radio" name="sex" value="0" id="nv"/><label for="nv">女</label> 	<br>
		
			生日：<input type="date" name="shengri" /><br>
			你有几个女朋友：<input type="number" value="1" min="0" max="10"/>	<br>
			
			<!-- 多个复选框的name属性值要一样 	checked="checked" 默认选中项	-->
			
			爱好：<input type="checkbox" name="hobby" value="run" checked="checked"/>跑步
			<input type="checkbox" name="hobby" value="sing" checked="checked"/>唱歌
			<input type="checkbox" name="hobby" value="lookbook" id="kanshu"/><label for="kanshu">看书</label> 
			<br>
		      <!-- selected="selected" 默认选中项	-->
			//学历：<select name="xueli">
				<option value="">--请选择你的学历--</option>
				<option value="babyScool" selected="selected">幼儿园</option>
				<option value="xiaoxue">小学</option>
				<option value="zhongxue">中学</option>
				<option value="daxue">大学</option>
				
			</select>
			<br>
			
			<textarea rows="20" cols="20" name="des"></textarea>
			<br>
			<input type="submit" value="注册用户" />
			<input type="reset" value="重置" />
		</form>
	</body>
</html>

表格标签，最早就是用来布局页面的，让页面元素放在合适的位置，使页面看起来整洁美观

	 border="1" 表格的边框
	 cellspacing="0" 设置为0 可以让边框变成实线边框
	 cellpadding="10px" 调整单元格跟内容之间的间距
	 height="300px"  表格的高
	 width="300px" 表格的宽
	 align="center" 表格的对齐方式 left center right
	 bgcolor="aquamarine" 表格的背景颜色
	 background="img/c.jpg" 表格的背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="10px" height="300px" width="300px" align="center" bgcolor="aquamarine" background="img/c.jpg">
			<caption><h1>学生信息表<h1></caption>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>学号</th>
			</tr>
			<tr align="center" bgcolor="palevioletred" height="100px">
				<td width="100px">张三</td>
				<td>23</td>
				<td>男</td>
				<td>s001</td>
			</tr>
			<tr align="center" background="img/c1.jpg">
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr align="center">
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td bgcolor="yellow">单元格</td>
			</tr>
		</table>
	</body>
</html>

表格嵌套：

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

		<table border="1" cellspacing="0" align="center" width="50%" height="500px">

			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td width="100px" height="100px">
					
					<table border="1" cellspacing="0" >
						<tr><td>Data</td><td>Data</td><td>Data</td></tr>
						<tr><td>Data</td><td>Data</td><td>Data</td></tr>
						<tr><td>Data</td><td>Data</td><td>Data</td></tr>
					</table>
					
				</td>
			</tr>
		</table>
	</body>
</html>