前端学习-HTEML&CSS
关注
分享
扫一扫
学习过程主要根据黑马Pink老师视频学习，若有侵权，请联系删除。老师视频地址：https://space.bilibili.com/415434293?spm_id_from=333.338.b_765f7570696e666f.2
Nanami Touko
这个作者很懒，什么都没留下…
展开
-
前端学习笔记-CSS-圆角边框radius(CSS3)
圆角边框(CSS3)从此以后，我们的世界不只有矩形。radius 半径（距离）语法格式：border-radius: 50%; 让一个正方形 变成圆圈练习：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆角边框&...原创 2019-07-26 15:11:09 · 1125 阅读 · 0 评论 -
前端学习笔记-CSS高级技巧-用户界面样式
CSS用户界面样式所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。cursor : default 小白 | pointer 小手 | move 移动 | te...原创 2019-07-31 16:00:30 · 510 阅读 · 0 评论 -
前端学习笔记-CSS高级技巧-垂直对齐
vertical-align 垂直对齐让带有宽度的块级元素居中对齐，是margin: 0 auto;文字居中对齐，是 text-align: center;vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气vertical-align : baseline |top |middle |bottom 设置或检索对象内容的垂直...原创 2019-07-31 16:32:29 · 202 阅读 · 0 评论 -
前端学习笔记-CSS-盒子阴影box-shadow(CSS3)
盒子阴影(CSS3)语法格式：box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； 前两个属性是必须写的。其余的可以省略。 外阴影 (outset) 但是不能写 默认 想要内阴影 inset 练习：<!DOCTYPE html><html lang="en"><...原创 2019-07-26 15:54:13 · 229 阅读 · 0 评论 -
前端学习笔记-CSS-web字体&字体图标
web字体字体格式不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。1、TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；2、OpenType(.o...原创 2019-08-04 15:40:57 · 224 阅读 · 0 评论 -
前端学习笔记-CSS-溢出的文字隐藏
溢出的文字隐藏white-spacewhite-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容normal : 默认处理方式nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。可以处理中文text-overflow 文字溢出text-overflow : clip | ellipsis设置或检...原创 2019-07-31 16:56:19 · 1156 阅读 · 0 评论 -
前端学习笔记-CSS-浮动(float)
浮动(float)普通流(normal flow)这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。CSS的定位机制有3种：普通流（标准流）、浮动和定位。html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；...原创 2019-07-26 17:03:12 · 184 阅读 · 0 评论 -
前端学习笔记-html-基础知识
常见浏览器内核介绍浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。浏览器内核浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入...转载 2019-07-23 15:14:29 · 190 阅读 · 0 评论 -
前端学习笔记-html-排版标签
HTML常用标签首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。<hn> 标题文本 </hn>排版标签排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。标题标签 (熟记)h1、h2、h3、h4、h5、h6标题标签语义： 作为标题使用...原创 2019-07-23 15:27:03 · 331 阅读 · 0 评论 -
前端学习笔记-html-文字格式化标签&标签属性
文本格式化标签(熟记)在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。b i s u 只有使用 没有 强调的意思strong em del ins 语义更强烈练习：<!DOCTYPE html><html lang="en"><head> <meta...原创 2019-07-23 15:37:09 · 835 阅读 · 0 评论 -
前端学习笔记-CSS-清除浮动
为什么要清除浮动我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现， 但是，你不能说浮动不好 。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。准确地说，并不是清除浮动，而是清除浮动后造成的影响如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。清除浮...原创 2019-07-28 15:25:54 · 184 阅读 · 0 评论 -
前端学习笔记-CSS-精灵图
精灵技术产生的背景图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、...原创 2019-08-02 11:33:42 · 363 阅读 · 0 评论 -
前端学习笔记-CSS-滑动门
滑动门滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。...原创 2019-08-02 12:17:32 · 177 阅读 · 0 评论 -
前端学习笔记-html-ico图标&网站三大标签优化
引入ico图标代码： <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 注意： (它)不是iconfont字体哦 也不是图片。 位置是放到 head 标签中间。 后面的type="image/x-icon" 属性可以省略。 为了兼容性，请将fa...原创 2019-09-04 11:30:43 · 342 阅读 · 0 评论 -
前端学习笔记-CSS高级技巧-元素的显示与隐藏
元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现。display 显示display 设置或检索对象是否及如何显示。display ...原创 2019-07-31 11:46:10 · 223 阅读 · 0 评论 -
前端学习笔记-CSS-盒子外边距（margin）
外边距（margin）margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。margin-top:上外边距margin-right:右外边距margin-bottom:下外边距margin-left:上外边距margin:上外边距 右外边距 下外边距 左外边取值顺序跟内边距相同。外边距实现盒子居中可以让一个盒...原创 2019-07-26 11:04:57 · 1163 阅读 · 0 评论 -
前端学习笔记-CSS-盒子边框border&内边距padding
盒子模型（CSS重点）其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。看透网页布局的本质看透网页布局的本质： 把网页元素比如文字图片等等，放入盒子里面，然后利用CSS...原创 2019-07-26 10:35:25 · 2736 阅读 · 1 评论 -
前端学习笔记-html-链接标签
链接标签(重点)单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的...原创 2019-07-23 16:14:21 · 2512 阅读 · 0 评论 -
前端学习笔记-html-列表标签
列表标签容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是 整齐 、整洁、 有序无序列表 ul （重点）无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li>...原创 2019-07-23 16:28:51 · 292 阅读 · 0 评论 -
前端学习笔记-html-表格
表格 table创建表格在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：<table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>在上面的语法中包含三对HTML标签，分别为 <table...原创 2019-07-23 16:46:30 · 1010 阅读 · 0 评论 -
前端学习笔记-html-表单标签
表单标签(掌握)现实中的表单，类似我们去银行办理信用卡填写的单子。目的是为了收集用户信息。在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。提示信息：...原创 2019-07-23 16:59:47 · 229 阅读 · 0 评论 -
前端学习笔记-CSS-CSS样式表
CSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。引入...原创 2019-07-23 17:26:46 · 554 阅读 · 0 评论 -
前端学习笔记-CSS-基础选择器
选择器（重点）要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。选择器干啥的？ 选择标签用的CSS基础选择器标签选择器（元素选择器）标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：标签名{属性1:属性值1; 属性2:属...原创 2019-07-23 17:48:25 · 193 阅读 · 0 评论 -
前端学习笔记-CSS-字体样式属性
CSS字体样式属性font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微...转载 2019-07-24 09:39:05 · 478 阅读 · 0 评论 -
前端学习笔记-CSS-外观属性
CSS外观属性color:文本颜色color属性用于定义文本的颜色，其取值方式有如下3种：1.预定义的颜色值，如red，green，blue等。2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用R...原创 2019-07-24 09:39:28 · 621 阅读 · 0 评论 -
前端学习笔记-CSS-复合选择器
CSS复合选择器复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。记忆技巧：交集选择器 是 并且的意思。 即...又...的意思比如： p.one 选择的是： ...原创 2019-07-24 09:40:41 · 343 阅读 · 0 评论 -
前端学习笔记-CSS-标签显示模式（display）
标签显示模式（display）HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：块级元素(block-level)每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有<h1>~<h6>、<p>、<div>、<ul>...原创 2019-07-24 09:40:55 · 508 阅读 · 0 评论 -
前端学习笔记-CSS-行高
行高的测量行高我们利用最多的一个地方是： 可以让一行文本在盒子中垂直居中对齐。做法就是： 文字的行高等于盒子的高度。上距离和下距离总是相等的，因此文字看上去是垂直居中的。如果 行高 等 height 高度 文字会 垂直居中如果行高 大于 高度 文字会 偏下如果行高小于高度 文字会 偏上练习：<!DOCTYPE html>&l...原创 2019-07-24 11:40:06 · 889 阅读 · 0 评论 -
前端学习笔记-CSS-三大特性
CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 就近原则...原创 2019-07-24 15:49:28 · 136 阅读 · 0 评论 -
前端学习笔记-CSS-背景(background)
CSS 背景(background)CSS 可以添加背景颜色和背景图片，以及来进行图片设置。background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 ...原创 2019-07-24 17:51:47 · 335 阅读 · 0 评论 -
前端学习笔记-CSS-定位position
定位(position)为什么要用定位？如果用标准流或者浮动，比较复杂或者难以实现，此时我们用定位来做。元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1、边偏移边偏移属性 描述 top 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 left 左侧偏移...原创 2019-07-30 12:23:51 · 340 阅读 · 0 评论 -
前端学习笔记-html-图像标签img&绝对/相对路径
图像标签img (重点)单词缩写： image 图像HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下：该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。<img src="图像URL" />src用来设置图...原创 2019-07-23 16:02:14 · 11335 阅读 · 0 评论