Web前端学习笔记
文章目录
- HTML+CSS系列学习笔记
-
- ①之拨云见日
-
-
- 1、什么是HTML、CSS？
- 2、VSCode编译器（宇宙第一编译器）
- 3、五大浏览器
- 4、深入了解网站开发
- 5、web前端的三大核心技术
- 6、HTML基本结构和属性
- 7、HTML初始代码
- 8、HTML注释
- 9、标题与段落
- 10、文本修饰标签
- 11、引入文件的地址路径
- 12、图片标签
- 13、跳转链接
- 14、跳转锚点
- 15、特殊符号
- 16、列表标签
- 17、表格标签
- 18、表格属性
- 19、表单标签
- 20、div和span
- 21、CSS基础语言
- 22、css样式的引入
- 23、css中的颜色表示
- 24、css背景样式
- 25、css边框样式
- 26、css文字样式
- 27、css段落样式
- 28、css复合样式
- 29、css选择器
-
- ②之溯源求本
- ③之风生水起
- ④之巧夺天工
HTML+CSS系列学习笔记
①之拨云见日
HTML CSS 切图流程 PC企业站布局 PC游戏站布局
1、什么是HTML、CSS？
答：html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。
HTML：结构
CSS：样式
一个网站是由N多个网页组成的。
2、VSCode编译器（宇宙第一编译器）
编译器的基本使用：
Ctrl + s 保存
Ctrl + a 全选
Ctrl + x 剪切
Ctrl + c 复制
Ctrl + v 粘贴
Ctrl + z 撤销
Ctrl + y 前进
shift + end 从头选中一行
shift + home 从尾部选中一行
shift + alt + ↓ 快速复制一行
alt + ↑或↓ 快速移动一行
tab 向后缩进
tab + shift 向前缩进
alt + 鼠标左键 多光标
Ctrl + d 选择相同元素的下一个
tab + 单词 → <单词>
3、五大浏览器
1、谷歌浏览器google:以前是Webkit内核，现在是Blink内核。书写前缀—webkit—
其中Blink内核是谷歌和火狐共同开发的浏览器
2、苹果浏览器safari：Webkit内核。书写前缀—webkit—
3、IE浏览器:Trident内核。书写前缀—MS—
IE由于更新慢和trident内核的bug比较多，在很长一段时间和W3C标准脱节
4、火狐浏览器firefox：Geocko内核，也叫Firefox内核。书写前缀—MOZ—
5、欧鹏浏览器opera；最初是Presto，也加入了谷歌大军，从Webkit到Blink。书写前缀—O—
4、深入了解网站开发
职位
UI设计师：设计稿
web前端开发工程师(H5开发）：①设计稿→代码 ②数据库里的数据→显示到页面③HTML + CSS
web后端开发工程师
JavaScript，与HTML、CSS之间的关系？网上找的觉得比较好的回答
5、web前端的三大核心技术
HTML：结构
CSS：样式
JavaScript: 行为
6、HTML基本结构和属性
HTML：超文本 标记 语言
超文本：文本内容和非文本内容（图片、视频、音频等）
标记：单词
语言：编程语言
标记也叫标签：
<header>
<footer>
写法分成两种：
单标签：
双标签：
标签可以上下排列，也可以组合嵌套。
HTML5常见标签：表格
标签的属性：来修饰标签的，设置当前标签的一些功能。<标签 属性="值" 属性2="值2">
7、HTML初始代码
每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。
! + tab: 快速的创建html的初始代码
<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签：包裹着所有html标签代码 lang="en"表示一个英文网站
<head>
<meta charset="UTF-8"> 元信息：是编写网页中的一些辅助信息 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>
8、HTML注释
写法：
意义：与c语言相同
快捷添加与删除注释
1、Ctrl + /
2、shift + alt + a
HTML语义化
根据网页中内容的结构，选择合适的HTML标签进行编写。
9、标题与段落
标题 → 双标签：... 大→小 在一个.html文件中只有一个h1标签。
段落 → 双标签：
10、文本修饰标签
强调 → 双标签：
<strong>strong>j加粗，强调性更强
<em>em>斜体，强调性更弱
<del>del>删除文本
<ins>ins>插入文本
11、引入文件的地址路径
相对路径
. 在路径中表示当前路径
… 在路径中表示上一级路径
绝对路径
12、图片标签
img→单标签
src：图片地址
alt：图片出现问题时，显示一段文字
title：提示信息
width、height：图片的大小
13、跳转链接
<a>a>双标签
href属性：链接的地址
target：可以改变链接打开的方式，默认情况下：在当前页面打开 _self;新窗口打开 _blank
<base>单标签：作用是改变链接的默认行为
14、跳转锚点
15、特殊符号
表格
16、列表标签
1、无序列表
2、有序列表
,
3、定义列表
：定义专业术语或名词
：对名词进行解释和描述
17、表格标签
：表格的最外层容器
：定义表格行
：定义表头
：定义表格单元
注：之间有嵌套关系，要符合嵌套规范。
语义化标签：
注：tBod可以出现很多次，但是tHead、tFood只能出现一次。
18、表格属性
19、表单标签
：表单的最外层容器 placeholder提示文字
：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。