1.课程的规划
第一阶段、css3/html5
第二阶段、JS交互
第三阶段、node开发
第四阶段、前端框架 :vue react
第五阶段、小程序+数据可视化
第六阶段、就业指导+项目实训
小目标:PC电商网站
2.前端的概述
-
web的发展史
-
-
web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易
-
web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博
-
web3.0
-
-
-
-
人工智能
-
复杂的页面功能
-
即时通讯
-
-
-
web的前景
-
-
pc端的网页
-
移动端的网页
-
ios android
-
3.vscode编译器的使用
-
快捷键
-
-
复制本行到下一行 shift+alt+↓
-
复制本行到上一行 shift+alt+↑
-
查找 ctrl+F
-
替换 ctrl+H
-
同时写多行 alt+鼠标左键可以出现多个光标
-
4.浏览器内核
-
浏览器的渲染引擎,作用是解析我们的代码
-
五大浏览器,自主研发内核
谷歌 chrome 火狐 mozilla 欧朋 opera 微软IE 苹果safari webkit>blink gecko 高版本兼容webkit presto>blink trident webkit -
360 猎豹 搜狗 (双内核:blink+trident)
5.网页三层结构
html-结构层--拥有什么
css-表示层--拥有的东西什么样子
js-行为层--用户的行为
HTML语言
html定义
hyper text markup language 超文本标记语言,不是编程语言
html文档(扩展名或者后缀名)
.txt .doc .xls
.html
html基本语法
-
标签结构
-
-
开始标签开始,结束标签结束
<开始标签> </结束标签>
-
-
-
空标签
-
-
-
-
在开始标签中结束,没有结束标签
-
<关键字>
-
空标签内容没有任何内容
-
-
-
标签属性
-
-
<cl name='chenglong' age='66' profession='actor'></cl>
-
只能写在开始标签中,不能写在结束标签中
-
html基本结构
<!-- shift + 1 打出 ! 直接回车 -->
<!-- 注释的写法 ctrl + / -->
<!-- 声明文档类型,告诉浏览器以哪种规范来解析文档,这是Html5的写法,不是标签,写在文档最上方 -->
<!DOCTYPE html>
<!-- html是文档最大的标签 -->
<html lang="en">
<head>
<!-- head 包含元信息,css样式属性,js语言,标题 -->
<!-- 字符编码
gb2312 中文简体
GBK 中文简体&繁体
UTF-8 万国码,中文,英文,西班牙语,日文,韩文,法语 -->
<meta charset="UTF-8">
<!-- 窗口信息配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题 -->
<title>你好</title>
</head>
<body>
<!-- body 身体部分,包含所有页面呈现的结构标签 -->
</body>
</html>
6.常用标签
常用块级标签及特点
-
div
-
-
最常用的块级标签
-
网页应用场景
-
-
p
-
-
段落标签
-
-
h1-h6
-
-
标题标签
-
-
特点:垂直上下排列,独立成行
常用内联标签及特点(行内标签)
-
span
-
-
常用的行内标签,用户图标
-
-
strong(具有语义化)
-
b
-
-
加粗
-
-
em(具有语义化)
-
i
-
-
斜体
-
-
sub
-
-
定义下标字
-
-
sup
-
-
定义上标字
-
-
del
-
s(基本淘汰)
-
-
删除线
-
-
特点:默认在一行排列,超出一行会折行
其他标签
-
br
-
-
换行标签
-
-
hr
-
-
水平分隔线
-
7.图像标签
-
img
-
-
src 图片的路径
-
width 图片宽度 (当只设定宽度时,高度会等比例缩放)
-
height 图片高度
-
alt 友好提示
-
title 标题,鼠标悬浮时显示
-
绝对路径
-
-
-
-
网络路径
-
本地磁盘路径
-
-
-
-
相对路径
-
-
-
-
同级目录 ./
-
上级目录 ../
-
根目录 /
-
-
8.链接 a标签
-
自带属性:
href: 链接的路径
target:
_self 在当前页跳转,默认就是
_blank 在新页面跳转
9.语义化
-
概念:运用合适的标签和特定的属性去格式化文档(合适的场合用合适的标签和属性,合适的标签和属性用在合适的场合)
-
优点:
-
-
易于开发和维护
-
用户体验比较好
-
易于seo(搜索引擎优化),易于爬虫抓取关键字,能和搜索引擎建立良好的沟通
-
即使在没有css样式的情况下,也能呈现良好的效果
-
html字符实体