Web前端学习课程笔记之HTML+CSS
课程来源：【千锋教育_Web前端最全教程从入门到精通（HTML+CSS全套）】https://www.bilibili.com/video/BV1p4411T765?vd_source=78a15506889b5da08c29834cc2b5e598
一、课程目录与大纲
（一）HTML+CSS系列学习——拨云见日
- HTML基础知识
- CSS基础知识
- 切图流程
- PC企业站布局
- PC游戏战布局
（二）HTML+CSS系列学习——溯本求源
- HTML扩展知识
- CSS扩展知识
- HTML5新语法
- CSS3新语法
- 不同浏览器之间的兼容问题和解决方案
（三）HTML+CSS系列学习——风生水起
- 弹性布局
- 网格布局
- 移动端布局
- 响应式布局
（四） HTML+CSS系列学习——巧夺天工
- 预编译CSS
- postcss CSS架构
- CSS的高级功能
- CSS与JS的交互
- List item
- List item
二、什么是HTML、CSS
（一）什么是HTML、CSS？
它们是编写网站的两种编程语言，需要配合使用。
其中，一个网站由N个网页构成，每个网页都是一个HTML文件。
（二）如何查看网页中的源代码？
在网页中点击鼠标右键——网站源代码
（三）如何写简单代码，写到哪里去？
1、点击鼠标右键——创建——文本文档——整体重命名——xxx.html
——文件右击——打开方式——记事本
2、打开后在里面输入代码——保存（ctrl+s）——拖拽到浏览器或双击文件即可显示效果
三、第一宇宙编译器—VS Code（visual studio code）
（一） 选择它的原因
- 来自大厂—微软
- 轻量
- 免费
（二） 如何下载？
（三）如何安装插件，语言包？
能使我们在编译器中运行我们的代码的插件
- open in browser——在代码中右键
- view in browser——在左边文件名处右键
（四） VS Code的基本使用
- 1、如何新建文件（夹）
在左边栏目目的文件夹内点击新建文件（夹）图标即可
文件右键可删除，可重命名
2、 如何保存文件
未保存时，标题有小白点，网页刷新没反应
按Ctrl +s保存后小白点消失，刷新网页有反应
- 3、关于搜索目的文件
左边栏目的搜索图标中可输入文件内容或标题搜索
- 4、怎么让一行太长弹出屏幕的代码自动转入下一行？
文件—首选项—设置—搜索框搜word—打开word wrap
设置中也可以设置字体大小等等
（五）VS Code快捷键
| 快捷键 | 含义 |
|---|---|
| Ctrl+a | 全选 |
| Ctrl+x | 剪切 |
| Ctrl+c | 复制 |
| Ctrl+v | 粘贴 |
| Ctrl+z | 撤销 |
| Ctrl+y | 前进 |
| Ctrl+d | 选择所选元素或组合下方相同的元素或组合 |
| Shift+end | 向后部分选择 |
| Shift+home | 向前部分选择 |
| Alt+下箭头 | 快速复制一行 |
| Alt+上下箭头 | 光标所在行上下移动 |
| Tab | 光标所在行向后缩进 |
| Shift+Tab | 光标所在行向前缩进 |
| Alt+鼠标左键 | 实现多光标 |
四、Chorme浏览器
- 作用：用于展示代码效果
五、网站开发
（一）网站开发的团队
- UI设计师：提供网站页面设计图。
- Web前端开发设计工程师：将设计稿转化为代码形式，并与后端配合将数据库的数据通过代码显示在页面。
- Web后端开发工程师：存储与管理网站历史数据。
六、Web前端三大核心技术
- HTML:负责网站结构
- CSS：负责网站样式（美化）
- JAVASCRIPTl:负责与用户的交互行为
问答：怎么显示无JavaScript功能的网站？
答： 随便找个网站—点击设置—高级设置—内容设置—关闭JavaScript的允许。
七、了解HTML
（一）基础知识
全名：超文本标记语言（hypertext markup language）
-
超文本：可展示文字与非文字的内容
-
语言：标称语言
-
标记：<英文>这种格式称为标记型语言也称为标 签
（二）标签
-
分类
单标签*<英文>*
双标签*<英文>* -
快捷键
输入英文后按“Tab”键即可自动生成。 -
形式
标签之间可以上下排列，也可以组合嵌套。 -
标签的属性
1、标签属性的格式:<标签 属性=“xxx” 属性1=“xxx”>（可添加多个属性）
2、作用：修饰标签，设置当前标签的一些功能。 -
标签含义
HTML5标签含义元素周期表
八、 HTML初始代码
每一个HTML文件都需要添加初始代码。
代码
Document
前期必须自己打，熟悉后可使用快捷键——！+“Tab”键
了解部分HTML初始代码
-------------文档声明：告诉浏览器这是一个html文件。
----------------html文件的最外层标签：包裹着所有html标签代码（“lang=en表示这是一个英文网站”，“lang=zh-CN表示一个中文网站”）
------------元信息：编写网页的赋值信息（"UTF=8"是国际编码，让网页不出现乱码情况）
Document -----设置网页的标题。
----------显示网页内容的区域
九、HTML注释
1、释的代码只有在文件中看的见，浏览器不显示。
2、作用：
-
把暂时不用的代码注释起来，方便以后使用。
-
对开发人员进行提醒。
3、格式：
4、快捷键：
- 打完内容后按Ctrl+/
- 选中内容后按Shift+Alt+A
（如果重复操作会自动删除注释标）
十、HTML语义化
指根据网页中的内容结构，选择合适的html标签进行编写（每个标签都会有自己的职责）
好处
- 在没有css的情况下，页面也能呈现出很好的内容结构
- 有利于seo查询，让搜索引擎爬虫更好的理解网页
- 方便其他设备解析（如屏幕阅读器，盲人阅读器等）
- 便于团队开发与维护
问答：如何提炼网页大纲提炼大纲链接
点击右上角点击三点—书签—显示书签栏—将中间的那个如图拖到书签栏—然后回到我们想要提炼大纲的网页—点击下我们刚添加到书签的h50…就会出现大纲。
如果我们的标签使用地恰当就会一目了然
十一、标题h与段落p
-
标题H：
双标签，一个网页中h1最重要且只能有一个。
-
段落P:
双标签
问答：如何精准查看网页部分的代码？
答：利用调试工具
在你想调试的部分点击右键—检查—此时页面右端会出现代码，相应部分内容会有不同颜色的突出
十二、文本修饰标签
十三、图片标签与属性
（一）标签
（二）属性
- Src:引入图片的地址
- Alt:发你图片出现问题的时候，可以显示一段友好的提示文字。（当没有问题时，不会有影响，直接显示图片）
- Title：当鼠标移到图片上时会出现提示信息
- Width、heigth:图片的大小
问答：图片大小有必要加上去吗？
答：有必要
当你是两段落间加一张图片，如果不加图片大小的标签，在网速较慢的情况下，一开始图片还没办法加载出来，两段文字会紧贴在一起，当加载出来后，页面会突然改变成两段文字中间有一张完整的图片
而加了图片大小标签，即使网速慢，在刚打开网页时，两段文字也会隔开一张图片的距离，然后，图片会在两段文字间慢慢加载出来，给予用户较好的体验，不会太突兀
十四、引入文件的地址路径
Html中路径分两种
-
相对路径：
相对于某一个文件来进行研究，比如，我们某一个文件跟我们要引入的图片是在同一个级别下，他们之间就是兄弟关系，如果，我们要引入的图片是在当前文件同级的文件夹当中，那就是类似父子关系，以此类推类孙子关系…
引入符：
在路径中表示当前路径（各种兄弟，儿子，孙子…关系）用——./
在路径中表示上一级路径，需要跳出当前文件夹引入的用——…/
-
绝对路径：
不管图片在哪个盘哪个位置，像上一节课中学习的引入即可
问答：路径地址中的斜线改为反斜线可以吗?
答：Windows系统中路径地址中的斜线改为反斜线没关系。但不支持，并不规范
绝对路径中的网络地址中必须用斜线不能改
十五、链接跳转
（一）标签
（二）属性
-
Herf属性:引入链接的地址
-
Target属性：可以改变链接打开方式，默认情况下，在当前页面打开＿self ；在新窗口打开＿blank
（属性都在第一个标签内加。）
问答：如果想让网页中所有链接都在新窗口打开，却不想一个个加target属性怎么办？
十六、跳转锚点
（也是使用a标签）
- 方法一：#+id属性
- 方法二：#+name属性
十七、特殊符号
编写一些文本时，有输入法无法输入的字符串，比如空格，页面并不会解析出多个空格
而HTML为这些特殊字符准备了专门的代码
问答：为什么现在有很多特殊字符已经可以简单输入却还要用代码表示？
答：比如左右尖括号，因为有时候文本中的左右尖括号会和我们html代码产生冲突，解决冲突
比如空格，代码原本会忽略空格，那么用代码代表空格
十八—列表
（一） 无序列表
1、 标签
- ul:列表的最外层容器
- li:列表项
（两者必须组合使用，两者之间不能有其他标签，但li内部可以有其他标签）
2、属性
- Type属性：改变前面标记的样式（加在ul标签内），并不重要，可以用css控制。
- 可以上网找标记样式的代码
（二）有序列表
- ol:列表的最外层容器
- li:列表项
（两者必须组合使用，两者之间不能有其他标签，但li内部可以有其他标签） - 也有type属性，可上网搜索
- 无序列表可代替有序列表功能，用的比较少。
（三）定义列表
主要由一个标题和解释内容的一个结构
- dl定义列表 也是最外层标签
- dt定义专业术语或名词
- dd对名词进行解释和描述
（四）列表标签之间可以相互嵌套，形成多级结构。
例：
-
奶奶
-
爸爸
- 大鸡
- 鸡馨
- 鸡兰
- me
-
叔仔
- 秀媚
- 郑慧
- 大姑仔
- 细个姑仔
- 亲，欢迎咨询哦
输出：
十九、表格
（一）表格标签
- table:表格的最外层容器
- caption:定义表格标题
- tr:定义表格行（每行表格都要出现一次此标签）
- th:定义表头
- td：定义表格单元
- 语义化标签：
1.thead
2.tbody
3.tfood
其中，在一个table中thead，tfood只能出现一次。
例：
妈妈新年饭桌安排
日期
名称
图片
2023.1.1
白切鸡，酱烧鹅
2023.1.2
鹅汁儿焖笋
好饿。。。。
输出：
（二）表格属性
- border:表格边框（数字表示边框宽度）
- cellpadding:单元格内的空间
- cellspacing:单元格之间的空间
- rowspan:合并行
- colspan:合并列
- align:左右对齐方式(包括left,center,right)
- valign:上下对齐方式包括top,middle,bottom)
…
注意各种属性应该加在什么位置！
例1.border,cellpadding,cellspacing
妈妈新年饭桌安排
日期
名称
图片
2023.1.1
白切鸡，酱烧鹅
2023.1.2
鹅汁儿焖笋
好饿。。。。
输出：
例2.colspan
妈妈新年饭桌安排
日期
名称
图片
2023.1.1
白天
白切鸡，酱烧鹅
2023.1.2
白天
鹅汁儿焖笋
好饿。。。。
-->
输出：
例3.rowspan
妈妈新年饭桌安排
日期
名称
图片
2023.1.1
白天
白切鸡，酱烧鹅
夜晚
白切鸡，酱烧鹅
2023.1.2
白天
鹅汁儿焖笋
夜晚
鹅汁儿焖笋
好饿。。。。
输出：
4.align,valign
妈妈新年饭桌安排
日期
名称
图片
2023.1.1
白天
白切鸡，酱烧鹅
夜晚
白切鸡，酱烧鹅
2023.1.2
白天
鹅汁儿焖笋
夜晚
鹅汁儿焖笋
好饿。。。。
二十、表单
（一）表单标签
注：表单没有严格规范，可以在中间镶嵌一些标题，段落什么的。
- form：表单的最外层容器。
- input:用于搜集客户信息，根据不同的type属性值展现不同的控件，TYPE属性决定它是什么控件。
（二）表单type属性
注： 是input的属性，与其配合使用
- text:普通文本输入框
- password:密码输入框
- checkbox:复选框
- radio:单选框（电脑不知道你在什么范围内多选一，这时我们需要给它加个name属性让电脑知道这是一组）
- file:上传文件
- submit：提交按钮（至于提交到哪里，我们会在form标签加一个action属性可以填入提交到哪里的入口，但那是一个复杂的过程，在后面的学习会学到）
- reset:重置按钮，让我们的数据清空。
（三）表单其他属性
其中placeholder，checked，disabled跟其他属性配合使用。
- placeholder：输入框内浅色的提示词。
- checked:在页面加载时应该被预先选定选项
- disabled:不可选项
- textarea:定义多行文本框（输入后默认的属性cols与rows分别表示行列，其他的先不用管）
- 下拉菜单
select：外层
option:内层每一项用option引入
1、一般显示在菜单表面的是首相，如何设置能让表面的选项任我们设置，这时我们需要用到selected属性在我们认定的选项中
2、如果我们需要一个一开始展现在表面，但是不可选的选项如“请选择”，只需要在用selected属性的基础上在用disabled属性即可。
3、设置点开选项详细列表后出现几个选项可以在select属性后用size属性
4、如我们想要多选，用multiple属性即可，不过不是点击的形式，是下滑拉鼠标多选（可用在选择文件中）
- label：辅助表单，改善用户体验，比如我们原本单选是必须点击前面的框才能选中，用了label属性后点击字体也可以选中（其中的for属性是为了跟前面的形成一一对应关系）
例
二十一、表单与表格的嵌套使用
表单对规则无要求，但表格有，所以表格要写在表单里面
例：
二十二、CSS引入—div与span
- div：区域分块
- span：修饰文字
需配合css使用
二十三、CSS基础语法
（一）格式
选择器{属性1：值1；属性2：值2；}
（二）基本样式
width,height,background-color
（三）样式引入方式
1、内联样式-style属性
2、内部样式-style标签
优点:可以复用代码。
3、外部样式
- 引入一个单独的css文件（.css）
- link标签：引入外部资源
①：rel属性：指定资源与页面的关系
②：href属性：资源地址
- 也可以用@import引入，但不支持
（四）单位
- px:像素
- %：百分比
（五）CSS注释
- 格式：/xxxx/
- 快捷键：和HTML一样
例1：基础认识
Document
噜噜噜噜
hahahahhha
例2：内联样式与内部样式
Document
内联样式来啦
例3：外部样式
Document
外部标签
二十四、CSS颜色表示
- 单词表示法：受限于认识的单词
- 十六进制表示法
- RGB
- 提取颜色数据的方法：
1、浏览器插件fehelper
2、PS的取色器
例：
Document
但是没发货
二十五、background背景样式
（一）基本样式
- background-color：颜色
- background-image：图片
- background-repeat：背景图片的平铺方式
1、repeat-x:水平平铺
2、repeat-y：垂直平铺
3、repeat：水平垂直平铺（默认情况下）
4、no-repeat：不平铺
- background-position：背景图片的位置
使用坐标轴x y表示
1、用数值形容，可正可负（单位可以是px也可以是%）
2、用英文表示：x:left,center,right
y:top,center,bottom
- background-attachment：背景图片随滚动条的移动方式
1、scroll:默认的，方块和背景图片都会随着滚动条运动
2、fixed：方块 动，背景图不动
问1：css的背景图片和HTML的图片区别在哪里？
答：HTML的主要用于展示图片，CSS的起修饰作用
问2：怎么设置滚动条》
答：加一个body 样式（自己看代码）
（二）利用滚动条移动方式实现视觉差网页
例1：（一）
Document
例2：（二）
Document
妈妈新年饭桌安排
日期
名称
图片
2023.1.1
白切鸡，酱烧鹅
2023.1.2
鹅汁儿焖笋
好饿。。。。
妈妈新年饭桌安排
日期
名称
图片
2023.1.1
白切鸡，酱烧鹅
2023.1.2
鹅汁儿焖笋
好饿。。。。
妈妈新年饭桌安排
日期
名称
图片
2023.1.1
白切鸡，酱烧鹅
2023.1.2
鹅汁儿焖笋
好饿。。。。
二十六、border边框样式
（一）基础样式
- border-style：样式
1、solid:实线
2、dashed:虚线
3、dotted:点线
- border-width：大小
- border-color：颜色
（二）针对单边框设置
在样式中间加-left/right/top/bottom-
（三）利用边框制造三角形
利用单边框之间连接的斜线与隐藏边框
例1：（二）（三）
Document
二十七、font字体样式
（一）font-family:字体类型
分类一：
1、中文：微软雅黑（默认），宋体
中文字体类型可以应用到英文，也有专门的英文名称
2、英文:Arial,‘times new roman’
分类二:
1、衬线体
2、非衬线体
问1：为什么字体类型后边要输入多个字体类型?
答：防止用户电脑没有前面的字体类型，作为备选方案，当电脑识别不到此字体时会自动使用下一种字体，如果都没有会选择默认。
问2：如何查看自己电脑的字体有哪些？
答：控制面板-字体
问3：字体类型什么时候用引号？
答：当字体类型名称有空格时
（二）font-size:字体大小
- 默认：16px
- 写法:
1、像素:一般设置成偶数
2、英文（不推荐）：xs-small,x-small,medium,large,x-large,xx-large
(三）font-weigth:字体粗细
- 写法:
1、英文：正常normal，加粗bold
2、数值：取值为取整百的100~900（其中500以下全是正常，600到900为加粗）
（四）font-style:字体样式
- 模式：
1、正常：normal
2、斜体：①italic：设置所有带倾斜属性的字体
② oblique（不常用）：没有倾斜属性的也可以设置
（五）color：字体颜色
例：
Document
挂紧屋企
挂紧屋企
company
company
二十八、段落样式
（一）text-decoration:文本装饰
可三个同时使用,用空格隔开就行。
- underline：下划线
- line-through：删除线
- overline：上划线
- none：不加修饰
（二）text-transform:文本大小写（针对英文）
- lowercase:小写
- uppercase:大写
- capitalize:只针对首字母大写
（三）text-indent:文本缩进
- 首行缩进:根据文字大小决定缩进像素值
- em单元：相对单位，1em永远都是跟字体大小相同
文本是英文时很难对齐，叫em也没用
（四）text-align:文本对齐方式
- left:左边对齐
- center:中间对齐
- right:右边对齐
- justify:两端点对齐
（五）line-height:文本行高
定义：一行文字的高度，由上边距，字体大
小，下边距组成。
-
默认值：不是固定值，随字体大小变化。当字体大小不变时，行高值越大，两行间距越大
-
表示法
1、number:px值
2、scale:跟文字大小比的比例（直接在行高样式后加几倍的阿拉伯数字就行）
（六）文本间距
-
letter-spacing:字间距
-
word-spacing:词间距（针对英文）
-
针对英文的自动折行
情境： 当一个英文单词或阿拉伯数字特别长，分块已经装不下时，这串英文或数字并不会自动折行，这时我们需要
1、word-break:break-all：强烈的，将一单词折开
2、word-wrap:break-word：温和的，当一长单词放不下，直接转下一行再放
练习：做个人简介（42集）
例1、
Document
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
whereneverwhereneverwherenrwherenever you are ASSwherenever you are ASSwherenever you are ASSwherenever you are ASSwherenever you are ASSwherenever you are ASS
aaahjwhereneverwhereneverwherenwhereneverwhereneverwherenwhereneverwhereneverwherenwhereneverwhereneverwherenwhereneverwhereneverwheren111111111111111111111111111111111111111111111111111111111111111111111111 hjguiy bhkgk bghfgfytfytfytfdyewbfdhjcbreugryebuvhjbcdhvygr
二十七、CSS复合样式
通过空格实现
一种东西的样式只要在其后面添加
- 有的无固定顺序可言，
如：background:red url center center repeat 0 0…（关于图片的样式也只要空格跟在后面即可）
border:1px red solid…
- 有的需要按一定顺序，
如：font:最少要有两个值size 和family,而且两者必须是这个顺序放在最后,其他样式可以放在他们前面
另外,xx xx size/line-height family这种写法也正确
另外，color不能放在font的复合写法当中
单一样式和复合样式尽量二选一，不要混写，
要是非要混写，就先写复合再写单一，因为复合的样式包含了单一的样式，当写单一在前时，后面复合样式会覆盖住单一样式的效果。
例：
Document
jkdhfn计划数据库
二十八、CSS选择器
（一）ID选择器
- HTML:id=“elem”
- CSS:#elem{}与之对应的是#elem
- 注意
1、ID值是唯一的，虽然能运行，但这不符合CSS的规范
2、命名时，第一位不能是数字，而且组合元素必须是字母，数字，-，_组成
最好是命名与功能相关的英文
3、较为规范的写法：
①驼峰写法：searchButton（小驼峰），Searchbutton（大驼峰）
②短线写法：search-small-search
③下划线写法：search_small_search
可以参考大网站的ID命名
例1：（ID选择器）
Document
这是块
这也是块
（二）class选择器
- HTML:elem{}
- CSS:class="elem"与之对应的是.elem
- 注意
1、class选择器可以复用
2、可以添加多个class样式（在body处的class选择器加上其他其他原则器的名称就可以得到其他选择其对应的样式，有点墙头草的意思）
3、多个样式时，样式的优先级根据CSS决定，而不是CLASS属性中的顺序。（墙头草时如果出现重复样式，样式的选择会根据head中CSS样式的顺序，而不是class选择器中名称的顺序）
4、标签+类（class）的写法
当同一选择名称用于不同标签，但你只想对其中一种标签作用，可以在nead中的CSS选择器前加上标签英文
- 关于控制台：
打开后-elements-点击相应代码区-styles区域可以看到生效的代码，并且通过勾选可以选择生效的代码。
并且可以通过控台检查错误。
例1：选择器模样
Document
这是块
这也是块
例2：关于墙头草的模样
Document
墙头草
墙头草
``
例3：标签+类
Document
标签+类
标签+类
你可能感兴趣的:(前端,css,html,1024程序员节)