'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);
      }
    });