亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 11
粉絲 0
評(píng)論 0
訪問量 12268
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
HTML知識(shí)點(diǎn)學(xué)習(xí)總結(jié)--PHP培訓(xùn)十期線上班
宋明杰
原創(chuàng)
882人瀏覽過

1,HTML—標(biāo)簽總結(jié):

A：基本標(biāo)簽；

A1，<header></header>：頁眉標(biāo)簽，主要用在頁面的開頭。頁面中允許出現(xiàn)多次，代替并優(yōu)于傳統(tǒng)標(biāo)簽<div class = 'header'>.
A2，<nav></nav>導(dǎo)航標(biāo)簽，用于導(dǎo)航欄，通常由一個(gè)或多個(gè)<a></>嵌套在列表標(biāo)簽中組成，代替并優(yōu)于傳統(tǒng)標(biāo)簽<div class = 'nav'
A3，<main></main>主體標(biāo)簽，頁面主體，強(qiáng)烈建議，一個(gè)頁面只出現(xiàn)一次。
A4，<footer></footer>頁腳標(biāo)簽，在頁面的底部，放友情鏈接，備案號(hào)等內(nèi)容，，。一個(gè)頁面中允許出現(xiàn)多次。代替<div class = 'footer>
A5，<article></article內(nèi)容區(qū)塊，本義是文檔標(biāo)簽，實(shí)際包括的內(nèi)容可以是獨(dú)立的段落，功能區(qū)塊（列表，表格），導(dǎo)航等。
A6，<aside></aside>附加區(qū)塊，本義是旁邊的，主要設(shè)置與主體內(nèi)容無關(guān)的信息，比如廣告位，推薦，閱讀排行等。
A7，<section></section>重復(fù)區(qū)塊，本義是部分，片段的意思，特指主體中可以重復(fù)定義的區(qū)塊，在功能上與傳統(tǒng)的<div>非常像，基本可以互換。
A8，<div></div>布局標(biāo)簽，通用容器，本身無語義，功能主要是通過屬性來定義，例如：class = ‘nav’.

B:文本標(biāo)簽；

B1，<p></p>段落內(nèi)容，獨(dú)占一行。
B2，<pre></pre>按源碼格式原樣顯示，也就是說，你放在這個(gè)標(biāo)簽里面是什么樣式，瀏覽器就顯示什么樣式。
B3，<br>換行標(biāo)簽
B4，<span></span>無語義，主要用于行內(nèi)標(biāo)簽。

C，語義話文本標(biāo)簽

C1，<time>描述日期或時(shí)間，
C2，<abbr>縮寫
C3，<sub>,<sup>上標(biāo)，下標(biāo)，
C4，<address>地址，通常用在<footer>標(biāo)簽中，
C5，<s>/<del>刪除線，
C6，<code>顯示代碼塊，
C7,<progress>進(jìn)度條，
C9，<b>/<strong>加粗，
C10，<i>/<em>斜體，
C11，<mark></mark>高亮標(biāo)記，默認(rèn)為黃色背景，
C12，<q>/<blokquote>引用標(biāo)簽，內(nèi)容加雙引號(hào)，

D，圖像標(biāo)簽

<img src= '' alt = ''....>圖片使用標(biāo)簽，
屬性：
src:圖片來源地址，可以是本地，也可以是網(wǎng)絡(luò),
alt:圖片描述信息，當(dāng)圖片無法顯示時(shí)，則提示該信息，
width/height：圖片大小，一般寬高只設(shè)定一個(gè)參數(shù)，另一個(gè)會(huì)等比例縮放，

E，鏈接標(biāo)簽

<a href = "" target = "" title = ""...>鏈接標(biāo)簽，主要用于頁面和錨點(diǎn)的跳轉(zhuǎn)，
屬性：
href = “url”,跳轉(zhuǎn)的目標(biāo)地址，
href = “mailto:2233@qq.com”打開郵件，發(fā)送郵件，
href = “tel:139**“會(huì)詢問用戶是否撥打電話，
href = “demo.rar”瀏覽器不會(huì)解析文檔，會(huì)直接下載，
target = “self”當(dāng)前窗口打開，
target = “blank”新窗口打開，
target = “name”指定名稱的窗口打開，
target = “#anchor”跳轉(zhuǎn)到錨點(diǎn)所在位置，

F，列表標(biāo)簽，

F1,<ul><li>...</li></ul>>無序列表
F2,<Ol><li>...</li></Ol>>有序列表
F3,<dl><dt>...</dt><dd>...</dd></dl>>自定義列表

實(shí)例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基本標(biāo)簽</title>
  6. </head>
  7. <body>
  8.     <header>
  9.         <nav>
  10.             <a href = '#'>我的淘寶</a>
  11.             <a href = '#'>購物車</a>
  12.             <a href = '#'>登陸</a>
  13.             <a href = '#'>活動(dòng)詳情</a>
  14.         </nav>
  15.     </header>
  16.     <main>
  17.         <h2>主體頁面</h2>
  18.         <div class = ''>
  19.             <h5>今日熱點(diǎn)</h5>
  20.             <p>頁面，頁面好的很</p>
  21.         </div>
  22.         <section>
  23.             <span>我愛PHP</span>
  24.             <h5>是真的哦</h5>
  25.         </section>
  26.         <aside>
  27.             <h2>側(cè)邊欄</h2>
  28.             <ul>
  29.                 <li>
  30.                     <a href = '#'>廣告招商</a>
  31.                 </li>
  32.                 <li>
  33.                     <a href = '#'>廣告招商1</a>
  34.                 </li>
  35.                 <li>
  36.                     <a href = '#'>廣告招商2</a>
  37.                 </li>
  38.                 <li>
  39.                     <a href = '#'>廣告招商3</a>
  40.                 </li>
  41.             </ul>
  42.         </aside>
  44.     </main>
  46.     <footer>
  47.         <h2>頁腳</h2>
  48.         <a href = '#'>友情鏈接</a>
  49.         <span>備案號(hào)：
  50.             <a href = '#'>3794739473294</a>
  51.         </span>
  52.     </footer>
  53. </body>
  54. </html>

運(yùn)行結(jié)果：

圖片案例：

  1. <img src = 'img/sea1.jpg' alt = '這是' width = '300'>
  2. <img src = 'img/sea15.jpg' alt = '這是碼頭' width = '300'>

運(yùn)行結(jié)果：

  1.   <div>
  2.             <h2>有序列表</h2>
  3.             <ol>
  4.                 <li>有序列表1</li>
  5.                 <li>有序列表2</li>
  6.                 <li>有序列表3</li>
  7.                 <li>有序列表4</li>
  8.             </ol>
  9.             <br />
  10.             <h2>無序列表</h2>
  11.             <ul>
  12.                 <li>無序列表1</li>
  13.                 <li>無序列表2</li>
  14.                 <li>無序列表3</li>
  15.                 <li>無序列表4</li>
  16.             </ul>
  17.             <br />
  18.             <h2>定義列表</h2>
  20.             <dl>
  21.                 <dt>PHP中文網(wǎng)</dt>
  22.                 <dd>這里有：PHP學(xué)習(xí)</dd>
  23.                 <dd>這里有：HTML學(xué)習(xí)</dd>
  24.                 <dd>這里有：CSS學(xué)習(xí)</dd>
  25.                 <dt>電影《冰與火之歌》</dt>
  26.                 <dd>主演：kdjfklj,dfd </dd>
  27.                 <dd>幾季：8季</dd>
  29.             </dl>
  30.         </div>

運(yùn)行結(jié)果：

G，表格標(biāo)簽，

表格—數(shù)據(jù)標(biāo)簽：
G1，<table>定義表格，必選，
G2，<tr>定義表格中的行，必選，
G3，<th>定義表格頭部中的單元格，必選，
G4，<td>定義主體中的單元格，必選，
表格—結(jié)構(gòu)標(biāo)簽，
G4，<option>定義表格標(biāo)題，可選
G5，<thead>定義表格頭格，只需定義一次，可選
G6，<tbody>定義表格主體，可多次定義，可選
G7，<tfooter>定義表格底，只需定義一次，可選
表格—常用屬性，
G9，border，所屬<table>標(biāo)簽，定義：添加表格框，
G10，cellpadding，所屬<table>標(biāo)簽，定義：單元格內(nèi)邊距，
G11，cellspacing,所屬<table>標(biāo)簽，定義：單元格邊框間歇，
G12，align，不限標(biāo)簽，定義：設(shè)置單元格內(nèi)容水平居中，
G13，bgcolor，不限標(biāo)簽，設(shè)置背景色，
G14，隔行間色，

實(shí)例：

  1.  <div>
  2.             <table border = '1' cellpadding = '3' cellspacing = '0' align = 'center' width = '600'>
  3.                 <caption>
  4.                     <h3>商品銷售單</h3>
  5.                 </caption>
  6.                 <thead bgcolor = '#FFFF00'>
  7.                     <th>序號(hào)</th>
  8.                     <th>類別</th>
  9.                     <th>品名</th>
  10.                     <th>單價(jià)</th>
  11.                     <th>數(shù)量</th>
  12.                     <th>小計(jì)</th>
  13.                 </thead>
  14.                 <tbody align = 'center'>
  15.                     <td>1</td>
  16.                     <td rowspan = '2'>服裝</td>
  17.                     <td>衣服</td>
  18.                     <td>5.00</td>
  19.                     <td>100</td>
  20.                     <td>500.00</td>
  22.                     <tr />
  24.                     <td>2</td>
  25.                     <td>褲子</td>
  26.                     <td>5.00</td>
  27.                     <td>300</td>
  28.                     <td>1500.00</td>
  30.                     <tr />
  32.                     <td>3</td>
  33.                     <td>電器</td>
  34.                     <td>手機(jī)</td>
  35.                     <td>5.00</td>
  36.                     <td>500</td>
  37.                     <td>250.00</td>
  38.                 </tbody>
  39.                 <tbody align = 'center'>
  40.                     <td colspan = '4'>合計(jì)</td>
  41.                     <td>900</td>
  42.                     <td>2250.00</td>
  43.                 </tbody>
  44.             </table>
  45.         </div>

運(yùn)行結(jié)果：

H，表單標(biāo)簽，

表單元素類型，
H1，<form>，表單容器，所有表單應(yīng)放在該標(biāo)簽內(nèi)提交，屬性有:action,methdo,
H2，<input>，輸入標(biāo)簽，由 type 屬性控制輸入類型，屬性有:type,name,value,placeholder…,
H3，<label>，控件標(biāo)簽，用于控件功能描述與內(nèi)容關(guān)聯(lián)，屬性有:for,
H4，<select>，下拉列表，用于選擇預(yù)置的輸入內(nèi)容，屬性有:name,
H5，<datalist>，預(yù)置列表，用于展示預(yù)置的內(nèi)容，屬性有:id,與<input list = ''>關(guān)聯(lián)，
H6，<option>，預(yù)置選項(xiàng)，與 select,datalist配合使用，屬性有:value,label,selected,
H7，<textarea>，文本域，多行文本框，屬性有:cols,rows,name…,
H8，<button>，按鈕，用于提交表單，屬性有:type,name,
公共屬性，（并非所有元素都具備）
1，name，元素/控件名稱，用做服務(wù)器腳步的變量名稱，
2，value，提交到服務(wù)器端的數(shù)據(jù)，
3，form，所屬表單，與<form name = ''>對(duì)應(yīng)，
4，placeholder，輸入框的提示信息，
5，autofocus，頁面加載是，自動(dòng)獲取焦點(diǎn)，
6，required，必填/必選項(xiàng)，
7，readonly，該控件內(nèi)容只讀，
8，disabled，是否禁用，

<input>的常用type類型，
1，type = ‘text’，文本框，
2，type = ‘password’，密碼框，輸入內(nèi)容顯示*，不顯示明文，
3，type = ‘radio’，單選按鈕，僅允許選擇多個(gè)默認(rèn)值中的一個(gè)，
4，type = ‘checkbox’，復(fù)選框，允許選取多個(gè)默認(rèn)值中的多個(gè)，
5，type = ‘hidden’，隱藏域，頁面不顯示，但數(shù)據(jù)任會(huì)提交，
6，type = ‘file’，文件上傳，本地文件上傳，有accept,multiple屬性，
7，type = ‘submit’，提交按鈕，點(diǎn)擊后會(huì)提交按鈕所在的表單，
8，type = ‘reset’，重置按鈕，點(diǎn)擊后會(huì)重置輸入控件中的內(nèi)容為默認(rèn)值，
9，type = ‘button’，自定義按鈕，使用JS腳步定義按鈕點(diǎn)擊后的行為，

<input>的其他type類型，
1，type = ‘email’，郵箱，輸入必需是郵箱格式，
2，type = ‘number’，整數(shù)，輸入必需是整數(shù)，可設(shè)置最小，最大范圍，
3，type = ‘URL’，URL地址，輸入必需是有效的URL格式，
4，type = ‘search’，搜索框，通常與autocomplete配合，
5，type = ‘hidden’，隱藏域，頁面不顯示，但任會(huì)提交數(shù)據(jù)，
6，type = ‘date’，日期控件
7，type = ‘color’，調(diào)色板，可直接選擇顏色，
8，type = ‘tel’，電話號(hào)碼，手機(jī)端會(huì)彈出數(shù)字小鍵盤，
表單注意事項(xiàng)：
1，添加disabled禁用屬性的字段數(shù)據(jù)不會(huì)被提交，但readonly只讀屬性的字段允許提交。
2，隱藏域的內(nèi)容不會(huì)在HTML頁面中顯示，但其中的VALUE屬性數(shù)據(jù)會(huì)被提交，

I，內(nèi)聯(lián)框架與多媒體：

1，<iframe>，內(nèi)聯(lián)標(biāo)簽，就是在當(dāng)前頁面中再內(nèi)嵌另外一個(gè)頁面，類似畫中畫，
2，通過<a>/<form>標(biāo)簽的target屬性觸發(fā)和加載，
3，屬性，src,被嵌套頁面的URL地址。
代碼：

  1.      <div>
  2.             <h3>用戶注冊(cè)</h3>
  3.             <form>
  4.                 <p>
  5.                     <label for = 'usename'>賬號(hào)：</label>
  6.                     <input type = 'text' id = 'usename' placeholder = '請(qǐng)輸入電話號(hào)碼'>
  7.                 </p>
  8.                 <p>
  9.                     <label for = 'password'>密碼：</label>
  10.                     <input type = 'password' id = 'password' placeholder = '請(qǐng)輸入6位數(shù)字密碼'>
  11.                 </p>
  12.                 <p>
  13.                     <label for = 'tel'>電話：</label>
  14.                     <input type = 'tel' id = 'tel' placeholder = '請(qǐng)輸入電話號(hào)碼'>
  15.                 </p>
  16.                 <p>
  17.                     <label >性別：</label>
  18.                     <input type = 'radio' name = 'xinbie' id = 'nan' checked><label for = 'nan'>男</label>
  19.                     <input type = 'radio' name = 'xinbie' id = 'n'><label for = 'n'>女</label>
  20.                 </p>
  21.                 <p>
  22.                     <label for = 'xueli'>學(xué)歷：</label>
  23.                     <select name = '學(xué)歷' id = 'xueli'>
  24.                         <option >小學(xué)</option>
  25.                         <option >中學(xué)</option>
  26.                         <option >大學(xué)</option>
  27.                     </select>
  28.                 </p>
  29.                 <p>
  30.                     <input type = 'submit' value = '注冊(cè)'>
  31.                     <input type = 'reset' value = '重置'>
  32.                 </p>
  33.             </form>
  34.         </div>

運(yùn)行結(jié)果：

手抄寫作業(yè)：


批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：總結(jié)的很好, 關(guān)鍵是要記住喲
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)