跳至主要內容
3-5 字符集

1. 字符集设置出现的位置

2. 单词的识记

公众号:AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发、Linux、Web」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh

C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh

方法一:QQ

方法二:微信:Jiabcdefh


AI悦创原创...小于 1 分钟web 专栏web 专栏
02-footer置底的五种方式

你好,我是悦创。

网页切版时 footer 需要保持置底还是随文章高度放置呢?

当内容高度过短时,若能使 footer 保持置底,文章超出浏览器高度时可以跟随高度往下跑,可使网页相对美观。

如何做到呢?以下分享了五种制作的方式。

图示

网页切版时常会需要考虑 footer 需要保持置底还是随文章高度放置的问题,置底可以保持网页的美观,不需考虑网页内容过短时该如何处理,但若是每一页内容都很长时,则可不需要另外多做这方面的设定。

维持置底,需要注意的是并不是让他像 position: fixed 状态(不管滑鼠如何滚动都维持在浏览器最下面),也不是希望他像 sticky 一样固定维持在容器内部,而是在内容少时可以沾黏在浏览器最底部,内容多时可以沾黏在内容的最底部固定在页面的最下方。


AI悦创原创...大约 4 分钟web 专栏Web FQAweb 专栏Web FQA
3-4 认识 HTML5 骨架

1. 认识 HTML5 骨架

你好,我是悦创。

在前面的课程中,我已经告诉你,使用 ! 就可以快速生成 HTML5 的骨架。

<!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>Document</title>
</head>
<body>
    
</body>
</html>

AI悦创原创...大约 3 分钟web 专栏web 专栏
3-3 自由编程

你好,我是悦创。

小伙伴们,前面我们学习了创建网页和浏览网页的方法,下面我们动手来编写自己的第一个网页,并在谷歌浏览器中查看页面效果哦。

效果图:

效果图

任务: (步骤)

(1)在编辑器中,输入英文状态的感叹号(!),并按 Tab 键生成 html 文档模板(使用其它方法也可以)。

(2)在模板的 body 标签中,输入内容“我的第一个网页!”。

(3)在浏览器中打开 html 页面,查看页面效果。


AI悦创原创...大约 1 分钟web 专栏web 专栏
3-2 浏览网页的方法

1. 浏览网页的方法

你好,我是悦创。

上一节课,我们学习了,如何快速的创建一个简单的 HTML 文件,但是我们要怎么浏览或者准确来说,怎么运行呢?

2. 网页的浏览-方法一

  • 直接在文件夹中双击网页图标,即可查看网页。
  • Chrome 浏览器非常适合开发, 所以要将 Chrome 浏览器设置为默认的浏览器 ,杀毒软件、管家通常会阻止这个操作,请妥善设置杀毒软件的相关设置。

现在打开如下图,空白页面:

我们如果要让其中存在内容,例如文字。那我们就需要在 VSCode 中进行编辑。


AI悦创原创...大约 2 分钟web 专栏web 专栏
3-1 创建第一个网页

1. 创建第一个网页

1.1 创建网页-方法一

  • 创建一个空文件夹,在 VScode 编辑器中打开这个文件夹
  • 按 ctrl + N 快捷键新建文件,保存格式必须要手动填写 ".html" 后缀

1.1.1 跟我操作

在你要存储网页的路径下,新建文件夹。新建文件夹我一般喜欢用快捷键。

  • Windows:ctrl + shift + N
  • MacOS:Command + shift + N
  • Linux:mkdir 文件夹名称

AI悦创原创...大约 2 分钟web 专栏web 专栏
2-1 互联网基本原理「了解即可」

1. 在本地开发,在服务器共享

这是什么意思呢?

这是说,我们程序员开发网站都是在自己电脑上开发的,我们管这样的环境称为本地。也就是,我们所有的开发操作都是在本地上完成的。

本地开发的程序员

我们开发的 .html.css.js 等文件,是需要上传到服务器后,才能被用户看见的。

img

AI悦创原创...大约 3 分钟web 专栏web 专栏
1-1 课程简介

HTML5 语法与基础标签

目录

  • 互联网基本原理

    • 互联网基本原理
  • HTML5 基础入门

    • 创建第一个网页
    • 浏览网页的方法
    • 认识 HTML 骨架
    • 字符集
    • title、关键词及页面描述
    • 认识标签
  • HTML5 的基本标签

    • 标题和段落标签
    • div 标签
  • HTML5 特性

    • HTML5 特性
  • 小悦医生项目开发

    • 小悦医生项目开发

AI悦创原创...大约 1 分钟web 专栏web 专栏
4-1 课程总结
  • VScode 要安装好、快捷键要背熟,当然最重要的是,心态要整理好。

  • 电脑桌面整理一下,我们要成为工程师了。

公众号:AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh

C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh

方法一:QQ

方法二:微信:Jiabcdefh


AI悦创原创...小于 1 分钟web 专栏web 专栏
3-3 【学习任务】安装 vscode 编辑器

所谓“工欲善其事,必先利其器”,作为一名程序员,一定要对自己的编辑器足够熟悉,这样才能更加顺畅的写出代码。课程中讲解了 vscode 编辑器的相关内容,接下来让我们再练习一下吧!

任务描述

1、安装 vscode 编辑器并设置 Light+主题

2、安装中文汉化插件、sublime 快捷键扩展插件、自动闭合标签插件 Auto Close Tag、html 标签自动重命名插件 Auto Rename Tag、在 vscode 中打开浏览器插件 Open in Browser

3、将如下快捷键练习两遍:复制、粘贴、剪切、撤销、恢复、保存、复制当前行、上移当前行、下移当前行


AI悦创原创...大约 1 分钟web 专栏web 专栏
01-实战之 HTML:把两张图片并排(行)显示

更改方式

你好,我是悦创。

<table>
    <tr>
        <td><img src="img/3801213fb80e7bec8452feb4ec529d3e9a506b5a.jpeg" alt="图片未能正常显示"></td>
        <td><img src="img/wuhjy.jpeg" alt="图片未能正常显示"></td>
        <td><img src="img/xz.jpeg" alt="图片未能正常显示"></td>
    </tr>
</table>

AI悦创原创...大约 2 分钟web 专栏Web FQAweb 专栏Web FQA
3-2 VSCode 安装、配置和插件

Visual Studio Code 简介

  • Visual Studio Code 简称 VS Code,来自微软
image-20220930120153347
  • 优点:内置功能非常丰富、插件全且安装简单、轻量、有 Mac 版本

VS Code 下载


AI悦创原创...大约 2 分钟web 专栏web 专栏
3-1 IDE 简介

什么是 IDE

  • IDE (Integrated Development Environment,集成开发环境)是含代码编辑、关键词高亮、智能感应、智能纠错
    格式美化、版本管理等功能于一身的 “高级代码编辑器”
  • 每个 IT 工程师都要有自己趁手的 IDE,它是我们的武器。

快速展示 IDE 的功能

  • 老师演示关键词高亮、只能感应、智能纠错、格式美化 4 个功能
  • 要理解无论使用什么 IDE 编写出来的代码,本质上都是“白底黑字”的,都是“纯文字”的。

AI悦创原创...大约 2 分钟web 专栏web 专栏
2-5 项目作业

2-5 【讨论题】为什么要选择前端?

大多数选择都不是随随便便做出来的,往往是经过分析利弊、深思熟虑之后才下定的决心。比如选择专业的时候,一家人坐在一起,往往会从行业前景、就业情况开始,一直分析到工作环境和薪资,最终才敲定要报哪个专业。我相信,大多数前端工程师在选择前端的时候,往往也经历过这个阶段。那么你为什么选择前端?你了解它吗?你知道它可以应用到哪些行业吗?你与它之间又有哪些难忘的故事?

举例说明:

大学毕业后,入职了一家国企,由于各种原因,自己离职了,并来到了北京;但是由于专业的局限性,在北京很难找到自己心仪的工作。彷徨焦虑期间,朋友和我提到了前端,所以我是开始工作后,才接触到的前端。我对它的认识,只局限于它可以写浏览器上面看到的页面,学完后,可以入职电商类的公司。之所以选择它,很重要的一点原因是我觉得它挺有意思,并且我觉得只要足够努力,它是可以带给我一些收获的。


AI悦创原创...大约 4 分钟web 专栏web 专栏
2-4 学习方法介绍

学习方法介绍

  1. 敲!敲!敲!大量的动手练习才能熟能生巧

  2. 认真完成作业、独立完成项目

  3. 克服一切诱惑,专心学习,每天进步一点点🤏

答疑

下方留言或者添加我的微信联系答疑

公众号:AI悦创【二维码】

AI悦创原创...大约 1 分钟web 专栏web 专栏
2-3 本系列课程整体简介

课程模块

  1. 网页布局基础知识:HTML5/CSS3/JavaScript「小悦医生项目,来贯穿学习」
  2. 企业核心编程思想——组件化开发
  3. 移动 WebApp 开发
  4. 小程序开发
  5. 主流框架 Vue.js/React.js
  6. 服务端开发 Node.js/MongoDB/koa2

课程特点

  1. 一切服务于就业「基础与潮流」
  2. 培养动手能力「项目驱动」
  3. 重视学员兴趣
公众号:AI悦创【二维码】

AI悦创原创...大约 1 分钟web 专栏web 专栏
2-2 前端开发主要技术介绍

前端开发主要技术介绍

在学习前端开发之前呢,大家肯定或多或少,听说过一些前端开发的技术名词。它们到底是什么呢?这节课我来给你们答疑一下。

  • HTML5:搭建网页结构的语言,增加了很多移动端的支持,简单好学。「HTML5 也是我们课程最先学习的语言」
  • CSS3:样式表,美化网页的语言,增加了很多动画、过渡等新特性,要记得英语单词非常多,不过非常有意思。
  • JavaScript:前端开发工程师最重要的“看家语言”,JS 功底的好坏,决定了职业高度,学习需要下苦功。
  • Vue.js / React.js:从 2016 年前后开始流行的前端框架,采用模块化开发、数据驱动、声明式编程,只需要前期“马步扎稳”,后面“武功招式”随便学。

AI悦创原创...大约 2 分钟web 专栏web 专栏
2-1 前端开发行业介绍

前端开发行业介绍

  • 前端开发的前身是 “网页制作” ,随着 移动端的兴起和 4G、5G 技术的普及,互联网产品业务月来越复杂,在 2011 年前后,逐步蜕变为前端开发。「在 2011年之前,实际上前端和后端是基本上不分家的。但是在 2011年之后,智能手机开始普及,大家的智能手机也基本上是 2011年前后买的。」
  • 什么是“前端”:一切用户能够看见的东西、产生交互的东西,都是前端同学在负责。
  • 后端: 负责数据、数据库等,增删改查等操作。

AI悦创原创...大约 2 分钟web 专栏web 专栏