- 博客(28)
- 收藏
- 关注
RSS订阅原创 CSS生成内容
CSS:content属性CSS:before伪元素在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。原文本代码：1 <p>三人行，必有我师也！</p>2 <p>学而不思则罔，思而不学则殆！</p>3 <p>有朋自远方来，不亦说乎！</p></pre&...
2019-06-22 22:00:01
595
原创 前端入门基础之CSS盒模型
一、什么是CSS盒模型？CSS盒模型又称CSS框模型，它规定了元素框处理元素内容、内边距、边框、和外边距的方式。元素框的最内部分是实际内容，直接包围在内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、外边距和边框都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 m...
2019-06-22 21:59:54
442
原创 Web前端开发入门之网页制作三要素
Web前端开发是由网页制作演变而来的，主要由HTML、CSS、JavaScript三大要素组成。专业的Web前端开发入门知识也一定会包含这些内容，今天好程序员老师就给大家简单介绍一下。HTML，超文本标记语言，标准通用标记语言下的一个应用。包括“头”部分(英语：Head)、和“主体”部分(英语：Body)，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。CSS，层叠样式表，是一...
2019-06-18 17:05:14
739
原创 前端入门之HTML5 基本结构
基本结构HTML的文件后缀名为.html，下面是一个HTML文档的基本结构。<!DOCTYPE html> <!-- 用于声明、告诉浏览器当前是一个 HTML 文档 --> <html lang="zh-cn"> <!-- HTML 文档开始 | 中文声明 --> <head> </head> <!-- 头部区域 -...
2019-06-17 21:59:55
1597
原创 css 三种引用方式
内联式 代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1....
2019-06-17 21:59:53
4586
原创 前端基础入门（12）accesskey 属性
此属性规定使元素获得焦点的快捷键(ALT+字母或ALT+Shift+字母)。语法结构:<``element accesskey``=``"character"``>参数解析:character:规定使元素获得焦点的便捷按键。浏览器支持:（1）.IE浏览器支持此属性。（2）.edge浏览器支持此属性。（3）.谷歌浏览器支持此属性。（4）.火狐浏览器支持此属性。（5）....
2019-06-11 22:00:36
1101
原创 前端基础入门（13）contenteditable 属性
此属性规定元素是否可编辑（HTML5新增）。如果元素未设置contenteditable属性，那么元素会从其父元素继承该属性。语法结构:<``element contenteditable``=``"true|false|inherit"``>参数解析:（1）.true:表示元素可以编辑。（2）.false:表示元素不可编辑。（3）.inherit:表示从父元素继承，默认...
2019-06-11 22:00:07
4728
2
原创 前端基础入门（11）input color 拾色器
将标签的type属性值设置为"color"即可创建一个拾色器。拾色器功能是HTML5新增。<!DOCTYPE html><``html``><``head``><``meta charset``=``" utf-8"``><``meta name``=``"author" content``=``"[http://www.softd...
2019-06-11 21:59:53
2644
原创 前端基础入门（9）css盒子
网页上的元素辣么多，我该用什么办法让它们排列整齐、间距合理呢。常干家务的朋友们就容易理解了，用收纳盒呀！所以用CSS做网页布局就涉及一个盒子的概念，简单理解，我们可以把页面上的所有HTML元素看作一个个的盒子，网页上所展示出来的具体内容，如：文字、图片等都可以理解为内容，是放在盒子里面的东西。这些装着内容的盒子排列在网页上，盒子与盒子存在着一定的间隙，我们称为外边距，每个盒子都有边框，每条边...
2019-06-11 21:59:49
5579
3
原创 前端基础入门（8）表单
前面前面我们已经熟悉了网页上一些常见的元素，如在网页上显示一段文字、一张图片、一个列表、一张表格等等。这些东西都是事先编辑好显示在页面上只提供给用户看的，实际上，我们可以把这样的页面称之为静态页面。有“静”就有”动”，自然也就有了动态页面，所谓动态页面就是在页面上能提供与用户产生交互的元素，比如：我们想注册成为某个网站的会员，就要填写注册信息提交给网站后台；我们在网上发表评论；我们在网上填写一些...
2019-06-11 21:59:41
853
原创 前端基础入门（7）表格
目录表格的基本结构表格的标准结构表格的行、列合并表格的CSS样式表格的基本结构表格是网页上最常见的元素，它除了可以用来展示数据，还常常被用来排版。虽然现在提倡使用DIV+CSS完成页面布局，但表格框架简单明了，对于繁杂的数据，一个简洁的表格能让其展现的极有条理。简单来说，表格是由行、列（单元格）组成。表格由 标签来定义。每个表格均有若干行（由 标签定义），每行又由若干单元格...
2019-06-11 21:59:39
2048
原创 前端基础入门（6）超链接
超链接–文字链接超链接【hyperlink】是网页中最为常见的元素之一，我们几乎可以在所有的网站页面中找到超链接。每个网站都不止一个页面，这些页面就是利用超链接进行串接。超链接帮我们实现了网页与网页之间的跳转。文字链接：我们可以使用超链接标签<a><a/>实现文字链接。设置了链接的文字默认样式为蓝色文字，有下划线。<a><a/>标签实现超链接有两...
2019-06-08 21:59:59
1412
1
原创 前端基础入门（5）边框与背景
前面（HTML图片）漂亮的网页肯定少不了边框与背景的修饰，本篇笔记就是说明如何为网页上的元素设置边框或者背景（背景颜色和背景图片）。之前，先了解一下HTML中的图片元素，因为图片标签的使用非常简单，所以就插在这里说明一下。HTML中的图片，我们只需要掌握它的标签写法以及它的三个属性就基本OK了。写法格式：<img src="图像源文件的路径"/>主要属性：说明：图片标签跟...
2019-06-08 21:59:54
5956
2
原创 前端基础入门（4）列表及其样式
前面网页中漂亮的导航、整齐规范的文章标题列表和图片列表等等。这些都是离不开HTML里一个重要的元素----列表，在HTML中有无序列表、有序列表和定义列表三种类型。其中，无序列表应用最为广泛，下面，我们一块认识一下HTML列表。列表在文档编辑中也是十分常见的，我们可以结合word里的列表来对比学习HTML的列表元素。在word中有符号列表、编号列表、多级列表。在HTML中也提供了三种类型的列表...
2019-06-08 21:59:50
4200
原创 前端基础入门（3）段落及文本
写在前面：CSS选择器网页要显示很多内容，想要为每个内容设置不同的样式，我们就得首先选中要设置样式的内容，CSS选择器就是指明该样式是针对HTML里哪一个元素的。简单的例子，网页上有几段文字，我们想把第一段文字调成红色的，在用CSS写完红色文字样式后，是不是得指明该红色文字样式是针对第一段文字的，那就得用CSS选择器了。CSS选择器提供了多种方式帮你选中要设置样式的元素，这里我们介绍常用的三种：...
2019-06-08 21:59:47
2737
原创 前端基础入门（2）选取工具：VS2019安装使用
前面子曰“工欲善其事，必先利其器”。开始编写HTML代码前，我们该选择一款编辑工具，实际上，HTML作为标记语言，我们甚至可以直接用记事本来编写HTML代码，但记事本实在弱爆了。这里推荐使用Visual Studio，当然，你也可以选择其它你习惯使用的编辑器，甚至可以使用在线的HTML编辑工具。Visual Studio（简称VS）是微软公司的开发工具，有“宇宙第一IDE”的美称，它十分强悍，同...
2019-06-08 21:59:44
8560
1
原创 前端基础入门（1）初识
前面我们每天都在浏览着网络上丰富多彩的页面，那么在网页中所呈现出的绚丽多彩的内容是怎么设计出来的呢？我们想要自己设计一个页面又该如何来做呢？对于刚刚接触网页设计的小伙伴来说，看到网页背后的一堆符号和代码，是不是会感到有些凌乱。“看这里、看这里”，其实HTML并不复杂，严格意义上它并不是编程，它只是一些标记，也可以说是和浏览器的一些“约定”，就是告诉浏览器，要显示什么内容，这些内容是什么样式。好...
2019-06-08 21:59:42
5342
5
原创 前端js入门——JavaScript 转义字符串
顾名思义，所谓的转义字符就是能够改变字符原本意义的特殊字符。在实际应用中，总有一些具有特殊含义的字符无法直接输入，比如换行。这时候转义的字符的威力就得以显现，代码实例如下：console.log("网站名称:\n兴趣部落");我们无法直接在代码中直接键入换行，使用\n即可实现换行功能。n的原本意义就是字符"n"，但是加上反斜杠\之后，它就具有了换行功能。一.转义字符的定义：转义字符以...
2019-06-07 22:00:37
6478
原创 前端js入门——JavaScript 数据类型
一.JavaScript中有两大类数据类型:（1）.值类型:String、Number、Boolean、Symbol（ES2015新增）、null和undefined。boolean，number，string三种值类型，JavaScript为之提供了对应包装类型，包装类型和引用类型的差别在于对象的生存周期，在读取模式下访问值类型数据的值时，内部会自动为之创建包装类型的对象，提供了相关方法和...
2019-06-07 22:00:29
354
原创 前端js入门——JavaScript 对象直接量
JavaScript中，创建对象可以使用构造函数方式。代码实例如下:obj.webName = "兴趣部落";obj.address = "海岛市南区";以上代码采用构造函数方式创建对象obj，为其添加两个属性并赋值。也可以使用更为简单的方式创建对象，那就是对象直接量，代码实例如下:var obj = { webName: "兴趣部落", address: "海岛市南区"}...
2019-06-07 21:59:59
3472
原创 前端js入门——JavaScript function 函数
函数是JavaScript中应用最为广泛的数据结构。首先看一段代码实例感受一下它的功能：function func(webName,age){let str=webName+``"已经"``+age+``"岁了"``;console.log(str);}func(``"蚂蚁部落"``,5);func(``"百度"``,18);上面代码创建一个函数，调用两次并传递不同的参数。由此我...
2019-06-07 21:59:51
770
2
原创 前端js入门——JavaScript 面向对象
JavaScript是一门面向对象的语言，与其他面向对象语言相比具有自己的特点。下面将从总体上对其做一下概述，不会对细节做过多介绍。本文将解决如下几个问题：（1）.什么是面向对象。（2）.对象成员有哪些。（3）.JavaScript实现面向对象。一.什么是面向对象：经常说面向对象的编程，但是刚开始可能并不明白面向对象具体含义是什么。通俗的讲，就是将程序中的成员看做一个对象，此对象是...
2019-06-07 21:59:47
1849
原创 前端js入门——JavaScript 对象直接量
JavaScript中，创建对象可以使用构造函数方式。代码实例如下:obj.webName = "兴趣部落";obj.address = "海岛市南区";以上代码采用构造函数方式创建对象obj，为其添加两个属性并赋值。也可以使用更为简单的方式创建对象，那就是对象直接量，代码实例如下:var obj = { webName: "兴趣部落", address: "海岛市南区"}...
2019-06-06 22:00:03
1033
原创 前端js入门——JavaScript 作用域
在MDN或者其他权威教程上，对于作用域的解释无一例外是与可见性和生命周期相关。作为最重要的概念之一，初学者往往会惑于上述高大上的理论阐述。所以从浅显处入手，可能更有助于对于概念的入门和深入理解。作用域通俗的讲就是变量或者函数的“势力范围”，在此范围内，变量可以被引用，函数可以被调用。JavaScript具有两种作用域：（1）.全局作用域。（2）.函数作用域。特别说明：ES2015新增...
2019-06-06 21:59:55
7224
2
原创 前端js入门——JavaScript 字符串拼接
实际应用中，目标字符串的生成可能需要多个数据的拼接。由于应用频繁，几乎是所有编程语言都必须掌握的操作，当然每种语言具有各自特点。本文将通过代码实例详细介绍一下JavaScript如何实现字符串拼接操作。一.使用加号（+）拼接：加号不但可以实现算数运算，也可以实现字符串拼接操作。代码实例如下：console.log(``"兴趣部落"``+``"海岛市南区"``);上述代码使用加号（+）...
2019-06-06 21:59:46
4726
2
原创 前端js入门——JavaScript 数据类型
一.JavaScript中有两大类数据类型:（1）.值类型:String、Number、Boolean、Symbol（ES2015新增）、null和undefined。boolean，number，string三种值类型，JavaScript为之提供了对应包装类型，包装类型和引用类型的差别在于对象的生存周期，在读取模式下访问值类型数据的值时，内部会自动为之创建包装类型的对象，提供了相关方法和...
2019-06-06 21:59:37
1056
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人