HTML学习总结

最新推荐文章于 2025-06-12 13:38:52 发布

原创最新推荐文章于 2025-06-12 13:38:52 发布

· 676 阅读

0 ·

版权

文章标签：

#html #前端

在这里插入图片描述

HTML

HTML(Hyper Text Markup Language)——种用来描述网页的语言(超文本标记语言)¹

1.HTML基础

1.1标签

            标签是HTML最重要的组成部分。
            常见的标签有<p></p>、<a href="....."></a>。标签分为双标签和单标签,书写是要注意标签的关闭顺序。
            不同的标签具有不同的功能。例如a标签可以实现使标签内容作为超链接的功能，案例如下`<!DOCTYPE html
            <html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
      <a href="https://www.bilibili.com/">哔哩哔哩</a>
</body>
</html>

该代码执行后的效果如图：
在这里插入图片描述

还有许多标签会在文章后面提到，同样可以在W3C网站中找到许多标签，只要在编辑的时候注意书写的格式就可以实现标签的功能。

1.2元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码例如<p>hello world</p> 我们称此为<p>元素，<p>标签当中的内容则被称作元素内容，请注意HTML的元素语法：1.HTML 元素以开始标签起始HTML 元素以结束标签终止
2.某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
且大多数HTML元素可以嵌套，HTML文档便是由嵌套的HTML元素构成的

1.3属性

HTML的每个标签都可以拥有属性，属性可以为元素提供更多的信息。属性总是以名称+值的形式出现，例如：name=“value”。注意：属性总是在HTML元素中的开始标签进行规定。比如在1.1中的案例中，href便是元素的属性，用来确定跳转的地址

1.4链接

1.4(1)文字链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。前面提到的<a>标签便是一种建立链接的方式

1.4(2)图像链接

在网页中我们不仅仅用文字作为链接，链接同样可以是一张图片，因此我们可以在a标签中引入一张图片来实现该功能，此时需要使用img标签，代码如下`

                                                       <!DOCTYPE html>
                                                       <html lang="en">
                                                       <head>
                                                       <meta charset="UTF-8">
                                                       <title>Document</title>
                                                       </head>
                                                       <body>
                                                       <p>
                                                       <a href="https://www.bilibili.com/">
                                                       <img src="C:\sublime\Data\code\image\homeworkMaterials\images\i2.png">
                                                       </a>
                                                       </p>
                                                       </body>
                                                       </html> `

网页中效果如图：
在这里插入图片描述
跳转后如图：

1.5表格

表格即在HTML文档中制作一个表格，是网页内容如表格一样展现出来，表格由 <table> 标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
一个简易表格的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<table width="1600px">
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>		
	</tr>
	</table>
</body>
</html>

其中width属性用于规定表格在网页中所占的大小，在盒子模型等情况下同样适用。
接下来是我利用表格制作的简易的电影网站首页，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body bgcolor="pink">
   <div align="center">
   	    <p><font size="7" color="red"> 你kin你kin，你擦影院</font><font size="3" color="black" ><a href="1.html">登录</a></font></p>
   	<hr>
   </div>
   <table width="1600px">
   	<tr>
   	    <td>热门</td>
   	    <td>经典</td>
   	    <td>华语</td>
   	    <td>欧美</td>
   	    <td>韩国</td>
   	    <td>非洲</td>
   	    <td>动作</td>
   	    <td>喜剧</td>
   	    <td>惊悚</td>
   	    <td>科幻</td>
   	    <td>悬疑</td>
   	</tr>
   </table>
   <hr/>
   <p>筛选:
   <input type="radio" name="xz" value="按热度排序">按热度排序
   <input type="radio" name="xz" value="按时间排序">按时间排序
   <input type="radio" name="xz" value="按评价排序">按评价排序
   </p>
   <table width="1500">
   	<tr>
   		<td><img src="C:\sublime\Data\code\image\chss.jpg"    width="201px"></td>
   		<td><img src="C:\sublime\Data\code\image\dh.jpg"      width="201px"></td>
   		<td><img src="C:\sublime\Data\code\image\zxfdjj.jpg"  width="201px"></td>
   		<td><img src="C:\sublime\Data\code\image\mmwd.jpg"    width="201px"></td>
   		<td><img src="C:\sublime\Data\code\image\jzy.jpg"     width="165px"></td>
   		<td><img src="C:\sublime\Data\code\image\xt.jpg"      width="201px"></td>
   		<td><img src="C:\sublime\Data\code\image\ydjdj.jpg"   width="201px"></td>
   	</tr>
   	<tr align="center">
   		<td>赤狐书生</td>
   		<td>电话</td>
   		<td>最幸福的季节</td>
   		<td>秘密窝点</td>
   		<td>姜子牙</td>
   		<td>信条</td>
   		<td>一点就到家</td> 
   	</tr>
   </table>
   <table width="1500">
   	<tr>
   		<td><img src="C:\sublime\Data\code\image\wsdgd.jpg" width="201px"></td>
   		<td><img src="C:\sublime\Data\code\image\bb.jpg" width="201px"></td>
   		<td><img src="C:\sublime\Data\code\image\yxdhh.jpg" width="201px"></td>
   		<td><img src="C:\sublime\Data\code\image\ws.jpg" width="201px"></td>
   		<td><img src="C:\sublime\Data\code\image\dg.jpg" width="200px"></td>
   		<td><img src="C:\sublime\Data\code\image\blt2.jpg" width="201px"></td>
   		<td><img src="C:\sublime\Data\code\image\mxs.jpg" width="165px"></td>
   	</tr>
   	<tr align="center">
   		<td>我是大哥大</td>
   		<td>八佰</td>
   		<td>野性的呼唤</td>
   		<td>误杀</td>
   		<td>多哥</td>
   		<td>波拉特2</td>
   		<td>妙先生</td> 
   	</tr><table width="1500">
      <tr>
         <td><img src="C:\sublime\Data\code\image\chss.jpg" width="201px"></td>
         <td><img src="C:\sublime\Data\code\image\dh.jpg" width="201px"></td>
         <td><img src="C:\sublime\Data\code\image\zxfdjj.jpg" width="201px"></td>
         <td><img src="C:\sublime\Data\code\image\mmwd.jpg" width="201px"></td>
         <td><img src="C:\sublime\Data\code\image\jzy.jpg" width="165px"></td>
         <td><img src="C:\sublime\Data\code\image\xt.jpg" width="201px"></td>
         <td><img src="C:\sublime\Data\code\image\ydjdj.jpg" width="201px"></td>
      </tr>
      <tr align="center">
         <td>赤狐书生</td>
         <td>电话</td>
         <td>最幸福的季节</td>
         <td>秘密窝点</td>
         <td>姜子牙</td>
         <td>信条</td>
         <td>一点就到家</td> 
      </tr>
   </table>
   </table>
   <table width="1500">
      <tr>
         <td><img src="C:\sublime\Data\code\image\wsdgd.jpg" width="201px"></td>
         <td><img src="C:\sublime\Data\code\image\bb.jpg" width="201px"></td>
         <td><img src="C:\sublime\Data\code\image\yxdhh.jpg" width="201px"></td>
         <td><img src="C:\sublime\Data\code\image\ws.jpg" width="201px"></td>
         <td><img src="C:\sublime\Data\code\image\dg.jpg" width="200px"></td>
         <td><img src="C:\sublime\Data\code\image\blt2.jpg" width="201px"></td>
         <td><img src="C:\sublime\Data\code\image\mxs.jpg" width="165px"></td>
      </tr>
      <tr align="center">
         <td>我是大哥大</td>
         <td>八佰</td>
         <td>野性的呼唤</td>
         <td>误杀</td>
         <td>多哥</td>
         <td>波拉特2</td>
         <td>妙先生</td>
         </tr>
         </table>
         <p align="center"><a href="https://www.bilibili.com/cinema/?spm_id_from=333.851.b_7072696d6172794368616e6e656c4d656e75.84">更多>></a></p> 

</body>
</html>

展示效果如图：在这里插入图片描述

1.6图像

图像标签即<img src="url"/>标签，我们常利用此标签来引入图像，该标签是一个空标签，它只保函属性，没有闭合标签。src指的是"source"（源属性），其中url用来填写需要应用的图片的路径。
我们可以在<body>这一开始标签中添加background标签来引入图片作为网页背景
同样的我们可以通过width等属性来规定引入图片的尺寸

1.6(相对路径)

绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。完整的描述文件位置的路径就是绝对路径。

1.6(绝对路径)

相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利。

从我最近的使用上来看，我认为相对路径使用起来相对于绝对路径方便许多，但如果没有理清相对路径的概念容易导致图片无法正常显示在网页上，相较之下绝对路径就不宜出错，在文件夹上的地址栏可以复制地址为文本，粘贴在url处然后输入自己需要的图片名就可以正常显示但所花时间较长，作为专业人士应该熟练掌握两种方式。

1.7框架

框架可以使网页显示多个页面，每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

1.7(frameset)

框架结构标签<frameset>定义如何将窗口分割为框架，每个 frameset 定义了一系列行或列，rows/columns 的值规定了每行或每列占据屏幕的面积。若框架有可见边框，用户可以拖动边框来改变框架大小。在标签中添加noresize="noresize"可以避免这一情况。实例如下：

<html>

<frameset cols="50%,*,25%">
  <frame src="C:\sublime\Data\code\image\1.jpg" noresize="noresize" />
  <frame src="C:\sublime\Data\code\image\1.jpg" />
  <frame src="C:\sublime\Data\code\image\1.jpg" />
</frameset>

</html>

效果如图：在这里插入图片描述

注意：不能将<body></body>标签与<frameset></frameset>标签同时使用！不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于 <body></body>标签内。

2.列表

HTML支持有序、无序、定义列表

2.1有序列表(ol)

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于

标签。每个列表项始于
标签。
下面使有序列表的简单展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
</html>

在这里插入图片描述

2.2无序列表(ul)

无序列表也是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签。

下面使无序列表的简单展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</body>
</html>

效果如图：
在这里插入图片描述

2.3定义列表(dl)

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以 <dd> 开始。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
  <dl>
  	<dt>今天</dt>
  	<dd>The day of today</dd>
  	<dt>明天</dt>
  	<dd>The day after today</dd>
  </dl>
</body>
</html>

效果如图：
在这里插入图片描述

3表单

表单用于收集用户输入的信息。值得注意的使有两种方式用于获得用户信息，一种是Get请求，另一种为Post请求。两种方式都能使后台接收到用户所填信息，但不同的是，Get请求会把属性的值暴露在网页地址栏内，且网页地址栏只显示64kb大小的内容，若属性值大于64kb则不全部显示，Post请求相对Get请求更安全，不会将属性值暴露在网页地址栏中。

3.1表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

3.1(input)

input可以说使表单中最重要的元素，form标签必须与input标签一同使用，input标签具有不同的type属性，其中包括text、radio、submit等。
其中text属性定义常规文本输入。radio定义单选按钮输入（选择多个选择之一）。submit定义提交按钮（提交表单）
Method属性规定了提交表单时的方法，即使用Get请求还是Post请求。
enctype属性规定Form表单提交时的数据编码，例如上传二进制编码的文件。

3.1(select)

<select>元素定义下拉列表：
下面是利用<select>编辑的一个下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</body>
</html>

效果如图：
在这里插入图片描述

3.1(button)

<button> 元素定义可点击的按钮：
我们通过一i个简单的实例观察它的效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>

在这里插入图片描述

3.2输入类型

        password定义密码字段；submit定义提交表单数据至表单处理程序的按钮；radio定义单选按钮。

3.3输入属性

3.3(value)

value 属性规定输入字段的初始值
实例：

<form action="">
 First name:<br>
<input type="text" name="firstname" value="John">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

效果如图：
在这里插入图片描述

3.3(form)

orm 属性规定元素所属的一个或多个表单。
值得注意的是如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
实例：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get" id="form1">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="提交" />
</form>

<p>下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。</p>

Last name: <input type="text" name="lname" form="form1" />

</body>
</html>

在这里插入图片描述

4.媒体

多媒体指的是音效、音乐、视频和动画。现代网络已经支持许多多媒体格式多媒体元素（比如视频和音频）存储于媒体文件中。确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4

4.1音频引入

我们可以使用HTML5中的audio标签来引入音频，注意：audio是HTML5中的元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
实例：

<!DOCTYPE HTML>
<html>
<body>

<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

效果图：
在这里插入图片描述

4.2视频引入

在 HTML 中播放视频的方法有很多种，今天讲述的是video标签引入视频的方法。
通过width属性来规定播放窗口的大小以及src来写入视频路径的方式引入视频
实例如下：

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>