目标本月完成JavaWeb学习，每天将学习内容上传打开
一.HTML
常见的标签（3.4）
标题：h1 h2 h3 h4 h5 h6
段落：p
换行：br直接换行 hr带水平线换行
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<p>我是段落</p>
<p>这是一个很长很长的段落，它需要不断的换行换行，一直换</p>
<p>这是一个很长很<br />长的段落，它需要不<hr />断的换行换行，一直换</p>
（3.5）
列表标签： ol有序列表 ul无序列表 li列表项
超链接标签： a 属性href 连接的地址 target 打开方式 _self 在原界面打开 _blank在新的界面打开
绝对路径
相对路径
图片标签：img 属性 src：图片的位置 title：鼠标移动到那位置时显示的文字 alt：加载失败时显示的文字
表格标签：table thread tbody tfoot th tr td 跨行 跨列 rowspan colspan
表单标签： form action： 提交的地址 url 绝对路径 相对路径
method： 提交方式 get post 默认为get
get url?key=value&key=value
表单项标签 必须要有name信息
<ol>
<li>张三</li>
<li>李四</li>
<li>赵五</li>
</ol>
<ul>
<li>书山有路勤为径</li>
<li>山重水复疑无路</li>
<li>天长地久有时尽</li>
</ul>
<a href="https://www.zhibo8.com" target="_self">点我去直播吧</a>
<img src="/img/1.jpg" title="hello" alt="握不住" />
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table border="1px" style="margin: 0px auto; width: 300px;" >
<thead>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
<th>备注</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>97</td>
<td rowspan="4"></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>95</td>
</tr>
<tr>
<td>3</td>
<td>赵五</td>
<td>93</td>
</tr>
<tr>
<td>总人数</td>
<td colspan="2"> </td>
</tr>
</tbody>
</table>
<form action="./08_weicome.html">
用户名<input type="text"> <br>
密码<input type="password"> <br>
<button type="submit" value="提交">点我提交</button>
</form>
（3.6）
get与post方法
post方法：参数以键值对形式提交url?key=value&key=value，与post相对较快
get方法：与post相比相对安全。也更适合参数多的情况下
表单常用标签
input type=“text” 文本
type=“password” 密码
type=“radio” 单选框 name值要一致，value值设定为不同，默认选择使用checked
type=“checkboxd” 复选框 name值要一致，value值设定为不同
type=“hidden” 隐藏框 界面上不显示，实际存在
type=“file” 文件
textarea 多行文本框
select 选择框 option为选项 默认显示可以用selected
<form action="./08_weicome.html">
用户名<input type="text" name="user"> <br>
密码<input type="password" name="password"> <br>
性别<input type="radio" value="1" name="gender">男
<input type="radio" value="0" name="gender">女<br>
爱好：
<input type="checkbox" name="hobby" value="1">篮球
<input type="checkbox" name="hobby" value="2">足球
<input type="checkbox" name="hobby" value="3">游泳
<input type="checkbox" name="hobby" value="4">乒乓球<br>
<input type="hidden" name="id" value="123"><br>
<input type="text" name="pid" value="456" readonly><br>
个人简介：
<textarea name="describe"></textarea><br>
籍贯:
<select name="birth_place">
<option value="1">福州</option>
<option value="2"> 泉州</option>
<option value="3">厦门</option>
<option value="4">宁德</option>
<option value="5">莆田</option>
<option value="0" selected>请选择</option>
</select><br>
选择头像：
<input type="file">
<button type="submit" value="提交">点我提交</button>
<input type="text">
</form>
布局相关的标签 div行元素 span块元素
特殊字符 类似< :< >:>
二.CSS
1.三种引入方式
1）行内式
2）内嵌式
3）外联式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*元素选择器*/
input{
width: 60px;
height: 40px;
background-color: yellowgreen;
border: 1px solid red;
color: white;
border-radius: 5px;
}
</style>
<link href="" rel="stylesheet">
</head>
<body>
<!--
引入方式：
方式1：行内式 通过style属性引入
方式2：内嵌式 通过选择器引入
<input type="button" value="按钮"
style="width: 60px;
height: 40px;
background-color: yellowgreen;
border: 1px solid red;
color: white;
border-radius: 5px;
">
-->
<input type="button" value="按钮" >
</body>
2.三大选择器
类选择器 以.class开头{}
元素选择器 以元素名开头{}
id选择器 以#id值开头
<style>
/*元素选择器 元素名{}
input{
width: 60px;
height: 40px;
background-color: yellowgreen;
border: 1px solid red;
color: white;
border-radius: 5px;
}*/
/*id选择器 一个页面中，id值应该要有唯一性
#btn1,#btn3{
width: 60px;
height: 40px;
background-color: yellowgreen;
border: 1px solid red;
color: white;
border-radius: 5px;
}*/
/*类选择器*/
.mett{
width: 60px;
height: 40px;
background-color: yellowgreen;
border: 1px solid red;
color: white;
border-radius: 5px;
}
</style>
3.10
JS的引入
1）直接在头文件添加
<style>
.btn1{
width: 150px;
height: 40px;
font-size: 24px;
font-family: "隶书";
border: 1px solid red;
border-radius: 5px;
background-color: yellow;
}
</style>
<!-- <script>
function suprise(){
alert("Hello 我是惊喜")
}
</script> -->
<script src="..." type="text/javascript"></script>
JS数据类型
js中变量类型声明全部使用var
js不是没有类型，而是弱类型，是变量声明时不指定类型，赋值时指定类型
var i = 10
var str = "abcd"
console.log(i)
console.log(str)
JS常用的运算符
算术运算符 + = * / %
符合运算符 ++ – += -= *= /= %=
关系运算符 > >= < <= != == ===
逻辑运算符 || &&
条件运算符 ? : ;
位运算符 | & ^ >> <<
JS常用的分支结构
类似java的if else switch组合
var month = prompt("请输入月份")
if(month == 11 || month == 12 || month == 1){
console.log("冬天太冷了")
}else if(month == 2 || month == 3 || month == 4){
console.log("春天花会开")
}else if(month == 5 || month == 6 || month == 7){
console.log("夏日炎炎似火烧")
}else if(month == 8 || month == 9 || month == 10){
console.log("秋高气爽")
}
循环结构，类似java
// for(var i = 1;i <= 9;i++){
// for(var j = 1;j <= i;j++){
// document.write(i + " * " + j + " = " + (i*j) + " ")
// }
// document.write("<br />")
// }
var arr = ["abc","def","hij"]
// for(var i =0;i <arr.length ;i++){
// document.write(arr[i] + " ")
// }
// console.write("<hr>")
for(var str in arr){
document.write(arr[str]+ " ")
}
3.11
函数声明的语法
function 函数名(){}
var 函数名 = function(){}
与java相比，不需要返回值，参数不需要变量类型
function sum(a,b){
return a + b
}
创建对象的语法:
方式1:new object()
方式2:{属性名:属性值,......,函数名:function(){}}
var person = new Object();
//添加属性
//添加方法
person.name = "张三"
person.age = 12
person.eat = function(food){
console.log(this.name + "正在吃" + food)
}
console.log(person.name)
console.log(person.age)
console.log(person.eat)
var per = {
name:李四,
age:12,
eat:function(){ console.log("我爱吃饭")}
}
JSON格式 一个特定的字符串格式
var obj = “{‘属性名’:‘属性值’,‘属性名’:‘属性值’,‘属性名’:‘属性值’,‘属性名’:‘属性值’}”
var personStr = '{"name":"张三","age":15,"dog":{"dname":"小花"},"loveStats":["张晓明","李小白","贾仁万"],"friend":[{"fname":"小东"},{"fname":"小李"}]}'
console.log(personStr)
console.log(typeof(personStr))
//通过JSON.parse()可以将JSON串转换为一个对象
var person = JSON.parse(personStr)
console.log(person.name)
//将字符串转换为JSON JSON.stringify
var personStr2 = JSON.stringify(person)
扫一扫
1170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
