HTML+CSS系列学习笔记.md01

HTML+CSS系列学习笔记

拨云见日

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之间的关系

我们说，Web前端三剑客：HTML、CSS、JavaScript，它们看上去是三种不同的技术，但在实际中却是相互搭配使用的。

HTML是用来标记内容的（重在内容组织上）

CSS是用来修饰内容样式的（重在内容样式美化展示上）

JavaScript是用来做交互的

这三者99%的情况下都是搭配使用的，但也不是绝对的，具体关系是：

HTML与CSS、JS是不同的技术，可以独立存在

5、web前端的三大核心技术

HTML：结构
CSS：样式
JavaScript: 行为

6、HTML基本结构和属性

HTML：超文本 标记 语言
超文本：文本内容和非文本内容（图片、视频、音频等）
标记：单词
语言：编程语言

标记：也叫标签：

<header>
<header>

7、HTML初始代码

每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。
html: 快速的创建html的初始代码

文档声明：告诉浏览器这是一个html文件 html文件的最外层标签：包裹着所有html标签代码 lang="en"表示一个英文网站 元信息：是编写网页中的一些辅助信息 charset="UTF-8"国际编码 设置网页标题 显示网页内容

8、HTML注释

写法：<!-- 内容 -->
意义：与c语言相同
快捷添加与删除注释
1、Ctrl + /
2、shift + alt + a

HTML语义化
根据网页中内容的结构，选择合适的HTML标签进行编写。

9、标题与段落

标题 → 双标签：<h1></h1>...<h6></h6> 大→小 在一个.html文件中只有一个h1标签。
段落 → 双标签：<p></p>

10、文本修饰标签

j加粗，强调性更强
斜体，强调性更弱
删除文本
插入文本

引入文件的地址路径

相对路径
. 在路径中表示当前路径
… 在路径中表示上一级路径
绝对路径

图片标签

img→单标签
src：图片地址
alt：图片出现问题时，显示一段文字
title：提示信息
width、height：图片的大小

跳转锚点
1、#号和id属性
2、#号和name属性

特殊符号
表格

列表标签
1、无序列表

<ul> <li> 符合嵌套规范，他们之间不能有其他标签 type属性:改变前面标记的样式样式
2、有序列表
<ol>,<li>:列表的最外层容器、列表项
3、定义列表
<dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对名词进行解释和描述