文章目錄
- 一,模擬 服務器決議瀏覽器發來的資料
- 二,CSS選擇器
- --1,概述
- --2,簡單選擇器測驗
- --3,分組選擇器 屬性選擇器
- 三,綜合練習
- --0,盒子模型
- --1,用戶注冊
- --2,優化HTML / CSS,實作松耦合
- 創建css檔案
- 修改html檔案
- 四,JavaScript
- --1,概述
- --2,入門案例
- --3,測驗
- 作業:
- --1,利用HTML 和 CSS技術 完成制作小票
一,模擬 服務器決議瀏覽器發來的資料
package cn.tedu.test2;
public class TestUrl {
public static void main(String[] args) {
//1,接受用戶發來的資料
String url = "http://127.0.0.1:8848/cgb2107/student.html?user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day=2021-09-03";
//按照?切割字串
String[] a = url.split("\\?");
//[http://127.0.0.1:8848/cgb2107/student.html,
//user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day=2021-09-03]
//只獲取陣列里的第二部分
String data = a[1];
//繼續切,用&切
String[] b = data.split("&");
//[user=jack,age=18,sex=1,hobby=1,hobby=2,hobby=3,xueli=2,day=2021-09-03]
//回圈b陣列
for(String s : b){//獲取到每一組資料user=jack,age=18
String[] c = s.split("=");//把每組資料按照=切割 [age,18]
String datas = c[1];//只取=后面的資料c[1]
System.out.println(datas);
}
}
}
二,CSS選擇器
–1,概述
CSS提供的一種方式,可以方便的選中網頁中的各種元素.
常用的選擇器: 簡單選擇器(標簽名,id,類) 分組選擇器 屬性選擇器
–2,簡單選擇器測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 CSS的選擇器</title>
<style>
/* 1.標簽名選擇器:按照標簽的名字 選中元素 */
h1{/* 給h1設定字的顏色 */
color: #00FFFF;
}
/* 2.類選擇器:按照class屬性的值 選中元素
先給元素加class屬性 + 通過.獲取class的值
*/
.a{ /* 選中網頁中class=a的元素 */
font-family: "黑體"; /* 字體 */
font-style: oblique; /* 字體傾斜 */
font-size: 30px; /* 字號 */
}
.b{/* 選中網頁中class=b的元素 */
/* 文字陰影 水平陰影 垂直陰影 模糊程度 陰影顏色 */
text-shadow: 2px 2px 5px red;
}
/* 3. id選擇器:按照id屬性的值(唯一) 選中元素
先給元素加id屬性 + 通過# 獲取id的值
*/
#div1{
opacity: 0.5;/* 設定不透明度,0~1,越小越透明 */
}
</style>
</head>
<body>
<div>我是div2</div>
<div class="a">我是div3</div>
<div id="div1">我是div4</div>
<span>我是span1</span>
<span class="b a">我是span2</span>
<span>我是span3</span>
<h1>我是h1</h1>
<h1>我是h2</h1>
<h1>我是h3</h1>
</body>
</html>
–3,分組選擇器 屬性選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的 高級選擇器</title>
<style>
/*1.分組選擇器:選中一批元素分成一組,統一設定樣式 */
div,span{/* 把所有div和span設定字體顏色 */
color:red; /* 字的顏色 */
font-family: "微軟雅黑"; /* 字體*/
font-size: 20px; /* 字號*/
background-color: #00FFFF; /* 背景色 */
}
/* 2. 屬性選擇器: 通過標簽的屬性選中元素 */
a[href]{ /* 選中有href屬性的a標簽*/
color: #008000; /* 字的顏色*/
}
/* 選中type=text的input設定背景色 */
input[type="text"]{
background-color: #008000;
}
.m{
color: red;
}
.n{
color: green;
text-indent: 200px; /* 首行縮進*/
}
</style>
</head>
<body>
<p class="m n">123</p>
<input type="button" value="按鈕"/>
<input type="text" />
<input type="number" />
<input type="password" />
<a href="#">點我一下1</a>
<a>點我一下2</a>
<a>點我一下3</a>
<div>我是div1</div>
<div>我是div2</div>
<span>我是span1</span>
<span>我是span1</span>
</body>
</html>
三,綜合練習
–0,盒子模型
CSS把網頁里的每個元素都當做一個盒子來看.
外邊距: 盒子間的距離margin
內邊距: 一個盒子里, 內容和邊框的距離padding
寬width/高height/邊框border: 一個盒子里的
<!--margin設定外邊距-->
<input type="radio" name="sex" value="1" style="margin-left:30px;"/>男2
<input type="radio" name="sex" value="1" style="margin-right:30px;"/>男3
<input type="radio" name="sex" value="1" style="margin-top:30px;"/>男4
<input type="radio" name="sex" value="1" style="margin-bottom:30px;"/>男5
<!--padding設定內邊距padding-left左邊距 padding-top上邊距 padding-bottom下邊距-->
<input type="text" placeholder="你好0" style="padding:20px;"/>
<input type="text" placeholder="你好1" style="padding-left:20px;"/>
<input type="text" placeholder="你好2" style="padding-top:20px;"/>
<input type="text" placeholder="你好3" style="padding-bottom:20px;"/>
–1,用戶注冊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 用戶注冊</title>
<style>
/* 1.修飾輸入框 */
.a{
padding:10px;/* 內邊距 */
width: 300px;/* 寬度 */
height:30px;/* 高度 */
font-size:20px;/* 文字大小 */
}
/* 2.修飾提示文字 */
.b{
font-size:8px;/* 字號 */
color: #999999;/* 字的顏色 */
padding: 10px;/* 內邊距 */
}
/* 3.修飾 我已閱讀 */
#c{
margin: 10px; /*外邊距 */
text-indent:40px ;/* 首行縮進 */
font-size: 8px;/* 文字變小 */
}
/* 4.修飾 立即注冊按鈕 */
input[type="submit"]{
width: 320px;/* 寬度 */
height: 50px;/* 高度 */
background-color: tomato;/* 背景色 */
border-color:tomato ;/* 邊框顏色 */
color: white;/* 文字顏色 */
font-size: 25px;/* 字體大小 */
text-align: center;/* 文字居中 */
}
/* 修飾用戶注冊居中 */
h2{
text-indent:100px;/* 文本縮進 */
}
</style>
</head>
<body>
<form method="post" action="#">
<table>
<tr>
<td>
<h2>用戶注冊</h2>
</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="用戶名" name="user"/>
</td>
</tr>
<tr>
<td class="b" >支持中文、字母、數字、“-”、“_”的組合，4-20個字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="設定密碼" name="pwd"/>
</td>
</tr>
<tr>
<td class="b" >建議使用數字、字母和符號兩種以上的組合，6-20個字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="確認密碼" name="repwd"/>
</td>
</tr>
<tr>
<td class="b" >兩次密碼輸入不一致</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="驗證手機" name="tel"/>
或 <a href="#">驗證郵箱</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="c"/>
我已閱讀并同意
<a href="#">《京淘用戶注冊協議》</a>
</td>
</tr>
<tr>
<td>
<input type="submit" value="立即注冊"/>
</td>
</tr>
</table>
</form>
</body>
</html>
–2,優化HTML / CSS,實作松耦合
創建css檔案
/* 1.修飾輸入框 */
.a{
padding:10px;/* 內邊距 */
width: 300px;/* 寬度 */
height:30px;/* 高度 */
font-size:20px;/* 文字大小 */
}
/* 2.修飾提示文字 */
.b{
font-size:8px;/* 字號 */
color: #999999;/* 字的顏色 */
padding: 10px;/* 內邊距 */
}
/* 3.修飾 我已閱讀 */
#c{
margin: 10px; /*外邊距 */
text-indent:40px ;/* 首行縮進 */
font-size: 8px;/* 文字變小 */
}
/* 4.修飾 立即注冊按鈕 */
input[type="submit"]{
width: 320px;/* 寬度 */
height: 50px;/* 高度 */
background-color: tomato;/* 背景色 */
border-color:tomato ;/* 邊框顏色 */
color: white;/* 文字顏色 */
font-size: 25px;/* 字體大小 */
text-align: center;/* 文字居中 */
}
/* 修飾用戶注冊居中 */
h2{
text-indent:100px;/* 文本縮進 */
}
修改html檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 用戶注冊</title>
<!-- 引入外部的css檔案
href屬性用來指定檔案的位置
rel屬性用來指定檔案的型別
-->
<link href="1.css" rel="stylesheet"/>
</head>
<body>
<form method="post" action="#">
<table>
<tr>
<td>
<h2>用戶注冊</h2>
</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="用戶名" name="user"/>
</td>
</tr>
<tr>
<td class="b" >支持中文、字母、數字、“-”、“_”的組合，4-20個字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="設定密碼" name="pwd"/>
</td>
</tr>
<tr>
<td class="b" >建議使用數字、字母和符號兩種以上的組合，6-20個字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="確認密碼" name="repwd"/>
</td>
</tr>
<tr>
<td class="b" >兩次密碼輸入不一致</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="驗證手機" name="tel"/>
或 <a href="#">驗證郵箱</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="c"/>
我已閱讀并同意
<a href="#">《京淘用戶注冊協議》</a>
</td>
</tr>
<tr>
<td>
<input type="submit" value="立即注冊"/>
</td>
</tr>
</table>
</form>
</body>
</html>
四,JavaScript
–1,概述
是弱型別的語言, 是基于物件和事件驅動的腳本語言
基于物件: JS和java一樣,也有物件的概念,也提供了一些內置的物件,也可以自定義物件
事件驅動: JS里有很多的事件, 當事件被觸發時才執行JS代碼. 常用的事件:滑鼠滑過/單擊/雙擊/滑鼠懸停
腳本語言: JS是一個弱型別,被瀏覽器執行的語言. 只要有瀏覽器的地方都可以執行JS
好處: 是直譯式的語言,增強了用戶和瀏覽器之間的互動性.
使用位置:
1,行內JS: 只能作用在一行
2,內部JS: 通常在head標簽里,使用script標簽,把JS的代碼包起來
3,外部JS: 松耦合,單獨創建一個js檔案,可以被引入到各種網頁中
–2,入門案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 JavaScript</title>
<!-- 2.內部js -->
<script>
alert('我來了')
</script>
</head>
<body>
<!-- 1.行內JS -->
<!-- 單擊事件,div時彈出100 -->
<div onclick="alert(100)">我是div1</div>
<!-- 雙擊事件,div時彈出你好 -->
<div ondblclick="alert('你好')">我是div2</div>
<!-- 滑鼠進入事件,div時彈出200 -->
<div onmouseenter="alert(200)">我是div3</div>
</body>
</html>
–3,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 JavaScript</title>
<!-- 2.內部js -->
<script>
//JS的資料型別:number string null boolean undefined
alert(2.4+3.6); //number型別的運算,會自動型別轉換
alert('hello js'); //string型別
alert("hello js"); //string型別
alert(true); //boolean型別
alert(false); //boolean型別
alert(null); //null型別
</script>
</head>
<body>
<!-- 1.行內JS -->
<!-- 單擊事件,div時彈出100 -->
<div onclick="alert(100);">我是div1</div>
<!-- 雙擊事件,div時彈出你好 -->
<div ondblclick="alert('你好');">我是div2</div>
<!-- 滑鼠進入事件,div時彈出200 -->
<div onmouseenter="alert(200);">我是div3</div>
</body>
</html>
作業:
–1,利用HTML 和 CSS技術 完成制作小票
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297322.html
標籤：其他