![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
学习笔记
haobrother
Filling my stack!
展开
-
HTML学习篇(一)
前言值得一提的是,今天终于要在这个博客写第一篇技术性的文章。其实我自己最近两天还在纠结要不要写,曾考虑过在学完后立马就投入项目实践中可能会比较好,但今天细想了下觉得开这个博客本就为了记录学习、工作和生活点滴。特别在刚开始的时候,不能因为事小而不为,越是简单、基础的东西更加要系统地整理明白才行,所以下面我试图梳理学习html的知识点以作日后参考,同时希望大家不吝赐教!HTML (HyperT...原创 2019-01-12 23:04:16 · 251 阅读 · 0 评论 -
CSS学习篇(四) 层叠与继承
层叠CSS(Cascading Style Sheets)中文译名层叠样式表,说明其中的Cascading很重要,意味着CSS规则有层叠的特性。什么是层叠?由于HTML中同一个元素可以被多种选择器所选择,如果这里的多个选择器的规则对于元素的同一个属性指定不同的属性值,那么应该取那个属性值呢?层叠说的就是多条CSS规则一层层地堆叠在一起时哪一条有优先权,所以层叠特性就是用来决定哪条CSS规...原创 2019-03-25 11:19:55 · 182 阅读 · 0 评论 -
CSS学习篇(五) 盒子模型(框模型)
盒子模型(box model),也可以叫框模型,是网页布局的基础,每个HTML元素都被表示为一个矩形盒子,盒子包含了它的内容(content)、内边距(padding)、边框(border)和外边距(margin),每部分都可以用一个或多个CSS属性来指定其大小、颜色等,可以参考下图:1.内容盒子(content-box)由width和height来表示内容的宽度和高度,主要用来存放...原创 2019-03-25 16:29:04 · 430 阅读 · 0 评论 -
CSS学习篇(六) 字体
在CSS中,可以设置字体的大小、颜色、种类等,这里重点讨论的是字体种类,除了一般字体的设置,还有将记录Web字体的设置方式。我们知道,当设置网页上字体的时候,如果显示网页的浏览器或其所在的电脑上不包含该字体的话,是无法显示出对应的字体来的,这时候可能使用浏览器默认字体来代替,那么一般会有两种措施来预防这种情况:选用网页安全字体 利用字体栈来设置第一种,选用网页安全字体,就是指选用一些基...原创 2019-03-25 19:37:54 · 229 阅读 · 0 评论 -
CSS学习篇(七) 布局
在CSS中,布局的常用技术有以下几种:浮动 定位 CSS表格 弹性盒子(flexbox) 网格布局技术会使用各种CSS属性来操作HTML元素,使其相对于正常布局流、父容器、周围元素而变动。正常布局流是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。例如上面提到的浮动、定位之类的布局技术,就是主要利用float、position、display这几个CSS属性来操作布...原创 2019-03-26 16:36:31 · 352 阅读 · 1 评论 -
CSS学习篇(八) 颜色
色彩理论在设计学和美术领域中是个大学问,但是在设计网站的时候,需要设计师对颜色有一定的了解才能创建出更加醒目又不失和谐的视觉效果,从而提高用户体验。在CSS中有三种方法来表示颜色,分别是颜色名、十六进制值、RGB和HSL。在分别介绍三种表示法之前,先了解下计算机中颜色的表现原理。众多的电子显示器与手机设备屏幕一致,它们里面的背景颜色、图片等都是由红(Red)、绿(Green)、蓝(Blue...原创 2019-05-01 19:50:28 · 266 阅读 · 0 评论 -
JS学习篇(一) JavaScript语言特性
最近在学习Web开发,除了之前学习笔记提到的HTML和CSS,Web开发三件套的第三样就是JavaScript(即JS)。说到JavaScript,大家就算没接触过应该也会熟悉,只要稍微看过Web开发相关学习网站的目录或者课程表就知道这是一门必修的语言课了。好,那么JavaScript是一门什么样的必修课,它是什么呢?为啥Web开发者是必修的!在写这篇学习笔记之前,我稍微查了一下,也把这...原创 2019-05-04 17:14:51 · 1406 阅读 · 0 评论 -
JS学习篇(二) JavaScript七种数据类型
要了解一门语言,首先要了解它的数据类型有哪些?他们之间有什么关系?能否互相转换等。目前,JavaScript(下称JS)中有七大数据类型,它们分别是:1. Boolean 布尔型2. Null 空3. Undefined 未定义4. Number 数字型5. String 字符串型...原创 2019-05-05 14:11:34 · 1629 阅读 · 0 评论 -
JS学习篇(三) 函数与闭包
一个JS函数的定义由function关键字开头,然后加上函数名、参数列表和函数体。函数名与变量等JS标识符命名规则一致,以字母、下划线或者$开头,后面可以跟数字; 参数列表是一个包含在括号中,以逗号分离的列表,例如:(a, b, c); 函数体是函数的主体内容,以大括号{}将JS语句包含起来,可通过return返回结果;最简单的函数定义如下所示(函数名自定义):function f...原创 2019-05-05 21:34:19 · 280 阅读 · 0 评论 -
CSS学习篇(二) 选择器
CSS规则主要由选择器和属性来组成,其中选择器有多种形式的存在,主要用来按照不用方式来方便的选择网页中的目标元素,从而添加属性来修改其样式。下面介绍各种选择器:简单选择器(Simple selectors):通过元素类型、class或id匹配一个或多个元素。元素选择器<p>What color do you like?</p><div>I li...原创 2019-03-18 00:30:31 · 192 阅读 · 0 评论 -
CSS学习篇(一)
CSS (Cascading Style sheets) 中文译名为层叠样式表,用来美化网页的样式和排版,例如修改文字的大小、颜色、间距等,将页面内容分割成多列或者添加背景图等等。CSS主要是由规则来组成,一个规则由一个选择器和一个或多个属性组成:h1 { color: blue; background-color: yellow; border: 1px solid bla...原创 2019-03-17 22:21:20 · 160 阅读 · 0 评论 -
HTML学习篇(二) head标签
<head>标签在HTML中,head标签内包含的元素表示网页文档的元数据,即用来描述网页但又不直接显示的数据。下面描述head标签及其常用内容。<title>标签顾名思义,title表示网页的标题,另外title对于网页在搜索引擎的搜索结果上也有体现。<!DOCTYPE html><html> <head> ...原创 2019-01-13 11:36:54 · 498 阅读 · 0 评论 -
HTML学习篇(三) 标题,段落和列表
下面将分别总结HTML中标题(h1~h6)、段落(p)和列表(ul、ol)的使用。标题HTML里面表示标题的是h1、h2、h3、h4、h5、h6标签,通过编写以下代码:<body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3>原创 2019-01-13 22:04:29 · 2109 阅读 · 0 评论 -
HTML学习篇(四) 超链接
超链接超链接是Web上十分关键的功能,通过它可以跳转到网上任意的页面和内容,除了HTML页面,还有图片、音视频以及其他在网络上存储的任意格式文件。如果浏览器不能识别的文件,会询问用户是否利用本地应用来打开或者下载它。<a>标签a标签通过设置href属性来指定需要跳转的页面:<body> <a href="https://www.baidu.com/...原创 2019-01-13 23:13:13 · 255 阅读 · 0 评论 -
HTML学习篇(五) 图片
<img>标签img标签在HTML中表示一张图片,它使用src属性来指定图片的路径(JPEG、GIF、PNG、BMP、ICO格式在主流浏览器应该都支持),width和height属性指定图片的宽高,默认以图片自身宽高来显示:<body> <img src="HTML5.png" /></body>上图使用了原图默认大小256*...原创 2019-01-14 00:51:12 · 173 阅读 · 0 评论 -
HTML学习篇(六) 音频和视频
<video>标签在HTML5中,使用video标签来显示视频:<video src="myVideo.mp4" controls> <p>您的浏览器不支持H5视频。 请点击 <a href="myVideo.mp4">视频链接</a> 。</p> </video&原创 2019-01-14 13:22:35 · 323 阅读 · 0 评论 -
CSS学习篇(三) 单位
在讨论CSS单位之前,先列一下CSS的值类型:数值: 长度值,用于指定例如元素宽度、边框(border)宽度或字体大小;以及无单位整数。用于指定例如相对线宽或运行动画的次数。 百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度,或默认的字体大小。 颜色: 用于指定背景颜色,字体颜色等。 坐标位置: 例如,以屏幕的左上角为坐标原点定位元素的位置。 函数: 例如,用于指定背景...原创 2019-03-19 22:49:28 · 103 阅读 · 0 评论 -
HTML学习篇(七) 表格
<table>、<tr>、<td>等在HTML5中,使用table标签来显示表格,tr标签表示表格中的一行内容,而td标签则代表每个表格单元:<table> <tr> <td>1</td> <td>2</td> <td&a原创 2019-03-17 18:04:13 · 207 阅读 · 0 评论 -
HTML学习篇(八) 表单
<form>、<label>、<input>等在HTML5中,表单的填写提交使用form标签,然后里面包含各种文字标签和输入项(文字输入框、单选按钮、多选按钮等),还有按钮等。下面是一个简单的HTML表单:<form action="/submitToServer" method="post"> <div>原创 2019-03-17 18:46:46 · 145 阅读 · 0 评论 -
JS学习篇(四) 对象与继承
初学JavaScript(下称JS)的基本都知道,创建一个对象可以很容易:var obj = {};没错,上面代码就创建了一个空对象obj,接下来可以给它加多点料:var person = { name: "Tom", age: 24}console.log(person.name); //输出Tomconsole.log(person.age); /...原创 2019-05-07 20:54:41 · 272 阅读 · 0 评论