HTML学习总结_我们在前两个单元的课程中学习了如何通过 html-CSDN博客

本文链接：https://blog.csdn.net/qq_53069622/article/details/125398124

1.网页

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

1.1什么是网页

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

1.2什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。所谓超文本，有 2 层含义：

它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

1.3网页的形成

网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。
在这里插入图片描述
前端人员开发代码 ----> 浏览器显示代码（解析、渲染） -----> 生成最后的 Web 页面。
网页总结:网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.HTML: 超文本标记语言,用来制作网页的一门语言. 有标签组成的. 比如图片标签链接标签视频标签等…

2.浏览器

2.1常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。
在这里插入图片描述

2.2浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。在这里插入图片描述
目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。

3.Web标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

3.1为什么需要Web标准

在这里插入图片描述
遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

1.让 Web 的发展前景更广阔。
2.内容能被更广泛的设备访问。
3.更容易被搜寻引擎搜索。
4.降低网站流量费用。
5.使网站更易于维护。
6.提高页面浏览速度。

3.2Web标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。在这里插入图片描述 Web 标准提出的最佳体验方案：结构、样式、行为相分离。简单理解：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中。

4.HTML标签

4.1HTML语法规范

基本语法

HTML 标签是由尖括号包围的关键词，例如 < html >。
HTML 标签通常是成对出现的，例如 < html > 和 < /html > ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如 < br / >，我们称为单标签。

4.2HTML常用标签

4.2.1标题

HTML 提供了从大到小6级标题，分别是：< h1 > ~ >< h6 >，如下所示：

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

浏览器预览效果如下所示：

在页面中，标题非常重要：
1.搜索引擎用标题来索引页面的内容
2.用户也习惯以标题进行主要内容浏览，以决定是否查看该页面。
提示：一级标题< h1 >最醒目，应该用于页面的主标题，其次为二级标题，以此类推。
注意：不要因为希望醒目，试图使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或 CSS 进行。

4.2.2文本格式

文本格式设置是将文本定义为某种特殊类型的过程，例如粗体，斜体，带下划线，会更改颜色等，从而使特殊文本与其他文本相比显得特殊。
HTML提供了用于定义这些特殊文本的预定义特殊元素(标签)。这些是：

在这里插入图片描述

4.2.3图片

img标签介绍

img: 英文全称 image（图像），代表的是一张图片。
如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下：
< img src=" 图片的URL" />
能插入的图片类型

能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
不能往网页中插入的图片格式是：psd、ai等。
注意：HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。

img标签的src属性

src属性：指图片的路径。英文名称 source。
在写图片的路径时，有两种写法：相对路径、绝对路径

写法一：图片的相对路径
相对当前页面所在的路径。两个标记 . 和 … 分表代表当前目录和上一层目录。
举例1：

<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src=".\2.jpg">

<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">

举例2：

<img src="images/1.jpg">

上方代码的意思是说，当前html页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg。
写法二：图片的绝对路径
绝对路径包括以下两种：
（1）以盘符开始的绝对路径。举例：

<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg

（2）网络路径。举例：

<img src="http://img.smyhvae.com/20200122_200901.png">

img标签的其他属性

width：图像的宽度。
height：图像的高度。
alt：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。
title：提示性文本。鼠标悬停时出现的文本。

4.2.4表格 Table

表格的定义

< table > 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个、或元素组成表格结构；其中：元素定义表格行，元素定义表头，元素定义表格单元。
为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格，具体在后文会讲到。

表格的标签

单元格边框（border)

表格边框：在使用 < table border=“1” >< /table > 的方式来定义，其中：数字表示边框的宽度，单位为像素；以下举三个边框的例子:

<!--无边框-->
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td>女</td>
    </tr>

</table>

<br>
<!--边框宽度为2-->
<table border="2">
    <tr>
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td>女</td>
    </tr>

</table>
<br>

<!--边框宽度为10-->
<table border="10">
    <tr>
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td>女</td>
    </tr>

</table>

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

4.2.5列表 List

无序列表

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

无序列表使用 < ul > < li >标签
实例
代码:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

效果：

Coffee
Milk

多级无序列表

代码示例：

<ul>
	<li>一级1</li>
	<li>一级2</li>
	<li>一级3
	<ul>
		<li>二级1</li>
		<li>二级2</li>
	</ul>
	</li>
	<li>一级4
	<ul>
		<li>二级3</li>
		<li>二级4</li>
		<li>二级5
		<ul>
			<li>三级1</li>
			<li>三级2</li>
		</ul>
		</li>
	</ul>
	</li>
</ul>

效果：

一级1
一级2
一级3
- 二级1
- 二级2
一级4
- 二级3
- 二级4
- 二级5
  - 三级1
  - 三级2

修改小圆点

代码示例：

 <ul type="circle">
	<li>一级1</li>
	<li>一级2</li>
	<li>一级3
	<ul type="square">
		<li>二级1</li>
		<li>二级2</li>
	</ul>
	</li>
	<li>一级4
	<ul type="disc">
		<li>二级3</li>
		<li>二级4</li>
		<li>二级5
		<ul>
			<li>三级1</li>
			<li>三级2</li>
		</ul>
		</li>
	</ul>
	</li>
</ul>

效果：

在这里插入图片描述
有序列表

Ol标签——代表HTML有序列表，是ordered lists的缩写
Ol标签是成对出现的，以< ol >开始，< /ol >结束，每一列使用< li>< /li >标签定义内容。

<ol type="1">
	<li>一级1</li>
	<li>一级2</li>
	<li>一级3
	<ol type="A">
		<li>二级1</li>
		<li>二级2</li>
	</ol>
	</li>
	<li>一级4
	<ol type="Ⅰ" reversed="reversed">
		<li>二级3</li>
		<li>二级4</li>
		<li>二级5
		<ol type="i">
			<li>三级1</li>
			<li>三级2</li>
		</ol>
		</li>
	</ol>
	</li>
</ol>

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

4.2.6表单Form

Form表单标记
表单标记以标记开头，以标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。

标记的基本语法如下：
在这里插入图片描述
示例：创建表单，设置表单名称为 myForm，传送方式为 post，当用户提交表单时，提交至 action.html 页面进行处理。

<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
</form>

Form表单的提交与重置
form表单的提交与重置可以通过HTML自带的表单按钮方式，或者使用JavaScript脚本的方式。

使用表单按钮

<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</form>

使用JavaScript脚本重置form表单

//重置表单
document.getElementsByName("myForm")[0].reset();

**示例：**使用JavaScript脚本实现form表单的提交与重置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JavaScript脚本实现form表单的提交与重置</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
    <form name="myForm">
        <table align="center">
            <caption>用户注册</caption>
            <tr>
                <td>博客信息：</td>
                <td>
                    <label>您好，欢迎访问 pan_junbiao的博客</label>
                </td>
            </tr>
            <tr>
                <td>博客地址：</td>
                <td>
                    <label>https://blog.csdn.net/pan_junbiao</label>
                </td>
            </tr>
            <tr>
                <td>登录账户：</td>
                <td>
                   <input type="text" name="loginName" />
                </td>
            </tr>
            <tr>
                <td>登录密码：</td>
                <td>
                    <input type="password" name="loginPwd" />
                </td>
            </tr>
            <!-- 以下是提交、取消按钮 -->
            <tr>
                <td colspan="2" style="text-align: center; padding: 5px;">
                    <input type="button" value="提交" onclick="submitFrom()"/>
                    <input type="button" value="重置" onclick="resetFrom()"/>
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    //提交
    function submitFrom()
    {
        //验证数据
        if(!myForm.loginName.value)
        {
            alert("请输入登录账户！");
            myForm.loginName.focus();
            return;
        }
 
        if(!myForm.loginPwd.value)
        {
            alert("请输入登录密码！");
            myForm.loginPwd.focus();
            return;
        }
 
        //提交表单
        myForm.method = 'POST';
        myForm.action = "action.html";
        myForm.submit();
    }
 
    //重置
    function resetFrom()
    {
        //重置表单
        document.getElementsByName("myForm")[0].reset();
    }
</script>
</html>

注意：使用JavaScript脚本实现form表单的提交与重置时，按钮是普通按钮：type=“button”。

执行结果：在这里插入图片描述

表单提交前数据校验
当我们在提交form表单前，需要对表单的数据进行有效性校验。下面将介绍如何使用JavaScript实现对form表单提交前的数据校验。

示例：创建login.html登录页面，并使用JavaScript实现提交表单前的数据校验。

4.3.1 校验方式一
使用form表单的 onsubmit 提交事件。

注意：
（1）登录按钮的类型必须是type=“submit”。

<input type="submit" value="登录"/>

（2）提交方法是写在form元素的 onsubmit 提交事件上，并且方法名前面必须加上 return 。

<form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
</form>

4.3.1 校验方式二
使用普通按钮的 onclick 点击事件。

注意：
（1）登录按钮的类型必须是：type=“button”。

（2）提交方法是写在按钮的 onclick 点击事件上。

 <input onclick="SubmitLogin()" type="button" value="登录"/>

4.3其他

HTML区块

关键词：div、span

区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：< h1 >, < pre >, < ul >, < table >，< div > 等。
示例：

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

运行结果：
在这里插入图片描述

内联元素

内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： < span >, < input >, < td >, < a >, < img >等。

示例：

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">