Web 前端
peabits
Who cases...
展开
-
ch01 -- HTML 介绍
HTML 介绍web 前端开发基础技术:HTML 、CSS 、JavaScript 语言。HTML 是网页内容的载体。内容就是在网页页面上可以浏览到的信息,包含文字、图片、视频等。CSS 样式是表现。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。JavaScript 是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单,或鼠标...原创 2019-03-24 19:43:01 · 167 阅读 · 0 评论 -
ch15 -- CSS 样式设置技巧
CSS 样式设置技巧水平居中设置设置元素为水平居中分两种情况:行内元素块状元素行内元素如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。示例如下:<!--html 代码--><!--文本是 div 的子元素,div 是文本的父元素--><body> <div c...原创 2019-04-07 14:20:18 · 156 阅读 · 0 评论 -
ch01 -- 初识 JavaScript
JavaScript所有主流浏览器都支持 JavaScript 。目前,全世界大部分网页都使用 JavaScript 。它可以让网页呈现各种动态效果。做为一个 Web 开发师,如果想提供漂亮的网页、令用户满意的上网体验,JavaScript 是必不可少的工具。易学性学习环境无外不在,只要有文本编辑器,就能编写 JavaScript 程序。我们可以用简单命令,完成一些基本操...原创 2019-04-21 14:39:17 · 1914 阅读 · 0 评论 -
ch02 -- JavaScript 常用互动方法
常用互动方法输出内容 document.write()警告 alert()确认 confirm()提问 prompt()打开新窗口 window.open()关闭窗口 window.close()输出内容(document.write)document.write() 可用于直接向 HTML 输出流写内容,直接在网页中输出内容。输出内容用 “” 括起,直接输出 “” ...原创 2019-04-21 17:04:56 · 122 阅读 · 0 评论 -
ch03 -- DOM 操作
认识 DOM文档对象模型 DOM(Document Object Model)定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。HTML 文档可以说由节点构成的集合,三种常见的 DOM 节点:元素节点:如 <html> 、<body> 、<p> 等都是元素节点,即标签。文本节点:向用户...原创 2019-04-21 18:49:00 · 96 阅读 · 0 评论 -
ch08 -- JavaScript 事件响应
JavaScript 事件响应JavaScript 利用事件响应创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。主要事件表:事件说明onclick鼠标单击事件onmouseover鼠标经过事件onmouseout鼠标移开事件onchange文本框内...原创 2019-05-02 16:01:46 · 117 阅读 · 0 评论 -
ch09 -- JavaScript 内置对象
JavaScript 内置对象JavaScript 中的所有事物都是对象。如:字符串、数值、数组、函数等。JavaScript 中的每个对象带有属性和方法。对象的属性:反映该对象某些特定的性质的。如:字符串的长度、图像的长宽等。对象的方法:能够在对象上执行的动作。如:表单的 “提交”(Submit) ,时间的 “获取”(getYear) 等。JavaScript 提供多个内建对象,...原创 2019-05-02 16:03:13 · 129 阅读 · 0 评论 -
ch10 -- JavaScript 浏览器对象
JavaScript 浏览器对象Window 对象是 BOM 的核心,Window 对象指当前的浏览器窗口。Window 对象方法:方法描述alert()显示带有一段消息和一个确认按钮的警告框prompt()显示可提示用户输入的对话框confirm()显示一段消息以及确认按钮和取消按钮的对话框open()打开一个新的浏览器窗口或查找一个已命名的...原创 2019-05-02 19:21:24 · 131 阅读 · 0 评论 -
ch04 -- JavaScript 基础语法
JavaScript 基础语法HTML 标记 (也称为结构) , CSS 样式 (也称为表示) ,仅仅使用 HTML+CSS 创建的页面只是静态页面,还需使用 JavaScript 增加行为,为网页添加动态效果。JavaScript 能做什么?增强页面动态效果 (如:下拉菜单、图片轮播、信息滚动等)实现页面与用户之间的实时、动态交互 (如:用户注册、登陆验证等)使用 JavaScr...原创 2019-04-29 22:29:10 · 124 阅读 · 0 评论 -
ch11 -- DOM 对象,控制 HTML 对象
DOM 对象,控制 HTML 对象文档对象模型 DOM(Document Object Model)定义访问和处理 HTML 文档的标准方法。认识 DOMDOM 将 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。把 HTML 文档看做是由节点构成的集合,DOM 节点有:元素节点:如 <html> 、<body> 、<p> 等都是元...原创 2019-05-05 21:23:15 · 160 阅读 · 0 评论 -
ch05 -- JavaScript 数组
JavaScript 数组变量用来存储数据,一个变量只能存储一个内容。如果需要存储更多数据,可以用数组解决,一个数组变量可以存放多个数据。数组是一个值的集合,每个值都有一个索引号,从 0 开始,每个索引都有一个相应的值,根据需要添加更多数值。创建数组使用数组之前首先要创建,而且需要把数组本身赋给一个变量。创建数组的语法如下:var array = new Array();在创建...原创 2019-04-30 19:52:15 · 87 阅读 · 0 评论 -
ch06 -- JavaScript 流程控制语句
JavaScript 流程控制语句if 语句if语句是基于条件成立才执行相应代码时使用的语句。语法:if (条件){ 条件成立时执行代码;}注意:if 小写,大写字母(IF)会出错!if…else 语句if…else 语句是在指定的条件成立时执行代码,在条件不成立时执行 else 后的代码。语法:if (条件){ 条件成立时执行的代码;}...原创 2019-04-30 20:27:09 · 84 阅读 · 0 评论 -
ch09 -- CSS 特性
CSS 特性css 特性包括继承、层叠和特殊性继承css 的某些样式是具有继承性的。继承是一种规则,它允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代。比如:如某种颜色应用于 p 标签,这个颜色设置不仅应用 p 标签,还应用于 p 标签中的所有子元素文本,这里子元素为 span 标签。结果 p 中的文本与 span 中的文本都设置为了红色。p{color:red;}&...原创 2019-04-06 20:53:38 · 83 阅读 · 0 评论 -
ch14 -- 单位和值
单位和值颜色值网页中的颜色设置有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种。英文命令颜色p{ color:red;}RGB 颜色<!--由 R(red) 、G(green) 、B(blue) 三种颜色的比例来配色--><!--每一项的值可以是 0~255 之间的整数,...原创 2019-04-06 19:13:32 · 370 阅读 · 0 评论 -
ch02 -- HTML 标签第一部分
HTML 标签语义化注意 html 标签的两个方面:标签的用途、标签在浏览器中的默认样式。标签的用途:语义化,通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)。比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落放在段落标签中,在文章中有想强调的文本,使用 em 标签表示强调等等。语义化,可以让网页更好的被搜索引擎理解。语义...原创 2019-03-25 00:04:46 · 287 阅读 · 0 评论 -
css 介绍
CSS 介绍CSS 全称为“层叠样式表 (Cascading Style Sheets)”,它可以为网页添加样式,主要用于定义 HTML 内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。使用 CSS 样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。如下代码:p{ font-size:12px; color:red; fon...原创 2019-03-29 21:46:53 · 106 阅读 · 0 评论 -
css 代码形式
css 样式基本知识从 css 样式代码插入的形式来看基本可以分为以下 3 种:内联式、嵌入式和外部式三种。内联式 css 样式内联式 css 样式是把 css 代码直接写在现有的 HTML 标签中,如下代码:<p style="color:red">这里文字是红色。</p>注意:写在元素的开始标签里,不能写在结束标签里面。css 样式代码要写在 style=...原创 2019-03-29 22:17:51 · 458 阅读 · 0 评论 -
css 选择器
css 选择器每一条 css 样式声明(定义)由两部分组成,形式如下:选择器{ 样式;}在 {} 之前的部分就是“选择器”,“选择器”指明了 {} 中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。标签选择器标签选择器其实就是 html 代码中的标签。如 <html> 、<body> 、 <h1> 、<p> 、<...原创 2019-03-29 22:45:09 · 293 阅读 · 0 评论 -
ch03 -- HTML 标签第二部分
HTML 标签<ul> 标签用于添加信息列表。列表可以使用 ul-li 标签来完成,ul-li 表示没有前后顺序的信息列表。ul-li 在网页中显示的默认样式一般为:每项 li 前都自带一个圆点,语法:<ul> <li>信息</li> <li>信息</li> ......</ul>&...原创 2019-03-26 23:33:05 · 185 阅读 · 0 评论 -
ch04 -- HTML 标签第三部分
HTML 标签<a> 标签使用标签可实现超链接,链接到另一个页面。只要有链接的地方,就会有这个标签。语法:<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>title 属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)。...原创 2019-03-26 23:53:50 · 251 阅读 · 0 评论 -
ch05 -- HTML 中与用户的交互方式
HTML 中与用户的交互方式HTML 表单标签使用 HTML 表单 (form) 实现网站与用户交互。表单可以把浏览者输入的数据传送到服务器端,服务器端程序就可以处理表单传过来的数据。语法:<form method="传送方式" action="服务器文件">说明:<form>:<form> 标签是成对出现的,以 <form>...原创 2019-03-27 18:32:01 · 1066 阅读 · 0 评论 -
ch10 -- CSS 格式排版
css 格式排版可以使用 css 样式为网页中的文字设置字体、字号、颜色等样式属性。文字排版字体如下代码:<!--为网页中的文字设置字体为宋体-->body{font-family:"宋体";}注意:不要设置不常用的字体,如果电脑上如果没有安装所设置的字体,就会显示浏览器默认的字体。设置的字体样式是否可以显示取决于用户电脑上是否安装了所设置的字体。现在一般网页喜欢设置...原创 2019-04-06 15:13:06 · 155 阅读 · 0 评论 -
ch11 -- CSS 盒模型
CSS 盒模型元素分类在 css 中,html 中的标签元素大体被分为三种不同的类型:块状元素内联元素或行内元素内联块状元素常用的块状元素有:<div> 、<p> 、<h1> ··· <h6> 、<ol> 、<ul> 、<dl> <table> 、<address> 、&...原创 2019-04-06 17:01:25 · 98 阅读 · 0 评论 -
ch12 -- CSS 布局模型
CSS 布局模型布局模型与盒模型都是 CSS 最基本、最核心的概念。布局模型是建立在盒模型基础之上,不同于 CSS 布局样式或 CSS 布局模板。CSS 布局模板是布局模型外在的表现形式。网页布局的基本模型CSS 包含 3 种基本的布局模型,分别是:Flow、Layer 和 Float。在网页中,元素有三种布局模型:流动模型(Flow)浮动模型 (Float)层模型(Layer)...原创 2019-04-06 18:32:31 · 229 阅读 · 0 评论 -
ch13 -- 盒模型代码简写形式
盒模型代码简写形式盒模型代码设置盒模型的外边距 (margin) 、内边距 (padding) 和边框 (border) 上下左右四个方向的边距时,按照顺时针方向设置,即上右下左。通常有下面三种缩写方法:top 、right 、bottom 、left 的值相同。margin:10px 10px 10px 10px;<!--可缩写为-->margin:10px;...原创 2019-04-06 18:49:40 · 291 阅读 · 0 评论 -
ch07 -- JavaScript 函数
JavaScript 函数函数的作用,可以写一次代码,然后反复地重用这个代码。可以把完成特定功能的代码块放到一个函数里,使用时直接调用这个函数,就省去重复输入大量代码的麻烦。定义函数定义函数的格式:function 函数名(){ 函数体;}function 定义函数的关键字,“函数名” 是为函数取的名字,“函数体” 替换为完成特定功能的代码。函数调用函数定义好...原创 2019-04-30 23:04:57 · 138 阅读 · 0 评论