![](https://img-blog.csdnimg.cn/a83659c6405543e8b1eeb3f83592d040.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
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 · 234 阅读 · 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 · 197 阅读 · 0 评论 -
3、HTML基础——语义化&Emmet语法
语义化什么是语义化每一个HTML元素都有具体的含义例如:a元素:超链接;p元素:段落;h1元素:一级标题;……所有元素与显示效果无关元素展示到页面中的效果,应该由CSS决定。因为浏览器带有默认的CSS样式,所以每个元素有一些默认样式。重要:选择什么元素,取决于内容的含义,而不是显示出来的效果为什么需要语义化1.为了搜索引擎优化(SEO)搜索引擎:百度、搜搜、Bing、Google每隔一段时间,搜索引擎会从中整个互联网中,抓取页面源代码。语义化做的越好,搜索引擎就会原创 2021-10-04 23:33:50 · 103 阅读 · 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 · 523 阅读 · 0 评论 -
5、HTML基础——HTML实体
HTML实体实体字符,HTML EntityMDN释意:HTML 实体是一段以连字号(&)开头、以分号(;)结尾的文本(字符串)。实体常常用于显示保留字符(这些字符会被解析为 HTML 代码)和不可见的字符(如“不换行空格”)。你也可以用实体来代替其他难以用标准键盘键入的字符。实体字符通常用于在页面中显示一些特殊符号。&单词;&#数字;<:<或<或<或<>:>或&G原创 2021-10-12 14:07:00 · 750 阅读 · 0 评论 -
6、HTML基础——a元素
a元素href属性id属性target属性原创 2021-10-12 14:10:02 · 488 阅读 · 0 评论 -
7、HTML基础——路径的写法
路径的写法绝对路径和相对路径原创 2021-10-12 14:14:53 · 2838 阅读 · 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 · 950 阅读 · 0 评论 -
9、HTML基础——多媒体元素
多媒体元素video元素audio元素controls、autoplay、muted、loop属性以及兼容性问题的解决方案原创 2021-10-12 15:16:19 · 398 阅读 · 0 评论 -
10、HTML基础——列表元素
列表元素有序列表ol无序列表ul定义列表dl原创 2021-10-12 15:17:43 · 230 阅读 · 0 评论 -
11、HTML基础——容器元素
容器元素容器元素:该元素代表一块区域,内部用于放置其他元素。div元素没有语义语义化容器元素header: 通常用于表示页头,也可以用于表示文章的头部footer:通常用于表示页脚,也可以用于表示文章的尾部article:通常用于表示整篇文章section:通常用于表示文章的章节aside:通常用于表示侧边栏.........原创 2021-10-12 15:23:28 · 751 阅读 · 0 评论 -
12、HTML基础——元素包含关系
元素包含关系以前:块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外。元素的包含关系由元素的内容类别决定,具体包含关系可以在MDN中查找。总结:容器元素可以包含任何元素a元素中几乎可以包含任何元素某些元素有固定的子元素(ul/ol>li, dl>dt+dd)标题元素和段落元素不能相互嵌套,并且不能包含容器元素............原创 2021-10-12 15:24:20 · 276 阅读 · 0 评论 -
13、CSS基础——为网页添加样式
为网页添加样式CSS规则(选择器+声明块)内部样式表内联样式表外部样式表原创 2021-10-12 15:27:03 · 390 阅读 · 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 · 223 阅读 · 0 评论 -
15、CSS基础——选择器
选择器选择器:帮助你精准的选中想要的元素简单的选择器1.ID选择器2.元素选择器3.类选择器4.通配符选择器*,表示选中所有元素5.属性选择器根据属性名和属性值选中元素6.伪类选择器选中某些元素的某种状态hovor: 鼠标悬停的状态active:激活状态,鼠标按下状态link: 超链接未访问时的状态visited:超链接访问过后的状态若要将四个伪类选择器都用上,顺序必须为:link > visited > hover > active (此顺序的口诀:爱原创 2021-10-13 16:50:19 · 616 阅读 · 0 评论 -
16、CSS基础——层叠
层叠声明冲突:同一个样式,多次应用到同一个元素层叠:解决声明冲突的过程,浏览器自动处理(权重计算)层叠的顺序(步骤):1.比较重要性重要性从高到低:1)作者样式表中的!important样式作者样式表:开发者书写的样式!important重要性程度过高,所以一般不使用2)作者样式表中的普通样式3)浏览器默认样式表的样式2.比较特殊性看选择器总体规则:选择器选中的范围越窄,越特殊具体规则:通过选择器,计算出一个4位数(xxxx),数越大越特殊(逢256进1)1.千位:如果是内原创 2021-10-13 16:51:54 · 123 阅读 · 0 评论 -
17、CSS基础——继承
继承子元素会继承父元素的某些CSS属性通常,跟文字内容相关的属性都能被继承很多网站的字体样式会在body元素中设置例如,background-color不能被继承,宽(width)高(height)不能被继承原创 2021-10-13 16:52:36 · 463 阅读 · 0 评论 -
18、CSS基础——属性值的计算过程
属性值的计算过程一个元素一个元素依次渲染,顺序按照页面的树形目录结构进行渲染每个元素的前提条件:该元素的所有CSS属性必须有值一个元素,从所有属性都没有值,到所有属性都有值,这个计算过程,叫做属性值计算过程。1.确定声明值:参考样式表中没有冲突的声明,作为CSS属性值2.层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS属性值3.使用继承:对仍然没有值的属性,若可以继承,则继承父元素的值4.使用默认值:对仍然没有值的属性,使用默认值a元素有默认的颜色声明值,所以不会继承父元素的颜色属性值原创 2021-10-13 16:53:38 · 518 阅读 · 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 · 487 阅读 · 0 评论 -
20、CSS基础——盒模型的应用
盒模型应用改变宽高范围默认情况下,width 和 height 设置的是内容盒宽高页面重构师:将psd文件(设计稿)制作为静态页面衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒解决办法:精确计算CSS3:box-sizing<!-- 改变宽高的影响范围 -->box-sizing: border-box;<!-- 将宽高属性在边框盒生效 -->改变背景覆盖范围溢出处理断词规则空白处理..原创 2021-10-13 16:55:09 · 328 阅读 · 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 · 429 阅读 · 0 评论 -
22、CSS基础——常规流
常规流盒模型:规定单个盒子的规则。视觉格式化模型(布局规则):页面中的多个盒子排列规则。视觉格式化模型,大体上将页面中盒子的排列分为三种方式:常规流浮动定位常规流布局常规流、文档流、普通文档流、常规文档流。所有元素,在默认情况下,都属于常规流布局。总体规则:块盒独占一行,行盒水平依次排列。包含块(containing block):每个盒子都有他的包含块,包含块决定了盒子的排列区域。绝大部分情况下:盒子的包含块,为其父元素的内容盒。<!DOCTYPE html>&原创 2021-10-15 16:26:09 · 300 阅读 · 0 评论 -
23、CSS基础——浮动
介绍浮动的相关内容,主要包括浮动的应用场景,以及浮动的相关特点,和解决浮动引起的高度坍塌使用方法原创 2022-02-22 23:17:04 · 425 阅读 · 0 评论 -
24、CSS基础——定位以及透明通道
介绍CSS视觉格式化模型中的定位,以及介绍部分透明通道的内容。原创 2022-08-02 14:54:38 · 265 阅读 · 0 评论 -
25、CSS基础——选择器补充
补充一些伪类选择器和伪元素选择器原创 2022-06-27 00:34:58 · 463 阅读 · 0 评论 -
26、CSS基础——样式补充
对前面CSS常用样式的补充原创 2022-07-07 02:03:14 · 173 阅读 · 0 评论 -
27、HTML进阶——iframe元素以及在页面中使用flash
介绍了iframe元素以及如何在页面中使用flash原创 2022-07-07 02:07:48 · 440 阅读 · 0 评论 -
28、HTML进阶——表单元素
HTML中的表单元素原创 2022-07-07 02:10:19 · 266 阅读 · 0 评论 -
29、CSS进阶——美化表单元素
接着上一节表单元素,这一节介绍了美化表单元素的一些场景和方法,介绍了表单元素相关的两个常用的伪类选择器focus和checked。原创 2022-08-04 14:15:58 · 1200 阅读 · 0 评论 -
30、HTML进阶——表格元素以及其他元素
介绍表格元素以及其他一些元素,如abbr、time、b、q、link等。原创 2022-08-04 17:51:24 · 235 阅读 · 0 评论 -
31、CSS进阶——@规则
介绍CSS中的@规则(CSS指令),包括@import和@charset指令。原创 2022-08-05 00:14:50 · 229 阅读 · 0 评论 -
32、CSS进阶——块级格式化上下文BFC
介绍BFC块级格式化上下文的内容。原创 2022-08-09 23:24:22 · 175 阅读 · 0 评论 -
33、CSS进阶——布局
主要介绍多栏布局方式以及等高布局。原创 2022-08-10 16:28:58 · 456 阅读 · 0 评论 -
34、CSS进阶——行高的取值以及常见的长度单位
行高的取值以及常见尺寸单位的介绍。原创 2022-08-10 17:25:56 · 496 阅读 · 0 评论 -
35、CSS进阶——画布背景
主要介绍body/html元素在设置背景时的特殊状况。原创 2022-08-15 21:37:05 · 1084 阅读 · 0 评论 -
36、CSS进阶——行盒的垂直对齐以及图片底部白边
主要介绍多行盒在垂直方向上的对齐(vertical-align),以及图片底部白边的处理方法。原创 2022-08-16 00:20:54 · 612 阅读 · 1 评论 -
37、CSS进阶——堆叠上下文及z-index
介绍stack context堆叠上下文的内容。原创 2022-08-16 15:41:33 · 232 阅读 · 0 评论 -
38、HTML进阶——SVG
简要介绍了SVG在html中的引用方法,以及如何使用代码绘制SVG图形。原创 2022-08-16 21:05:14 · 887 阅读 · 0 评论