web前端学习笔记（HTML+CSS篇）
关注
分享
扫一扫
文章平均质量分 73
观看视频课程记下的笔记，随着学习的深入，文章的内容可能会在后续修改扩充。
lvh98
这个作者很懒，什么都没留下…
展开
-
1、HTML/CSS基础——概述（学习之前需要了解的相关术语）
c# 概述本人刚刚开始学习前端相关的知识，目前我在跟着b站的某个web前端开发的零基础教程（HTML+CSS）(附上b站视频教程链接）在学习，下面我要更新的内容是我在看视频的过程中记下的笔记，可能和老师上课的笔记大概一致，若有侵权立即删除。1. HTMLHyper Text Markup Language 超文本标记语言（定义网页有什么东西）HTML是W3C组织定义的语言标准：HTML是用于描述页面结构的语言结构：有什么东西，该东西表示什么含义2. CSSCascading Style She原创 2021-10-04 16:12:56 · 279 阅读 · 0 评论 -
2、HTML基础——尝试写出我的第一个网页、元素的概念
第一个网页使用软件：vscode推荐在vscode中安装的插件：1、Emmet插件：自动生成HTML代码片段，可以通过tab键结合其特定的语法来实现快速生成包含嵌套结构的批量，此插件是vscode中内置的，而且我也没有进行相关的配置就能直接使用了。2、vscode-icons：用于设置文件图标样式。3、Markdown Preview Enhanced：用于预览markdown格式的文件（.md），好处就是预览的样式会比较清爽简洁。4、Live Server：比较方便在html文件中动态生成网页原创 2021-10-04 17:16:55 · 237 阅读 · 0 评论 -
3、HTML基础——语义化&Emmet语法
语义化什么是语义化每一个HTML元素都有具体的含义例如：a元素：超链接；p元素：段落；h1元素：一级标题；……所有元素与显示效果无关元素展示到页面中的效果，应该由CSS决定。因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。重要：选择什么元素，取决于内容的含义，而不是显示出来的效果为什么需要语义化1.为了搜索引擎优化（SEO）搜索引擎：百度、搜搜、Bing、Google每隔一段时间，搜索引擎会从中整个互联网中，抓取页面源代码。语义化做的越好，搜索引擎就会原创 2021-10-04 23:33:50 · 118 阅读 · 0 评论 -
4、HTML基础——文本元素
文本元素HTML5中支持的元素：HTML5元素周期表元素周期表可以查看：https://www.xuanfengge.com/funny/html5/element/h标题，headh1-h6：表示1级标题~6级标题小技巧：1.在vscode中不论光标在一行的什么位置，Ctrl+回车，会在此行下方新加一行（光标也会在下一行）；Ctrl+Shift+回车，会在此行上方新加一行；2.打出h1*6，然后回车/Tab，会生成 <h1></h1> <h1原创 2021-10-04 23:42:13 · 607 阅读 · 0 评论 -
5、HTML基础——HTML实体
HTML实体实体字符，HTML EntityMDN释意：HTML 实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）。实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）。你也可以用实体来代替其他难以用标准键盘键入的字符。实体字符通常用于在页面中显示一些特殊符号。&单词;&#数字;<：<或<或<或<>：>或&G原创 2021-10-12 14:07:00 · 810 阅读 · 0 评论 -
6、HTML基础——a元素
a元素href属性id属性target属性原创 2021-10-12 14:10:02 · 575 阅读 · 0 评论 -
7、HTML基础——路径的写法
路径的写法绝对路径和相对路径原创 2021-10-12 14:14:53 · 2922 阅读 · 0 评论 -
8、HTML基础——图片元素
图片元素img元素image缩写，空元素src属性：source资源alt属性：当图片资源失效时，将使用该属性的文字替代图片与a元素联用与map元素联用map：地图map子元素：area，空元素area相关属性：shape：形状，circle圆形（圆心坐标+半径），rect矩形（左上角坐标+右下角坐标），poly多边形（各个点的坐标）coords：坐标href：超链接alt：当图片显示不出来时显示的文本target：跳转窗口位置衡量坐标时，为了避免衡量误差，需要使用专业的衡量工原创 2021-10-12 14:25:30 · 1121 阅读 · 0 评论 -
9、HTML基础——多媒体元素
多媒体元素video元素audio元素controls、autoplay、muted、loop属性以及兼容性问题的解决方案原创 2021-10-12 15:16:19 · 458 阅读 · 0 评论 -
10、HTML基础——列表元素
列表元素有序列表ol无序列表ul定义列表dl原创 2021-10-12 15:17:43 · 279 阅读 · 0 评论 -
11、HTML基础——容器元素
容器元素容器元素：该元素代表一块区域，内部用于放置其他元素。div元素没有语义语义化容器元素header: 通常用于表示页头，也可以用于表示文章的头部footer：通常用于表示页脚，也可以用于表示文章的尾部article：通常用于表示整篇文章section：通常用于表示文章的章节aside：通常用于表示侧边栏.........原创 2021-10-12 15:23:28 · 827 阅读 · 0 评论 -
12、HTML基础——元素包含关系
元素包含关系以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。元素的包含关系由元素的内容类别决定，具体包含关系可以在MDN中查找。总结：容器元素可以包含任何元素a元素中几乎可以包含任何元素某些元素有固定的子元素（ul/ol>li, dl>dt+dd）标题元素和段落元素不能相互嵌套，并且不能包含容器元素............原创 2021-10-12 15:24:20 · 346 阅读 · 0 评论 -
13、CSS基础——为网页添加样式
为网页添加样式CSS规则（选择器+声明块）内部样式表内联样式表外部样式表原创 2021-10-12 15:27:03 · 425 阅读 · 0 评论 -
14、CSS基础——常见样式声明
常见样式声明1.color2.background-color3.font-size4.font-weight5.font-family6.font-style7.text-decoration8.text-indent9.line-height10.weight11.height12.letter-spacing13.text-align原创 2021-10-12 15:28:32 · 246 阅读 · 0 评论 -
15、CSS基础——选择器
选择器选择器：帮助你精准的选中想要的元素简单的选择器1.ID选择器2.元素选择器3.类选择器4.通配符选择器*，表示选中所有元素5.属性选择器根据属性名和属性值选中元素6.伪类选择器选中某些元素的某种状态hovor: 鼠标悬停的状态active：激活状态，鼠标按下状态link: 超链接未访问时的状态visited：超链接访问过后的状态若要将四个伪类选择器都用上，顺序必须为：link > visited > hover > active (此顺序的口诀：爱原创 2021-10-13 16:50:19 · 670 阅读 · 0 评论 -
16、CSS基础——层叠
层叠声明冲突：同一个样式，多次应用到同一个元素层叠：解决声明冲突的过程，浏览器自动处理（权重计算）层叠的顺序（步骤）：1.比较重要性重要性从高到低：1）作者样式表中的!important样式作者样式表：开发者书写的样式!important重要性程度过高，所以一般不使用2）作者样式表中的普通样式3）浏览器默认样式表的样式2.比较特殊性看选择器总体规则：选择器选中的范围越窄，越特殊具体规则：通过选择器，计算出一个4位数（xxxx），数越大越特殊（逢256进1）1.千位：如果是内原创 2021-10-13 16:51:54 · 149 阅读 · 0 评论 -
17、CSS基础——继承
继承子元素会继承父元素的某些CSS属性通常，跟文字内容相关的属性都能被继承很多网站的字体样式会在body元素中设置例如，background-color不能被继承，宽（width）高（height）不能被继承原创 2021-10-13 16:52:36 · 502 阅读 · 0 评论 -
18、CSS基础——属性值的计算过程
属性值的计算过程一个元素一个元素依次渲染，顺序按照页面的树形目录结构进行渲染每个元素的前提条件：该元素的所有CSS属性必须有值一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做属性值计算过程。1.确定声明值：参考样式表中没有冲突的声明，作为CSS属性值2.层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值4.使用默认值：对仍然没有值的属性，使用默认值a元素有默认的颜色声明值，所以不会继承父元素的颜色属性值原创 2021-10-13 16:53:38 · 608 阅读 · 0 评论 -
19、CSS基础——盒模型以及块盒的组成部分
盒模型box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）盒子类型：1.行盒，display等于inline的元素2.块盒，display等于block的元素行盒在页面中不换行，块盒独占一行display默认值为inline浏览器中默认样式表设置的块盒：容器元素、h1~h6、p常见的行盒：span、a、img、video、audio盒子的组成部分无论使行盒还是块盒，都由下面几个部分组成，从内到外分别是：1.内容 contentwidth、height，设置的是盒子内容的宽高内原创 2021-10-13 16:54:52 · 582 阅读 · 0 评论 -
20、CSS基础——盒模型的应用
盒模型应用改变宽高范围默认情况下，width 和 height 设置的是内容盒宽高页面重构师：将psd文件（设计稿）制作为静态页面衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒解决办法：精确计算CSS3：box-sizing<!-- 改变宽高的影响范围 -->box-sizing: border-box;<!-- 将宽高属性在边框盒生效 -->改变背景覆盖范围溢出处理断词规则空白处理..原创 2021-10-13 16:55:09 · 378 阅读 · 1 评论 -
21、CSS基础——行盒盒模型
行盒盒模型常见的行盒：包含具体内容的元素span、strong、em、i、img、video、audio下面来比较一下块盒和行盒的显示区别<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2021-10-14 21:13:44 · 513 阅读 · 0 评论 -
22、CSS基础——常规流
常规流盒模型：规定单个盒子的规则。视觉格式化模型（布局规则）：页面中的多个盒子排列规则。视觉格式化模型，大体上将页面中盒子的排列分为三种方式：常规流浮动定位常规流布局常规流、文档流、普通文档流、常规文档流。所有元素，在默认情况下，都属于常规流布局。总体规则：块盒独占一行，行盒水平依次排列。包含块（containing block）：每个盒子都有他的包含块，包含块决定了盒子的排列区域。绝大部分情况下：盒子的包含块，为其父元素的内容盒。<!DOCTYPE html>&原创 2021-10-15 16:26:09 · 343 阅读 · 0 评论 -
23、CSS基础——浮动
介绍浮动的相关内容，主要包括浮动的应用场景，以及浮动的相关特点，和解决浮动引起的高度坍塌使用方法原创 2022-02-22 23:17:04 · 496 阅读 · 0 评论 -
24、CSS基础——定位以及透明通道
介绍CSS视觉格式化模型中的定位，以及介绍部分透明通道的内容。原创 2022-08-02 14:54:38 · 303 阅读 · 0 评论 -
25、CSS基础——选择器补充
补充一些伪类选择器和伪元素选择器原创 2022-06-27 00:34:58 · 513 阅读 · 0 评论 -
26、CSS基础——样式补充
对前面CSS常用样式的补充原创 2022-07-07 02:03:14 · 210 阅读 · 0 评论 -
27、HTML进阶——iframe元素以及在页面中使用flash
介绍了iframe元素以及如何在页面中使用flash原创 2022-07-07 02:07:48 · 500 阅读 · 0 评论 -
28、HTML进阶——表单元素
HTML中的表单元素原创 2022-07-07 02:10:19 · 311 阅读 · 0 评论 -
29、CSS进阶——美化表单元素
接着上一节表单元素，这一节介绍了美化表单元素的一些场景和方法，介绍了表单元素相关的两个常用的伪类选择器focus和checked。原创 2022-08-04 14:15:58 · 1410 阅读 · 0 评论 -
30、HTML进阶——表格元素以及其他元素
介绍表格元素以及其他一些元素，如abbr、time、b、q、link等。原创 2022-08-04 17:51:24 · 284 阅读 · 0 评论 -
31、CSS进阶——@规则
介绍CSS中的@规则（CSS指令），包括@import和@charset指令。原创 2022-08-05 00:14:50 · 264 阅读 · 0 评论 -
32、CSS进阶——块级格式化上下文BFC
介绍BFC块级格式化上下文的内容。原创 2022-08-09 23:24:22 · 204 阅读 · 0 评论 -
33、CSS进阶——布局
主要介绍多栏布局方式以及等高布局。原创 2022-08-10 16:28:58 · 536 阅读 · 0 评论 -
34、CSS进阶——行高的取值以及常见的长度单位
行高的取值以及常见尺寸单位的介绍。原创 2022-08-10 17:25:56 · 563 阅读 · 0 评论 -
35、CSS进阶——画布背景
主要介绍body/html元素在设置背景时的特殊状况。原创 2022-08-15 21:37:05 · 1211 阅读 · 0 评论 -
36、CSS进阶——行盒的垂直对齐以及图片底部白边
主要介绍多行盒在垂直方向上的对齐（vertical-align），以及图片底部白边的处理方法。原创 2022-08-16 00:20:54 · 694 阅读 · 1 评论 -
37、CSS进阶——堆叠上下文及z-index
介绍stack context堆叠上下文的内容。原创 2022-08-16 15:41:33 · 280 阅读 · 0 评论 -
38、HTML进阶——SVG
简要介绍了SVG在html中的引用方法，以及如何使用代码绘制SVG图形。原创 2022-08-16 21:05:14 · 971 阅读 · 0 评论