'html基本语法'

基本语法

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html> 声明为 HTML5 文档
<html> 是 HTML 页面的根元素
<head> 包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 描述了文档的标题
<body> 包含了可见的页面内容
<h1> ~ <h6> 定义标题大小
<p> 定义段落
<img>标签显示图片
<table>表格定义
通常第一行为<tr><th> 第二行之后为<tr><td>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<button></button>  勾选按钮
<button onclick="displayDate()">现在的时间是?</button>
//设置一个鼠标点击相应按钮

<h2 style="background-color:red;">这是一个标题</h2> 设置文字底色为红色

<a href="">百度</a> 网站链接
在<a>标签中设置target属性为_blank ,网站链接就会在新窗口打开

<img src=""> src指向图片位置,发送请求,携带cookie
<body bgcolor=""> 背景颜色bgcolor
<form action="http://www.baidu.com/s" method="get"> get请求百度
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

<input type="text" name="wd"> wd参数
<input type="submit" name="submit"> submit输入按钮(提交按钮)

<ul><li><li></ul> 无序列表,开头用·标记
<ol><li><li></ol> 有序列表,开头用数字标记

<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div> div标签将区域文字颜色变为蓝色 (属于块级元素)

<p>陶泥猴子<span style="color:bule;font-weight:bold">代码</span>好难啊</p>
而span标签将文本中的一部分进行编辑, 这里是将“代码”变为蓝色

对象查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
console 中的利用document.getElementById('id-1').href
查找id-1的参数
document.getElementByTagName('p')
查找p标签
标签元素所有内容都可以进行修改

<p style= "display:none"></p> 嵌入式隐藏

document.getElementById id查找
document.getElementById("uid").value //获取ID=uid的value值
document.getElementByTagName 标签名查找 //对象 里有各种 属性 .src 方法 .click()
document.getElementsByTagName("input").[0] //查看第一个input标签的元素
document.getElementByClassName 类名查找
innerHTML 修改文本
function (){alert(1);} 触发弹窗事件
displayData时间函数


createTextNode('hello word!'); 添加文本事件
addEventListener

required οnblur="checkPwd(this.value)"密码隐藏


var h1 = document.createElement('h1');创建标签h1
<h1></h1> //对象 所有属性都是空的,所有方法不能使用,只有把他加入到body中,方法才能使用,属性才生效
//document.getElementById('pid')属性,方法
var data = document.createTextNote(‘这是一个h1标签’)
p.appendChild(data);

document.body.appendChild(h1)才相当于把h1标签放到html中

JS

1
2
3
4
5
6
7
8
9
10
11
JS window
F12输入window
window.innerHeight
获取浏览器窗口内部高度
screen.availWidth获取可用屏幕宽度
screen.availHeight获取可用屏幕高度

location.host

document.cookie获取cookie
setInterval(function (){alert(1)},5000)

jQuery

1
2
3
4
5
6
7
8
9
jQuery是一个JS库,90%网站都使用jQuery

${'img'} 标签
$('#imgid') id
$('#imgclass') class
$('#imgid')[0].src 查看src元素

$('#imgid').hide() 隐藏
$('#imgid').show() 显示

ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
AJAX,后台与服务器数据少量交换,使网页异步更新,创建快速动态网页的技术
$.get('https://www.baidu.com/get/');
$.post('https://www.baidu.com/post',{
name:"菜鸟教程",
url:"http://www.runoob.com"
})
$('input') //查找所有value
// onchange

$.ajax({
type: 'POST',
url: 'http://www.baidu.com/api/user/info',
dataType: 'json',

data: {
args: "value",
},

xhrFields: {
withCredentials:true //支持附带详细信息,可以携带cookie
},

crossDomain: true, //请求偏向外域,支持跨域请求
success: function (data) {
console.log(data);
}
});

$.ajax({
type: 'GET',
url: 'http://www.baidu.com/s',
dataType: 'json',

xhrFields: {
withCredentials:true
},
crossDomain: true,
success: function (data) {
console.log(data);
}
});