# 实例

# 在HTML中插入js

方法一：链接外部文件

<script src="/xxx.js"></script>

通常情况下都使用这种方法

优点：

不同的页面可以同时链接同一个js文件，相同的代码无需在多个页面重复编写，减少文件体积
代码集中便于维护，无需在多个文件间来回
浏览器会缓存链接的外部js文件，如果有多个页面都使用同一个js文件，那么这个文件只需下载一次。因此，能够加快页面加载速度

方法二：内部嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="gbk">
        <title>index</title>
        <script>
		alert('第二种方式');
	</script>
    </head>
    <body>
    </body>
</html>

优点：这种方式可以把js嵌入到HTML，网页可以只包含在一个.html文件中

缺点：

这种方式并不安全，把js暴露在页面源代码中，任何人都可以进行修改
代码仅限于当前页面的使用，代码无法被多个页面重复使用，不便于维护

方法三：点击事件执行

<body>
    <span onclick="alert('第一种方式')">点击执行事件</span>
</body>

一般不推荐使用三种方式，因为这种方式有许多局限，不能执行多行代码，适用于点击事件执行某函数时使用

# 用mailto发送电子邮件

# HTML方法

基本格式：

<a href="mailto:收件邮箱地址">发送邮件</a>

抄送：

<a href="mailto:xxxxxx@email.com?cc=抄送地址">发送</a>

密件抄送：

<a href="mailto:xxxxxx@email.com?bcc=抄送地址">发送</a>

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

多个收件人：

<a href="mailto:xxxxxx@email.com;yyyyyy@email.com">发送</a>

多个收件人时，邮箱地址用; 隔开

添加主题与内容

<a href="mailto:xxxxxx@email.com?subject=主题&body=内容">发送</a>

拨打电话

<a href="tel:400-888-1234">拨打电话<a>

发送短信

<a href="sms:1992345987">发送短信<a>

# JavaScript方法

//封装发送电子邮件的函数
    function sendEmail(){ 
        if(confirm("是否发邮件")){
           location="mailto:xxxxxx@qq.com";
        }
    }
sendEmail()//调用这个函数

# 设置锚点

锚点可以让元素链接到网页相应的位置，点击元素就可以跳转到所对应的链接位置。可以实现回到顶部，回到底部，到文章中任意段落等

# 跳转到锚点

方法一：name方法

先设置锚点到要跳转的元素

<a name="mao1">这是锚点1</a>

再把锚点链接到要点击的元素

<a href="#mao1">去找锚点1</a>

注意：a标签中要写一个name属性，属性值要与链接元素的href的属性值一样（不加#）

方法二：id方法

先设置锚点到要跳转的元素

<a id="mao2">这是锚点2</a>

再把锚点链接到要点击的元素

<a href="#mao2">去找锚点2</a>

注意：这个方法不用单独添加一个a标签来专门设置锚点，只在需要的位置的标签中添加一个id即可

# 跨页面跳转

在我们要跳转元素上设置锚点

<a id="mao3">这是锚点3</a>

我们可以在任意页面链接这个锚点，并跳转的这个锚点。

如果链接的元素和锚点是同一页面就用以上的方法，任意一种都行，但如果不在同一页面，例如，你想从另一个页面跳转到这个页面的锚点，那么你就要加上路径。如下

<a href="page.html#mao3">跳转到page页面id为mao3的锚点</a>

# 回到顶部

<a href="#">回到顶部</a>

# 在HTML页面添加数学公式

想要在网页中显示公式我们首先要引入MathJax

前提：要使用MathJax首先你要会**LaTeX，**因为在这里公式要用LaTeX表示

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
	<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>

样式一：

\begin{matrix} (1.1) & f (x) = {\begin{cases} lim_{x \to 0} \frac{a^{x}}{b + c}, & x < 3 \\ π, & x = 3 \\ \int_{a}^{3 b} x_{i j} + e^{2} d x, & x > 3 \end{cases} \end{matrix}

要实现这种样式我们要在标签中的用LaTeX写成的公式文本前后加入$$符号标记

例如：

<h>$$
f(x) = 
\begin{cases}
\lim\limits_{x \to 0} \frac{a^x}{b+c}, & x<3 \\
\pi, & x=3 \\
\int_a^{3b}x_{ij}+e^2 \mathrm{d}x,& x>3 \\
\end{cases}\tag{1.1}
$$</h>

样式二：

在式子 $\frac{1}{n^{2} - 1} = \frac{1}{2} (\frac{1}{n - 1} - \frac{1}{n + 1})$ 中 $n \neq \pm 1$

想要在文本中嵌入公式，我们要在标签中的用LaTeX写成的公式文本前加入$ 文本后加入$符号标记

例如：

<h>在式子
\(\frac{1}{n^{2}-1}= \frac{1}{2}\left( \frac{1}{n-1}-\frac{1}{n+1}\right)\)中
\(n\ne\pm1\)
</h>

← CSS