![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
网站设计
我是包不同
这个作者很懒,什么都没留下…
展开
-
网页设计实战之JavaScript(9) -- 事件
1、事件的概念:JavaScript可以让用户与页面交互,创建动态页面,网页中的每一个元素都可以产生触发某些事件,让系统调用用户定义JavaScript函数。事件就是可以被JavaScript侦测到的一种行为或动作。2、事件流:事件流是事件产生时,系统在分析处理事件时调用哪一级元素的响应函数的流程。事件流分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件,而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。3、使用返回值改变HTML元素的默认行为:HTML元素都有其自己的默认行原创 2020-06-09 10:52:04 · 552 阅读 · 0 评论 -
网页设计实战之JavaScript(8) --JS的内置对象(Date、RegExp、Error、Array、Document、Window)
一、Date对象Date对象 用于处理日期和时间。1、创建 Date 对象通过 new 关键词来定义 Date 对象。Date 对象会自动把当前日期和时间保存为其初始值。//四种方式初始化日期:【接受不同参数】new Date() // 当前日期和时间new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数new Date(dateString)new Date(year, month, day, hours, minutes, seconds, m原创 2020-06-08 17:29:37 · 526 阅读 · 0 评论 -
网页设计实战之JavaScript(7) -- 对象属性的特性值
javascript中对象的属性的特性1.属性的特性包括下面六个:configurable: 表示能否通过delete来删除属性从而重新定义属性,能够修改属性的特性,默认为trueenumberable: 表示是否能通过for-in循环返回属性。默认为truewritable: 是否可以修改属性, 默认为truevalue: 包含这个属性的数据值。读取属性值时,从这个属性读,写入属性时,把新值保存到这个位置。默认值为undefine.getter: 在读取属性时,调用的函数原创 2020-06-08 15:52:29 · 158 阅读 · 0 评论 -
网页设计实战之JavaScript(6) -- 对象
一、面向对象1.对象:对象是一个整体,对外提供属性和若干操作。2.面向对象:使用对象时,只关注对象提供的功能,不关注其内部细节。比如电脑——有鼠标、键盘,我们只需要知道怎么使用鼠标,敲打键盘即可,不必知道为何点击鼠标可以选中、敲打键盘是如何输入文字以及屏幕是如何显示文字的。总之外部没必要知道其具体工作细节,只需知道如何使用其提供的功能即可,这就是面向对象。3.JS的对象组成:JS的对象由方法和属性构成。在JS中,有函数、方法、事件处理函数、构造函数,其实这四个都是函数,只是作用不同。函数是独立原创 2020-06-08 14:20:18 · 237 阅读 · 0 评论 -
网页设计t实战之JavaScrip(5) -- 函数function(函数定义、函数表达式、函数生成器、箭头函数、Function构造函数、默认参数、剩余参数、可变参数、块级函数)
一、函数概述函数是为了完成某一功能的程序指令(语句)的集合或程序块。在JavaScript中,每个函数其实都是一个Function对象。函数分为:自定义函数和系统函数函数的调用方式:(1)普通调用:functionName(实际参数…)(2)通过指向函数的变量去调用: var functionVar=函数名; functionVar(实际参数…); 调用函数时,传递给函数的值被称为函数的实参(值传递),对应位置的函数参数名叫作形参。如果实参是一个包含原始值(数字,字符串,布尔原创 2020-06-05 14:53:43 · 763 阅读 · 0 评论 -
网页设计实战之JavaScript(4) -- 流程控制(if then else switch, while, do while, for,break)
在一个程序执行的过程中,执行顺序影响程序的结果。通过控制代码的执行顺序来实现需要的功能。流程控制主要有三种结构:分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。一、顺序结构顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码在程序中的位置先后顺序,依次执行,上行程序执行完了,再执行下一行。跟人看书类似,从上往下看。程序中大多数的代码都是这样执行的。var a=0;var b=1;var c=2;a=b+c;a=b*c;a=a+b;二、分支原创 2020-06-03 15:31:13 · 593 阅读 · 2 评论 -
网页设计实战之JavaScript(3) -- 运算符与表达式
一、运算符表达式可以由变量、字面量、运算符组成。但 运算符无法单独构成表达式。每一个合法的表达式都有一个值(运算的结果)。所有运算符可分为单目运算符、双目运算符、三目运算符三类。分类需要操作数数目运算符单目运算符一++ 、-- 、!双目运算符二+ 、- 、*、 / 、%三目运算符三?:运算符的分类根据运算符形成表达式所需操作数个数而定。1、算术运算符运算符描述表达式值(运算结果)+加法1+23-减法5-1原创 2020-06-03 14:16:24 · 538 阅读 · 0 评论 -
网页设计实战之JavaScript(2) -- 详谈变量的数据类型转换
数据类型转换就是将一种数据类型转换成另外一种数据类型。类型转换分为隐含转换和强制转换。隐含转换在前面一战中,已介绍。本节着点说明强制转换。数据类型有:String 字符串Number 数值Boolean 布尔值null 空值undefined 未定义Object 对象其中String、Number、Boolean、null、undefined属于基本数据类型而Object属于引用数据类型。常有 3 种方式的转换:转换为字符串类型转换成数字型转换成布尔类型JS是弱类型语言原创 2020-06-02 15:23:05 · 271 阅读 · 0 评论 -
网页设计实战之JavaScript(1) --变量与数据类型
一、JavaScript之变量1、变量定义定义变量是通过var关键字来定义一个变量,若变量不通过var定义,则视为全局变量。(1)变量声明一般声明方式var name;//变量声明var age;//变量声明var add;//变量声明同一行可以声明若干变量,变量之间用逗号分开。var name="AFADF",age=23,add=false;变量名的规则:大小写敏感,name 和 Name不是同一个变量。变量名中不能包括特殊字符,如:减号,加号等,变量名不能数字字原创 2020-06-02 11:14:03 · 723 阅读 · 0 评论 -
网页设计之HTML实战(10) -- HTML 框架
通过使用框架,同一个浏览器窗口中显示不止一个页面。每个HTML文档为一个框架,并且每个框架之间相互独立。1、框架结构标签<frameset>框架结构标签<frameset>定义框架在窗体中的布局frameset 定义了若干行或列rows/columns 的值规定了每行或每列占据屏幕的比例2、框架标签<frame><frame>标签承载框架中的 HTML 文档。<frameset cols="50%,50%"> <frame src="a.html">原创 2020-05-15 15:27:14 · 303 阅读 · 0 评论 -
网页设计之HTML实战(9) -- HTML 表单
HTML 表单用于搜集不同类型的用户输入,然后向服务器发送用户的输入。1、<form>标签<form>标签用于定义 一个HTML 表单,其它表单元素都包含在其中。(1) action 属性action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。<form action="do-something.php">(2) method 属性method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):<form action=原创 2020-05-15 15:07:09 · 419 阅读 · 0 评论 -
网页设计之HTML实战(8) -- HTML 头部标签(head,title,base,link,style,meta,script)
1、<head>标签<head>元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息等。以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script>以及 <style>。2、<title>标签<title>标签定义文档的标题。该标题在浏览器窗体的标题栏上显示出来。title 元素在所有 HTML/XHTML 文档中都是必需的。title 元素能够:浏览器工具栏显示标题收藏夹时显示的标题搜原创 2020-05-15 14:40:54 · 3077 阅读 · 0 评论 -
网页设计之HTML实战(7) -- HTML中的块元素<div>
1、块级元素块级元素在浏览器显示时,会以新行来开始(和结束)。如:<h1>,<hr>,<br>,<p>,<ul>,<table>,<div>等。2、内联元素内联元素在显示时通常不会以新行开始。如::<b>, <td>, <a>, <img>等。3、HTML <div>元素HTML<div> 元素是块级元素,它是其他 HTML 元素的容器。<div> 元素没有特定的含义。由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,<div>元素可用于对大的内容块设置样式属性。<原创 2020-05-15 14:15:43 · 790 阅读 · 0 评论 -
网页设计之HTML实战(5) -- HTML中的表格
主要由五类标签来定义表格:<table>:定义表格<td>:定义表格的列<tr>:定义表格的行<caption>:定义表格的标题<th>:定义表格的列标题<table border="1"> <!-- 表格线宽为1--><caption>武功高人信息表</caption><!-- 表格标题--><tr> <th>姓名</th> <!-- 表格的列标题--> <th&g原创 2020-05-15 13:28:22 · 242 阅读 · 0 评论 -
网页设计之HTML实战(4) -- 更多的HTML标签
1、水平线标签<hr>和<hr/>画一条横线,由于没有包含的内容,<hr></hr>可以省写为<hr/>。在浏览器中显示效果:2、换行标签<br>和<br/>换行标签以后的内容,从新行开始显示。<br></br>由于没有包含的内容,可以省写为<br/>。3、文本格式化标签<b>定义:粗体文本。<big>定义:大号字。<em>定义:着重文字.<i>定义:斜体字.<small>定义:小号字.<strong>定义:加重语气.<sub>定义:下标字。.<sup>定义:上标字。.<in原创 2020-05-15 12:21:33 · 190 阅读 · 0 评论 -
网页设计之HTML实战(3) -- 标签的属性
1、标签属性作用HTML 标签有属性。用于描述标签的特征,如图片标签中<img>需要说明图片显示的高宽等。2、标签属性表示方法标签属性写标签尖括号里面,以【属性名=属性值】形式书写。<h1 align="center"> 标题1(居中对齐)。</h1>注意:属性名称和属性值对大小写不敏感。但是一般是小写。3、通用属性大多数 HTML 标签都有以下属性:class: 规定标签的类名id: 规定标签的唯一 idstyle: 规定标签的行内样式title: 规定标签的额外信息(可在工具原创 2020-05-15 11:46:55 · 379 阅读 · 0 评论 -
网页设计之HTML实战(2) -- HTML基本标签
1、 标题标签<h1>标题标签表示文章的标题,用标签<h1>等,表示标题有一级标题,二级标题等,因此对应的标签就有<h1>、<h2>、<h3>、<h4>、<h5>、<h6>.<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3>在浏览器中显示结果:这是一级标题这是二级标题这是三级标题显示的结果,每增加一级,标题的字号逐步变小了。2、超链接标签<a>在网页上想打开另一个页面,就原创 2020-05-15 11:12:45 · 636 阅读 · 0 评论 -
网页设计之HTML实战(1) -- 认识HTML
一、HTML入门1、什么是 HTML?HTML 是用来描述网页的一种语言。全称为超文本标记语言,是英文(Hyper Text Markup Language)的缩写,不是编程的语言,是一种网页格式的格式表示方法或称为一种标记语言。它由若干标记标签组成。例如,为了表示想显示一个标题,就用H1标签表示一个标题,显示时用粗体显示。<h1>这是文章的标题</h1>2、标记标签标记标签(英文:HTML tag)是用来表示页面内容的格式或者动作的,用尖括号括起来的一个英文单词,如原创 2020-05-15 10:22:00 · 330 阅读 · 0 评论 -
网页设计之CSS实战(6) --- 伪类与伪元素
一、伪类伪类用于向某些选择器添加特殊的效果。伪类的语法:selector : pseudo-class {property: value}CSS 类也可与伪类搭配使用。selector.class : pseudo-class {property: value}1、锚伪类伪类名称对大小写不敏感a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00原创 2020-05-14 16:33:37 · 327 阅读 · 0 评论 -
网页设计之CSS实战(5) --- 元素定位
一、定位之理解CSS 为定位和浮动提供了一些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成通常需要使用多个表格才能完成的任务。允许元素框相对于某位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设原创 2020-05-14 16:13:29 · 509 阅读 · 0 评论 -
网页设计之CSS实战(4) --- Box模型
一、CSS 框模型 margin: 外边距padding: 内边距#box { width: 70px;<!-- 元素本身的宽 -- > height: 80px;<!-- 元素本身的高 -- > margin: 10px;<!-- 外边距 -- > padding: 5px;<!-- 内边距 -- >}内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。外边距可以是负值,而且在很多情况下都要使用负值的外边距。原创 2020-05-14 15:19:23 · 908 阅读 · 0 评论 -
网页设计之CSS实战(3) --- 样式(背景、文本属性、字体、链接、列表、表格、元素边框)
一、背景1、背景色p {background-color: gray;}2、背景图像body {background-image: url(bg-img.gif);}p.flower {background-image: url(bg-flower.gif);}(1)背景图的拼接方式背景图的尺寸比元素的尺寸小的时候,需要指定背景图的拼接方式,即background-repeat 属性。background-repeat:no-repeat,只显示一个图background-repea原创 2020-05-14 14:36:13 · 879 阅读 · 0 评论 -
网页设计之CSS实战(2) --- 选择器
一、选择器基础1、选择器的分组同一组的选择器分享相同样式。h1,div,p,h4,h5,h6 { color: red; }2、样式继承根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。例如:body {font-family: Verdana, sans-serif;}通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有原创 2020-05-14 12:33:04 · 369 阅读 · 0 评论 -
网页设计之CSS实战(1) --- HTML样式及CSS基础
一、HTML 元素的样式定义:(1)浏览器缺省设置也就是什么也不指定,就用缺省设置。如:<text> hello world<text>(2)外部样式表存放在一个特定的CSS文件中,然后在html中引用这个文件。如:<head> <link rel="stylesheet" href="css/index.css" /></head>(3)内部样式表(位于 标签内部)<head> <style type原创 2020-05-14 11:10:04 · 531 阅读 · 1 评论