本系列链接

#1使用html+css+js制作网站教程 准备
#2使用html+css+js制作网站教程 测试
#3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 番外篇 制作接收php
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

0 准备

0.1 IDE编辑软件

目前笔者知道的编辑软件有

  1. DW(Adobe Dreamweaver,体积大,功能丰富)
  2. Visual Studio Code(需下载插件,体积小)
  3. Notepad++(简单)
  4. 记事本(…)

其中笔者推荐使用VS code,因为其体积较小,下载各式各样的辅助插件

0.2 浏览器

这个不用说了
比较推荐chrome吧

0.3 基础概念

0.3.1 html

HTML称为超文本标记语言,主要结构为<标签名 属性名="值">值</标签名>
主要结构为:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> </body>
</html>

在vs code中输入"!"可以填充
其中html,body,meta皆为各种标签名
可以在这里查看大部分标签名:点我跳转W3school

0.3.2 css

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。(来源百度百科)
可以将css理解为用于渲染html的语言。主要结构为选择器{属性:值;}其中常见的选择器有

  • ID选择器 #ID名
  • 类选择器 .类名
  • 标签选择器 标签名
  • 所有选择器 *

eg:

/*用标签选择器把所有div标签变成红色背景*/
div {
background-color: red;
}

0.3.3 js

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。(来源百度百科)
js就是html的脚本,可以在html中执行各种动态指令(虽然叫javascript 但是和java没有什么关系)
该语言没有什么主要结构,可以在这里查看细节点我跳转菜鸟教程

0.4 文件结构

一般的文件结构为
www
 -css
 -js
 -index.html
 -robots.txt
 -fonts
 -pic
其中

  • www 主文件就,网站根目录
  • css 文件夹,用于放css文件
  • js 文件夹,用于放js文件
  • index.html 主文件,主页文件
  • robots.txt 搜索文件,用于给搜索引擎(百度蜘蛛等)看那些目录或文件可以被爬(爬取)
  • fonts 文件夹,用于放字体文件
  • pic 文件夹,用于放图片

0.5 附加

jQuery(特点:js附加库,经常使用,点我跳转官网,使用需要下载jquery.min.js)
奥森图标(css小图标,点我跳转官网,使用需下载fonts文件夹和主css文件)
node.js(js附加库,不必要,官网

#1使用html+css+js制作网站教程 准备的更多相关文章

  1. #2使用html+css+js制作网站教程 测试

    #2使用html+css+js制作网站教程 测试 本系列链接 1 测试 1.1 运行 1.2 审查 1.3 审查技巧 1.4 其他 引言: 编写完代码后就要上机测试代码,获得用户体验,筛选bug 笔者 ...

  2. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  3. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  4. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  5. #3使用html+css+js制作网页 制作登录网页

    #3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...

  6. 基于node.js制作爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  7. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  8. animate.css与wow.js制作网站动效

    animate.css 官网:https://daneden.github.io/animate.css/ 包括:attention seekers:关注者 bouncing entrances:跳跃 ...

  9. 分享几个有意思的css js工具网站

    一.VOCABS(css html术语) vocabs 适合初学者快速认知各个代码的术语. 二.OverAPI(语言参考手册,几乎包含所有语言) OverAPI 适合快速查阅相关语言api 三.Jav ...

随机推荐

  1. Docker-使用数据卷在宿主机和容器间的数据共享

    场景一:现在用Docker创建了N个容器,但是这些容器之间需要数据共享,这个时候我们应该怎么办?[参考第四步] 场景二:docker创建了一个容器并进入容器,添加了一些定制功能,此时除了用docker ...

  2. selenium模拟淘宝登陆,过所有验证

    淘宝模拟登陆实现 由于淘宝使用了滑动验证码,需要进行模糊手动滑动,因此考虑使用selenium+chromedriver进行模拟登陆. 淘宝的登陆网址:https://login.taobao.com ...

  3. 认识 Cargo-Rust构建工具和包管理器

    认识 Cargo-Rust构建工具和包管理器 上两篇文章 都有说到 hello world 程序,但是我们如果使用自己创建文件的方式创建项目,一旦文件多了,那得多麻烦,整个项目将变得难以管理.下面我来 ...

  4. 「IOI2017」接线 的另类做法

    看到这题,我的第一反应是:这就是一个费用流模型?用模拟费用流的方法? 这应该是可以的,但是我忘记了怎么模拟费用流了IOI不可能考模拟费用流.于是我就想了另外一个方法. 首先我们考虑模拟费用流的模型如下 ...

  5. MySQL的验证方式

    mysql8之后root用户的密码验证方式修改了,mysql8的加密方式为caching_sha2_passoword,而navicat连接所用的方式为native_password. 使用命令mys ...

  6. 我的第一次shell

    我的第一次shell 最近我们的项目需要进行优化,整体架构进行改造. 然后我们红超哥就看我骨骼惊奇,说小伙子你想不想当做掌门人呀.(我说不想哈哈) 想不想也没用了,红超哥说我们现在的架构有所改变,需要 ...

  7. 【MySQL】Novicat 连接mysql 报错1251的问题处理,Novicat12 破解方法

    1.远程连接时,报错 是因为我们的navicat版本太低 在网上查的是,出现这个原因是mysql8之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是ca ...

  8. python爬虫--用xpath爬豆瓣电影

    步骤 将目标网站下的页面抓取下来 将抓取下来的数据根据一定规则进行提取   具体流程 将目标网站下的页面抓取下来 1. 倒库 import requests 2.头信息(有时候可不写) headers ...

  9. MySQL 锁(完整版)

    目录 锁总览 锁的作用 加锁流程 锁对数据库的影响 锁等待 死锁 锁类型 锁范围 锁方式 全局锁 全局读锁 全局QC锁 QC锁存在的问题: 备份锁 backup lock MDL锁 MDL锁类型 MD ...

  10. sessionStorage 退出登录删除sessionStorage储存

    1 登录后在sessionStorage中添加token的值,退出后清空 登录后在sessionStorage中添加token的值,退出后清空 localStorage 和 sessionStorag ...