前端的概述

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的写法 -->
<!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身体标签，内部写，所有的文档结构标签 -->

```

常用标签

常用块级标签及特点

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字符实体

https://www.w3school.com.cn/html/html_entities.asp

css样式：

text-align: center 设置文本对齐方式为居中

color: red 字体颜色为红色

font-size: 20px 设置文字大小为20像素

格式

style=“属性名:属性值;属性名:属性值;属性名:属性值;…”

web前端全栈0基础到精通（祺）01相关推荐

web前端全栈0基础到精通（祺）vue 02
一.localStorage 和 sessionStorage的区别相同点: 都可以实现存储. 它们的大小都是5MB左右. 它们的存储方式都必须以字符串进行存储!!!! 它们的语法都是相同.存值: ...
web前端全栈0基础到精通（祺）08
表单表单标签注册和登录目的:收集用户信息,能够输入内容 input标签 text 文本输入类型 <input type="text" name="userna ...
web前端全栈0基础到精通（祺）js 02
数据类型分类. 基本数据类型: number string boolean null undefined 复杂/复合/引用数据类型: object array function 检验数据类型语法: ...
web前端全栈0基础到精通（祺）11
HTML5基础 HTML5中新增的布局标签 html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 (更加语义化) header标签 <hea ...
web前端全栈0基础到精通（祺）vue 01
一.vue的基本知识 1.1vue 的官网 https://cn.vuejs.org/ 1.2概念渐进式的JavaScript框架????渐进式... 自底向上,逐渐增强.vue.js它本身就是一个 ...
web前端全栈0基础到精通（祺）vue 04
一.组件(component) 在前端,两大概念一.模块模块指的就是逻辑封装,一些共通的功能,你把它提取出来,封装到js中.你需要这个功能,你就引入js es6的导入导出(导出的方式决定你引入的方 ...
web前端全栈0基础到精通（祺）07
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
web前端全栈0基础到精通（祺）03
盒模型基础选择器通配符选择器 * {width: 200px;height: 200px;background-color: yellow; } 标签选择器 div {width: 200px;h ...
web前端全栈0基础到精通（祺）js 10
表单快速获取表单元素 \1. 需要先获取表单 form \2. 快速获取表单元素 form.name值 var form = document.getElementsByTagName('form' ...

web前端全栈0基础到精通（祺）01

前端的概述

vscode编译器的使用

浏览器内核

网页三层结构

HTML语言

html定义

html文档(扩展名或者后缀名)

html基本语法

html基本结构

常用标签

常用块级标签及特点

常用内联标签及特点(行内标签)

其他标签

图像标签

html字符实体

css样式：

web前端全栈0基础到精通（祺）01相关推荐

最新文章

热门文章