web第1天
前端简介
- web发展历程
- web1.0 简单的静态页面 早期三大门户 搜狗 新浪 网易
- web2.0 更注重用户之间的交互 用户既是信息的消费者也是制造者
- web3.0
- 人工智能
- 复杂的页面功能
- 即时通讯
- web的前景
- pc端的网页
- 移动端的网页
- iOS android
VS Code编译器的使用
- 快捷键
- 复制文本到下一行 shift+alt+↓
- 复制文本到上一行 shift+alt+↑
- 查找 ctrl+F
- 替换 ctrl+H
- 同时写多行
- 按住鼠标滚轮向下滑动可以出现多个光标
- 按住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的写法 --> <!DOCTYPE html> <!-- html是文档的最大标签 --> <html lang="en"> <!-- head头部标签，内部写，css样式，元信息，标题 --> <head> <!-- 设置字符编码格式 gb2312 中文简体 GBK 中文简体和繁体 UTF-8 万国码，中文，英文，日文，韩文，法语 --> <meta charset="UTF-8"> <!-- 配置窗口信息（移动端需要配置） --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 文档的标题 --> <title>Document</title> </head> <body> <!-- body身体标签，内部写，所有的文档结构标签 --> </body> </html> -
常用标签
常用块级标签及特点
-
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="属性名:属性值;属性名:属性值;属性名:属性值;...."
浙公网安备 33010602011771号