#1使用html+css+js制作网站教程 准备

时间：2023-03-09 09:35:29
#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编辑软件

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

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

其中笔者推荐使用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 文件夹，用于放图片
    #1使用html+css+js制作网站教程 准备

0.5 附加

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

相关文章