html
-
什么是html
- 超文本標記語言，用于網站開發。
-
html運用于什么場景
- 手機端和原生代碼結合處理業務邏輯，加快開發速度，節約維護成本，效率高。
-
html5相比之前有什么進步
- 標準統一，所以瀏覽器都可以打開閱讀且效果一致。
塊標簽
- 特征：
- 獨占一行，換行顯示，可以設置寬高，塊可以套塊和行
- 新起一行開始 一般可以包含多行
- div
- 定義：
- 一個沒有修飾的容器
- 空白區域，內部可以添加塊屬性和行屬性標簽
- 定義：
代碼如下
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
效果如圖：
div.png
- h1-h6
- 標題，從1-6依次變小變細
代碼如下：
<h1>我是h1標簽</h1>
<h2>我是h2標簽</h2>
<h3>我是h3標簽</h3>
<h4>我是h4標簽</h4>
<h5>我是h5標簽</h5>
<h6>我是h6標簽</h6>
效果如下：
h1-h6.png
- p（ 段落）
- 有P標簽的時候會自動換行且行距比較大
代碼如下：
<p>我是p標簽</p>
<p>我是p標簽</p>
<p>我是p標簽</p>
效果如圖：
P標簽.jpg
- br
- （換行）
- ol
- 有序列表，只有一列的表格并且有序
- 每一行前面有數字和點表示 eg: 1. 2. 3.`</pre>
- ul
- 無序列表，只有一列的表格且無序
- 每一行前面有一個圓點
代碼如下：
<ol>
<li>我是有序列表第一行</li>
<li>我是有序列表第二行</li>
<li>我是有序列表第三行</li>
</ol>
<ul>
<li>我是無序列表第一行</li>
<li>我是無序列表第二行</li>
<li>我是無序列表第三行</li>
</ul>
效果如下：
有\無序列表.jpg
- dl
- 定義列表
- 比如詞典里面的詞的解釋或定義就可以用這種列表
代碼如下：
<dl>
<dt>喬布斯</dt>
<dd>喬布斯他是一個。。。等等等</dd>
</dl>
效果如下：
dl\dt\dd.jpg
- table (表格)
代碼如下：
<table>
<tr>(行）
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>今天很好</td> (列)
<td>今天也很好</td>
<td>今天都很好</td>
</tr>
</table>
效果如下：
## 行標簽
- 在行內顯示，內容撐開寬高，不可以設置寬高（img、input除外），行只能套行
- 不新起一行
- 一般只含有行標簽
- span
- 無語義標簽，類似div
```html
代碼如下：
<span>這是一個span</span>
效果如圖：
span.jpg
- a
- 定義超鏈接，用于從一張頁面鏈接到另一張頁面（網址）
代碼如下：
<a >百度一下</a>
效果如圖：
百度一下，你就知道.png
- img
- 定義圖片，用于在頁面中顯示圖片
代碼如下：
<img src="img\\考拉.jpg" alt="顯示失敗">
- var &em（斜體）
- strong（更強的強調)顯示為 粗體
- <strong>粗體</strong>
- b（加粗）
- <b>粗體</b>
- textarea
- 文本框
代碼如下：
<textarea>這是一個文本框</textarea>
效果如下：
textarea.png
- input
輸入框，屬性有type name value
后綴六種type 分別：
text(輸入）
password（密碼）
代碼如下：
<input type="text">
<input type="password" alt="" value="密碼">
效果如下：
text password.png
- radio（單選）
- checkbox（多選）
代碼如下：
<input type="radio" name="1" value="">
<input type="radio" name="1" value=""><br>
<input type="checkbox" name="" value="888">
<input type="checkbox" name="" value="999">
效果如圖：
radio checkbox.png
- button（按鈕）
- submit（提交）
代碼如下：
<input type="button" name="" value="">
<input type="button" name="" value="確定"><br>
<input type="button" name="" value="取消">
<input type="submit" name="" value="提交">
<input type="submit" name="" value="123">
效果如圖：
button submit.png
- select
- 定義選擇列表（下拉列表）
- option
- 定義選擇列表的選項
代碼如下：
<select>
<option>第一項</option>
<option>第二項</option>
<option>第三項</option>
</select>
效果如圖：
下拉選框.png
CSS
-
什么是CSS
- (cascading style sheet)的縮寫，可譯為層疊樣式表，用于控制web頁面的外觀
-
CSS的特點
- 頁面內容與表現形式分離，也可將css單獨存放在另一個css文件中
- 可很好的控制頁面的布局
- 提高網頁加載速度
- 降低服務器成本
- 呈現一致的效果
-
css 的引入方式
- 外部引入（頁外），
- 頭部引入
- 標簽內引入
-
css常用選擇器
- ID選擇器 #
- 類選擇器 .
- 標簽選擇器
- 群組選擇器
- 后代選擇器
-
css的引入方式
- 在標簽內直接引入，直接在標簽里面加style樣式
<body>
<h2>css<h2>
<p style="color:red">用于控制web頁面的外觀</p>
</body>
- head 頭部引入 （在head部分加入<style>標簽）
js
-
什么是JS
- JavaScript 是一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，在HTML網頁上使用，用來給HTML網頁增加動態功能。
-
JS引入方式常用兩種
- 頁內引入<script type="javascript">
- 頁外引入<script src=" "> </script>
基本語法
<script type="text/javascript">-
1 輸出
- 1， 彈框
- alert('helloWorld!')- 2，顯示在網頁中
- document.write('helloWorld!')
- 2，顯示在網頁中
- 3，顯示在控制臺中（主要用于調試程序 經常用到)
- console.log('helloWorld!')
- 1， 彈框
-
2 變量
- （什么是變量）變量的三個組成條件
- 是一塊內存空間 包含三個屬性：變量名 變量類型 數據
- 變量名：自己定義 無空格、不能以數字開頭的字符串
- 變量類型：JS中主要包含以下類型
- number：數字類型（包含小數和整數，不限長度,用于計算）
- string: 字符串（一般值都是用單引號包含''）
- boolean:布爾類型（只有兩個值，真或者假 用true 和 false）
- null:空 （表示沒有數據，不是零）
var a = 1;
var b = 1.23;
var c = 'lorisong';
var d = '1.2';
var e = true;
console.log(a,b,c,d,e);
console.log(typeof a,typeof b,typeof c,typeof d,typeof e);
兩個數字計算
eg: 除號分兩種 /:兩個數相除的結果 %：兩個數相除取余
var num1 = 4;
var num2 = 3;
var sum = num1 % num2;
console.log(sum);
- 基本語法 2 `判斷
- 情況1
var num1 = 123;
var num2 = 124;
if (num1>num2){
console.log(num1);
}else{
console.log(num2);
}
情況2
var num1 = 1;
var num2 = 1;
if (num1>num2){
console.log(num1);
}else if(num1==num2){
console.log('num1和num2相等');
}else{
console.log(num2);
}
-
循環
第一段：定義計數器 第二段：循環需要滿足的條件 第三段：每次循環后進行的操作
1到100的和
var sum = 0;
for(var i =1 ;i<101;i++ ){
sum = sum+i;
}
console.log(sum);
1到200之間的偶數和
var sum = 0;
for (var i= 1;i<201;i++){
if(i%2==0){
sum = sum +i;
}
}
console.log(sum);
1539各個數位上的數字
var num = 3453;
var gewei = 0;
var shiwei = 0;
var baiwei = 0;
var qianwei = 0;
gewei = num%10;
shiwei = parseInt(num /10)%10;
baiwei = parseInt(num/100)%10;
qianwei = parseInt(num/1000)%10;
console.log('個位是'+gewei,'十位是'+shiwei,'百位是'+baiwei,'千位是'+qianwei );
求一千以內的水仙花數
各個位數上的數字的立方和等于他本身
for(var i=1 ;i<1000;i++){
var baiweishu=parseInt(i/100);
var shiweishu=parseInt(i/10)%10;
var geweishu=i%10;
console.log(baiweishu);
if(baiweishu*baiweishu*baiweishu+shiweishu*shiweishu*shiweishu+geweishu*geweishu*geweishu==baiweishu*100+shiweishu*10+geweishu){
console.log(i+'是水仙花數');
}
}
比三個數的大小
var num1 = 1231;
var num2 = 12422;
var num3 = 125;
if(num1>num2){
if(num1>num3){
if(num2>num3){
console.log(num1,num2,num3)
}else{
console.log(num1,num3,num2)
}
}else{
console.log(num3,num1,num2)
}
} else{
if(num2>num3){
if(num1>num3){
console.log(num2,num1,num3)
}else{
console.log(num3,num2,num1)
}
}else{
console.log(num3,num2,num1)
}
}
switch case
輸入1-7的任意整數，然后輸出對應的星期一-星期日
if else 方法
if(input == 1){
console.log('星期一');
}else if(input == 2){
console.log('星期二');
}else if(input ==3){
console.log('星期三');
}else if(input ==4){
console.log('星期四');
}else if(input ==5){
console.log('星期五');
}else if(input ==6){
console.log('星期六');
}else if(input ==7){
console.log('星期日');
}
switch case方法
var input = 3;
switch (input){
case 1:console.log('星期一');break;
case 2:console.log('星期二');break;
case 3:console.log('星期三');break;
case 4:console.log('星期四');break;
case 5:console.log('星期五');break;
case 6:console.log('星期六');break;
case 7:console.log('星期日');break;
default :console.log('輸入有誤');
}
一次考試，老師要求90-100的學生評定為A；80-89的評定為B------0-59的評定為E
輸入學生成績 輸出他的評定等級
var input = 200;
var shiweishu = parseInt(input/10);
switch (shiweishu){
case 10:console.log('A');break;
case 9:console.log('A');break;
case 8:console.log('B');break;
case 7:console.log('C');break;
case 6:console.log('D');break;
case 5:console.log('E');break;
case 4:console.log('E');break;
case 3:console.log('E');break;
case 2:console.log('E');break;
case 1:console.log('E');break;
case 0:console.log('E');break;
default: console.log('輸入有誤');
}
- boolean
var isloopyear = false;
var year = 1872;
if(year%100==0){
if(year%400==0){
isloopyear = true;
}else{
isloopyear = false;
}
}else{
if(year%4==0){
isloopyear = true;
}else{
isloopyear = false;
}
}
if(isloopyear){
console.log('是閏年');
}else{
console.log('不是閏年');
}
------while
var sum = 0;
for (var i = 0 ;i<101 ;i++){
sum+=i;
}
var i = 0;
while(i<101){
sum+=i;
i++;
}
console.log(sum);
- while(循環條件){循環體}
- 當循環條件不確定的時候（不確定具體什么時候結束循環）
求2-1000之間的最小的水仙花數
for (var i = 2 ; i <1000 ;i++){
var geweishu = i%10;
var shiweishu = parseInt(i/10)%10;
var baiweishu = parseInt(i/100) ;
if(geweishu*geweishu*geweishu +shiweishu*shiweishu*shiweishu +baiweishu*baiweishu*baiweishu == i){
continue;
console.log(i+'是水仙花數');
}
}
- break(暫停）
- 執行到break 直接跳出循環，執行循環體后面的代碼。{跳出大括號，結束循環，（全部停止循環）}
- continue (繼續）
- :循環里面 不執行continue之后的代碼 繼續進行下一次循環。{以上循環，以下停止循環。
for (var i = 1 ;i<11 ;i++){
console.log('我是第'+i+'次循環');
var next = i+1;
console.log('下一次是第'+next+'次循環');
}
- 函數
function qiuhe ( a, b){
return a+b;
}
x = qiuhe(1,2);
console.log(x);
eg1: 用一個函數實現以下功能:傳入兩個值 X Y，如果X>Y 則返回空，否則 返回X與Y的積；
function math (x,y){
if( x>y){
return ;
}
else{
return x*y;
}
}
console.log(math(10,22));
eg2:無參數函數
function fn1(){
console.log('我是fn1函數，我被調用了一次');
}
for( var i = 0 ;i <11;i++){
}
