HTML/CSS

html基础

HTML 是用来描述网页的一种是超文本标记语言。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
HTML 段落是通过 <p> 标签进行定义的。
HTML 链接是通过 <a> 标签进行定义的。
HTML 图像是通过 <img> 标签进行定义的。

<!--html常用标签--><html>描述网页</html>
<body>可见的页面内容</body>
<h1>标题</h1>
<p>段落</p>
<span>不换行的标签</span>
<br />//用于换行
<div>可换行的标签</div>
<!-- hr:产生一条横线的标签,可以设置属性值 -->
<hr width="400px" color="blue"><!--列表 -->
<!-- ul 无序列表 ，前面有圆点-->
<ul><li>误落尘网中，一去三十年</li><li>误落尘网中，一去三十年</li><li>误落尘网中，一去三十年</li>
</ul><!-- ol有序列表 ，默认数字为序号-->
<ol><li>误落尘网中，一去三十年</li><li>误落尘网中，一去三十年</li><li>误落尘网中，一去三十年</li>
</ol><!--  html文本修饰标签-->font标签----用于设置文本的字体样式b标签----文本加粗i标签----文本斜体s标签----添加删除线u标签-----添加下划线sup标签----添加上标sub标签----添加下标strong标签----文本加粗big标签----元素中的内容在显示时比周围的文本大一个字号small标签-----元素中的内容在显示时比周围的文本小一个字号<!-- 图片的标签 <img src="" alt=""> -->width:宽，height:高，title：标题，src="图片的地址"，alt：当图片没有正常加载时，则显示alt的文字说明.<!-- 超链接   <a href=""></a>   --><!-- a标签：超链接标签，点击超链接标签，可以让页面跳转到新的资源路径，网页内容被更新-->href属性：指定跳转的url地址（相对地址，绝对地址）**url:统一资源定位器（网络上可以访问的资源路径target属性：_blank:打开的内容显示在一个新的窗口，_self:打开的内容显示在当前窗口,如下：<a href="www.baidu.com" target="_blank">百度首页</a><a href="www.baidu.com" target="_self">百度首页</a>
<!-- 设置顶部标志：定义锚点 --><a name="top">顶部区域</a>
<!-- 通过锚点的名字top，跳转到锚点所在的位置 --><a href="#top">回到顶部</a> <!-- 表格 -->table标签：用于实现表格caption：设置表格名字tr：（table row）：行td:列（单元格）border:边框width：宽度cellpadding="0":设置文本内容和表格边框的宽度cellspacing="0":设置单元格之间的宽度

css基础

css的三种使用样式

内联样式：在标签内通过style的属性进行使用，如：<p style="color:red;">内联样式</p>
内部样式：在head标签中通过<style>css语言</style>进行使用，如：<head><style>body {background-color: powderblue;}</style></head>
外部样式：通过在head标签中，使用<link href="xx.css"标签，引入css文件，进行使用：
<link href="xx.css" type="text/css" rel="stylesheet" />

css的基本选择器

标签选择器：标签名{样式}，如：标签选择器（div{}），选择标签为div的所有元素
class（类）选择器：.className{样式}，如：类选择器（.one），选择类名为one的所有元素
id选择器：#idName{样式} 如：id选择器（#box{}），选择id为box的元素
分类选择器：元素选择器.className/idName
分组选择器：多个选择器同用一个样式，如x,y{样式}，选择x、y的所有元素，如：在html中为多个标签元素设置同一个样式时，使用该选择器
派生选择器：找子标签（嵌套在内部的第一层符合条件的标签元素）:选择器>选择器{}，子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素找子孙标签（嵌套在内部的所有符合条件的标签元素）：选择器选择器{}，后代选择器（#box div），选择id为box元素内部所有的div元素相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
伪类选择器：给html中一个标签元素的鼠标滑过的状态来设置样式,如：没有被访问过xx:link{},访问过后xx:visited{样式},悬停时xx:hover{样式},鼠标摁住时xx:active{样式},伪类：xx:foucs{样式}，获取焦点的时候，设置的样式在a标签中使用按顺序来使用，xx:hover{}可以应用在其他标签上

css的特征

继承性：父元素的一些样式会被其子元素去继承，比如字体颜色。
层叠性：一个元素可以有多个样式效果进行叠加。
优先级：浏览器默认样式<标签的默认样式<[外部样式/内部样式/内联样式]内联样式的优先级高于内部样式和外部样式，内部样式和外部样式：谁后写，谁优先id选择器优先级>class选择器>标签选择器。

css的盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

 /* border: 3px solid gray;/*四个方向均有边框*//* margin：外边距，设置元素之间的间距 *//* margin：10px;四个方向都是10px *//* margin: 10px 20px;/*上下，左右*/*//* margin: 5px 10px 20px 30px;/*margin ：上下左右；四个方向分别设置*/*/ margin-top: 20px;/*只设置上方向的margin，等同于：margin：20px 0 0 0；*//* padding：内边距，设置元素和自己内部的内容之间的间距 *//* padding: 20px; *//* 四个方向都是20px *//* padding: 20px 40px; *//* padding：上下，左右 */padding: 5px 10px 15px 20px;/* padding：上下左右；四个方向分别设置 *//* padding-top: 20px; *//* 只设置上方向的padding，等同于：padding：20px 0 0 0； *//* padding-left,padding-right,padding-bottom */

溢出的解决方式

overflow: hidden;/*溢出的解决方式：隐藏溢出部分*/
overflow: scroll;/*设置出现滚动条，溢出的部分通过滚动条查看*/
overflow: visible;/*溢出部分可见，溢出的默认处理方式*/
overflow: auto;/*继承父元素的溢出处理方式*/

背景图

背景颜色：background-color
背景图片：background-image:url(存放图片的路径);
                       background-repeat: no-repeat/repeat-x/repeat-y/repeat
                       background-size:大小
                       background-position:图片区域
                       background-attachent:背景固定
组合设置：background：颜色背景图片重复方式背景图片top 背景图片left

浮动定位

子元素浮动之后，父元素高度为0，造成溢出现象。解决方案：1.给父元素设置高度，2.使用overflow，隐藏溢出；
内部嵌套的元素浮动之后，包裹元素高度为0，可以给包裹元素设置高度；
内部嵌套的元素浮动之后，包裹高度为0，可以使用overflow：hidden；让包裹元素的高度和内部元素高度匹配；
clear: both;清除浮动的影响;none-不清除，both清除两边浮动元素的影响，left-清除左边的影响，right-清除右边的影响。

position

position定位，top，left，right，bottom设置元素的具体位置。
相对定位：relative。
绝对定位：absolute,参考的是自己的有相对定位的包裹元素，如果直接父元素没有相对定位，那么找父辈的，如果最终没有找到，那么找html（body）为准。
固定定位：fixed。
给元素设置了定位之后，如果被定位的元素的位置相同，则会发生堆叠现象（重合在一起）可以使用z-index，修改显示。z-index: 数据;标签设置z-index之后，数据值越大的显示在越上层（就是能被看见）

js

初识js

javascript 简称js，HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间，<script>标签内部只能写符合js的语法规则的语句。
可以把js相关内容写在单独的.js文件中，然后在html页面上，通过<script src="xx.js"引入js文件中，进行使用。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
定义变量的关键字：let 或var。
注释：快捷键ctr+?,单行或者代码行末注释：//,多行注释：/* */

js输出数据的方式

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

js的数据类型

声明变量类型：声明新变量时，可以使用关键词 "new" 来声明其类型：如let x=new String。
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
js中，boolean参与运算的时候，true转为1，false转为0；
string参与运算的时候，做的是字符串的拼接；
       把变量直接用于条件判断的时候，非空为true , 空为false；
       查看变量类型：typeof(变量名)；
       产生随机数，Math.random(),得到[0,1)的随机小数，Math是js的内置对象；
parseInt(),将字符串转换为整数；
isNaN(),js的一个函数，实现判断某个变量是否为数字，NaN-not a number。

JS获取DOM元素的方法

通过ID获取（getElementById）通过id取得HTML元素。
通过name属性（getElementsByName）通过name取得元素，是一个数组。
通过标签名（getElementsByTagName）通过HTML标签取得元素，是一个数组。
通过类名（getElementsByClassName）通过HTML标签取得元素，是一个数组。
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

元素的操作

元素.innerHTML:给标签元素的内部嵌套其他的html内容,浏览器解析为标签的显示方式。
元素.innerText：给标签元素的内部嵌套文本内容，浏览器不解析，直接显示内容。

常用的js事件

对象的属性和方法

字符串

toUpperCase(); // 转大写
toLowerCase(); // 转小写
charAt(); // 找指定位置的字符
indexOf() // 找到就返回索引位置，找不到返回-1
lastIndexOf(); // 从后往前找。
indexOf( , ); // 从指定位置开始找。
substring(,)// 从指定位置开始，找到指定的结束位置
substring()// 从指定位置开始找，找到原字符串的最后。
replace//替换字符串
split() concat() substr（）// 字符串的分割

Number对象

Math.round() //四舍五入
Math.floor()//向下取整
Math.ceil()//向上取整
Math.PI//定义常量

Date

let now =new Date();//获取当前日期
getFullYear()//四位年
getDate()//月中的日期
getMonth()//月
getHours()//小时
setFullYear()//修改日期
getMilliseconds()//当前日期中的毫秒数部分

== 和 ===的区别

== :表示判断内容是否相等。 ===: 被称为全等, 内容和类型都要相等。

数组

js的Array对象：长度可变，数组元素可以使用任意类型。可以通过数组下标的方式操作数组。

创建数组：数组元素可以是任意类型。
push(添加数组末尾元素)，pop（取出数组的末尾元素）--操作数组的末尾。
unshift（添加数组首位元素），shift（取出数组首位元素）--操作数组首位。
数组的从长度可变：arguments。
定义数组的时候，如果数组只有一个参数，并且是整数的number类型，那么这个参数作为数组的长度。如果数组有多个参数，那么这些参数作为数组的元素。
数组的排序：js定义sort函数：默认的排序方式是按字符串进行排序。js定义reverse函数--数组的逆序，降序：先调用sort升序，在用reverse逆序。

数组的函数

join函数:把数组按指定的字符串拼接为一个字符串。
concat 函数：用于给数组连接新的元素，可连接的元素个数不定，原数组不会改变。
slice函数：用于获取数组的子数组，可以指定获取的范围。
reverse函数：数组的反转,原数组变化。
sort函数：升序排序，按字符串升序排序。

js函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript 对大小写敏感，关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
在使用 return 语句时，函数会停止执行，并返回指定的值。
在 JavaScript 函数内部声明的变量是局部变量，所以只能在函数内部访问它。所以不同的函数可以使用相同名称的变量。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。如果变量在函数内没有声明，该变量为全局变量。
js中的arguments对象：方法调用的时候，所有的参数都是保存在arguments对象中的，arguments本质就是数组。
函数内部，可以通过arguments对象，获取参数。

动态时钟

全局函数：setInterval,clearInterval

setInterval(函数,等待时长);//启动定时器：等待xx后，再执行xx函数。
clearInterval(存放启动定时器的变量名)//关闭定时器。

正则表达式

能出现的字符[字符]，\d表示纯数字[0-9],\w匹配字母数字[a-zA-Z0-9].....
出现的字符的个数{n},{n,m}, +等价于{1,},?等价于{0,1},*等价于{0，}
匹配行首^
匹配结尾$
.等价于任意内容
\用于转义，\.表示.本身
（）用于分组
|表示或
i-忽略大小写 g-全局查找

正则表达式的创建

let reg=new RegExp();

正则表达式相关的函数和方法

test函数：测试字符串是否满足正则表达式要求，满足返回true，不满足返回false。
string中提供replace方法：根据正则表达式的匹配规则，找到对应的内容，然后替换为指定的其他内容。
string中提供的match方法:把匹配到的内容获取出来，然后保存为一个数组。
string中提供了search方法：根据正则表达式搜索内容，找到了返回内容所在的索引位置。搜索不到返回-1。

文档对象模型

查询节点
- document.getElementById(id),document.getElementByTagName,document.getElementByClassName,document.getElementByName
- 节点对象，各种节点查询方法
节点名字
- 文档节点：节点名：#document
- 元素和属性节点，节点名字：元素或属性名
- 文本节点，节点名字：#text
节点的类型
- 文档节点，类型：9
- 元素节点，类型：1
- 属性节点，类型：2
- 文本节点，类型：3
获取节点的属性
- getAtrribute(属性名)
设置节点的属性
- setAttribute（"属性","属性的内容"）
删除节点的属性
- removeAttribute("属性")
节点的父节点
- 节点.parentNode
节点的子节点
- childNodes:找到的节点包括元素节点和文本节点
- children：找到子节点，只包含元素节点
- firstChild:第一个孩子，所有孩子中的第一个孩子，可能是文本节点
- firstElementChild：第一个孩子，代表孩子中的第一个元素节点
- lastChild:最后一个孩子，所有孩子中的最后一个，可能是文本节点
- lastElementChild：最后一个孩子，代表孩子中的最后一个元素节点
节点的兄弟节点
- previousSibling:上一个兄弟，可能是文本类型的兄弟
- previousElementSibling，上一个元素节点的兄弟
- nextSibling，下一个兄弟，可能是文本类型的兄弟
- nextElementSibling：下一个元素节点兄弟

节点的操作

创建节点：document.createElement("节点")，得到的是一个节点对象。
把节点添加到dom中
- 父节点.appendChild(创建的节点)，作为父节点的最后一个子节点appendChild（）追加到末尾，insertBefore（）插入到指定的位置。
- 父节点.insertBefore(新节点，参考节点),作为父节点的孩子，插入到指定位置去。
删除节点：节点删除之后，其子节点也被删除。
- 父节点.removeChild(子节点)，根据父节点，删除指定的子节点。
- 节点.remove(),删除节点本身，其子节点也被删除了。
替换节点
- 父节点.repalceChild(新节点，被替换的节点)
克隆节点
- 节点.cloneNode(true)：表示克隆节点及其子节点。
- 节点.cloneNode(false)：表示克隆节点本身，不包含子节点。

BOM和DOM

BOM:浏览器对象模型(browser object model)
DOM:文档对象模型(document object model)
BOM和DOM的关系
- DOM属于BOM。
- BOM:document,screen,history,location,navigator等

sreen-屏幕的宽高，屏幕的可用宽高

screen.Width//宽度
screen.Height//高度
screen.availWidth//可用宽度
screen.availHeight//可用高度

history-浏览器的历史信息先关的内容

history.length//浏览器中记录url的个数
history.forward()--后退一个窗口
history.back()--前进一个窗口
history.go(2)--参数是整数，跳转到指定位置

location--浏览器访问的url地址有关

location.reload()//刷新网页

窗口

confirm,确认框，让用户选择自己的操作
alert()，提示框，弹出一个对话框，显示一段文字信息
prompt，输入框，让用户可以输入一个数据
open,close函数

全局函数

setInterval
setTimeout

事件

事件分为：鼠标事件，键盘事件，状态事件，其他.....
事件对象：event,事件触发的时候会产生一个event对象。
事件的定义方式：
- a.在标签上使用on+事件，调用函数
- b.在js代码中通过函数绑定的方式进行函数的调用：obj.οnclick=function
事件的取消：事件执行的函数返回值是false，事件就取消了。
事件的执行机制：冒泡原理--元素的某个事件被触发了。那么其包裹的同类事件也会被触发。
键盘事件:onkeydown，onkeyup
事件类型 & event对象
           - 鼠标事件，键盘事件，状态改变事件,.....
           - event : 每发生一次事件，就会产生一个event对象。
           - 事件源：触发事件的源头(节点对象)
           - 事件处理机制：冒泡，阻止冒泡

创建对象的三种方式

通过object创建对象：new Object()
通过构造函数，创建自定义对象
采用json格式定义对象
- json常用语服务器端和客户端交互的数据格式
- json格式：{key:value......},key就是字符串，value可以任意数据类型

jquery

jquery就是js的函数库，jquery中封装了常用的函数。2006年发布了第一个版本， js2.0之后不再兼容ie6,7这种低版本。类似于jquery的框架：zepto.js

jquery对象

jquery对象: 可以调用jquery中封装的函数，js对象：按原生js进行操作。

js 对应的 jquery函数
找到元素 $(选择器)
- 可以支持任意css的选择器。
- $("#d1") // id选择器
- $(".impt") // class选择器
- $("h1") // 标签选择器
- $("p.impt").css("background","green"); // 分类选择器
- $("h1,p").css("color","red") // 分组选择器
- console.log($("*").length); // 页面上所有的元素
- $("#box>li").css("border","3px solid blue") // 找所有的孩子
- $("#box li").css("color","yellow") // 找所有子孙
- $("#box+h4").css("color","pink") // 符合条件的，离自己最近的弟弟
- $("#box~h4").css("color","gray") //符合条件的自己的弟弟们
- 功能
  - jquery的方法：无参表示获取，有参表示设置
  - text() ,无参表示获取，有参表示设置
  - html() , 无参表示获取，有参表示设置
  - css(样式名) , css(样式名，样式值)
  - attr(属性名),attr(属性名，属性值)
display:none - hide()
display:block. - show()
innerHTML - html()
innerText - text()
onclick - click()
style.xx - css()

$(this): 对象类型的转换. jquery的函数只能通过jquery对象调用，$(this)的目的就是把js对象this，转换为jquery对象。只有jquery对象才能调用jquery中封装好的方法。jquery对象和js对象的转换： $(js对象) -- 转换了jquery对象。 $("span").get(0) , 获取到的是js对象。

eq是jquery提供的获取元素的方法，结果是一个jquery对象。

导入js文件的script标签的内部，不能嵌套其他的js代码，如果嵌套了其他内容，导入的js文件无效。<script src="../js/jquery.js"></script>

选择器

jquery通过选择器函数，得到是一个数组

jquery的选择器函数 $(selecter)
jquery的选择器函数 $(selecter)中的选择器支持任意css的选择器。
基本选择器（id ,class , tag），层次选择器(子，子孙, 弟弟)，
过滤选择器（:lt ,:odd(奇数), :even(偶数)），表单选择器(:text)

jquery函数

函数的参数是函数： setInterval(funcion , time);
回调(callback)函数：某个函数执行完成之后，再执行的其他函数，被称为回调函数。
- 语法规则：
                 function xx (yy){
                     // 先执行xx需要执行的代码，这部分执行完之后，
                     然后判断yy是否存在，存在就调用yy函数
                     if(yy){
                         yy()
                     }
                 }

事件

jquery提供了bind(绑定)函数，用于给对象绑定一个事件。
- blur失去焦点， -- focus 获取焦点
- bind(事件名称,事件触发执行的函数)

解除绑定

$(selector).unbind(event,function):解除绑定

阻止默认的事件
- $(e.target).hide(); --- js对象转换为jquery对象，然后可以调用jquery的方法
- event.preventDefault() //阻止默认行为 ( 表单提交 )
阻止冒泡事件
- event.stopPropagation(); // 阻止事件冒泡

学习心得

通过这段时间的学习，我最大的感触就是眼看着会，一动手就废，老师讲解的知识点能听明白，但是动手实操的时候就没有感觉了，不知道从何下手，不知道怎样将学过的知识结合起来运用到实际问题中去，还有就是容易忘记知识点，学了后面的忘了前面的，出现这些问题的原因可能就是自己对知识点的理解不够深刻，平时动手少，分析问题的逻辑能力比较弱，在今后的学习中，我会尽力去克服这些困难，争取在之后的日子里对这些知识的应用能够逐渐明朗。

HTML/CSS+JavaScript+jQuery相关推荐

Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行环境配置: Jdk1.8 + Tomcat8 ...
生日祝福（HTML+CSS+JavaScript+jQuery）
生日倒计时下载地址:[生日祝福(HTML+CSS+JavaScript+jQuery).zip-教育文档类资源-CSDN下载]
HTML, CSS, Javascript, jQuery之间的关系
1.CSS是HTML的搭档. 在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网页的表现形式(布局). CSS有一个优越的特性,即它可以对页面布局进行集中管理.也就 ...
HTML+CSS+JavaScript+JQuery
文章目录 1. HTML 1. html 的介绍 1.1 html的定义 1.2 html的作用 1.3 小结 2. html 的基本结构 2.1 结构代码 2.2 浏览网页文件 3. 初始常用的 h ...
Web前端开发HTML清华大学,清华大学出版社-图书详情-《Web前端开发——HTML5+CSS+JavaScript+ jQuery +Dreamweaver》...
前言 Web前端开发是网站开发方向重要的专业课程,随着市场对Web前端工程师的需求增加,国内很多本专科院校正在或准备开设该课程.本书是咸阳师范学院2016年教材建设资助项目. Web前端开发涵盖多门技 ...
HTML+CSS+javascript+jQuery面试题（31）
1.$()是什么? $符号是jQuery框架对外暴露的全局变量,是window对象的属性 $()代表jQuery核心函数,可接收一个函数.字符串.DOM元素. $(function(){});//推荐 ...
css+javascript+jquery+prototype+ajax+html5+iis+apache
CSS是为了统一HTML中各标识的显示属性而存在的. 它的特点就是:精简代码,加快网页访问速度,还有对于搜索引擎有好处. 有许多用HTML实现不了的想法,总结如下: 如何显示弹出框? 如何知道用户在使 ...
前端基础(HTML,CSS,JavaScript,jQuery)
文章目录 `HTML` 基础 `HTML`文件的基本结构标签属性转义字符元素之间的关系常用标签基本列表图片表格嵌套页面表单 `form`提交表单的属性: `GET`请求的特点 ` ...
Css JavaScript jquery 实现选项卡的制作
阅读目录 Css 源码源码解析 JavaScript 源码 JavaScript 源码解析 jQuery源码 jQuery 源码解析 Css 源码 <!DOCTYPE html> < ...

HTML/CSS+JavaScript+jQuery

HTML/CSS

html基础

css基础

css的三种使用样式

css的基本选择器

css的特征

标签

css的盒子模型

溢出的解决方式

背景图

浮动定位

position

js

初识js

js输出数据的方式

js的数据类型

JS获取DOM元素的方法

元素的操作

常用的js事件

对象的属性和方法

字符串

Number对象

Date

== 和 ===的区别

数组

数组的函数

js函数

动态时钟

正则表达式

正则表达式的创建

正则表达式相关的函数和方法

文档对象模型

节点的操作

BOM和DOM

事件

创建对象的三种方式

jquery

jquery

jquery对象

选择器

jquery函数

事件

学习心得

HTML/CSS+JavaScript+jQuery相关推荐

最新文章

热门文章