第一章 HTML基础

qq_68766163

已于 2023-12-07 08:45:58 修改

阅读量47

点赞数 2

文章标签： html 前端

于 2023-12-06 10:59:05 首次发布

本文链接：https://blog.csdn.net/qq_68766163/article/details/134778564

版权

1.HTML介绍

（1）概念：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

（2）建立html文件时可用.html和.htm，两种方式结尾，效果上并无区别。

（3）HTML 不是一种编程语言，而是一种标记语言

（4）标记语言是一套标记标签 (markup tag)

（5）HTML 使用标记标签来描述网页

（6）HTML 文档包含了HTML 标签及文本内容

实例

<!DOCTYPE html>  <!-- 申明html文档 -->

<html>

<head>   <!-- 头部 -->
<meta charset="utf-8">   <!-- 编码格式 -->
<title>标题</title>
</head>

<body>  <!-- 身体 ，存放页面内容-->
</body>
</html>

HTML头部

1.HTML<head>：

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

2.HTML<title>:

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

3.HTML <base> ：

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

4.HTML <link> ：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

5.HTML <style> :

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

6.HTML <meta> :

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

实例：

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="Web">

定义网页作者:

<meta name="author" content="xxxx">

每10秒钟刷新当前页面:

<meta http-equiv="refresh" content="10">

2.HTML标签

下表列出了 HTML 标签简写及全称：

标签	英文全称	中文说明
a	Anchor	锚
abbr	Abbreviation	缩写词
acronym	Acronym	取首字母的缩写词
address	Address	地址
alt	alter	替用(一般是图片显示不出的提示)
b	Bold	粗体（文本）
bdo	Bi-Directional Override	文本显示方向
big	Big	变大（文本）
blockquote	Block Quotation	区块引用语
br	Break	换行
cell	cell	巢
cellpadding	cellpadding	巢补白
cellspacing	cellspacing	巢空间
center	Centered	居中（文本）
cite	Citation	引用
code	Code	源代码（文本）
dd	Definition Description	定义描述
del	Deleted	删除（的文本）
dfn	Defines a Definition Term	定义定义条目
div	Division	分隔
dl	Definition List	定义列表
dt	Definition Term	定义术语
em	Emphasized	加重（文本）
font	Font	字体
h1~h6	Header 1 to Header 6	标题1到标题6
hr	Horizontal Rule	水平尺
href	hypertext reference	超文本引用
i	Italic	斜体（文本）
iframe	Inline frame	定义内联框架
ins	Inserted	插入（的文本）
kbd	Keyboard	键盘（文本）
li	List Item	列表项目
nl	navigation lists	导航列表
ol	Ordered List	排序列表
optgroup	Option group	定义选项组
p	Paragraph	段落
pre	Preformatted	预定义格式（文本）
q	Quotation	引用语
rel	Reload	加载
s/ strike	Strikethrough	删除线
samp	Sample	示例（文本
small	Small	变小（文本）
span	Span	范围
src	Source	源文件链接
strong	Strong	加重（文本）
sub	Subscripted	下标（文本）
sup	Superscripted	上标（文本）
td	table data cell	表格中的一个单元格
th	table header cell	表格中的表头
tr	table row	表格中的一行
tt	Teletype	打印机（文本）
u	Underlined	下划线（文本）
ul	Unordered List	不排序列表
var	Variable	变量（文本）

1.HTML标题：HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

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

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<hr>
<h6>这是标题 6</h6>

</body>
</html>

<h1> 定义最大的标题。 <h6> 定义最小的标题。<hr >标签可用于分隔内容。

2.HTML段落：HTML 段落是通过标签 <p> 来定义的。

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

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

</body>
</html>

注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

3.HTML链接：HTML 链接是通过标签 <a> 来定义的

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

<a href="https://www.baidu.com">这是一个链接使用了 href 属性</a>

</body>
</html>

HTML 链接语法:

以下是 HTML 中创建链接的基本语法和属性：<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的 URL或其他资源的URL。
target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

4.HTML图像：HTML 图像是通过标签 <img> 来定义的.

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

<img src="url" width="258" height="39" />

</body>
</html>

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的,在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

<img src="boat.gif" alt="Big Boat">

注：src中使用图片的相对路径或绝对路径进行引入，相对路径是相对于当前文档的位置，而绝对路径是从网站的根目录开始的完整URL。

5.HTML列表：HTML 支持有序、无序列表等:

(1)无序列表:

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

<h4>无序列表:</h4>
<ul>
  <li>你好</li>
  <li>你好</li>
  <li>你好</li>
</ul>

</body>
</html>

(2)有序列表：

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

<ol>
  <li>你好</li>
  <li>你好</li>
  <li>你好</li>
</ol>

<ol start="50"> <!--表示从五十开始进行有序列表-->
  <li>你好</li>
  <li>你好</li>
  <li>你好</li>
</ol>
 
</body>
</html>

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

6.HTML注释:可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

3.HTML属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

（1）HTML属性实例：

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.baidu.com">这是一个链接</a>

（2）HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

（3）HTML 属性参考手册

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

注：1.class 属性可以多用 class=" " （引号里面可以填入多个class属性）

2.id 属性只能单独设置 id=" "（只能填写一个，多个无效）

4.HTML CSS

概念：CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

</html>

1.HTML样式

（1）背景色属性（background-color）定义一个元素的背景颜色：

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

（2）使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

（3）使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

1.内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

2.外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

注：扩展知识点: link 和 import之间的区别?

差别 1：

本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。

差别 2：

加载顺序的差别： 当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。

差别 3：

兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。

差别 4：

使用 dom(document object model文档对象模型 )控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。

2.CSS选择器

CSS选择器是用于选取HTML文档中特定元素的一种方式。它可以用来为这些元素添加样式或者改变它们的属性。常见的CSS选择器包括标签选择器、类选择器、ID选择器、属性选择器等。

1.标签选择器：通过元素的标签名来选取元素，例如`p`表示选取所有的段落元素。

p {
  color: red;
}

2.类选择器：通过元素的类名来选取元素，使用`.`表示类选择器。

<div class="example">这是一个示例</div>

.example {
  background-color: yellow;
}

3.ID选择器：通过元素的ID来选取元素，使用`#`表示ID选择器。

<div id="unique">这是一个唯一的元素</div>

#unique {
  font-size: 20px;
}

4.属性选择器：通过元素的属性来选取元素，例如`[href]`表示选取所有具有`href`属性的元素。

<a href="https://www.example.com">这是一个链接</a>

a[href] {
  text-decoration: none;
}

5.HTML表格

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

以上的表格实例代码中，<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。

<thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。

通过使用 <th > 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。

表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

6.HTML区块

1.HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

2.HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

3.HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

4.HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

注:

块级元素 vs. 行内元素：

<div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。
<span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。

默认样式和布局：

<div> 元素的默认样式为块级显示，会以块的形式占据可用空间。
<span> 元素的默认样式为行内显示，它不会独占一行，只占据其内容的宽度。

嵌套关系：

<div> 可以容纳其他块级元素和行内元素，包括其他的 <div> 和 <span> 元素。
<span> 通常被用来包裹文本或其他行内元素，比如用来设置特定文本的样式。

总之，<div> 用于创建页面结构和布局，而 <span> 用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用。

7.HTML表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。

<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。

<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

文本域（Text Fields）:

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

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

密码字段:

密码字段通过标签 <input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）:

<input type="radio"> 标签定义了表单的单选框选项:

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框（Checkboxes）:

<input type="checkbox"> 定义了复选框。

复选框可以选取一个或多个选项：

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

提交按钮(Submit):

<input type="submit"> 定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

8.HTML颜色

颜色值

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果

颜色	3位十六进制颜色值	6位十六进制颜色值	RGB
黑色	#000	#000000	rgb(0,0,0)
红色	#F00	#FF0000	rgb(255,0,0)
绿色	#0F0	#00FF00	rgb(0,255,0)
蓝色	#00F	#0000FF	rgb(0,0,255)
黄色	#FF0	#FFFF00	rgb(255,255,0)
浅蓝色	#0FF	#00FFFF	rgb(0,255,255)
紫色	#F0F	#FF00FF	rgb(255,0,255)
灰色	#888	#888888	rgb(136,136,136)
白色	#FFF	#FFFFFF	rgb(255,255,255)

9.HTML脚本

HTML <script> 标签:

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

HTML<noscript> 标签:

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

10.HTML字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

1.变量的声明


var variableName = value;//var 大部分时候已经不适用了
let variableName = value; //ES6开始引入的新的变量赋值的类型
const variableName = value;//const 声明的变量是不可变的，一旦赋值就不能改变。

2.数据类型


Number, String, Boolean, Object, Null, Undefined, symbol

3.运算符


+ - * / % // 算术运算符
== != === !== < > <= >= && || 逻辑运算符
= += -= *= /= %= // 赋值运算符

4.控制结构


if (condition) { statement } else { statement }
for (initialization; condition; final expression) { statement }
while (condition) { statement }
do { statement } while (condition);
switch (expression) { case x: statement; break; default: statement; }
for in for (variable in object) { statement } for...in 和 for...of for (variable of object) { statement } for...of 用于遍历可迭代对象，如数组、字符串等。

5.函数


function functionName(parameters) { statements }
var obj = { methodName: function() { statements } };
obj.methodName(); //调用对象的方法
var fun1 = function(){};
//ES6
const fun2 = () => {}; //箭头函数c

6. 数组


var arrayName = [value1, value2, ...]; //声明数组
arrayName.push(value); //向数组末尾添加元素
arrayName.pop(); //删除数组末尾的元素
arrayName.unshift(value); //在数组开头添加元素
arrayName.shift(); //删除数组开头的元素
arrayName[index] = value; //修改数组中指定位置的元素值
arrayName.splice(startIndex, deleteCount, item1, ..., itemX); //从数组中添加/删除项目，然后返回被删除的项目

7. js对象


                var obj = {
                    property1: value1,
                    property2: value2,
                    //...
                    methodName: function() { statements }
                };
                obj.property3 = 10;
                obj.propertyName; //访问对象的属性值
                obj.methodName(); //调用对象的方法

新建对象的几种方式：


                // 1. 字面量对象
                var obj = {
                    property1: 'value1',
                    property2: 'value2'
                };
                
                // 2. Object构造函数
                var obj = new Object();
                obj.property1 = 'value1';
                obj.property2 = 'value2';
                
                // 3. 使用Object.create方法创建新对象，并指定原型对象
                var obj = Object.create({property1: 'value1'});
                obj.property2 = 'value2';
                
                // 4. 使用ES6的class语法创建对象
                class MyClass {
                    constructor() {
                        this.property1 = 'value1';
                        this.property2 = 'value2';
                    }
                }
                var obj = new MyClass();

BOM操作

BOM（Browser Object Model）是浏览器提供的一些对象，用于操作浏览器窗口、历史记录、cookie等。


                // 获取浏览器窗口的宽度和高度
                var width = window.innerWidth;
                var height = window.innerHeight;
                
                // 设置浏览器窗口的大小
                window.resizeTo(width, height);
                
                // 设置浏览器窗口的位置
                window.moveTo(x, y);
                
                // 控制浏览器窗口的滚动条
                window.scrollTo(x, y);
                
                // 控制浏览器窗口的前进和后退
                window.history.forward(); // 前进
                window.history.back(); // 后退
                
                // 控制浏览器窗口的刷新
                window.location.reload(); // 刷新页面
                
                // 控制浏览器窗口的全屏显示或退出全屏显示
                if (document.fullscreenElement) {
                    document.exitFullscreen();
                } else {
                    document.documentElement.requestFullscreen();
                }

                //获取地理位置
                navigator.geolocation.getCurrentPosition(function(position) {
                    var lat = position.coords.latitude;
                    var lng = position.coords.longitude;
                });

                //本地缓存
                // 设置本地缓存
                localStorage.setItem('key', 'value');
                
                // 获取本地缓存
                var value = localStorage.getItem('key');
                //localStorage和sessionStorage对象：用于在浏览器中存储数据。
                localStorage.setItem('key', 'value'); // 设置本地缓存
                var value = localStorage.getItem('key'); // 获取本地缓存
                sessionStorage.setItem('key', 'value'); // 设置session缓存
                var value = sessionStorage.getItem('key'); // 获取session缓存
                //localStorage sessionStorage的区别
                localStorage和sessionStorage的区别：
                1. localStorage存储的数据没有过期时间，而sessionStorage存储的数据在页面会话结束时会被清除。
                2. localStorage只能存储字符串，而sessionStorage可以存储任何类型的数据。
                3. 由于localStorage是持久化的，所以即使在关闭浏览器后，仍然可以访问到这些数据。而sessionStorage只在当前页面会话期间有效。
                4. sessionStorage的存储空间比localStorage要大得多。

DOM

DOM（Document Object Model）是用于操作HTML文档的编程接口。它提供了一种方式来访问和更新文档的内容、结构和样式。


                // 获取元素
                var element = document.getElementById('elementId');
                
                // 修改元素内容
                element.innerHTML = 'new content';
                
                // 修改元素属性
                element.setAttribute('attributeName', 'attributeValue');
                
                // 添加元素事件监听器
                element.addEventListener('eventName', function() { /* statements */ });
                
                // 删除元素
                element.parentNode.removeChild(element);
                
                // 创建新元素
                var newElement = document.createElement('div');
                newElement.textContent = 'This is a new element';
                document.body.appendChild(newElement);

11.HTML URL

URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。

当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

一个网页地址实例语法规则:

scheme://host.domain:port/path/filename

说明:

- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称