JavaWeb-前端开发-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaWeb-前端开发。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

web标准

三个组成部分

HTML：负责网页的结构

CSS：负责网页的表现

JavaScript：负责网页的行为

HTML

超文本标记语言，

超文本：超越了普通文本，可以定义视频，音频，图片

标记语言：由标签构成的语言

<html>
   <head>
       <title>HTML</title>
   </head>
   <body>
       <h1>Hello html!</h1>
       <img src="1.jpeg"/>
   </body>
</html>

html不区分大小写，不区分双引号单引号，语言结构较为松散

结构标签：

最外层是html

里面有head和body

<!--

src:资源路径

width：宽度

height：高度

路径的指定方式：

绝对路径：

绝对磁盘路径

绝对网络路径

推荐相对路径

相对路径

./: 当前目录，可省略

../: 上一级目录

-->

水平线标签：hr

标题标签：h1-h6

CSS

层叠样式表，控制网页的样式

引入方式

行内样式：写在标签的style属性中

内嵌样式：写在style标签中（通常写在head中）

外嵌样式：写在一个单独的.css文件中

<link rel="stylesheet" href="./css/news.css">

</head>

<body>

<img src="../HTML/1.jpeg"width="100px"> 我是慧慧！

颜色表示形式

关键字

rgb

十六进制表示法

text-align属性对齐方式

center left right

CSS选择器：用来选取需要设置样式的元素

元素选择器

元素名称：{

}

id选择器

#id属性值{

}

类选择器

class属性值{

}

超链接

标签

href:指定资源访问的url

target：指定在何处打开资源连接

_self：默认值当前页面打开

_blank：在空白页打开

正文排版

视频标签<video>

src:url

controls:显示播放控件

width height..

音频标签<audio>

src:url

controls:播放控件

段落标签：<p>.

文本加粗：<b> / <strong>.

整体页面布局

css盒子模型

页面中所有的元素都可以看做一个盒子

盒子模型组成：内容区域content 内边距区域padding 边框区域border 外边距区域margin

标签

<div>

一行只展示一个（独占一行）

宽度默认是父元素的宽度、

可以设置宽高

<span>

一行显示多个

不可设置宽高

<style>

div {

width: 200px;

height: 200px;

box-sizing: border-box;

background-color: aquamarine;

/* 背景色 */

padding: 20px 20px 20px 20px;

/* 内边距上右下左 */

border: 10px solid red;

/* 边框宽度线条类型颜色 */

margin: 30px 30px 30px 30px;

/* 外边距 */

}

</style>

表格标签

<table>定义表格整体，可以包裹多个<tr>

border:边框宽度

width:宽度

cellspacing：空间

<tr>：行里面包括多个<td>

<td>表格单元格

JavaScript

JS，跨平台，面向对象，脚本语言

Js的引入方式

内部脚本：将js代码定义在html页面

js代码必须位于<script></,,>标签之间

在html文档中，可以在任意地方，放置任意数量的<script>

一般会把脚本置于<body>元素的底部

<script>

alert("hello Js!")

</script>

外部脚本：将js定义在js文件中，然后引入

<script src="js/demo.js"></script>

js的基础语法

区分大小写

大括号表示代码块

结尾分号可有可无

注释和Java一样

输出语句

window.alert()

document.wirte()

console.log()

变量

用var关键字声明

/* //var 定义变量

var a = 10;

a = "张三"

alert(a);

特点一

作用域特别大，全局变量

特点二

可以重复定义

*/

let关键字与var一样，但是不能重复声明，不是全局变量

const关键字定义一个常量，不能被改变

数据类型

原始类型和引用类型

undefined：定义变量未声明，就是undefined

使用typeof运算符获取数据类型

类型转换

其他类型转换为数字parseInt()：如果不是数字，返回NaN

其他类型转换为布尔

0和NaN false

空字符串false

空，未定义为false

函数

function 函数名(参数。。){

函数体

}

返回值无所谓

js对象

Array

定义数组

var 变量名=[1,2,3,4];

访问与Java一样

方法！

forEach()遍历

arr.forEach(function(e){

console.log(e)

})

push()

添加

splice()

删除:两个参数从哪个索引开始删除，删除几个

String

charAt()

indexOf()

trim()

subString()

JSON

js中自定义对象

定义格式

var 对象名={

属性1：属性值1

.。。

函数名称：function(){

}

<script>

var user = {

name: "小小",

age: 10,

gender: "famale",

/* eat: function () {

alert(this.name + "要吃baba")

} */

eat(){

alert("xixi")

}

}

user.eat();

</script>

JSON介绍

JavaScript Object Notation，Js对象标记法

JSON是通过js对象标记法书写的文本

{

键值对。。

}；

键值对中键必须是字符串类型，值任意

如果值是数组，存在方括号中，值是对象，存在花括号中

定义JSON

var 变量名='{"key1":value1,"key2":value2}'

//定义JSON

var jsonStr = '{ "name": "Tom","age"=18,"addr"=["北京","上海"]}';

JSON字符串转为JS对象

var jsObject=JSON.parse(jsonStr)

JS对象转为JSON字符串

var jsonStr=JSON.stringify(jsObject)

//定义JSON

var jsonstr = '{ "name": "Tom", "age"=18," addr"=["北京","上海"]}';

alert(jsonstr.name);

//json 格式的字符串转化为js对象

var obj = JSON.parse(jsonstr);

alert(obj.name);

alert(JSON.stringify(obj));

BOM

概念：浏览器对象模型，允许js与浏览器对话，js将浏览器的各个组成部分封装为对象

Window:浏览器窗口对象

属性：

history

location

navigator

方法

alert()

confirm()显示带有一段消息以及确认按钮和取消按钮的对话框

//获取

window.alert("hello bom");

alert("hello bom window");

//方法

//confirm-对话框

var flag = confirm("您确认删除？");

alert(flag);

setInterval() 按照指定的周期来调用函数或者计算表达式

setTimeout()在指定的毫秒数后调用函数或者计算表达式

//定时器-setInterval-周期执行一次

i = 0;

setInterval(function () {

i++;

console.log("定时器执行了" + i + "次")

}, 2000)

//定时器-setTimeout-延迟指定时间执行一次

setTimeout(function(){

alert("你是猪")

},2000)

获取：直接使用window，其中window.可省略

Location：地址栏对象

href：设置或者返回完整的url

location.href="https://www.123.cn"

DOM

文档对象模型

将标记语言的各个部分封装为对应的对象

分为三个部分

1.Core DOM

Document:整个文档对象

Element：元素对象

Doucument对象提供了许多获取e对象的函数