JAVAWEB开发-前端部分（01)

HTML

主要由head、body两部分组成

h1~h6 标题

div 段落

br 换行

tr>5*th>5*td 表格

hr 水平线

title 标题

img src地址 引入图片

span p 段落

form 表格

input:text,password,radio,checkbox,time,date,file,datetime-local,email,number,degree

几个特殊的input:hidden,submit,reset,button

select+option

<form action="" method="post">
    姓名：<input type="text" name="name"><br><br>
    密码：<input type="password" name="passward"><br><br>
    性别：<label><input type="radio" name="gender" value="1">男</label>
    <label><input type="radio" name="gender" value="2">女</label><br><br>
    爱好：<label><input type="checkbox" name="hobby" value="java">java</label>
    <label><input type="checkbox" name="hobby" value="game">game</label>
    <label><input type="checkbox" name="hobby" value="sing">sing</label><br><br>
    图像：<input type="file" name="image"><br><br>
    生日：<input type="date" name="birthday"><br><br>
    时间：<input type="time" name="time"><br><br>
    日期时间：<input type="datetime-local" name="datetime"><br><br>
    邮箱：<input type="email" name="email"><br><br>
    年龄：<input type="number" name="age"><br><br>
    学历：<select name="degree">
      <option value="">---------请选择---------</option>
      <option value="1">大专</option>
      <option value="2">本科</option>
      <option value="3">硕士</option>
    </select><br><br>
    描述：<textarea name="description" cols="30" rows="10"></textarea><br><br>
    <input type="hidden" name="id" value="1">
    <input type="submit" name="提交">
    <input type="reset" name="重置">
    <input type="button" name="按钮"><br>
  </form>

a 引用

<a href="https://www.cctv.com/" target="_blank">央视网

CSS

引入style 加入结构

id>class>一般类

id:#

class:.

盒子模型 

box-sizing： border-box

padding 内边距 上右下左

border 边框 宽度  线条 类型 yanse

margin 外边距 上右下左

  <style>
    div{
      width: 200px;
      height: 200px;
      box-sizing: border-box; /*指width height为盒子的高和宽*/
      background-color: aquamarine;/*背景色*/
      padding: 20px 20ox 20px 20px; /*内边距 上右下左*/
      border: 10px solid red;/*边框 宽度 线条类型  颜色*/
      margin: 30px 30px 30px 30px;/*外边距 上右下左*/
    }
  </style>

JAVAScript

语法和java类似

consolo.log/alter/document.write()

var + 任何类型

String:

        str.length\charAt()\trim()(去掉前后的空格）\substring()

也可以自定义类型

<script>
    var user = {
      name:"tom",
      age:20,
      gender : 'male',
      eat : function(){
        alert('用膳')
      }
    };
    console.log(user.name)
    user.eat()
  </script>

JSON

var js = '{"name":"tom","age":18,"addr":["北京","上海"]}'

var obj = JSON.parse(js)

setInterval 定时器

var i = 0//定时器
setInterval(function(){
    i++
    consolo.log("定时器执行了"+i+"次")
},2000)
setTimeout(function(){
    alter("js")
},3000) //每隔多久执行一次
alter(location.hred)

DOM

获取元素：

document.getElementsByClassName/getElementsByTagName/getElementById....

事件绑定

document.getElementById('2').onclick = function(){

alter('耶耶耶')

}

onclick\onkeydown\onsubmit\onmouseout\onmouseover