web作业（怎么在短时间做出三个精美的网页）

Tips

js的使用方式

在元素事件中编写JS代码

事件：用户在元素上所激发的行为操作
	oncllck：当用户单击元素时激发的操作
  语法：
	<标记 onclick=‘JS执行代码’>
		console.log('向控制台输出一句话'); 控制台 输出 加分号

将代码嵌入在网页内

语法：
		在网页的任意位置处，均可嵌入
		<script>
			可执行的JS代码
		</script>
特点：
		网页加载时就执行

		document.write（‘在网页中输出一句话！’）;
		注意：将document.write（）编写在按钮中的话，在执行时，会刷新网页的内容

将JS代码编写在外部的JS文件中

	1、创建一个JS文件（.js)文本文件，编写js代码
	2、在使用的网页中对JS文件进行引入
		<script src='JS文件的路径'></script>
		注意：在引入的script中是不能编写JS脚本的
		window.alert('网页弹出消息')

CSS的使用方式

1. 写在html中
2. 将外部的css代码导入html中（方式与css类似）

网页制作

1、选取目标网站

选取原则

1. 网站结构相对简单
   原因：网站内容过多的话，后期我们要修改的内容也会增加
2. 网站尽量没有反爬虫
   原因：有些网站的反爬虫与JavaScript文件有关（具体原因请参考我的前两篇文章）
   这个不用太担心，一般来说结构简单的网站（例如个人博客）都不会有厉害的反爬虫机制

网站举例

http://www.xiaoxinglai.cn/

2、使用爬虫爬取对应网站的js、css和三个页面的的html

爬取html

网页html的爬取不用多说
基本爬虫做到

import requests
## 爬取网站首页的html
url = " http://www.xiaoxinglai.cn/"
res = requests.get(url)
html = res.text
f = open('index.html', 'w', encoding='utf-8')
f.write(html)

爬取js和css

1. 谷歌浏览器使用F12打开控制台，然后点击network栏
   
2. 按照提示 ctrl+r 刷新网页
3. 点击js就可以查看该网站使用的js文件
   
4. 使用爬虫爬取js文件
   鼠标左键点击js文件，就可以看到文件的url地址
   
   对该url地址发起请求，存入到js文件中

url = "http://www.xiaoxinglai.cn/wp-content/themes/dux/js/libs/jquery.min.js?ver=3.0"
url = " http://www.xiaoxinglai.cn/"
res = requests.get(url)
js = res.text
f = open('js/jquery.min.js', 'w', encoding='utf-8')
f.write(js)

使用此方法存储所有的js文件

在HTML文件中找到script标签中导入该js文件的标签

把script标签的src属性的值改成我们所存储的js的相对路径

<script type='text/javascript' src='./js/jquery.colorbox-min.js'></script>
<script type='text/javascript' src='./js/jquery-colorbox-wrapper-min.js'></script>

注意“.”
寻找所有的script，都进行更改

css与js类似，不同的是，css的外部引用在link标签里

我们只需要把link标签的css属性的值改成我们所存储的css的相对路径即可

<link rel='stylesheet' id='menu-image-css'  href='./css/menu-image.css?ver=1.1' type='text/css' media='all' />

如果对html结构比较了解的话，可以写一个小程序
循环遍历标签来下载和修改js和css的路径

但是注意：
文件最好先备份
别问我为什么!!!
别问我为什么!!!
别问我为什么!!!
我是不会告诉你，使用w方式，会覆盖之前的文件

3、修改网页内容

修改标签文本

找到要修改的标签，把原本的文本内容修改的你信管有关的文本
例如：
网站的导航栏

我们可以吧wp教程修改为 信管系统教程
找到对应的标签

<li id="menu-item-301" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-301"><a href="http://www.xiaoxinglai.cn/wp/" class="menu-image-title-after"><span class="menu-image-title"><i class="fa fa-wordpress"></i><span class="fontawesome-text"> wp教程</span></span></a></li>

修改文本内容

<li id="menu-item-301" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-301"><a href="http://www.xiaoxinglai.cn/wp/" class="menu-image-title-after"><span class="menu-image-title"><i class="fa fa-wordpress"></i><span class="fontawesome-text"> 信管系统教程</span></span></a></li>

修改a标签的href属性

将没有链接的a标签的href属性的值修改为 href="#"
这样的话点击标签不会跳转（#代表的是本页面，也就是跳转到本身）

list 和 content 页面类似