整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          最詳細(xì)的html+css筆記(一)


          一章 職業(yè)規(guī)劃和前景


          • 職業(yè)方向規(guī)劃定位:
          • web前端開(kāi)發(fā)工程師
          • web網(wǎng)站架構(gòu)師
          • 自己創(chuàng)業(yè)
          • 轉(zhuǎn)崗管理或其他
          • web前端開(kāi)發(fā)的前景展望:
          • 未來(lái)IT行業(yè)企業(yè)需求最多的人才
          • 結(jié)合最新的html5搶占移動(dòng)端的市場(chǎng)
          • 自己創(chuàng)業(yè)做老板
          • 隨著互聯(lián)網(wǎng)的普及web開(kāi)發(fā)成為企業(yè)的寵兒和核心
          • web職業(yè)發(fā)展目標(biāo):
          • 第一、梳理知識(shí)架構(gòu)
          • 負(fù)責(zé)內(nèi)容的HTML
          • 負(fù)責(zé)外觀的css(層疊樣式表)
          • 負(fù)責(zé)行為的js
          • ps切圖
          • 第二、分解目標(biāo)(起步階段、提升階段、成型階段)
          • 起步階段:
          • 基本知識(shí)的掌握
          • 常用工具的掌握
          • 溝通技巧的掌握(圍繞客戶的需求)
          • 良好的開(kāi)發(fā)習(xí)慣(加注釋、對(duì)齊方式)
          • 提升階段:
          • 熟悉掌握HTML基本標(biāo)簽和屬性
          • 熟練掌握css的基本語(yǔ)法和使用
          • 瀏覽器兼容和w3c標(biāo)準(zhǔn)的掌握
          • 結(jié)合html+css+js開(kāi)始系統(tǒng)項(xiàng)目的開(kāi)發(fā)
          • 成型階段:
          • 精通DIV+CCS布局
          • 精通css樣式表控制html標(biāo)簽
          • 熟悉運(yùn)用js制作動(dòng)態(tài)網(wǎng)站的效果
          • 能獨(dú)立開(kāi)發(fā)完成網(wǎng)站

          第二章 html基本結(jié)構(gòu)


          • 認(rèn)識(shí)HTML:
          • html不是一種編程語(yǔ)言,是一種標(biāo)志語(yǔ)言
          • 標(biāo)記語(yǔ)言是由一套標(biāo)識(shí)標(biāo)簽組成的
          • html使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)
          • html結(jié)構(gòu):
          <html>
           <head></head>
           <body></body>
          </html>
          
          • 不成對(duì)出現(xiàn)的標(biāo)簽
          • <br> <hr> <meta> <img> <input..> <option..> <link>
          • HTML 基本標(biāo)簽的講解:
          • <html> <head> <body>標(biāo)簽
          • <h1>—-<h6>僅僅用于標(biāo)題文本,不要為了產(chǎn)生粗體文本使用它們
          • <p>標(biāo)簽 段落標(biāo)簽
          • <strong><b>標(biāo)簽
          • 都會(huì)讓文字產(chǎn)生加粗效果
          • <strong>用于強(qiáng)調(diào)文本,強(qiáng)度更深,表示重要文本—>用于SEO優(yōu)化
          • <b>只是視覺(jué)加粗效果—>單純?yōu)榱水a(chǎn)生加粗
          • <em> <i>標(biāo)簽
          • em用于強(qiáng)調(diào)文本
          • i只是視覺(jué)斜體效果
          • <strong>比<em>強(qiáng)調(diào)更強(qiáng)
          • 特殊符號(hào):
          • —->空格
          • > —>大于號(hào)
          • &lt;—>小于號(hào)
          • &quot;—>引號(hào)
          • ?–>版權(quán)號(hào)

          第三章 html基本標(biāo)簽


          • HTMl基本標(biāo)簽:
          • span標(biāo)簽
          • 對(duì)被用來(lái)組合文檔中的行內(nèi)元素
          • 注意:span沒(méi)有固定的格式表現(xiàn),當(dāng)對(duì)它應(yīng)用樣式時(shí),才會(huì)產(chǎn)生視覺(jué)上的變化
          • <pre>標(biāo)簽
          • 文字的格式按源碼的排版來(lái)顯示,我們稱之為預(yù)處理格式
          • <a>標(biāo)簽—>他有一個(gè)必不可少的屬性 href
          • target屬性:
          • _self(在原來(lái)頁(yè)面打開(kāi))
          • _blank(新窗口打開(kāi))
          • _top(打開(kāi)時(shí)忽略所有的框架)
          • _parent(在父窗口中打開(kāi))
          • 創(chuàng)建錨點(diǎn)和錨鏈接
          • 錨點(diǎn)也是一種超鏈接,是頁(yè)面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接
          • 第一步:創(chuàng)建錨點(diǎn) <a name="錨點(diǎn)名稱"></a>
          • 第二步:使用創(chuàng)建好的錨點(diǎn)名稱 <a href="#錨點(diǎn)名稱">內(nèi)容</a>
          • marquee標(biāo)簽
          • 可以創(chuàng)建一個(gè)內(nèi)容滾動(dòng)效果
          <marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
          
          • direction 表示滾動(dòng)方向,取值有(left,right,up,down,默認(rèn)left)
          • loop表示滾動(dòng)循環(huán)的次數(shù),默認(rèn)為無(wú)限循環(huán)
          onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滾動(dòng)速度)
          
          • 表示當(dāng)鼠標(biāo)移上區(qū)域的時(shí)候停止?jié)L動(dòng),鼠標(biāo)移開(kāi)繼續(xù)滾動(dòng)

          第四章 img圖片標(biāo)簽與路徑


          • 圖片標(biāo)簽與路徑:
          • 常見(jiàn)圖片格式 jpg png gif
          • Gif (只支持全透明)
          • Jpeg /jpg
          • Png 半/全透明都支持
          • 圖片標(biāo)簽寫法 :
          • <img src="" alt="" width="" height="" />
          • 圖片四要素:
          • src="" 圖片路徑
          • alt="" 圖片含義
          • width="" 圖片寬度 和圖片大小保持一致
          • height="" 圖片高度 和圖片大小保持一致
          • title=""
          • 路徑知識(shí):
          • 相對(duì)路徑、絕對(duì)路徑:
          • 相對(duì)路徑:(Relative Path) 相對(duì)于該文件的路徑;
          • 絕對(duì)路徑:(Absolute Path) 從磁盤出發(fā)的路徑;
          • <img src="" …… align="" /> align屬性–設(shè)置圖片與后面文字的位置關(guān)系
          • 值–top、bottom、middle、absmiddle、left、right
          • 在靜態(tài)頁(yè)面中:
          • /開(kāi)頭表示根目錄;
          • ./表示當(dāng)前目錄;(斜畫線前面一個(gè)點(diǎn))
          • ../上級(jí)目錄;(斜畫線前面兩個(gè)點(diǎn))
          • 直接用文件名不帶/也表示同一目錄
          • 這些都是相對(duì)于當(dāng)前文件的位置來(lái)說(shuō)的,如果用絕對(duì)路徑的話就是寫全了。

          第五章 三種列表的講解


          • 三種列表的知識(shí)講解:
          • <ul>無(wú)序列表
          • 無(wú)序列表是一個(gè)沒(méi)有順序項(xiàng)目的列表,此列表項(xiàng)默認(rèn)粗體圓點(diǎn)進(jìn)行標(biāo)識(shí)
          <ul>
           <li></li>
           <li></li>
           <li></li>
          </ul>
          
          1. 有序列表
          • 有序列表也是一列項(xiàng)目,只是列表項(xiàng)目使用的是數(shù)字進(jìn)行標(biāo)記。 有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>標(biāo)簽。
          <ol>
           <li>內(nèi)容一</li>
           <li>內(nèi)容二</li>
           <li>內(nèi)容三</li>
          </ol>
          
          • 列表符號(hào)
          • 無(wú)序列表-列表符號(hào):
          • type="circle" 空心圓 type=“disc” 實(shí)心圓 默認(rèn)值 type="square" 方塊符
          • 有序列表-列表符號(hào)
          • type="A" A B C D
          • type="a" a b c d
          • type="1" 1 2 3 4 默認(rèn)值type=”I” I II III type=”i” i ii iii
          • 列表嵌套
          • 無(wú)序列表-嵌套
          <ul>
           <li>柚子
           <ul>
           <li>沙田柚</li>
           <li>蜜柚</li>
           </ul>
           </li>
           <li>荔枝</li>
           <li>蘋果</li></ul>
          
          • 有序列表-嵌套
          <ol>
           <li>茶
           <ul>
           <li>紅茶</li>
           <li>綠茶</li>
           </ul>
           </li>
           <li>果汁</li>
           <li>牛奶</li></ol>
          
          • 定義列表
          • 定義列表不僅僅是一列項(xiàng)目,而是項(xiàng)目及其注釋的組合。定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)定義列表項(xiàng)以 <dt>開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始。
          <dl> 
           <dt>pc網(wǎng)頁(yè)制作</dt> 
           <dd>學(xué)習(xí)DIV+CSS JS JQ 項(xiàng)目實(shí)戰(zhàn)</dd> 
           <dt>手機(jī)網(wǎng)頁(yè)制作</dt> 
           <dd>手機(jī)網(wǎng)頁(yè)制作實(shí)戰(zhàn)</dd>
          </dl>
          
          • dd是對(duì)dt的解釋
          • < dl>< /dl>用來(lái)創(chuàng)建一個(gè)普通的列表,
          • < dt>< /dt>用來(lái)創(chuàng)建列表中的上層項(xiàng)目,
          • < dd>< /dd>用來(lái)創(chuàng)建列表中最下層項(xiàng)目,
          • < dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對(duì)之間。
          <dl>
           <dt>中國(guó)城市</dt>
           <dd>北京 </dd>
           <dd>上海 </dd>
           <dd>廣州 </dd>
           <dt>美國(guó)城市</dt>
           <dd>華盛頓 </dd>
           <dd>芝加哥 </dd>
           <dd>紐約 </dd>
          </dl>
          
          • dl是definition list的縮寫
          • dt是definition title的縮寫
          • dd是definition description的縮寫
          • list-style屬性具有三個(gè)屬性分量:
          • list-style-position :設(shè)置列表項(xiàng)圖標(biāo)的位置,位于文本內(nèi)或者文本外
          • list-style-type: 設(shè)置列表項(xiàng)圖標(biāo)的類型
          • list-style-image:使用圖像設(shè)置列表項(xiàng)圖標(biāo)

          第六章 表單元素(上)


          • 表單標(biāo)簽:
          • <form>表單標(biāo)簽
          • <form>表單是一個(gè)包含表單元素的區(qū)域,包括起來(lái)的都是表單的內(nèi)容
          <form>
           <input type="text"/>
          </form>
          
          • HTML標(biāo)簽 - Action和確認(rèn)按鈕:
          • 當(dāng)用戶單擊確認(rèn)按鈕時(shí),表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。
          <form action="html.do" method="get"> 
           username: <input type="text" name="user" /> 
           <input type="submit" value="提 交" />
          </form>
          
          • HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽:
          • 隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的,在表單中插入隱藏域的目的在于收集或發(fā)送信息,以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候,隱藏域的信息也被一起發(fā)送到服務(wù)器
          <form> 
           <input type="hidden" name="hid" value="value">
          </form>
          
          • <input>標(biāo)簽的掌握
          • 常用type類型:
          • <input type="" name="" value="" />
          • type="text" 單行文本輸入框
          • type="password" 密碼(maxlength="")
          • type="radio" 單項(xiàng)選擇(checked="checked")
          • type="checkbox" 多項(xiàng)選擇
          • type="button" 按鈕
          • type="submit" 提交 type="image"圖片提交
          • type="file" 上傳文件
          • type="reset"重置
          • type="hidden" 隱藏
          • 關(guān)于表單中的設(shè)置默認(rèn)值:
          <input type="text" name="" value="今天心情不錯(cuò)" />
          <input type="radio" name="" value="" checked="checked">
          <input type="checkbox" name="" value="" checked="checked">
          
          <select name="" >
           <option value=""></option>
           <option value="" selected="selected"></option>
          <select>
          
          • textarea沒(méi)有默認(rèn)值
          • <label>標(biāo)簽的使用
          • <label></label>
          • label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。
          • 不過(guò),它為鼠標(biāo)用戶改進(jìn)了可用性。
          • 如果您在 label 元素內(nèi)點(diǎn)擊文本,就會(huì)觸發(fā)此控件。
          • 就是說(shuō),當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
          • <label> 標(biāo)簽的for 屬性應(yīng)當(dāng)與相關(guān)元素的 id屬性相同。
          • 例子:(重要—注冊(cè)表單–用戶體驗(yàn)–必做)
          <p>單向選擇</p>
          <label for="male">男:</label><input type="radio" name="sex" id="male"/>
          <label for="nv">女:</label><input type="radio" name="sex"checked="check"/>
          

          第七章 表單和表格(下)


          • 表單和表格標(biāo)簽:
          • <textarea>文本域標(biāo)簽
          • <textarea>標(biāo)簽:
          • <textarea></textarea>是文本域標(biāo)簽,可以在其中插入一段文字內(nèi)容,它有兩個(gè)常用屬性rows和cols
          • 注意:
          • rows表示這個(gè)文本域有多少行
          • cols表示這個(gè)文本域有多少列
          • 除了這兩個(gè)屬性它還有readonly(只讀,文本域的內(nèi)容無(wú)法改變,相當(dāng)于協(xié)議)和title(鼠標(biāo)放上提示)
          • <select>標(biāo)簽的掌握
          • 注:當(dāng)提交表單時(shí),瀏覽器會(huì)提交選定的項(xiàng)目,或者收集用逗號(hào)分隔的多個(gè)選項(xiàng),將其合成一個(gè)單獨(dú)的參數(shù)列表,并且在將 <select> 表單數(shù)據(jù)提交給服務(wù)器時(shí)包括 name屬性
          <form> 
           <select name="" id="">
           <option value="1">1月</option> 
           <option value="2">2月</option> 
          </select>
          </form>
          
          • 常用到的屬性:disabled=“disabled” name="sel" size="2"
          • <table>表格標(biāo)簽
          • <table>表格標(biāo)簽:<table>是表格標(biāo)簽,可以用它定義一個(gè)表格。
          <table border="1">
           <tr>
           <td>姓名</td>
           <td>性別</td>
           </tr>
          </table>
          
          • 注意:<table>的border屬性不能少
          • <tr> <td>標(biāo)簽的使用
          • <tr>行標(biāo)簽:
          • <tr>可以定義表格中的一行,一個(gè)<tr></tr>表示一行。
          <table border="1">
          <tr>
           <td>姓名</td>
           <td>性別</td>
          </tr>
          <tr>
           <td>姓名</td>
           <td>性別</td>
          </tr>
          </table>
          
          • <td>單元格標(biāo)簽:
          • <td>可以定義表格中的一個(gè)單元格,<td></td>表示一個(gè)單元格。
          <table border="1">
          <tr>
          <td >姓名</td>
          <td>性別</td>
          <td>愛(ài)好</td>
          </tr>
          </table>
          
          • border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框:
          • border-collapse:collapse;
          • colspan左右合并
          • rowspan上下合并

          第一部分總結(jié):

          • 非可視化標(biāo)簽:head meta style scrpit...
          • 可視化標(biāo)簽:img div span a ul li…
          • 只有可視化標(biāo)簽,才能用css改變它
          • 單標(biāo)簽:meta link base img input br hr
          • 雙標(biāo)簽:html head body div a p span ..ul li ol dl ….
          • 常用可視化標(biāo)簽
          • div
          • 一般用它來(lái)布局
          • a 超鏈接標(biāo)簽
          • href*屬性:設(shè)置跳轉(zhuǎn)的網(wǎng)頁(yè)地址
          • target屬性:設(shè)置跳轉(zhuǎn)的目標(biāo)
          • 結(jié)論:凡事頁(yè)面可以點(diǎn)擊跳轉(zhuǎn)或者表單提交的文字,都用a標(biāo)簽
          • img
          • src*屬性用來(lái)設(shè)置圖片的url數(shù)據(jù)
          • alt提供給搜索引擎搜索的
          • width
          • height
          • 結(jié)論 :顯示圖片
          • ul li
          • 列表
          • 結(jié)論:只要將來(lái)設(shè)計(jì)頁(yè)面中有固定樣式的列表,就用ul和li
          • table caption tr td (th)
          • 慢慢已經(jīng)被淘汰了 被ul li代替
          • 如果是合并豎排的就是合并行(rowspan)
          • 如果是合并橫排的就是合并列(colspan)

          HTML部分導(dǎo)圖總結(jié)


          • HTML5標(biāo)簽集合

          學(xué)習(xí)從來(lái)不是一個(gè)人的事情,要有個(gè)相互監(jiān)督的伙伴,想要學(xué)習(xí)或交流前端問(wèn)題的小伙伴可以私信“學(xué)習(xí)”小明加群獲取2019web前端最新入門資料,一起學(xué)習(xí),一起成長(zhǎng)!

          認(rèn)證的站長(zhǎng)暫時(shí)還不能使用代碼,

          可以先認(rèn)證再插入代碼

          html組件和js組件使用權(quán)限限制

          *頁(yè)面: 只允許經(jīng)過(guò)認(rèn)證的用戶使用html組件和js組件

          *文章: 只允許經(jīng)過(guò)認(rèn)證的用戶使用js組件

          html組件和js組件只允許使用規(guī)定的標(biāo)簽

          *html組件: a, code, pre, blockquote, ul, ol, li, table, thead, tbody, tfoot, tr, td, th, dd, dl, dt, s, u, b, i, font, span, strong, br, em, hr, sub, sup, div, section, p, h1, h2, h3, h4, h5, h6, vedio, audio, svg, img, style, iframe, fidldset, animate, text, tspan

          *js組件: , a, code, pre, blockquote, ul, ol, li, table, thead, tbody, tfoot, tr, td, th, dd, dl, dt, s, u, b, i, font, span, strong, br, em, hr, sub, sup, div, section, p, h1, h2, h3, h4, h5, h6, vedio, audio, svg, img, style, iframe, fidldset, animate, text, tspan

          所有標(biāo)簽屬性限制

          *不允許使用on開(kāi)頭的屬性名

          快站的技術(shù)小哥哥們限定了以上可使用的標(biāo)簽,如果有所補(bǔ)充歡迎在下方留言回復(fù),或點(diǎn)擊【閱讀原文】在社區(qū)中回復(fù),我們會(huì)考慮酌情開(kāi)放

          更多快站資訊,點(diǎn)擊進(jìn)入快站官網(wǎng)(www.kuaizhan.com)

          avascript原生阻止冒泡

          <html>
          <head>
          <style type="text/css">
          #hide{width:75%;height:80px;background:skyblue;display:block;}
          .hander{cursor:pointer;}
          input{margin:5 0 0 900;}
          </style>
          <script>
              //不用window.onload也可以
              document.documentElement.onclick = function() {
              		document.getElementById('hide').style.display = 'none';
              }
          //阻止冒泡事件方法
          function stopBubble(e) {
              e = e || window.event;
              if(e.stopPropagation) { //W3C阻止冒泡方法
              e.stopPropagation();
              } else {
              e.cancelBubble = true; //IE阻止冒泡方法
              }
          }
          //方法必須要放在window.onload下
          window.onload = function(){
              document.getElementById("hide").onclick = function(e) {
              stopBubble(e);
              }
              document.getElementById('btn_show').onclick = function(e) {
              document.getElementById('hide').style.display = 'block';
              stopBubble(e);
              }
          }
          </script>
          </head>
          <body>
          <div id="hide" class="hander">click here nothing happen,you can click beside this area</div>
          <input type="button" id="btn_show" value="show" class="hander"/>
          </body>
          onclick 如何阻止事件冒泡
          <div id="id_tag_list"><span class="right">▼</span><span class="label" onclick="deleteLabel(this)">Python數(shù)據(jù)分析與應(yīng)用</span></div>
          //刪除標(biāo)簽的方法
          function deleteLabel(target){
              var e = target;
              if(e && e.stopPropagation){ //阻止冒泡
                // 因此它支持W3C的stopPropation()方法
                e.stopPropagation();
              }else{
                // 否則, 我們得使用IE的方法來(lái)取消事件冒泡
                window.event.cancelBubble=true;
              }
          }

          jQuery如何阻止事件冒泡

          <div class="subcategories">這里有點(diǎn)擊事件</div>
          <div class="subcategories">這里有點(diǎn)擊事件</div>
          <div class="subcategories">這里有點(diǎn)擊事件</div>


          <script type="text/javascript">
          //阻止點(diǎn)擊事件
          $(function() {
              $(".subcategories").click(function(event) {
                  event.stopPropagation();
              });
          });
          </script>

          什么是js事件冒泡?

          在一個(gè)對(duì)象上觸發(fā)某類事件(比如單擊onclick事件), 如果此對(duì)象定義了此事件的處理程序, 那么此事件就會(huì)調(diào)用這個(gè)處理程序, 如果沒(méi)有定義此事件處理程序或者事件返回true,

          那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播, 從里到外, 直至它被處理(父級(jí)對(duì)象所有同類事件都將被激活), 或者它到達(dá)了對(duì)象層次的最頂層, 即document對(duì)象(有些瀏覽器是window)。

          如何來(lái)阻止Jquery事件冒泡?

          <!DOCTYPE html>
          <html">
          <head runat="server">
          <title>Jquery 事件冒泡</title>
          <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
          </head>
          <body>
            <form id="form1" runat="server">
              <div id="divOne" onclick="alert('我是最外層');">
                <div id="divTwo" onclick="alert('我是中間層!')">
                  <a id="hr_three" href="http://www.xxxxxx.com" mce_href="http://www.xxxxxx.com"onclick="alert('我是最里層!')">點(diǎn)擊我</a>
                </div>
              </div>
            </form>
          </body>
          </html>

          比如上面這個(gè)頁(yè)面,

          分為三層:divOne是第外層,divTwo中間層,hr_three是最里層;

          他們都有各自的click事件,最里層a標(biāo)簽還有href屬性。

          運(yùn)行頁(yè)面,點(diǎn)擊“點(diǎn)擊我”,會(huì)依次彈出:我是最里層---->我是中間層---->我是最外層

          ---->然后再鏈接到百度.


          這就是事件冒泡, 本來(lái)我只點(diǎn)擊ID為hr_three的標(biāo)簽, 但是確執(zhí)行了三個(gè)alert操作。

          事件冒泡過(guò)程(以標(biāo)簽ID表示):hr_three----> divTwo----> divOne 。從最里層冒泡到最外層。

          如何來(lái)阻止?

          1.event.stopPropagation();

          <script type="text/javascript">
          $(function() {
          $("#hr_three").click(function(event) {
          event.stopPropagation();
          });
          });
          <script>

          再點(diǎn)擊"點(diǎn)擊我", 會(huì)彈出:我是最里層, 然后鏈接到百度


          2.return false;

          如果頭部加入的是以下代碼

          <script type="text/javascript">
          $(function() {
            $("#hr_three").click(function(event) {
              return false;
            });
          });
          <script>

          再點(diǎn)擊"點(diǎn)擊我", 會(huì)彈出:我是最里層, 但不會(huì)執(zhí)行鏈接到百度頁(yè)面


          由此可以看出:

          1.event.stopPropagation();

          事件處理過(guò)程中,阻止了事件冒泡,但不會(huì)阻擊默認(rèn)行為(它就執(zhí)行了超鏈接的跳轉(zhuǎn))


          2.return false;

          事件處理過(guò)程中,阻止了事件冒泡,也阻止了默認(rèn)行為(比如剛才它就沒(méi)有執(zhí)行超鏈接的跳轉(zhuǎn))


          還有一種有冒泡有關(guān)的:

          3.event.preventDefault();

          如果把它放在頭部A標(biāo)簽的click事件中, 點(diǎn)擊"點(diǎn)擊我"。

          會(huì)發(fā)現(xiàn)它依次彈出:我是最里層---->我是中間層---->我是最外層, 但最后卻沒(méi)有跳轉(zhuǎn)到百度

          它的作用是:事件處理過(guò)程中, 不阻擊事件冒泡, 但阻擊默認(rèn)行為(它只執(zhí)行所有彈框, 卻沒(méi)有執(zhí)行超鏈接跳轉(zhuǎn))


          主站蜘蛛池模板: 内射少妇一区27P| 国产人妖视频一区二区破除| 上原亚衣一区二区在线观看| 国产成人av一区二区三区在线| 无码av人妻一区二区三区四区| 中文字幕精品一区影音先锋| 久久一本一区二区三区| 国产对白精品刺激一区二区| 精品午夜福利无人区乱码一区| 国产免费伦精品一区二区三区| 国产精品一区二区三区高清在线 | 色精品一区二区三区| 国产精品夜色一区二区三区| 精品国产aⅴ无码一区二区| 精品国产一区二区三区久久 | 中文字幕av人妻少妇一区二区| 在线日产精品一区| 亚洲日韩国产一区二区三区| 一区二区中文字幕| 国产精品无码不卡一区二区三区 | 国产一区二区三区在线看片 | 精品少妇ay一区二区三区 | 一区二区三区在线免费看| 久久精品国产AV一区二区三区| 高清一区二区三区视频| 亚洲综合一区无码精品| 日本一区二区免费看| 肥臀熟女一区二区三区 | 一区二区三区日本电影| 亚洲A∨精品一区二区三区下载| 亚洲av无码一区二区三区乱子伦| 日韩一本之道一区中文字幕| 亚洲成AV人片一区二区| 精品一区二区三区四区在线| 91一区二区三区四区五区| 国产凸凹视频一区二区| 日韩精品电影一区| 美女免费视频一区二区| 一区二区三区日本电影| 成人国产精品一区二区网站| 日本一区免费电影|