前端的概述
-
web的发展史
-
web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易
-
web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博
-
web3.0
-
人工智能
-
复杂的页面功能
-
即时通讯
-
-
-
web的前景
-
pc端的网页
-
移动端的网页
-
ios android
-
vscode编译器的使用
-
快捷键
-
复制本行到下一行 shift+alt+↓
-
复制本行到上一行 shift+alt+↑
-
查找 ctrl+F
-
替换 ctrl+H
-
同时写多行 1.按住鼠标滑轮向下滑动，可以出现多个光标 2.按住alt键，点击左键，可以不同位置，出现光标
-
浏览器内核
-
浏览器的渲染引擎，作用是解析我们代码成为画面
-
五大浏览器及其内核(都是自主研发内核)
-
chrome谷歌 firefox火狐 opera欧朋 ie（微软） safari(苹果) blink（webkit分支） gecko（高版本兼容谷歌内核） presto（后来版本改成blink） trident webkit -
360、qq、UC、搜狗： 双内核（blink&trident）
网页三层结构
-
HTML 结构层--页面有什么东西
-
CSS 表示层--拥有的东西是什么样子的
-
JS(javascript) 行为层--用户的行为触发的事情
HTML语言
html定义
-
hyper text markup language （超文本标记语言），不是编程语言
html文档(扩展名或者后缀名)
-
.txt .doc .xls
-
.html
html基本语法
-
标签结构
-
开始标签开始，结束标签结束，内部可以包含文字或者其他标签
-
<关键字>
文字内容
<关键字>
文字内容
</关键字>
</关键字> -
空标签，只有开始标签，没有结束标签
-
-
标签属性
-
<cxl name="cxl" age="25" profession="singer"></cxl> -
标签的属性只能设置在开始标签。
-
html基本结构
-
<!-- 不是标签，是一个声明，声明文档类型，告诉浏览器以哪种规范来解析文档，这是html5的写法 --> -
常用标签
常用块级标签及特点
-
div
-
最常用的块级标签
-
网页应用场景
-
-
p
-
段落标签
-
-
h1-h6
-
标题标签
-
-
特点：垂直上下排列，独立成行
常用内联标签及特点(行内标签)
-
span
-
常用的行内标签，用户图标
-
-
strong
-
b
-
加粗
-
-
em
-
i
-
斜体
-
-
sub
-
定义下标字
-
-
sup
-
定义上标字
-
-
del
-
s(基本淘汰)
-
删除线
-
-
特点：默认在一行排列，超出一行会折行
其他标签
-
br
-
换行标签
-
-
hr
-
水平分隔线
-
图像标签
-
img
自带属性：
src 引入文件的路径
绝对路径
网络路径 http:// https://
本地磁盘路径 C:/ D:/
相对路径
同级目录下 ./ (可以省略)
上级目录 ../ (上上级目录 ../../)
alt 友好提示
title 鼠标悬停时展示
width 图片宽度，只设置宽度时，高度会等比例缩放
height 图片高度
-
html字符实体
css样式：
text-align: center 设置文本对齐方式为居中
color: red 字体颜色为红色
font-size: 20px 设置文字大小为20像素
格式
style="属性名:属性值;属性名:属性值;属性名:属性值;...."