當(dāng)前位置:首頁 > IT技術(shù) > 編程語言 > 正文

HTML, CSS, JavaScript
2022-02-14 14:14:46

HTML, CSS, JavaScript

一、HTML

1. HTML4常用標(biāo)簽

1.1 文件標(biāo)簽

  • <html>標(biāo)簽:代表當(dāng)前書寫的是一個HTML文檔

  • <head>標(biāo)簽:存儲的本頁面的一些重要的信息,它不會顯示

    該標(biāo)簽下有一個子標(biāo)簽<title>用于定義頁面的標(biāo)題欄的名稱

  • <body>標(biāo)簽:該標(biāo)簽中的書寫的內(nèi)容會顯示出來

    該標(biāo)簽下的屬性:

    HTML中標(biāo)簽的屬性值可以用' '" "包圍

    • text用于設(shè)置文字的顏色

    • bgcolor用于設(shè)置頁面的背景色

    • background用于設(shè)置頁面的背景圖片

      需要在當(dāng)前項(xiàng)目下創(chuàng)建文件夾存放HTML中調(diào)用的圖片文件,圖片的路徑不能以/開始,必須是以這個文件夾開始

  • 示例Code

    <html>
        <head>
            <title>
                this is title
            </title>
        </head>
    
        <body text="red" bgcolor="pink" background="image/test.JPG">
            
        </body>
    </html>
    

1.2 排版標(biāo)簽

  • HTML注釋

    <!-- 注釋內(nèi)容 -->
    

    VSCode中注釋的快捷鍵ctrl+/

  • 換行標(biāo)簽

    <br/>標(biāo)簽就是一個換行(回車)功能標(biāo)簽,標(biāo)簽中的/可有可無的。有/是HTML語言的標(biāo)準(zhǔn)化,但是HTML語言是一門不那么嚴(yán)謹(jǐn)?shù)恼Z言

  • 段落標(biāo)簽

    <p>標(biāo)簽中的內(nèi)容,會在開始與結(jié)束之間產(chǎn)生一個空白行,并且它會自動換行.

    常用屬性 align 它的作用是設(shè)置段落中的內(nèi)容對齊方式 可取值有 left(默認(rèn)值是left)、 right 、center

    <html>
        <head>
            <title>
                this is title
            </title>
        </head>
    
        <body text="red" bgcolor="pink" background="image/test.JPG">
            hello <br/>
            hello
            hello
            <p align="center">hello</p>
            <p align="left">hello</p>
            <p align="right">hello</p>
            <p align>hello</p>
        </body>
    </html>
    
  • 水平線標(biāo)簽

    <hr>標(biāo)簽會在頁面上產(chǎn)生一個水平線

    對于hr標(biāo)簽常用屬性:

    1. align:取值有left,right,center代表水平線的位置
    2. size:代表水平線厚度(粗細(xì))
    3. width:代表水平線寬度
    4. color:水平線的顏色

    單位:size="5",單位為"像素"/"像素點(diǎn)",像素就是構(gòu)成計(jì)算機(jī)圖片的最小單位,單位也可以使用百分比,如:size="50%"

  • 分區(qū)標(biāo)簽

    <div>是一個標(biāo)簽,用來進(jìn)行布局的,不加屬性值的<div>并沒有什么效果,肉眼也看不見,但<div>與CSS結(jié)合,就會更好對頁面進(jìn)行排版

    <div><span>都是“容器”的作用,區(qū)別:

    1. <div>標(biāo)簽會自動換行,是塊級元素,<span>標(biāo)簽不會自動換行,是行內(nèi)元素

      div中的屬性:

      • width:設(shè)置div寬
      • height:設(shè)置div高
      • background或background-color:設(shè)置div背景顏色
      • margin:用于設(shè)置本div與其他元素或頁面四周邊框之間的邊距
      • padding: div中元素與本div四周邊框之間的距離

      VSCode快捷鍵:

      div*n快速創(chuàng)建n行div

    2. <div>:整體劃分區(qū)塊,<span>:局部劃分

1.3 字體標(biāo)簽

  • 字體標(biāo)簽

    <font>標(biāo)簽可以設(shè)置字體,字體的大小和顏色,使用該標(biāo)簽包圍要設(shè)置的內(nèi)容即可

    常用屬性:

    1. face:設(shè)置字體

    2. size:設(shè)置字體的大小

    3. color:設(shè)置字體的顏色

      表示字體顏色屬性值的3種方法:

      1. 使用十六進(jìn)制方式,取值范圍 #000000 ~ #FFFFFF (黑色到白色)

        當(dāng)顏色值為#cc3300 時,可簡化成 #c30 這種方式

      2. RGB顏色表示法:RGB(x,y,z)其中x、y、z是0 ~ 255之間的整數(shù)

      rgb字母大小寫無所謂

      1. 直接使用給定的值:red、blue

      可以使用color屬性的標(biāo)簽:<font>、<body>

  • 標(biāo)題標(biāo)記

    作用:<h數(shù)字>標(biāo)簽可以給一段文字起一個標(biāo)題

    使用方法:在<h1><h6>中標(biāo)題尺寸遞減

    與普通文本的區(qū)別:自動換行,字體加粗,標(biāo)題與標(biāo)題之間產(chǎn)生一定的距離

  • 格式化標(biāo)簽

    • <b>:使文本內(nèi)容字體加粗
    • <i>:使文本內(nèi)容字體傾斜
    • <del>:為文本內(nèi)容添加刪除線
    • <u>:為文本內(nèi)容添加下劃線

    在HTML中允許標(biāo)簽進(jìn)行嵌套的,但是一般都包裹嵌套,而不可以進(jìn)行交叉嵌套

    <b> hi how are you doing </b> <br/>
    <i><b> hi how are you doing </b></i> <br/>
    <del><b> hi how are you doing </b></del> <br/>
    <u><del><b> hi how are you doing </b></del></u> <br/>
    

1.4 列表標(biāo)簽

  • 列表標(biāo)記中先設(shè)置列表的類型標(biāo)簽,再用多個子標(biāo)簽<li>表示列表一行的信息

  • 有序列表

    <ol>標(biāo)簽中的屬性:

    1. type:設(shè)置標(biāo)簽顯示的順序的方式

      常用的屬性值:

      • 默認(rèn)值是數(shù)字
      • 以英文字母順序:A
      • 以羅馬字符順序:I
    2. start:給定義一個數(shù)字,設(shè)置序列從這個數(shù)字開始

  • 無序列表

    <ul>標(biāo)簽中的屬性:

    1. type:設(shè)置無序列表中的符號形狀

      常用的屬性值:

      • 實(shí)心圓(默認(rèn)值):disc
      • 方塊:square
      • 空心圓:circle
  • 示例Code

    <ol type="I">
        <li>this is the first line</li>
        <li>this is the second line</li>
        <li>this is the third line</li>
        <li>this is the fourth line</li>
    </ol>
    
    <ul type="circle">
        <li><b>this is the first line</b></li>
        <li>this is the second line</li>
        <li>this is the third line</li>
        <li>this is the fourth line</li>
    </ul>
    

1.5 圖像標(biāo)簽

  • 作用:<img>:圖像標(biāo)簽可以在頁面中引入圖片

  • 圖像標(biāo)簽中的屬性:

    • src:用于設(shè)置圖片的路徑

    • width:用于設(shè)置圖片的寬度

    • height:用于設(shè)置圖片的高度

    • border:用于設(shè)置圖片的邊框

    • alt:如果圖片不可以顯示時,默認(rèn)顯示的文本信息

    • title:鼠標(biāo)懸停圖片上,默認(rèn)顯示的文本信息

    • align:圖片附件文字的對齊方式,可取值有

      常用的屬性值:left、rightmiddle、topbottom

1.6 超鏈接標(biāo)簽

  • <a>標(biāo)簽可以實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊這段內(nèi)容后進(jìn)行跳轉(zhuǎn)到其它頁面的操作

    超鏈接內(nèi)容不僅可以是文本,也可以是圖片等信息

    超鏈接標(biāo)簽的常用屬性:

    • href:代表要跳轉(zhuǎn)的路徑

      屬性值若是網(wǎng)站的地址,則需要加http://

    • target:性規(guī)定在何處打開這個鏈接文檔

      常用的屬性值:

      • _blank:在新窗口中打開頁面
      • _self:在本窗口打開頁面

1.7 表格標(biāo)簽

  • 定義一個表格先定義<table>,再定義多個<tr>表示多行,在每個<tr>中定義多個<td>表示每行中的每列下的數(shù)據(jù)單元

    <table border="1" width="250px" align="center" cellspacing="0 ">
        <tr align="center">
            <td align="right">1</td>                
            <td>2</td>                
            <td>3</td>                
        </tr>
    
        <tr>
            <td>4</td>            
            <td>5</td>                
            <td>6</td>                
        </tr>
    
        <tr>
            <td>7</td>                
            <td>8</td>                
            <td>9</td>                
        </tr>
    </table>
    

  • <table>標(biāo)簽用于定義整個表格

    常用的屬性:

    • border:邊框,取值是像素為單位

    • width:代表表格的寬度,取值是像素為單位

    • align:代表該表格在整個頁面中的對其方式

      常用的屬性值:

      • left:左對齊
      • right:右對齊
      • center:居中對齊
    • cellspacing:每個單元格之間的間距(通常設(shè)置0表示單線表格)

  • <tr>表示表格中的行 (Table Row)

    常用的屬性:

    • align:統(tǒng)一設(shè)置表格中行的所有數(shù)據(jù)單元內(nèi)容的對齊方式

      常見的屬性值同<table>中的<align>

  • <td>表示表格中的數(shù)據(jù)單元 (Table DataCell)

    常用的屬性:

    • colspan:列的合并

      屬性值為從當(dāng)前列起一共要合并的列數(shù)

    • rowspan:行的合并

      屬性值為從當(dāng)前行起一共要合并的行數(shù)

    • align:設(shè)置合并后的數(shù)據(jù)單元內(nèi)容在表格中的對齊方式,或者用于單獨(dú)設(shè)置表格中數(shù)據(jù)單元內(nèi)容的對齊方式

      常見的屬性值同<table>中的<align>

      <table border="1" width="250px" align="center" cellspacing="0 ">
          <tr align="center">
              <td colspan="2" align="center">row</td>
              <td>3</td>                
          </tr>
      
          <tr>
              <td>4</td>
              <td rowspan="2" align="center">col</td>               
              <td>6</td>                
          </tr>
      
          <tr>
              <td>7</td>                
              <td>9</td>                
          </tr>
      </table>
      

1.8 表單標(biāo)簽

  • 表單概念

    通過錄入的信息將要提交的信息,即所有的數(shù)據(jù)形成一個整體,一起提交給服務(wù)器,提交到指定的位置

    常見的 登錄頁面、注冊頁面 都離不開表單的應(yīng)用

  • 表單標(biāo)簽<form>

    <form>中的屬性:

    • action:將整個表單提交到目的地

    • method:表單提交的方式

      屬性值:

      • get:提交時,傳輸數(shù)據(jù)量少,明文提交
      • post:提交時,傳輸數(shù)據(jù)量大,密文提交
    • 表單標(biāo)簽常規(guī)寫法

      使用段落標(biāo)簽,標(biāo)簽中的內(nèi)容,會在開始與結(jié)束之間產(chǎn)生一個空白行,并且它會自動換行

      <form>
          <p>
              <input type="xxx"> 
          </p>
          
          <p>
              <input type="xxx"> 
          </p>
          
          <p>
              <input type="xxx"> 
          </p>
      </form>
      
  • 表單標(biāo)簽<form>中的子標(biāo)簽

    • 所有表單中的元素都要具有名稱(否則提交到服務(wù)器之后,服務(wù)器無法區(qū)識別多個元素之間的不同)

    • <intput>:提供指定的輸入模式

      屬性type的常見屬性值:

      • text:type屬性的默認(rèn)值,普通的文本輸入框

        當(dāng)type為text時,還可以加入以下屬性

        • placeholder:提示用戶輸入文本的信息
        • maxlength:設(shè)置最多能輸入的字符數(shù)量
        <p>帳號:<input name="a" type="text" placeholder="請輸入帳號..." maxlength="5" ></p>
        
      • password:密碼輸入框

        <p>密碼:<input name="b" type="password"></p>
        
      • checkbox:多選框/復(fù)選框

        每個帶checkbox屬性的input標(biāo)簽都代表一個選項(xiàng),要使這些選項(xiàng)成為一組必須要同時給input加入屬性值相同的name屬性

        所有的復(fù)選框以組為單位,組內(nèi)的每個復(fù)選框都應(yīng)該具有相同的name值

        type屬性值為checkbox的input標(biāo)簽,可以加入屬性值為checked的checked屬性,來實(shí)現(xiàn)默認(rèn)選擇一個選項(xiàng)

        <p>愛好:
            <input type="checkbox" name="gender"> 抽煙
            <input type="checkbox" name="gender"> 喝酒
            <input type="checkbox" name="gender" checked="checked"> 燙頭
            <input type="checkbox" name="gender" checked="checked"> 泡澡
        </p>
        
      • radio:單選按鈕

        每個帶radio屬性的input標(biāo)簽都代表一個選項(xiàng),要使這些選項(xiàng)成為一組必須要同時給input加入屬性值相同的name屬性

        單選框要想可以一次只選擇一個,要具有相同的name值

        type屬性值為radio的input標(biāo)簽,可以加入屬性值為checked的checked屬性,來實(shí)現(xiàn)默認(rèn)選擇一個選項(xiàng)

        <p>性別:
            <input type="radio" name="gender"> 男
            <input type="radio" name="gender" checked="checked"> 女
        </p>
        
      • file:上傳文件

        <p>頭像: <input type="file"> </p>
        
      • reset:重置按鈕:重置當(dāng)前表單的所有子標(biāo)簽的內(nèi)容

      • submit:提交按鈕:提交當(dāng)前表單的所有子標(biāo)簽的內(nèi)容

      • button:普通按鈕:可以用作取消的按鈕,用于返回上一個頁面或退出

        <p> 
            <input type="reset" value="清空">
            <input type="submit" value="提交"> 
            <input type="button" value="取消">
            <button>保存</button>
        </p>
        

        value屬性代表按鈕上顯示的內(nèi)容

    • <select>:下拉列表

      子標(biāo)簽<option>:列表中的項(xiàng)

      常見的屬性:

      • selected:被選中
      <p>血型: 
          <select> 
              <option>A型</option> 
              <option>B型</option> 
              <option>C型</option> 
              <option selected="selected">O型</option> 
          </select> 
      </p>
      
    • <textarea>:文本域(多行文本框)

      可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸,不過更好的辦法是使用 CSS 的 height 和 width 屬性

      <p>個人簡介: <textarea cols="10" rows="5"></textarea> </p>
      
    • <button>:按鈕

      <form>表單中,作用和submit一樣

      <p> 
          <input type="submit" value="提交"> 
          <button>保存</button>
      </p>
      

      不在<form>表單中,就是普通按鈕(配合后期的JavaScript,可擴(kuò)展性更高)

1.9 框架標(biāo)簽

  • 框架標(biāo)簽<frameset>

    作用:用多個界面拼接成一個界面

    使用方法:每個frameset下的子標(biāo)簽可以是frame也可以還是一個frameset

    在html標(biāo)簽中frameset標(biāo)簽不能與body標(biāo)簽共存

    常用屬性

    • rows:用于將頁面分為幾行內(nèi)容

      屬性值可以按照需求自定義每部分的百分比,剩下的一部分可以使用*

    • cols:用于將頁面分為幾列內(nèi)容

      屬性值可以按照需求自定義每部分的百分比,剩下的一部分可以使用*

  • 框架標(biāo)簽子標(biāo)簽<frame>

    常用屬性

    • src:表示當(dāng)前行或列的資源路徑
  • 示例Code

    <frameset rows="10%,*,13%">
        <frame src="top.html"></frame>
        <frameset cols="15%,*">
            <frame src="left.html"></frame>
            <frame src="right.html"></frame>
        </frameset>
        <frame src="foot.html"></frame>
    </frameset>
    

1.10 其他標(biāo)簽與特殊字符

  • <meta>標(biāo)簽

    常見的作用:

    1. 指定頁面的字符編碼方案

      常見的編碼表:

      ASCII:美國標(biāo)準(zhǔn)信息交換碼, 使用一個字節(jié)的低7位二位進(jìn)制進(jìn)行表示

      ISO8859-1:拉丁碼表,歐洲碼表,使用一個字節(jié)的8位二進(jìn)制進(jìn)行表示

      GB2312:中國的中文編碼表,最多使用兩個字節(jié)16位二進(jìn)制為進(jìn)行表示

      GBK:中國的中文編碼表升級,融合了更多的中文文字符號,最多使用兩個字節(jié)16位二進(jìn)制位表示

      Unicode:國際標(biāo)準(zhǔn)碼,融合了目前人類使用的所有字符,為每個字符分配唯一的字符碼。所有的文字都用兩個字節(jié)16位二進(jìn)制位來表示

      Unicode只是定義了一個龐大的、全球通用的字符集,并為每個字符規(guī)定了唯一確定的編號,具體存儲成什么樣的字節(jié)流,取決于字符編碼方案

      推薦的Unicode編碼是UTF-8和UTF-16

      UTF-8:變長的編碼方式,可用1-4個字節(jié)來表示一個字符

    2. 指定頁面的顯示參數(shù),如:顯示窗口的寬度、顯示文字和圖形的初始比例

    3. 設(shè)置頁面加載后在指定的時間后跳轉(zhuǎn)到指定的頁面

    <meta>標(biāo)簽必須寫在<head>標(biāo)簽中

  • <link>標(biāo)簽

    作用:一般通過該標(biāo)簽來導(dǎo)入CSS

    <link>標(biāo)簽必須寫在<head>標(biāo)簽中

  • 特殊字符

    作用:在HTML中標(biāo)簽的內(nèi)容有時需要某些特殊字符

    如:每個空格需要使用&nbsp;來表示

2. HTML5新特性

2.1 HTML4和HTML5主要區(qū)別

  • HTML5包含了HTML4的標(biāo)簽

  • H5中大小寫不敏感

    可以在標(biāo)簽、屬性、屬性值中隨機(jī)使用大小寫字母

  • 屬性值的引號可以省略

  • 可以省略結(jié)尾標(biāo)簽(不推薦)

    查看源代碼,瀏覽器會自動補(bǔ)全結(jié)尾標(biāo)簽

2.2 新增語義化標(biāo)簽

HTML4中,所有的容器標(biāo)簽95%都會使用div,div過多的話,很難區(qū)分彼此,新增許多語義化標(biāo)簽,讓div“見名知意”

2.3 媒體標(biāo)簽

想在網(wǎng)頁上播放視頻,可以使用<video>標(biāo)簽

2.4 新增表單控件

  • 新增了表單<form>標(biāo)簽下的<input>標(biāo)簽下的type屬性值,代表顯示不同的工具
  • 新增了表單<form>標(biāo)簽下的新標(biāo)簽

二、CSS

1. CSS概述

  • CSS是指層疊樣式表 cascading style sheets
  • 通過CSS可以讓開發(fā)者定義HTML元素如何顯示,而且CSS可以讓原本HTML不能描述的效果,通過CSS描述出來

2. CSS與HTML結(jié)合的三種方式

  • 內(nèi)聯(lián)/行內(nèi)樣式

    實(shí)現(xiàn)方式:HTML標(biāo)簽上通過style屬性來引用CSS代碼

    優(yōu)缺點(diǎn):直接通過屬性簡單方便,但是只能對一個標(biāo)簽進(jìn)行修飾

    <body>
        <div style="color:pink">hello, world</div>
        
        <font color="pink">hello, world</font>
    </body>
    
  • 內(nèi)部樣式表

    通過<style>標(biāo)簽來聲明我們的CSS,通常<style>標(biāo)簽推薦寫在<head><body>之間

    格式: 選擇器 {屬性:值;屬性:值}

    優(yōu)缺點(diǎn):可以通過多個標(biāo)簽進(jìn)行統(tǒng)一的樣式設(shè)置,但是它只能在本頁面上進(jìn)行修飾

    <style>
        div {
            color:blue;
        }
    </style>
    
    <body>
        <div>have a good day</div>
    </body>
    
  • 外部樣式表

    需要單獨(dú)定義一個CSS文件,注意CSS文件的后綴名就是.css

    實(shí)現(xiàn)方式1:在項(xiàng)目根目錄下,創(chuàng)建css目錄,在css目錄中創(chuàng)建css文件,在<head>中使用<link>標(biāo)簽引用外部的css文件

    需要將<link>中屬性rel的值設(shè)置為stylesheet,屬性href.css文件的目錄

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <link rel="stylesheet" href="../CSS/css_test.css">
    </head>
    

    實(shí)現(xiàn)方式2:類似于內(nèi)部樣式表,@import 'CSS文件所在地址'

    <style>
    @import '../CSS/css_test.css'
    </style>
    

    兩種實(shí)現(xiàn)方式的區(qū)別:加載順序不同,@import方式導(dǎo)入會先加載html,然后才導(dǎo)入css樣式;如果使用link方式,它會先加載樣式表

  • 三種樣式表的優(yōu)先級:內(nèi)聯(lián) > 內(nèi)部 > 外部

3. CSS選擇器、基本屬性、定位

3.1 CSS選擇器

  • 作用:在style標(biāo)簽中,通過指定的標(biāo)簽名或標(biāo)簽內(nèi)的屬性值選定某個或多個標(biāo)簽,通過設(shè)定屬性值來修改對應(yīng)標(biāo)簽的樣式

  • 元素(標(biāo)簽)選擇器

    它可以對頁面上相同的標(biāo)簽進(jìn)行統(tǒng)一的設(shè)置,它描述的就是標(biāo)簽的名稱

  • 類選擇器

    類選擇器在使用時使用.來描述,它描述的是元素上的class屬性值

    需要在元素添加class屬性,選擇器前加. 若選擇器不加任何符號,會先去找與選擇器同名的標(biāo)簽而不是class屬性值

    VSCode快捷鍵:

    div.xxx快速生成div標(biāo)簽和class屬性值為xxx,<div class="xxx"></div>

  • id選擇器

    它只能選擇一個元素,使用 # 引入,引用的是元素的id屬性值。id選擇器,比類選擇器更具有唯一性

    需要在元素添加id屬性,選擇器前加# 若選擇器不加任何符號,會先去找與選擇器同名的標(biāo)簽而不是id屬性值

    VSCode快捷鍵:

    div#xxx快速生成div標(biāo)簽和id屬性值為xxx,<div id="xxx"></div>

    <style>
        .a {
            color:purple;
        }
    
        #b {
            color:red;
        }
    </style>
    
    <body>
        <div class="a">have a good day</div>
        <div class="a">have a good day</div>
        <div id="b">have a good day</div>
        <div>have a good day</div>
    </body>
    
  • 選擇器組

    作用:合并相同內(nèi)容的選擇器

    使用方法:不同選擇器名之間使用,進(jìn)行分隔

    <style>
        #b,.a {
            color:purple;
        }
    </style>
    
    <body>
        <div class="a">have a good day</div>
        <div class="a">have a good day</div>
        <div id="b">have a good day</div>
        <div>have a good day</div>
    </body>
    
  • 派生選擇器

    兩個標(biāo)簽選擇器同時寫在一個內(nèi)容上時(或只寫一個),這兩個標(biāo)簽下的所有內(nèi)容樣式會被修改

    <style>
        div p {
            color:purple;
        }
    </style>
    
    <body>
        <div>
            <p>11111</p>
            <p>22222</p>
            <p>33333</p>
            <span>
                <p>444444</p>
                <p>555555</p>
                <p>666666</p>
            </span>
        </div>
    </body>
    

    當(dāng)設(shè)置div > p時,就只會使得div子標(biāo)簽內(nèi)容樣式被修改,而div子標(biāo)簽下子標(biāo)簽的內(nèi)容樣式不被修改

    <style>
        div > p {
            color:purple;
        }
    </style>
    
    <body>
        <div>
            <p>11111</p>
            <p>22222</p>
            <p>33333</p>
            <span>
                <p>444444</p>
                <p>555555</p>
                <p>666666</p>
            </span>
        </div>
    </body>
    
  • CSS偽類

    • CSS偽類可對css的選擇器添加一些特殊效果

    • 超鏈接偽類的四種狀態(tài):

      :active 向被激活的元素添加樣式(鼠標(biāo)長按時)

      :hover 當(dāng)鼠標(biāo)懸浮在元素上方時,向元素添加樣式

      :link 向未被訪問的鏈接添加樣式

      :visited 向已被訪問的鏈接添加樣式

      超鏈接的偽類:要遵守使用順序,愛恨原則 LoVeHAte,lvha

      <!-- 當(dāng)鼠標(biāo)指向baidu時,字體變小變紅 -->
      <style>
        a:hover{
            color:red;
            font-size: small;
        }
      
        a {
            font-size: large;
        }
      </style>
      
      <body>
        <a >baidu</a>
      </body>
      

      超鏈接偽類的四種狀態(tài)測試:

      重復(fù)查看:link 效果,需要清除瀏覽器瀏覽數(shù)據(jù)和緩存

      <style>
          a:link{
              color:blue;
              font-size: small;
          }
      
          a:visited{
              color:yellow;
              font-size: small;
          }
      
          a:hover{
              color:red;
              font-size: small;
          }
      
          a:active{
              color:green;
              font-size: small;
          }
      
          a {
              font-size: large;
          }
      </style>
      
      <body>
          <a >dubai</a>
      </body>
      
    • 其他偽類

      :first-child 向元素的第一個子元素添加樣式。作用等同于使用class屬性的標(biāo)簽,用類選擇器來指定這個標(biāo)簽的樣式,只是使用偽類更加便捷

3.2 CSS基本屬性

  • 文本屬性

    單位:px:像素、em:倍數(shù)

    line-height的屬性值表示當(dāng)前文本上方和下方的所占空間大小

    <style>
    
        #title{
            font-family:"隸書";
            font-size:5em;  /* 默認(rèn)字體大小的5倍 */
            font-weight: bold;  /*字體加粗*/
            color:red;  /*字體顏色*/
            text-align: center;  /*居中對齊*/
            text-decoration: underline;   /*下劃線*/
            line-height: 30px; /* 行高*/
        }
    
        .content{
            text-indent:2em;   /*首行縮進(jìn)*/
        }
    
    </style>
    
    <body>
        
        <p id="title">中華人民共和國萬歲!</p>
        <p style="text-align: right;">作者:AAA</p>
        <p class="content">我們相親相愛,是一家人!</p>
        <p>我們相親相愛,是一家人!</p>
    </body>
    
  • 背景屬性

    • CSS 允許應(yīng)用純色作為背景,也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果

    • 一般使用<div>標(biāo)簽定義好寬高后,不指定background-color屬性則默認(rèn)是白色,為了區(qū)分可以設(shè)置background-color屬性的顏色

      background-colorbackground作用相同可相互替換使用

      color屬性是指div中的文本顏色,不是背景

    • 添加background-image屬性后,原背景會被覆蓋,若添加的圖片尺寸小于背景尺寸,則默認(rèn)使用全背景平鋪效果

    • 添加background-repeat屬性,修改屬性值為no-repeat,則平鋪方式為只是本圖片不重復(fù)的效果

      其他的平鋪方式:

      • repeat-x:表示橫向平鋪到整個背景上

      • repeat-y:表示縱向平鋪到整個背景上

    • 添加background-position屬性,屬性值中第一個數(shù)字參數(shù)表示圖片的左側(cè)與背景左側(cè)的距離,第二個數(shù)字參數(shù)表示圖片的上方與背景上方的距離

      兩個參數(shù)都可以是負(fù)數(shù),表示圖片進(jìn)入到背景邊界外的長度(這部分不顯示);當(dāng)數(shù)字參數(shù)為正數(shù)超過背景范圍后也不顯示超過的圖片部分

    • 添加background-attachment屬性,屬性值為fixed,表示當(dāng)頁面在在滾動時,圖片位置不隨頁面滾動(在div范圍中),該屬性的默認(rèn)值是scroll

    • 示例Code

      <style>
          div {
              /*設(shè)置基本的背景屬性*/
              width: 500px;
              height: 500px;/*高度可以不指定,不指定時需要div中有帶內(nèi)容的其他標(biāo)簽,不指定時背景顏色height根據(jù)div中內(nèi)容的長度變化而變化(內(nèi)容會覆蓋背景);指定height時,背景顏色的height不會隨div中內(nèi)容變化(內(nèi)容同樣會覆蓋背景)*/
              background-color: pink; /* 背景顏色 */
              /*添加一張圖片到背景中*/
              background-image: url("img/cat.gif");
              background-repeat: no-repeat; /* 平鋪方式*/
              background-position: 0px 100px; /*背景的位置(移動)*/
              background-attachment: fixed; /* 固定的背景*/
          }
      </style>
      
      <body>
          <div></div>
      </body>
      
  • 列表屬性

    • 通過ulol的選擇器來設(shè)置列表的標(biāo)記形狀

      • 設(shè)置不同的列表項(xiàng)標(biāo)記為有序列表

      • 設(shè)置不同的列表項(xiàng)標(biāo)記為無序列表

      • 設(shè)置列表項(xiàng)標(biāo)記為圖像

      • 示例code

        <style>
            .a {
              list-style-type: none;/* 無序列表無標(biāo)記 */
            }
            .b {
              list-style-type: decimal-leading-zero;/* 有序列表中以0開頭的數(shù)字標(biāo)記 */
            }
            .c {
              list-style-type: upper-roman;/* 有序列表中標(biāo)記是大寫羅馬數(shù)字(I, II, III, IV, V, 等 */
            }
            .d {
              list-style-type: upper-alpha;/* 有序列表中標(biāo)記是大寫英文字母The marker is upper-alpha (A, B, C, D, E,等 */
            }
            .e {
              list-style-image: url('img/list-img-2.gif');/* 設(shè)置列表項(xiàng)標(biāo)記為圖像 */
            }
        </style>
        
        <body>
            <ul class="a">
                <li>曹操</li>
                <li>劉備</li>
                <li>孫權(quán)</li>
            </ul>
        
            <ol class="b">
                <li>呂布</li>
                <li>趙云</li>
                <li>典韋</li>
            </ol>
        
            <ol class="c">
                <li>關(guān)羽</li>
                <li>馬超</li>
                <li>張飛</li>
            </ol>
        
            <ol class="d">
                <li>黃忠</li>
                <li>夏侯惇</li>
                <li>姜維</li>
            </ol>
        
            <ol class="e">
                <li>老孫</li>
                <li>老楊</li>
                <li>老西</li>
            </ol>
        </body>
        
    • 將縱向列表設(shè)置為橫向的顯示效果

      為列表中的每個li添加屬性和屬性值float: left;,一般也會添加屬性和屬性值list-style-type: none;來去除列表項(xiàng)標(biāo)記

    • 設(shè)置每個列表項(xiàng)li中文字的對齊方式text-align、字體大小font-size、顏色color

    • 設(shè)置每個列表項(xiàng)li中背景顏色background-color、行高line-height

    • 設(shè)置每個列表項(xiàng)li中鼠標(biāo)指向時的顯示樣式cursor

    • 設(shè)置每個列表項(xiàng)li中的width,若不設(shè)置則背景顏色會填充整行

    • 列表案例:導(dǎo)航條

      <style>
      
          li{
              list-style-type: none;
              color:white;
              background-color: black;
              width: 150px;
              text-align: center;
              float: left; /* 將li實(shí)現(xiàn)水平方向顯示*/
              line-height: 40px;
              font-size: 1.3em;
      
              cursor: pointer; /* 鼠標(biāo)光標(biāo)顯示樣式 */
          }
      
          li:hover{
              background-color: orange; /* 當(dāng)鼠標(biāo)在此懸浮時,顯示背景顏色為橙色 */
              line-height: 50px; /* 當(dāng)鼠標(biāo)在此懸浮時,顯示的行高變大 */
          }
      
      </style>
      
      <body>
          <ul>
              <li>apple</li>
              <li>banana</li>
              <li>peach</li>
          </ul>
      </body>
      
  • 邊框?qū)傩?/p>

    • CSS邊框?qū)傩栽试S指定一個元素邊框的樣式和顏色

    • 設(shè)置邊框的樣式必要的三個屬性border-widthborder-color、border-style

      若缺少border-style屬性則不顯示邊框

      border-width: 2px;
      border-color:red;
      border-style: solid;
      

      可以向?qū)傩灾屑尤胛恢?,就可以指定邊框具體某個邊的樣式

      border-right-color:green; /* 設(shè)置右邊框的顏色 */
      border-bottom-style: dashed;  /* 設(shè)置下邊框的樣子 */
      

      或使用簡化寫法:為border屬性指定屬性值線寬、線條形狀、顏色

      border:10px solid red;
      
    • 示例Code

      <style>
          div {
              width: 400px;
              height: 40px;
              margin: 10px;   /* div和div彼此之間產(chǎn)生10像素的距離*/
          }
          .a {
              /* 設(shè)置四個邊 */
              border-width: 2px;
              border-color:red;
              border-style: solid;
      
              border-right-color:green; /* 設(shè)置右邊框的顏色 */
              border-bottom-style: dashed;  /* 設(shè)置下邊框的樣子 */
          }
      
          /* 以下是邊框的簡化寫法 */
          .b1{
              border:10px solid red;
          }
          .b2{
              border:10px dotted red;
          }
          .b3{
              border:10px dashed red;
          }
          .b4{
              border:10px double red;
          }
          .b5{
              border:10px groove red;
          }
          .b6{
              border:10px ridge red;
          }
          .b7{
              border:10px inset red;
          }
          .b8{
              border:10px outset red;
          }
      
      </style>
      <body>
          <div class="a"></div>
          <div class="b1">實(shí)心線</div>
          <div class="b2">點(diǎn)線</div>
          <div class="b3">虛線</div>
          <div class="b4">雙線</div>
          <div class="b5">3D效果的凹槽</div>
          <div class="b6">3D脊邊框</div>
          <div class="b7">嵌入邊框</div>
          <div class="b8">突出邊框</div>
      </body>
      

  • 輪廓屬性

    輪廓是在邊框外的一層線條,使用方法為outline屬性指定屬性值線寬線條形狀、顏色(與邊框border的屬性值寫法相同)

    <style>
    div{
        width: 400px;
        height: 200px;
        border: 30px solid  darkcyan;
        outline: 5px dashed red;   /*輪廓*/
    }
    </style>
    
    <body>
        <div></div>
    </body>
    

  • 盒子模型

    CSS盒子模型本質(zhì)上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實(shí)際內(nèi)容

    • margin(外邊距) - 盒子與盒子之間的距離

    margin使用場景:一般通過margin設(shè)置div在頁面中的位置;div中的元素通過margin可以設(shè)置該元素在div中的位置

    當(dāng)div內(nèi)元素的margin超過div的height和width時,該元素可以顯示超出的部分,這是與div中添加背景圖片的不同

    更具體的屬性:margin-top、margin-left

    • border(邊框) - 盒子的保護(hù)殼

    • padding(內(nèi)邊距/填充) - 內(nèi)填充,盒子邊與內(nèi)容之間的距離

    更具體的屬性:padding-top、padding-left

    • content(內(nèi)容) - 盒子的內(nèi)容,顯示的文本或圖像

    <style>
    
        div{
            width: 200px;
            height: 200px;
            border:2px solid greenyellow;
            margin-top: 50px;   /*上外邊距*/
            margin-left: 100px;  /*左外邊距*/
            padding-top:20px; /*上內(nèi)邊距*/
            padding-left:40px; /*左內(nèi)邊距*/
        }
    
    </style>
    
    <body>
        
        <div>
            <img src="img/cat.gif">
        </div>
        
    </body>
    

3.3 CSS定位

  • 默認(rèn)定位

    • 塊級元素:h1~h6,p, div 等,自上而下,垂直排列(自動換行);可以改變寬高

    • 行內(nèi)元素:a, b, span,等,從左向右,水平排列(不會換行);不能改變寬高,若在這些標(biāo)簽的選擇器下更改width和height屬性,則無法識別寬高

      行內(nèi)元素通過加入 display 屬性設(shè)置屬性值inline-block可以轉(zhuǎn)換為行內(nèi)塊元素,從而改變寬高

    • 行內(nèi)塊元素:input, img等,從左向右,水平排列(自動換行);可以改變寬高

    • 示例Code

      <style>
          div{
              width: 100px;
              height: 50px;
              border :1px solid red;
          }
          span{
              width: 100px;
              height: 100px;
              border :1px solid red;
          }
          input{
              width: 50px;
              height: 50px;
              border :1px solid red;
          }
      
          a {
              width: 50px;
              height: 50px;
              border :1px solid red;
              /* a標(biāo)簽是行內(nèi)元素,無法改變寬高。但只要轉(zhuǎn)換成行內(nèi)塊元素,就可以改變寬高了。 */
              display: inline-block;  /* 將a元素,顯示成  行內(nèi)塊 */
          }
      </style>
      <body>
          <a href="">aaa</a>
          <a href="">bbb</a>
          <a href="">ccc</a>
      </body>
      
  • 浮動定位

    • 不僅可以使塊級元素靠著左邊或右邊。還可以消除塊級元素的獨(dú)自占一行的特性

    • float屬性的取值:

      none :不浮動

      left:貼著左邊 浮動

      right:貼著右邊 浮動

    • 示例Code

      如圖所示,c1,c2向右浮動直到本行堆滿,c3換行繼續(xù)向右堆

      如圖所示,若不指定float屬性,默認(rèn)從左上角開始從上至下堆;所有未指定float屬性的元素為一列從左上第一個位置進(jìn)行向下堆疊

  • 相對定位

    • 原來的位置進(jìn)行比較,進(jìn)行移動定位(偏移)

    • 使用方法:設(shè)定屬性和屬性值position: relative、top: xxxpx、left: xxxpx

      top和left可以為負(fù)值表示向左上移動,正值時表示向右下移動

    • 示例Code

  • 絕對定位

    • 選定一個當(dāng)前元素position: absolute與它的父元素中設(shè)定有position: relative的元素按偏移量topleft的屬性值進(jìn)行偏移

      如果父級元素定位了,就以父級為參照物;

      如果父級沒定位,找爺爺級,爺爺定位了,以爺爺為參照物。

      如果爺爺沒定位,繼續(xù)向上找,都沒定位的話,body是最終選擇

    • 必須找當(dāng)前元素的父元素作為參照物進(jìn)行絕對定位,不可用與當(dāng)前元素處于同一并列位置的元素作為參照物(位置保持不變,不會以偏移值進(jìn)行偏移)

    • 示例Code

      <style>
          .parent{
              width: 250px;
              height: 300px;
              border: 2px solid red;
              
              /* 設(shè)定屬性值為parent的元素是參照物 */
              position: relative;
          }
      
          .child{
              width: 150px;
              height: 280px;
              border: 2px solid green;
              margin: 15px;
      
              /* 設(shè)定屬性值為child的元素是參照物 */
              /* position: relative; */
          }
          
          .mod01{
              width: 50px;
              height: 60px;
              border: 2px dashed gold;
      
              /* 有父元素的時候,設(shè)定屬性值為mod1的元素是參照物, 此時是無效的*/
              /* position: relative; */
          }
      
          .mod02{
              width: 50px;
              height: 60px;
              border: 2px dashed orange;
      
              /* 設(shè)定當(dāng)前的絕對位置元素為mod2 */
              position: absolute;
              /* 設(shè)置偏移值 */
              top: 50px;
              left: 50px;
          }
      
          .mod03{
              width: 50px;
              height: 60px;
              border: 2px dashed blueviolet;
      
              /* 有父元素的時候,設(shè)定屬性值為mod3的元素是參照物, 此時是無效的*/
              /* position: relative; */
          }
      
      </style>
      
      <body>
          <div class="parent">
              <div class="child">
                  <div class="mod01"></div>
                  <div class="mod02"></div>
                  <div class="mod03"></div>
              </div>
          </div>
      </body>
      

  • 固定定位

    • 將元素的內(nèi)容固定在頁面的某個位置,當(dāng)用戶向下滾動頁面時元素框并不隨著移動

    • 使用方法:設(shè)定屬性和屬性值position: fixedwidth: xxxpx 、height: xxxpx

      固定定位同時可以設(shè)定當(dāng)前元素距離頁面左和上的邊距

  • z-index

    • 如果有重疊元素,使用z軸屬性,定義上下層次

    • z軸屬性,要配合相對或絕對定位來使用

    • z值沒有額定數(shù)值(整型就可以,具體用數(shù)字幾,悉聽尊便)

    • 使用方法:為兩個重疊的標(biāo)簽同時設(shè)定屬性和屬性值position: relative、z-index: xxx

      其中z-index的屬性值較大的顯示在上層

    • 示例Code

4. CSS3

  • 圓角與盒子陰影
  • 漸變
  • 背景
  • 過渡
  • 動畫

三、JavaScript

1. JavaScript概述

  • JavaScript的特點(diǎn)
    • 解釋執(zhí)行:事先不編譯,逐行執(zhí)行
    • 基于對象:內(nèi)置大量現(xiàn)成對象
  • JavaScript的組成
    • ECMAScript:定義核心語法,關(guān)鍵字,運(yùn)算符,數(shù)據(jù)類型等系列標(biāo)準(zhǔn)
    • DOM:文檔對象模型,將一個html頁面的所有節(jié)點(diǎn)看成是一個一個的對象,更有層次感的管理每一個節(jié)點(diǎn)
    • BOM:瀏覽器對象模型,是對瀏覽器窗口進(jìn)行訪問和操作

2. HTML與JavaScript結(jié)合方式

  • 行內(nèi)腳本

    作為屬性值來使用,一般只寫方法調(diào)用或return 方法調(diào)用

  • 內(nèi)部腳本

    • 使用<script></script>

    • 標(biāo)準(zhǔn)是寫在head和body之間(脖子位置)

  • 外部腳本

    使用script標(biāo)簽中的屬性src添加.js文件來引入腳本

3. JavaScript的使用

  • 變量

    • 定義變量的時候,所有的數(shù)據(jù)類型都是var

    • 聲明變量: var x、var x,y

    • 實(shí)際的變量類型

      • number:不區(qū)分整型數(shù)值和浮點(diǎn)型數(shù)值
      • string:首尾由單引號或雙引號括起
      • boolean:true和false也代表1和0
    • 自動類型轉(zhuǎn)換

    • 數(shù)據(jù)類型相關(guān)函數(shù)

      • parseInt
      • parseFloat
      • typeof:查詢變量的當(dāng)前類型
    • null和undefined

      • null:在程序中代表“無值”或者“無對象”,可以通過給一個變量賦值 null 來清除變量的內(nèi)容
      • undefined:聲明了變量但從未賦值或者對象屬性不存在
    • 算數(shù)運(yùn)算符特殊用法

      • -可以表示減號,也可以表示負(fù)號,如:x = -y
      • +可以表示加法,也可以用于字符串的連接
    • 關(guān)系運(yùn)算符

      • ===:類型相同,數(shù)值相同

      • !==:非嚴(yán)格相等,與==類似

      • 示例Code

        <script>
            var a = "10";
            var b = 10;
        
            if (a == b) {
                alert("a == b");//成立
            }
            if (a !== b) {
                alert("a !== b");//成立
            }
            if (a === b) {
                alert("a === b");//不成立
            }
        </script>
        
    • 邏輯運(yùn)算符

    • 流程控制語句

  • 字符串處理API

  • 數(shù)組

    • 創(chuàng)建數(shù)組

      var arr1 = new Array();

    • 初始化數(shù)組的三種方式:

      • 利用索引進(jìn)行初始化
      • 使用Array構(gòu)造方法傳參進(jìn)行初始化
      • 利用方括號[]進(jìn)行初始化

      數(shù)組類型的返回值類型通常也是用var

    • 獲取數(shù)組長度的字段length

    • 對數(shù)組進(jìn)行操作的常用方法

      • 轉(zhuǎn)字符串:tostring()、join()
      • 利用現(xiàn)有數(shù)組創(chuàng)建新數(shù)組:conact()、slice()
      • 更改當(dāng)前數(shù)組:反轉(zhuǎn)reverse()、排序sort()
  • Math對象

    無需創(chuàng)建Math對象,直接把 Math 作為對象使用就可以調(diào)用其所有屬性和方法

  • Number對象

    對數(shù)值進(jìn)行四舍五入操作

  • 正則表達(dá)式

    對字符串執(zhí)行模式匹配

  • 日期對象

  • 函數(shù)

    • 使用關(guān)鍵字 function 定義函數(shù),形參列表中不要加數(shù)據(jù)類型;函數(shù)不寫返回值類型,但是可以有返回值

      function 函數(shù)名( 形參列表 ) { 
        // 函數(shù)體 return 返回值; 
      }
      
    • 參數(shù)對象arguments是參數(shù)列表內(nèi)容的一個數(shù)組對象,可以使用length獲取參數(shù)列表長度,使用索引下標(biāo)訪問數(shù)組中的元素,參數(shù)數(shù)組索引也是從0開始

    • 構(gòu)造函數(shù)

      將函數(shù)的返回值直接寫入原來的參數(shù)列表中,參數(shù)和返回值都用字符串表示

      var myFunction = new Function("a", "b", "return a * b"); 
      var x = myFunction(4, 3); //使用構(gòu)造函數(shù)
      console.log(x);
      
    • 匿名函數(shù)

      var fn = function(a, b) {// 沒有名字的函數(shù),應(yīng)該用一個變量來接收 
          return a * 10 + b; 
      };
      
      console.log( fn(3, 4) );
      
    • 全局函數(shù):直接使用函數(shù),無需創(chuàng)建對象

      • isNaN
      • eval
      • encodeURIdecodeURI
    • 閉包

      • 閉包的概念:指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù),一般情況就是在一個函數(shù)中包含另一個函數(shù)

      • 閉包的作用:訪問函數(shù)內(nèi)部變量、保持函數(shù)在環(huán)境中一直存在,不會被垃圾回收機(jī)制處理

      • JavaScript中的全局變量可以不加var聲明,不使用var聲明的變量默認(rèn)是全局變量,作用范圍是整個script標(biāo)簽

      • 使用全局變量有時不安全,容易改變變量的值;使用閉包可以實(shí)現(xiàn)全局變量的效果,較為安全,但不推薦大量使用閉包

      • 閉包直觀的說就是形成一個不銷毀的棧環(huán)境。在函數(shù)中嵌套一個子函數(shù),通過父函數(shù)返回值調(diào)用子函數(shù),在父函數(shù)外可以使用返回值這個變量單獨(dú)調(diào)用子函數(shù)的內(nèi)容,而這個過程中父函數(shù)沒有被銷毀

      • 閉包的使用:利用子函數(shù)將父函數(shù)中局部變量改變值

      • 應(yīng)用示例:統(tǒng)計(jì)一個函數(shù)被執(zhí)行的次數(shù)

        <script>
            function parent() {
                var cnt = 0;
                function child() {
                    return cnt++;
                }
                return child;
            }
            var fun = parent();
            fun();//0
            fun();//1
            alert(fun());//輸出2
        </script>
        
        <script>
            function parent() {
                var cnt = 0;
                function child() {
                    return cnt += 1;
                }
                return child;
            }
            var fun = parent();
            alert(fun);
            // 輸出結(jié)果:
            // function child() {
            //         return cnt++;
            //     }
            alert(fun());//輸出結(jié)果:1
            alert(fun());//輸出結(jié)果:2
            alert(parent);
            // 輸出結(jié)果:
            // function parent() {
            //     var cnt = 0;
            //     function child() {
            //         return cnt++;
            //     }
            //      return child;
            // }
            alert(parent());
            // 輸出結(jié)果:
            // function child() {
            //         return cnt++;
            //     }
        </script>
        
  • JavaScript幾種輸出方式(其中alert、confirm、prompt都是全局方法直接使用)

    • 普通彈框

      alert("hello,拉勾");

    • 控制臺日志輸出

      console.log("谷歌瀏覽器按F12進(jìn)入控制臺");

    • 頁面輸出

      <h2>元素輸出到<body>中:

      document.write("<h2>我愛你中國</h2>");

      輸出內(nèi)容可以加標(biāo)簽,制作不同的頁面輸出效果

    • 確認(rèn)框

      confirm("確定刪除嗎?");頁面輸出會顯示確認(rèn)和取消按鈕

      傳參是彈框提示語句的字符串

      一般用var接收boolean類型的返回值,選擇確認(rèn)返回true,選擇取消返回false

    • 提示輸入框

      prompt("請輸入姓名:");頁面輸出會顯示輸入框和確認(rèn)、取消按鈕

      傳參是彈框提示語句的字符串

      一般用var接收返回值,返回值內(nèi)容為輸入框輸入的字符串內(nèi)容

4. DOM操作

4.1 DOM訪問

  • document對象:表示當(dāng)前整個HTML頁面

    <!DOCTYPE html>
    

    HTML頁面中通常在最上方進(jìn)行聲明文檔類型

    !表示聲明,DOCTYPE表示文檔類型,html表示是HTML類型的文檔

  • 通過標(biāo)簽的id屬性獲取元素節(jié)點(diǎn)對象

    方法getElementById

    <body>
        <form action="" onsubmit="login()">
            <p>賬號:<input id="username"></p>
            <p>電話:<input id="phone"></p>
            <p><button>登錄</button></p>
        </form>
    
        <script>
            function login(){
                var id = document.getElementById("username");
                alert(id);
            }
        </script>
    </body>
    

    onsubmit屬性可以在本表單提交后調(diào)用login方法,方法調(diào)用后彈框打印[object HTMLInputElement],表示getElementById方法獲取的對象類型

    對該對象調(diào)用value字段可以獲取具體數(shù)值或字符串

    <body>
        <form action="xxx" onsubmit="return login()">
            <p>賬號:<input id="username"></p>
            <p>電話:<input id="phone"></p>
            <p><button>登錄</button></p>
        </form>
    
        <script>
            function login(){
                var id = document.getElementById("username").value;
                if (id == "") {
                    alert("賬號不能為空");
                    return false;
                }
                return true;
            }
        </script>
    </body>
    

    本表單提交后,屬性onsubmit獲取返回值,若為true則以繼續(xù)執(zhí)行,若為false則停在此處

  • 通過標(biāo)簽的多個相同name屬性獲取元素節(jié)點(diǎn)對象數(shù)組

    onchange屬性可以在復(fù)選框選擇時,調(diào)用checkAllBox方法,其中傳入的this參數(shù)代表本input標(biāo)簽(type為checkbox的復(fù)選框)對象

    通過getElementsByName方法可以獲取同一name屬性的所有標(biāo)簽對象,方法返回值為由這些對象組成的數(shù)組

    type屬性值為checkbox的input標(biāo)簽,可以加入屬性值為checked的checked屬性,若不定義這個屬性,checkbox類型的input也會默認(rèn)有這個屬性

    <body>
        <table border="1" cellspacing="0">
            <tr align="left">
                <td><input type="checkbox" name="cb" onchange="checkAllBox(this)">全選</td>
                <td>生產(chǎn)日期</td>
                <td>價格</td>
            </tr>
    
            <tr align="center">
                <td><input type="checkbox" name="cb">商品1</td>
                <td>1990</td>
                <td>25d</td>
            </tr>
    
            <tr align="center">
                <td><input type="checkbox" name="cb">商品2</td>
                <td>1991</td>
                <td>30d</td>
            </tr>
    
            <tr align="center">
                <td><input type="checkbox" name="cb">商品3</td>
                <td>1996</td>
                <td>67d</td>
            </tr>
        </table>
    
        <p><button>提交訂單</button></p>
            
        <script>
            function checkAllBox(all) {
                var arr = document.getElementsByName("cb");
                for (var n = 0; n < arr.length; n++) {
                    arr[n].checked = all.checked;
                }
            }
        </script>
    </body>
    
  • 通過標(biāo)簽名稱獲得元素節(jié)點(diǎn)對象集,通常拿到元素節(jié)點(diǎn)對象可以使用.style.屬性值的方式的修改元素節(jié)點(diǎn)的樣式(類似于使用CSS中style標(biāo)簽下的選擇器)

    使用方法:使用element對象調(diào)用getElementsByTagName方法取得返回值是數(shù)組,對數(shù)組進(jìn)行遍歷,其中每個數(shù)組元素為相同標(biāo)簽名的元素節(jié)點(diǎn)

4.2 DOM修改

  • 獲取或改變HTML中的內(nèi)容

    主要是通過獲取到的元素節(jié)點(diǎn)對象調(diào)用innerHTML字段來獲取或修改標(biāo)簽的內(nèi)容

  • 獲取或改變HTML中的樣式

    主要是通過獲取到的元素節(jié)點(diǎn)對象調(diào)用style字段來獲取節(jié)點(diǎn)的style對象,再通過調(diào)用標(biāo)簽的樣式字段來獲取或修改標(biāo)簽的樣式(類似于使用CSS中style標(biāo)簽下的選擇器)

  • 添加元素節(jié)點(diǎn)

    使用createElement創(chuàng)建節(jié)點(diǎn),對節(jié)點(diǎn)對象調(diào)用方法setAttribute設(shè)置屬性和屬性值

    插入節(jié)點(diǎn)一般用父節(jié)點(diǎn)對象調(diào)用方法appendChild(子節(jié)點(diǎn)對象)

    使用getElementsByTagName獲取當(dāng)前頁面的節(jié)點(diǎn)對象數(shù)組,通過索引下標(biāo)來訪問某個父節(jié)點(diǎn)

  • 刪除元素節(jié)點(diǎn)

    通過parentNode來獲取該節(jié)點(diǎn)的父節(jié)點(diǎn),通過父節(jié)點(diǎn)方法removeChild(子節(jié)點(diǎn)對象)來刪除子節(jié)點(diǎn)

  • 替換元素節(jié)點(diǎn)

    • 獲取當(dāng)前節(jié)點(diǎn)對象old
    • 創(chuàng)建新節(jié)點(diǎn)對象new
    • 當(dāng)前節(jié)點(diǎn)對象調(diào)用parentNode方法獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn),通過父節(jié)點(diǎn)方法replaceChild(new,old)進(jìn)行替換

4.3 事件

  • 事件:JavaScript通過捕獲頁面上的操作而做出反饋,事件一般是標(biāo)簽中的屬性,一般將事件屬性的屬性值設(shè)定為JavaScript方法調(diào)用或return 方法調(diào)用

    屬性值是return xxx(),方法返回值為布爾值時有效,方法返回true為執(zhí)行,false為阻止當(dāng)前標(biāo)簽事件發(fā)生(如<a>中會阻止頁面跳轉(zhuǎn))

  • 窗口事件

    在body和frameset元素中添加onload屬性,將其屬性值設(shè)定為一個JavaScript方法,每當(dāng)頁面加載完成后自動調(diào)用這個方法

  • 表單元素事件

    表單標(biāo)簽<form>的子標(biāo)簽中可以添加屬性onblur(失去焦點(diǎn)時執(zhí)行)、onfocus(獲得焦點(diǎn)時執(zhí)行)

    獲取焦點(diǎn):通過點(diǎn)擊輸入框、復(fù)選框選項(xiàng)

  • 鼠標(biāo)事件

    對執(zhí)行腳本進(jìn)行如:單擊、雙擊、移出元素、懸停元素

  • 鍵盤事件

  • 事件冒泡

  • 事件捕獲

4.4 面向?qū)ο驩OP

  • 使用Object創(chuàng)建通用對象
  • 使用構(gòu)造函數(shù)
  • 使用直接量

4.5 JSON

  • JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式

  • 作用:互聯(lián)網(wǎng)上來回傳遞數(shù)據(jù),如果沒有一個統(tǒng)一的格式,解析起來的難度很大,

    使用JSON易于人閱讀和編寫,同時也易于機(jī)器解析和生成

  • 格式:

    {
    屬性1:值1,
    屬性2:值2,
    。。。。
    }
    
  • 使用JavaScript可以將JSON看作一個對象,通過對象.屬性值名的方式獲取JSON對象屬性值

    常見的用法:JSON數(shù)組(以JSON為元素類型的數(shù)組),同樣可以使用索引下標(biāo)訪問每個JSON對象

  • 復(fù)雜的JSON對象

    JSON對象的屬性值可以是字符串?dāng)?shù)組,屬性的訪問方式JSON對象.屬性名[索引]

5. BOM操作

  • BOM操作就是JavaScript對瀏覽器的一些常規(guī)操作的方法

  • window對象:window是全局的可以直接調(diào)用相應(yīng)的字段

    • screen屏幕對象

      window.screen屏幕對象,屏幕對象常用字段:width、height

    • navigator對象包含有關(guān)訪問者瀏覽器的信息

      window.navigator

    • location通常用來做頁面跳轉(zhuǎn),是內(nèi)置的對象可以直接使用該對象調(diào)用字段或方法

      location.hrefhref字段可以指定URL進(jìn)行跳轉(zhuǎn)

      location.reload()reload方法可以重新加載當(dāng)前頁面(相當(dāng)于刷新頁面)

    • history對象會記錄瀏覽器的痕跡,是內(nèi)置的對象可以直接使用該對象調(diào)用字段或方法

      history.go(-1):跳回上一級頁面

      history.back():跳回上一級頁面

    • 存儲對象

      • 兩種存儲對象的存儲方式:和Java中map很相似,都是鍵值對的方式存數(shù)據(jù)

      • localStorage:本地存儲,在關(guān)閉窗口或標(biāo)簽頁之后將會刪除這些數(shù)據(jù)

        常用方法:getItem、setItem、removeItem

      • sessionStorage:會話存儲,就是保持瀏覽器別關(guān)閉,關(guān)閉瀏覽就等于結(jié)束了一次會話,

        開啟瀏覽器就意味著創(chuàng)建了一次會話。

        常用方法:getItem、setItem、removeItemclear

      • 兩種存儲對象的使用方式:先set再get,若沒有set就get,get方法返回false

  • 計(jì)時操作(常用3個方法都是全局方法可以直接調(diào)用)

    • setInterval:指定時間間隔去執(zhí)行某個方法,該方法返回定時器對象

      setInterval(方法名, 毫秒數(shù))

    • clearInterval:和setInterval配合使用,向clearInterval傳入定時器對象,停止定時器

      clearInterval(定時器對象)

    • setTimeout:設(shè)定指定時間倒計(jì)時完成后執(zhí)行某個方法

      setTimeout(方法名, 毫秒數(shù))

本文摘自 :https://www.cnblogs.com/

開通會員,享受整站包年服務(wù)立即開通 >