Web开发

学习路线

Web网站开发模式

初识web前端

Web标准也称为网页标准，由一系列的标准组成，大部分由w3C ( world wide web Consortium，万维网联盟）负责制定。三个组成部分:

HTML:负责网页的结构〔页面元素和内容)。
CSS:负责网页的表现（页面元素的外观、位置等页面样式，如:颜色、大小等）。
JavaScript:负责网页的行为(交互效果)。

HTML
HTML ( HyperText Markup Language):超文本标记语言。
超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言:由标签构成的语言
HTML标签都是预定义好的。例如:
使用展示超链接，使用展示图片，

css
css (Cascading Style Sheet):层叠样式表，用于控制页面的样式（表现）。

HTML

基础标签

图片标签:

src:指定图像的url(绝对路径/相对路径)
width:图像的宽度(像素/相对于父元素的百分比)
height:图像的高度(像素/相对于父元素的百分比)
标题标签:
-

水平线标签:
路径书写方式:
绝对路径:
相对路径:

./ :当前目录, ./可以省略的
../: 上一级目录

标题样式

CSS引入方式:

行内样式:写在标签的style属性中(不推荐)
内嵌样式:写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)
外联样式:写在一个单独的.css文件中(需要通过link 标签在网页中引入)

属性名:属性值;

中国新闻网
h1 {
xxx: xxx;
xxx: xxx;

}

颜色表示形式

CSS引入方式

行内样式:
内嵌样式:
外联样式:xxx.css

颜色表示

关键字: red. green . . .
rgb表示法:rgb(255,e,a). rgb(134,1ee,89)
十六进制:#ffe80e、#cccccc. #ccc

颜色属性
color:设置文本内容的颜色

id选择器>类选择器>元素选择器

标签

是一个在开发网页时大量会用到的没有语义的布局标签
特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

CSS选择器

元素选择器:标签名{ – }
id选择器:#id属性值 { .. }
类选择器: .class属性值{ .. }
优先级:id选择器 > 类选择器 > 元素选择器

CSS属性

color:设置文本的颜色
font-size:字体大小(注意:记得加px)

超链接

超链接
标签:
属性:

href:指定资源访问的url
target:指定在何处打开资源链接
_self:默认值，在当前页面打开
_blank:在空白页面打开

CSS属性
text-decoration:规定添加到文本的修饰，none表示定义标准的文本。
color:定义文本的颜色

正文排版

视频标签:
- src:规定视频的url
- controls:显示播放控件
- width:播放器的宽度
- height:播放器的高度
音频标签:
- src:规定音频的url
- controls:显示播放控件
段落标签:
文本加粗标签: /

布局

盒子:页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成:
内容区域(content)、
内边距区域(padding)、
边框区域(border)、
外边距区域(margin)

布局标签:实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签。

标签:

特点:

div标签:
一行只显示一个(独占一行)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高( width、height)

span标签:
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高( width、height)

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1px" cellspacing="0"width="600px">
<tr>
<th>序号</th>
<th>品牌Logo</th>
<th>品牌名称</th>
<th>企业名称</th>
<tr>
<tr>
<td>1</td>
<td> <img src="img/huawei.jpg" width="100px"> </td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
</table>

表单标签

场景:在网页中主要负责数据采集功能，如注册、登录等数据采集。

标签:

表单项:不同类型的input元素、下拉列表、文本域等。

:定义表单项，通过type属性控制输入形式

:定义文本域</li> </ul> </li> <li>属性:<ul> <li>action:规定当提交表单时向何处发送表单数据，URL</li> <li>method:规定用于发送表单数据的方式。GET、POST</li> </ul> </li> </ul> <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 </pre></td><td class="code"><pre><body>  <form action=""method="post"> 用户名: <input type="text" name="username"> 年龄: <input type="text" name="age"> <input type="submit" value="提交"> </form> </body> </pre></td></tr></table></figure> <h2 id="表单项标签"><a href="#表单项标签" class="headerlink" title="表单项标签"></a>表单项标签</h2><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/t8.png"> <img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/t9.png"> <h1 id="JS"><a href="#JS" class="headerlink" title="JS"></a>JS</h1><h2 id="引入方式"><a href="#引入方式" class="headerlink" title="引入方式"></a>引入方式</h2>JavaScript引入方式 <ul> <li>内部脚本:将JS代码定义在HTML页面中<ul> <li>JavaScript代码必须位于<script></script>标签之间</li> <li>在HTML文档中，可以在任意地方，放置任意数量的<script></li> <li>一般会把脚本置于<body>元素的底部，可改善显示速度</li> </ul> </li> </ul> <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre><script> alert("Hello JavaScript") </script> </pre></td></tr></table></figure> <ul> <li>外部脚本:将JS代码定义在外部JS文件中，然后引入到HTML页面中<ul> <li>外部JS文件中，只包含JS代码，不包含<script>标签</li> <li><script>标签不能自闭合</li> </ul> </li> </ul> <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre> <script> alert ('Hello Js');</script>  {{索引变量 + 1}} {{变量名}} </标签> </pre></td></tr></table></figure> 接下来，我们再VS Code中创建名为16. Vue-指令-v-for.html的文件编写代码演示，提前准备如下代码： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 </pre></td><td class="code"><pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-for</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ addrs:["北京", "上海", "西安", "成都", "深圳"] }, methods: { } }) </script> </html> </pre></td></tr></table></figure> 然后分别编写2种遍历语法，来遍历数组，展示数据，代码如下： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre> <div id="app"> <div v-for="addr in addrs">{{addr}}</div> <hr> <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div> </div> </pre></td></tr></table></figure> 浏览器打开，呈现如下效果： <img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/1668866805981.png" alt="1668866805981"> <h3 id="案例-2"><a href="#案例-2" class="headerlink" title="案例"></a>案例</h3><ul> <li>需求： <img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/1668868100828.png" alt="1668868100828"> 如上图所示，我们提供好了数据模型，users是数组集合，提供了多个用户信息。然后我们需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。 </li> <li>分析： 首先我们肯定需要遍历数组的，所以需要使用v-for标签；然后我们每一条数据对应一行，所以v-for需要添加在tr标签上；其次我们需要将编号，所以需要使用索引的遍历语法；然后我们要将数据展示到表格的单元格中，所以我们需要使用{{}}插值表达式；最后，我们需要转换内容，所以我们需要使用v-if指令，进行条件判断和内容的转换 </li> <li>步骤： <ul> <li>使用v-for的带索引方式添加到表格的<tr>标签上</li> <li>使用{{}}插值表达式展示内容到单元格</li> <li>使用索引+1来作为编号</li> <li>使用v-if来判断，改变性别和等级这2列的值</li> </ul> </li> <li>代码实现： 首先创建名为17. Vue-指令-案例.html的文件，提前准备如下代码： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 </pre></td><td class="code"><pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-案例</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <table border="1" cellspacing="0" width="60%"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr> </table> </div> </body> <script> new Vue({ el: "#app", data: { users: [{ name: "Tom", age: 20, gender: 1, score: 78 },{ name: "Rose", age: 18, gender: 2, score: 86 },{ name: "Jerry", age: 26, gender: 1, score: 90 },{ name: "Tony", age: 30, gender: 1, score: 52 }] }, methods: { }, }) </script> </html> </pre></td></tr></table></figure> 然后在<tr>上添加v-for进行遍历，以及通过插值表达式{{}}和v-if指令来填充内容和改变内容，其代码如下： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </pre></td><td class="code"><pre> <tr align="center" v-for="(user,index) in users"> <td>{{index + 1}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td> <span v-if="user.gender == 1">男</span> <span v-if="user.gender == 2">女</span> </td> <td>{{user.score}}</td> <td> <span v-if="user.score >= 85">优秀</span> <span v-else-if="user.score >= 60">及格</span> <span style="color: red;" v-else>不及格</span> </td> </tr> </pre></td></tr></table></figure></li> </ul> 其完整代码如下： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 </pre></td><td class="code"><pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-案例</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <table border="1" cellspacing="0" width="60%"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr> <tr align="center" v-for="(user,index) in users"> <td>{{index + 1}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td> <span v-if="user.gender == 1">男</span> <span v-if="user.gender == 2">女</span> </td> <td>{{user.score}}</td> <td> <span v-if="user.score >= 85">优秀</span> <span v-else-if="user.score >= 60">及格</span> <span style="color: red;" v-else>不及格</span> </td> </tr> </table> </div> </body> <script> new Vue({ el: "#app", data: { users: [{ name: "Tom", age: 20, gender: 1, score: 78 },{ name: "Rose", age: 18, gender: 2, score: 86 },{ name: "Jerry", age: 26, gender: 1, score: 90 },{ name: "Tony", age: 30, gender: 1, score: 52 }] }, methods: { }, }) </script> </html> </pre></td></tr></table></figure> <h2 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h2>vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示： <table> <thead> <tr> <th>状态</th> <th>阶段周期</th> </tr> </thead> <tbody><tr> <td>beforeCreate</td> <td>创建前</td> </tr> <tr> <td>created</td> <td>创建后</td> </tr> <tr> <td>beforeMount</td> <td>挂载前</td> </tr> <tr> <td>mounted</td> <td>挂载完成</td> </tr> <tr> <td>beforeUpdate</td> <td>更新前</td> </tr> <tr> <td>updated</td> <td>更新后</td> </tr> <tr> <td>beforeDestroy</td> <td>销毁前</td> </tr> <tr> <td>destroyed</td> <td>销毁后</td> </tr> </tbody></table> 下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数： <img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/1668867134683.png" alt="1668867134683"> 其中我们需要重点关注的是**mounted,**其他的我们了解即可。 mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据 我们在VS Code中创建名为18. Vue-生命周期.html的文件编写代码来演示效果，提前准备如下代码： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 </pre></td><td class="code"><pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-for</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ }, methods: { } }) </script> </html> </pre></td></tr></table></figure> 然后我们编写mounted声明周期的钩子函数，与methods同级，代码如下： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </pre></td><td class="code"><pre><script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ }, methods: { }, mounted () { alert("vue挂载完成,发送请求到服务端") } }) </script> </pre></td></tr></table></figure> 浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。 <img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/1668867458156.png" alt="1668867458156"> </article><div class="post-copyright"><div class="copyright-cc-box"></div><div class="post-copyright__author_box"><a class="post-copyright__author_img" href="/" title="头像"><img class="post-copyright__author_img_back" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/d20f536c64d06e5fcf4bfe2ec5dc25d.jpg" title="头像" alt="头像"><img class="post-copyright__author_img_front" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/d20f536c64d06e5fcf4bfe2ec5dc25d.jpg" title="头像" alt="头像"></a><div class="post-copyright__author_name">Smith</div><div class="post-copyright__author_desc">人生太短，要干的事太多，我要争分夺秒</div></div><div class="post-copyright__post__info"><a class="post-copyright__original" title="该文章为原创文章，注意版权协议" href="https://smithhs.cn/2024/05/10/2024-05-10-JavaWeb%E5%BC%80%E5%8F%91/">原创</a><a class="post-copyright-title">JavaWeb开发</a></div><div class="post-tools" id="post-tools"><div class="post-tools-left"><div class="rewardLeftButton"><div class="post-reward" onclick="anzhiyu.addRewardMask()"><div class="reward-button button--animated" title="赞赏作者">打赏作者</div><div class="reward-main"><div class="reward-all">感谢你赐予我前进的力量<ul class="reward-group"><li class="reward-item"><a href="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/1.jpg" target="_blank"><img class="post-qr-code-img" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/1.jpg" alt="wechat"/></a><div class="post-qr-code-desc">wechat</div></li><li class="reward-item"><a href="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/2.jpg" target="_blank"><img class="post-qr-code-img" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/2.jpg" alt="alipay"/></a><div class="post-qr-code-desc">alipay</div></li></ul><a class="reward-main-btn" href="/about/#about-reward" target="_blank"><div class="reward-text">赞赏者名单</div><div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div></a></div></div></div><div id="quit-box" onclick="anzhiyu.removeRewardMask()" style="display: none"></div></div><div class="shareRight"><div class="share-link mobile"><div class="share-qrcode"><div class="share-button" title="使用手机访问这篇文章"></div><div class="share-main"><div class="share-main-all"><div id="qrcode" title="https://smithhs.cn/2024/05/10/2024-05-10-JavaWeb%E5%BC%80%E5%8F%91/"></div><div class="reward-dec">使用手机访问这篇文章</div></div></div></div></div><div class="share-link weibo"><a class="share-button" target="_blank" href="https://service.weibo.com/share/share.php?title=JavaWeb开发&url=https://smithhs.cn/2024/05/10/2024-05-10-JavaWeb%E5%BC%80%E5%8F%91/&pic=https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/image-20200802222153316.png" rel="external nofollow noreferrer noopener"></a></div><div class="share-link copyurl"><div class="share-button" id="post-share-url" title="复制链接" onclick="rm.copyPageUrl()"></div></div></div></div></div><div class="post-copyright__notice">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://smithhs.cn" target="_blank">Smith</a>！</div></div><div class="post-tools-right"><div class="tag_share"><div class="post-meta__box"><div class="post-meta__box__tag-list"><a class="post-meta__box__tags" href="/tags/JavaWeb/"> JavaWeb2</a></div></div></div><div class="post_share"><div class="social-share" data-image="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/jupyter.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://lib.baomitu.com/social-share.js/1.0.16/css/share.min.css" media="print" onload="this.media='all'"/><script src="https://lib.baomitu.com/social-share.js/1.0.16/js/social-share.min.js" defer="defer"></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2024/05/09/2024-05-09-Nosql%E6%95%B0%E6%8D%AE%E5%BA%93%E6%8A%80%E6%9C%AF/"><img class="prev-cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/NoSql.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NoSql数据库技术</div></div></a></div><div class="next-post pull-right"><a href="/2024/05/11/2024-05-11-App%E5%BC%80%E5%8F%91/"><img class="next-cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/App.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">App开发</div></div></a></div></nav><div class="relatedPosts"><div class="headline">相关推荐</div><div class="relatedPosts-list"><div><a href="/2024/05/15/2024-05-15-JavaWeb%E5%BC%80%E5%8F%912/" title="JavaWeb开发2"><img class="cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/image-20200802222153316.png" alt="cover"><div class="content is-center"><div class="date"> 2024-05-15</div><div class="title">JavaWeb开发2</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline">文章目录</div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Web%E5%BC%80%E5%8F%91">1. Web开发</a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Web%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F">1.1. Web网站开发模式</a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9D%E8%AF%86web%E5%89%8D%E7%AB%AF">1.2. 初识web前端</a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML">2. HTML</a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E6%A0%87%E7%AD%BE">2.1. 基础标签</a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link">3. - 水平线标签: </a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link">3.0.0.0.0.1. 水平线标签: </a></li></ol></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E9%A2%98%E6%A0%B7%E5%BC%8F">3.1. 标题样式</a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link">4. 中国新闻网</a></li><li class="toc-item toc-level-1"><a class="toc-link">5. </a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B6%85%E9%93%BE%E6%8E%A5">5.1. 超链接</a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%AD%A3%E6%96%87%E6%8E%92%E7%89%88">5.2. 正文排版</a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%83%E5%B1%80">5.3. 布局</a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC%E6%A0%87%E7%AD%BE">5.4. 表格标签</a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE">5.5. 表单标签</a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E9%A1%B9%E6%A0%87%E7%AD%BE">5.6. 表单项标签</a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#JS">6. JS</a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F">6.1. 引入方式</a></li></ol></li></ol></div></div></div></div></main><footer id="footer"><div id="footer-wrap"></div><div id="footer-bar"><div class="footer-bar-links"><div class="footer-bar-left"><div id="footer-bar-tips"><div class="copyright">©2022 - 2024 By <a class="footer-bar-link" href="/" title="Smith" target="_blank">Smith</a></div></div><div id="footer-type-tips"></div></div><div class="footer-bar-right"><a class="footer-bar-link" target="_blank" rel="noopener" href="https://github.com/Smithhss/smithhs.github.io.git" title="Hexo">Hexo</a></div></div></div></footer></div></div></div><div id="sidebar"><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="/img/404.jpg"" data-lazy-src="https://smith-1315833455.cos.ap-beijing.myqcloud.com/blog/d20f536c64d06e5fcf4bfe2ec5dc25d.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/" title="archive"><div class="headline">文章</div><div class="length-num">79</div></a><a href="/tags/" title="tag"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/" title="category"><div class="headline">分类</div><div class="length-num">6</div></a></div><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="javascript:void(0);"> 文章</a><ul class="menus_item_child" style="left:-79px;"><li><a class="site-page child faa-parent animated-hover" href="/archives/"> 隧道</a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"> 分类</a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"> 标签</a></li></ul></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="javascript:void(0);"> 我的</a><ul class="menus_item_child" style="left:-31px;"><li><a class="site-page child faa-parent animated-hover" href="/album/"> 相册集</a></li><li><a class="site-page child faa-parent animated-hover" href="/music/"> 音乐馆</a></li></ul></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="javascript:void(0);"> 关于</a><ul class="menus_item_child" style="left:-79px;"><li><a class="site-page child faa-parent animated-hover" href="/about/"> 关于我</a></li><li><a class="site-page child faa-parent animated-hover" href="/essay/"> 闲言碎语</a></li><li><a class="site-page child faa-parent animated-hover" href="javascript:toRandomPost()"> 随便逛逛</a></li></ul></div></div></div></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"></button><button class="close" id="mobile-toc-button" type="button" title="目录"></button><button id="go-up" type="button" title="回到顶部"></button></div></div><div id="nav-music"><a id="nav-music-hoverTips" onclick="anzhiyu.musicToggle()" accesskey="m">播放音乐</a><div id="console-music-bg"></div><meting-js id="8805965276" server="netease" type="playlist" mutex="true" preload="none" theme="var(--anzhiyu-main)" data-lrctype="0" order="random"></meting-js></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"></div><div class="rightMenu-item" id="menu-forward"></div><div class="rightMenu-item" id="menu-refresh"></div><div class="rightMenu-item" id="menu-top"></div></div><div class="rightMenu-group rightMenu-line rightMenuPlugin"><div class="rightMenu-item" id="menu-copytext">复制选中文本</div><div class="rightMenu-item" id="menu-pastetext">粘贴文本</div><a class="rightMenu-item" id="menu-commenttext">引用到评论</a><div class="rightMenu-item" id="menu-newwindow">新窗口打开</div><div class="rightMenu-item" id="menu-copylink">复制链接地址</div><div class="rightMenu-item" id="menu-copyimg">复制此图片</div><div class="rightMenu-item" id="menu-downloadimg">下载此图片</div><div class="rightMenu-item" id="menu-newwindowimg">新窗口打开图片</div><div class="rightMenu-item" id="menu-search">站内搜索</div><div class="rightMenu-item" id="menu-searchBaidu">百度搜索</div><div class="rightMenu-item" id="menu-music-toggle">播放音乐</div><div class="rightMenu-item" id="menu-music-back">切换到上一首</div><div class="rightMenu-item" id="menu-music-forward">切换到下一首</div><div class="rightMenu-item" id="menu-music-playlist" onclick="window.open("https://music.163.com/#/my/m/music/playlist?id=464586318", "_blank");" style="display: none;">查看所有歌曲</div><div class="rightMenu-item" id="menu-music-copyMusicName">复制歌名</div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link" id="menu-randomPost">随便逛逛</a><a class="rightMenu-item menu-link" href="/categories/">博客分类</a><a class="rightMenu-item menu-link" href="/tags/">文章标签</a></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item" id="menu-copy" href="javascript:void(0);">复制地址</a><a class="rightMenu-item" id="menu-commentBarrage" href="javascript:void(0);">关闭热评</a><a class="rightMenu-item" id="menu-darkmode" href="javascript:void(0);">深色模式</a><a class="rightMenu-item" id="menu-translate" href="javascript:void(0);">轉為繁體</a></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn1.tianli0.top/npm/js-heo@1.0.6/translate/tw_cn.js"></script><script src="https://cdn.cbd.int/@fancyapps/ui@5.0.14/dist/fancybox/fancybox.umd.js"></script><script src="https://cdn.cbd.int/instant.page@5.2.0/instantpage.js" type="module"></script><script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vanilla-lazyload/17.3.1/lazyload.iife.min.js"></script><script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script><script>var meting_api = "https://meting.qjqq.cn/?server=:server&type=:type&id=:id&auth=:auth&r=:r"; </script><canvas id="universe"></canvas><script async src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/dark/dark.js"></script><script>// 消除控制台打印 var HoldLog = console.log; console.log = function () {}; let now1 = new Date(); queueMicrotask(() => { const Log = function () { HoldLog.apply(console, arguments); }; //在恢复前输出日志 const grt = new Date("07/01/2022 00:00:00"); //此处修改你的建站时间或者网站上线时间 now1.setTime(now1.getTime() + 250); const days = (now1 - grt) / 1000 / 60 / 60 / 24; const dnum = Math.floor(days); const ascll = [ `欢迎使用安知鱼!`, `生活明朗, 万物可爱`, ` █████╗ ███╗ ██╗███████╗██╗ ██╗██╗██╗ ██╗██╗ ██╗ ██╔══██╗████╗ ██║╚══███╔╝██║ ██║██║╚██╗ ██╔╝██║ ██║ ███████║██╔██╗ ██║ ███╔╝ ███████║██║ ╚████╔╝ ██║ ██║ ██╔══██║██║╚██╗██║ ███╔╝ ██╔══██║██║ ╚██╔╝ ██║ ██║ ██║ ██║██║ ╚████║███████╗██║ ██║██║ ██║ ╚██████╔╝ ╚═╝ ╚═╝╚═╝ ╚═══╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ `, "已上线", dnum, "天", "©2022 By 安知鱼 V1.5.3", ]; const ascll2 = [`NCC2-036`, `调用前置摄像头拍照成功，识别为【小笨蛋】.`, `Photo captured: `, `🤪`]; setTimeout( Log.bind( console, `\n%c${ascll[0]} %c ${ascll[1]} %c ${ascll[2]} %c${ascll[3]}%c ${ascll[4]}%c ${ascll[5]}\n\n%c ${ascll[6]}\n`, "color:#3b70fc", "", "color:#3b70fc", "color:#3b70fc", "", "color:#3b70fc", "" ) ); setTimeout( Log.bind( console, `%c ${ascll2[0]} %c ${ascll2[1]} %c \n${ascll2[2]} %c\n${ascll2[3]}\n`, "color:white; background-color:#4fd953", "", "", 'background:url("https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/tinggge.gif") no-repeat;font-size:450%' ) ); setTimeout(Log.bind(console, "%c WELCOME %c 你好，小笨蛋.", "color:white; background-color:#4f90d9", "")); setTimeout( console.warn.bind( console, "%c ⚡ Powered by 安知鱼 %c 你正在访问 Smith 的博客.", "color:white; background-color:#f0ad4e", "" ) ); setTimeout(Log.bind(console, "%c W23-12 %c 你已打开控制台.", "color:white; background-color:#4f90d9", "")); setTimeout( console.warn.bind(console, "%c S013-782 %c 你现在正处于监控中.", "color:white; background-color:#d9534f", "") ); });</script><script async src="/anzhiyu/random.js"></script><div class="js-pjax"><input type="hidden" name="page-type" id="page-type" value="post"></div><script>var visitorMail = "visitor@anheyu.com";</script><script>//动态标题 let leaveTitle = '再看看嘛🌈！'; let backTitle = '欢迎回来✌️！'; let OriginTitile = document.title let titleTime document.addEventListener('visibilitychange', function () { if (document.hidden) { //离开当前页面时标签显示内容 document.title = leaveTitle clearTimeout(titleTime) } else { //返回当前页面时标签显示内容 document.title = backTitle + OriginTitile //两秒后变回正常标题 titleTime = setTimeout(function () { document.title = OriginTitile }, 2000) } })</script><script async data-pjax src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/waterfall.js/1.1.0/waterfall.min.js"></script><script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script><script>// 初始化函数 let rm = {}; //禁止图片与超链接拖拽 let aElements = document.getElementsByTagName("a"); for (let i = 0; i < aElements.length; i++) { aElements[i].setAttribute("draggable", "false"); let imgElements = aElements[i].getElementsByTagName("img"); for (let j = 0; j < imgElements.length; j++) { imgElements[j].setAttribute("draggable", "false"); } } // 显示菜单 rm.showRightMenu = function (isTrue, x = 0, y = 0) { console.info(x, y) let rightMenu = document.getElementById("rightMenu"); rightMenu.style.top = x + "px"; rightMenu.style.left = y + "px"; if (isTrue) { rightMenu.style.display = "block"; stopMaskScroll(); } else { rightMenu.style.display = "none"; } }; // 隐藏菜单 rm.hideRightMenu = function () { rm.showRightMenu(false); let rightMenuMask = document.querySelector("#rightmenu-mask"); rightMenuMask.style.display = "none"; }; // 尺寸 let rmWidth = document.getElementById("rightMenu").offsetWidth; let rmHeight = document.getElementById("rightMenu").offsetHeight; // 重新定义尺寸 rm.reloadrmSize = function () { rightMenu.style.visibility = "hidden"; rightMenu.style.display = "block"; // 获取宽度和高度 rmWidth = document.getElementById("rightMenu").offsetWidth; rmHeight = document.getElementById("rightMenu").offsetHeight; rightMenu.style.visibility = "visible"; }; // 获取点击的href let domhref = ""; let domImgSrc = ""; let globalEvent = null; var oncontextmenuFunction = function (event) { if (document.body.clientWidth > 768) { let pageX = event.clientX + 10; //加10是为了防止显示时鼠标遮在菜单上 let pageY = event.clientY; //其他额外菜单 const $rightMenuOther = document.querySelector(".rightMenuOther"); const $rightMenuPlugin = document.querySelector(".rightMenuPlugin"); const $rightMenuCopyText = document.querySelector("#menu-copytext"); const $rightMenuPasteText = document.querySelector("#menu-pastetext"); const $rightMenuCommentText = document.querySelector("#menu-commenttext"); const $rightMenuNewWindow = document.querySelector("#menu-newwindow"); const $rightMenuNewWindowImg = document.querySelector("#menu-newwindowimg"); const $rightMenuCopyLink = document.querySelector("#menu-copylink"); const $rightMenuCopyImg = document.querySelector("#menu-copyimg"); const $rightMenuDownloadImg = document.querySelector("#menu-downloadimg"); const $rightMenuSearch = document.querySelector("#menu-search"); const $rightMenuSearchBaidu = document.querySelector("#menu-searchBaidu"); const $rightMenuMusicToggle = document.querySelector("#menu-music-toggle"); const $rightMenuMusicBack = document.querySelector("#menu-music-back"); const $rightMenuMusicForward = document.querySelector("#menu-music-forward"); const $rightMenuMusicPlaylist = document.querySelector("#menu-music-playlist"); const $rightMenuMusicCopyMusicName = document.querySelector("#menu-music-copyMusicName"); let href = event.target.href; let imgsrc = event.target.currentSrc; // 判断模式扩展模式为有事件 let pluginMode = false; $rightMenuOther.style.display = "block"; globalEvent = event; // 检查是否需要复制是否有选中文本 if (selectTextNow && window.getSelection()) { pluginMode = true; $rightMenuCopyText.style.display = "block"; $rightMenuCommentText.style.display = "block"; $rightMenuSearch.style.display = "block"; $rightMenuSearchBaidu.style.display = "block"; } else { $rightMenuCopyText.style.display = "none"; $rightMenuCommentText.style.display = "none"; $rightMenuSearchBaidu.style.display = "none"; $rightMenuSearch.style.display = "none"; } //检查是否右键点击了链接a标签 if (href) { pluginMode = true; $rightMenuNewWindow.style.display = "block"; $rightMenuCopyLink.style.display = "block"; domhref = href; } else { $rightMenuNewWindow.style.display = "none"; $rightMenuCopyLink.style.display = "none"; } //检查是否需要复制图片 if (imgsrc) { pluginMode = true; $rightMenuCopyImg.style.display = "block"; $rightMenuDownloadImg.style.display = "block"; $rightMenuNewWindowImg.style.display = "block"; document.getElementById("rightMenu").style.width="12rem" domImgSrc = imgsrc; } else { $rightMenuCopyImg.style.display = "none"; $rightMenuDownloadImg.style.display = "none"; $rightMenuNewWindowImg.style.display = "none"; } // 判断是否为输入框 if (event.target.tagName.toLowerCase() === "input" || event.target.tagName.toLowerCase() === "textarea") { pluginMode = true; $rightMenuPasteText.style.display = "block"; } else { $rightMenuPasteText.style.display = "none"; } const navMusicEl = document.querySelector("#nav-music"); //判断是否是音乐 if (navMusicEl && navMusicEl.contains(event.target)) { pluginMode = true; $rightMenuMusicToggle.style.display = "block"; $rightMenuMusicBack.style.display = "block"; $rightMenuMusicForward.style.display = "block"; $rightMenuMusicPlaylist.style.display = "block"; $rightMenuMusicCopyMusicName.style.display = "block"; } else { $rightMenuMusicToggle.style.display = "none"; $rightMenuMusicBack.style.display = "none"; $rightMenuMusicForward.style.display = "none"; $rightMenuMusicPlaylist.style.display = "none"; $rightMenuMusicCopyMusicName.style.display = "none"; } // 如果不是扩展模式则隐藏扩展模块 if (pluginMode) { $rightMenuOther.style.display = "none"; $rightMenuPlugin.style.display = "block"; } else { $rightMenuPlugin.style.display = "none"; } rm.reloadrmSize(); // 鼠标默认显示在鼠标右下方，当鼠标靠右或靠下时，将菜单显示在鼠标左方\上方 if (pageX + rmWidth > window.innerWidth) { pageX -= rmWidth + 10; } if (pageY + rmHeight > window.innerHeight) { pageY -= pageY + rmHeight - window.innerHeight; } rm.showRightMenu(true, pageY, pageX); document.getElementById("rightmenu-mask").style.display = "flex"; return false; } }; // 监听右键初始化 window.oncontextmenu = oncontextmenuFunction // 下载图片状态 rm.downloadimging = false; // 复制图片到剪贴板 rm.writeClipImg = function (imgsrc) { console.log("按下复制"); rm.hideRightMenu(); anzhiyu.snackbarShow("正在下载中，请稍后", false, 10000); if (rm.downloadimging == false) { rm.downloadimging = true; setTimeout(function () { copyImage(imgsrc); anzhiyu.snackbarShow("复制成功！图片已添加盲水印，请遵守版权协议"); rm.downloadimging = false; }, "10000"); } }; function imageToBlob(imageURL) { const img = new Image(); const c = document.createElement("canvas"); const ctx = c.getContext("2d"); img.crossOrigin = ""; img.src = imageURL; return new Promise(resolve => { img.onload = function () { c.width = this.naturalWidth; c.height = this.naturalHeight; ctx.drawImage(this, 0, 0); c.toBlob( blob => { // here the image is a blob resolve(blob); }, "image/png", 0.75 ); }; }); } async function copyImage(imageURL) { const blob = await imageToBlob(imageURL); const item = new ClipboardItem({ "image/png": blob }); navigator.clipboard.write([item]); } rm.copyUrl = function (id) { const input = document.createElement("input"); // Create a new <input> element input.id = "copyVal"; // Set the id of the new element to "copyVal" document.body.appendChild(input); // Append the new element to the end of the <body> element const text = id; input.value = text; input.select(); input.setSelectionRange(0, input.value.length); document.execCommand("copy"); input.remove(); // Remove the <input> element from the DOM }; function stopMaskScroll() { if (document.getElementById("rightmenu-mask")) { let xscroll = document.getElementById("rightmenu-mask"); xscroll.addEventListener( "mousewheel", function (e) { //阻止浏览器默认方法 rm.hideRightMenu(); // e.preventDefault(); }, { passive: true } ); } if (document.getElementById("rightMenu")) { let xscroll = document.getElementById("rightMenu"); xscroll.addEventListener( "mousewheel", function (e) { //阻止浏览器默认方法 rm.hideRightMenu(); // e.preventDefault(); }, { passive: true } ); } } rm.rightmenuCopyText = function (txt) { if (navigator.clipboard) { navigator.clipboard.writeText(txt); } rm.hideRightMenu(); }; rm.copyPageUrl = function (url) { if (!url) { url = window.location.href; } rm.copyUrl(url); anzhiyu.snackbarShow("复制链接地址成功", false, 2000); rm.hideRightMenu(); }; rm.sharePage = function () { var content = window.location.href; rm.copyUrl(url); anzhiyu.snackbarShow("复制链接地址成功", false, 2000); rm.hideRightMenu(); }; // 复制当前选中文本 var selectTextNow = ""; document.onmouseup = document.ondblclick = selceText; function selceText() { var txt; if (document.selection) { txt = document.selection.createRange().text; } else { txt = window.getSelection().toString(); } selectTextNow = txt !== "" ? txt : ""; } // 读取剪切板 rm.readClipboard = function () { if (navigator.clipboard) { navigator.clipboard.readText().then(clipText => rm.insertAtCaret(globalEvent.target, clipText)); } }; // 粘贴文本到焦点 rm.insertAtCaret = function (elemt, value) { const startPos = elemt.selectionStart, endPos = elemt.selectionEnd; if (document.selection) { elemt.focus(); var sel = document.selection.createRange(); sel.text = value; elemt.focus(); } else { if (startPos || startPos == "0") { var scrollTop = elemt.scrollTop; elemt.value = elemt.value.substring(0, startPos) + value + elemt.value.substring(endPos, elemt.value.length); elemt.focus(); elemt.selectionStart = startPos + value.length; elemt.selectionEnd = startPos + value.length; elemt.scrollTop = scrollTop; } else { elemt.value += value; elemt.focus(); } } }; //粘贴文本 rm.pasteText = function () { const result = rm.readClipboard() || ""; rm.hideRightMenu(); }; //引用到评论 rm.rightMenuCommentText = function (txt) { rm.hideRightMenu(); const postCommentDom = document.getElementById("post-comment"); var domTop = postCommentDom.offsetTop; window.scrollTo(0, domTop - 80); if (txt == "undefined" || txt == "null") txt = "好棒！"; function setText() { setTimeout(() => { var input = document.getElementsByClassName("el-textarea__inner")[0]; if (!input) setText(); let evt = document.createEvent("HTMLEvents"); evt.initEvent("input", true, true); let inputValue = replaceAll(txt, "\n", "\n> "); input.value = "> " + inputValue + "\n\n"; input.dispatchEvent(evt); input.focus(); input.setSelectionRange(-1, -1); if (document.getElementById("comment-tips")) { document.getElementById("comment-tips").classList.add("show"); } }, 100); } setText(); }; //替换所有内容 function replaceAll(string, search, replace) { return string.split(search).join(replace); } // 百度搜索 rm.searchBaidu = function () { anzhiyu.snackbarShow("即将跳转到百度搜索", false, 2000); setTimeout(function () { window.open("https://www.baidu.com/s?wd=" + selectTextNow); }, "2000"); rm.hideRightMenu(); }; //分享链接 rm.copyLink = function () { rm.rightmenuCopyText(domhref); anzhiyu.snackbarShow("已复制链接地址"); }; function addRightMenuClickEvent() { // 添加点击事件 document.getElementById("menu-backward").addEventListener("click", function () { window.history.back(); rm.hideRightMenu(); }); document.getElementById("menu-forward").addEventListener("click", function () { window.history.forward(); rm.hideRightMenu(); }); document.getElementById("menu-refresh").addEventListener("click", function () { window.location.reload(); }); document.getElementById("menu-top").addEventListener("click", function () { anzhiyu.scrollToDest(0, 500); rm.hideRightMenu(); }); const menuLinks = document.querySelectorAll(".menu-link"); menuLinks.forEach(function (link) { link.addEventListener("click", rm.hideRightMenu); }); document.getElementById("menu-darkmode").addEventListener("click", anzhiyu.switchDarkMode); document.getElementById("menu-home") && document.getElementById("menu-home").addEventListener("click", function () { window.location.href = window.location.origin; }); document.getElementById("menu-randomPost").addEventListener("click", function () { toRandomPost(); }); document.getElementById("menu-commentBarrage").addEventListener("click", anzhiyu.switchCommentBarrage); document.getElementById("rightmenu-mask").addEventListener("click", rm.hideRightMenu); document.getElementById("rightmenu-mask").addEventListener("contextmenu", function (event) { rm.hideRightMenu(); event.preventDefault(); // Prevent the default context menu from appearing }); document.getElementById("menu-copy").addEventListener("click", rm.copyPageUrl); document.getElementById("menu-pastetext").addEventListener("click", rm.pasteText); document.getElementById("menu-copytext").addEventListener("click", function () { rm.rightmenuCopyText(selectTextNow); anzhiyu.snackbarShow("复制成功，复制和转载请标注本文地址"); }); document.getElementById("menu-commenttext").addEventListener("click", function () { rm.rightMenuCommentText(selectTextNow); }); document.getElementById("menu-newwindow").addEventListener("click", function () { window.open(domhref, "_blank"); rm.hideRightMenu(); }); document.getElementById("menu-copylink").addEventListener("click", rm.copyLink); document.getElementById("menu-downloadimg").addEventListener("click", function () { anzhiyu.downloadImage(domImgSrc, "anzhiyu"); }); document.getElementById("menu-newwindowimg").addEventListener("click", function () { window.open(domImgSrc, "_blank"); rm.hideRightMenu(); }); document.getElementById("menu-copyimg").addEventListener("click", function () { rm.writeClipImg(domImgSrc); }); document.getElementById("menu-searchBaidu").addEventListener("click", rm.searchBaidu); //音乐 document.getElementById("menu-music-toggle").addEventListener("click", anzhiyu.musicToggle); document.getElementById("menu-music-back").addEventListener("click", anzhiyu.musicSkipBack); document.getElementById("menu-music-forward").addEventListener("click", anzhiyu.musicSkipForward); document.getElementById("menu-music-copyMusicName").addEventListener("click", function () { rm.rightmenuCopyText(anzhiyu.musicGetName()); anzhiyu.snackbarShow("复制歌曲名称成功", false, 3000); }); } addRightMenuClickEvent();</script><script data-pjax>var themeColorMeta = document.querySelector('meta[name="theme-color"]'); var pageHeaderEl = document.getElementById("page-header"); var navMusicEl = document.getElementById("nav-music"); var consoleEl = document.getElementById("console"); // 已随机的歌曲 var selectRandomSong = []; // 音乐默认声音大小 var musicVolume = 0.8; // 是否切换了周杰伦音乐列表 var changeMusicListFlag = false; // 当前默认播放列表 var defaultPlayMusicList = []; document.getElementById("page-name").innerText = document.title.split(" | Smith")[0]; anzhiyu.initIndexEssay(); anzhiyu.changeTimeInEssay(); anzhiyu.removeBodyPaceClass(); anzhiyu.qrcodeCreate(); anzhiyu.changeTimeInAlbumDetail(); anzhiyu.reflashEssayWaterFall(); anzhiyu.sayhi(); anzhiyu.stopImgRightDrag(); anzhiyu.addNavBackgroundInit(); anzhiyu.setValueToBodyType(); anzhiyu.catalogActive(); anzhiyu.tagsPageActive(); anzhiyu.categoriesBarActive(); anzhiyu.topCategoriesBarScroll(); anzhiyu.switchRightClickMenuHotReview(); anzhiyu.getCustomPlayList(); anzhiyu.addEventListenerConsoleMusicList(false); setTimeout(() => {if (typeof addFriendLinksInFooter === "function") {addFriendLinksInFooter();}}, 200)</script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.1.9/icon/ali_iconfont_css.css"><link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script><script src="https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js"></script><script src="https://lib.baomitu.com/pjax/0.2.8/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"] var pjax = new Pjax({ elements: 'a:not([target="_blank"])', selectors: pjaxSelectors, cacheBust: false, analytics: false, scrollRestoration: false }) document.addEventListener('pjax:send', function () { // removeEventListener scroll window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn) window.scrollCollect && window.removeEventListener('scroll', scrollCollect) document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''" if (window.aplayers) { for (let i = 0; i < window.aplayers.length; i++) { if (!window.aplayers[i].options.fixed) { window.aplayers[i].destroy() } } } typeof typed === 'object' && typed.destroy() //reset readmode const $bodyClassList = document.body.classList $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode') }) document.addEventListener('pjax:complete', function () { window.refreshFn() document.querySelectorAll('script[data-pjax]').forEach(item => { const newScript = document.createElement('script') const content = item.text || item.textContent || item.innerHTML || "" Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value)) newScript.appendChild(document.createTextNode(content)) item.parentNode.replaceChild(newScript, item) }) GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update() typeof chatBtnFn === 'function' && chatBtnFn() typeof panguInit === 'function' && panguInit() // google analytics typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname}); // baidu analytics typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]); typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting() // prismjs typeof Prism === 'object' && Prism.highlightAll() }) document.addEventListener('pjax:error', (e) => { if (e.request.status === 404) { pjax.loadUrl('/404.html') } })</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script charset="UTF-8" src="https://cdn.cbd.int/anzhiyu-theme-static@1.1.5/accesskey/accesskey.js"></script></div></body></html>