#1使用html+css+js制作网站教程 准备
#1使用html+css+js制作网站教程 准备
本系列链接
#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编辑软件
目前笔者知道的编辑软件有
- DW(Adobe Dreamweaver,体积大,功能丰富)
- Visual Studio Code(需下载插件,体积小)
- Notepad++(简单)
- 记事本(…)
- …
其中笔者推荐使用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制作网站教程 准备的更多相关文章
- #2使用html+css+js制作网站教程 测试
#2使用html+css+js制作网站教程 测试 本系列链接 1 测试 1.1 运行 1.2 审查 1.3 审查技巧 1.4 其他 引言: 编写完代码后就要上机测试代码,获得用户体验,筛选bug 笔者 ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
- #3使用html+css+js制作网页 番外篇 制作接收php
使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...
- #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 ...
- 基于node.js制作爬虫教程
前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...
- CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
- animate.css与wow.js制作网站动效
animate.css 官网:https://daneden.github.io/animate.css/ 包括:attention seekers:关注者 bouncing entrances:跳跃 ...
- 分享几个有意思的css js工具网站
一.VOCABS(css html术语) vocabs 适合初学者快速认知各个代码的术语. 二.OverAPI(语言参考手册,几乎包含所有语言) OverAPI 适合快速查阅相关语言api 三.Jav ...
随机推荐
- bugku login4
(前排提示:这次思路写的极不清晰,可能只有我自己看的懂,打个预防针QAQ) 首先看题: 扫描,拿到了 .index.php.swp 这个文件是可以复原的. 上面的是重要的源码.审计之后发现这是CBC加 ...
- Mac开发必设置的Finder设置项,你设置了吗?
1.显示标签页.显示路径栏.显示状态栏的设置位置,在访达->显示-> 显示状态栏 个人三个都设置了,但是觉得显示状态栏用的并不多,反而多一行,下面是显示状态栏的效果,主要可以一眼看出有多少 ...
- Photoshop 2020特别版,内置多款实用插件,功能强大
Adobe Photoshop 2020特别21.2.1.265版 组件精简 同时优化软件配置,添加多款实用强大的插件,具体详细修改精简内容如下: -精简运行库及更新组件: -精简创意云Creativ ...
- 团队作业part3--需求改进&系统设计
一.需求&原型改进 1. 需求的修改 借鉴其他开发游戏的组的经验以及老师的建议,针对之前的需求分析,作出如下修改: 问题1:这款游戏对玩家的吸引力与驱动性有所不足. 修改1:增加成就系统与排行 ...
- Alpha冲刺阶段Day4
[Alpha冲刺阶段]Scrum Meeting Daily4 1.会议简述 会议开展时间 2020/5/25 7:30-7:50 PM 会议基本内容摘要 讨论了各自任务完成情况以及明日计划 参与 ...
- 深入解析volatile关键字
前言 很高兴遇见你~ 欢迎阅读我的文章. volatile关键字在Java多线程编程编程中起的作用是很大的,合理使用可以减少很多的线程安全问题.但其实可以发现使用这个关键字的开发者其实很少,包括我自己 ...
- nginx优化-转载
(1)nginx运行工作进程个数,一般设置cpu的核心或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor / ...
- 恋爱话术库撩妹至尊VIP版
本软件来自互联网,解锁永久至尊VIP 是一款教你撩妹密语软件.和女生聊天没有话题? 不知道怎么逗乐女生? 女生生气了不会哄? 不知道怎么让女生愿意跟你聊下去? 不知道女生对你有没有意思? 遇到不知道怎 ...
- mysql 8.0 MGR组复制配置
一.配置组复制的步骤 1.初始化数据目录 2.配置主服务器(primary) 3.配置辅助服务器(secondaries) 4.启动mysql实例 5.安装组复制插件(primary and seco ...
- gnuplot名词缩写
http://blog.163.com/yucheng_xiao/blog/static/7660019220141017114630822/ with 缩写成 w lt 是 linetype 的缩 ...