欧美日韩亚洲国产一区二区综合,久久999精品国产只有精品,久久精品亚洲中文无东京热

HTML 知識點總結(jié)

2019-12-12 seo達(dá)人

注意：在html中手動換行無效 3、換行 元素定義的段落內(nèi)容是不會自動換行的，如果換行需要使用 br 元素 <body> 生活賦予我們一種巨大的和無限高貴的禮品，這就是青春：充滿著力量，充滿著期待志愿，充滿著求知和斗爭的志向，充滿著希望信心和青春。     人所缺乏的不是才干而是志向，不是成功的能力而是勤勞的意志。 </body> 1 2 3 4 5 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LbaNYf1L-1578023422165)(HTML.assets/1530670731312.png)] 4、水平線 在瀏覽器中顯示一條水平線（分隔線）效果。 屬性：size=“10” color=“red” width=“100px 或者 50%” align=“l(fā)eft/right/center” 10像素高顏色寬度對齊方式 <body> 生活賦予我們一種巨大的和無限高貴的禮品，這就是青春：充滿著力量，充滿著期待志愿，充滿著求知和斗爭的志向，充滿著希望信心和青春。 <hr size="1" width="100%" color="red"/> 人所缺乏的不是才干而是志向，不是成功的能力而是勤勞的意志。 </body> 1 2 3 4 5 6 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nK6UOf0r-1578023422166)(HTML.assets/1530671029915.png)] 5、文本修飾 5.1 粗體字 這是一段正常未加粗的文本內(nèi)容. 這是一段加粗之后的文本內(nèi)容. 粗體--著重強調(diào) 1 2 3 4 5 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Va3GdgFK-1578023422168)(HTML.assets/1530672074778.png)] 5.2 斜體字 這是一段斜體的文本內(nèi)容. 1 5.3 下劃線 <body> 證明人：百知教育 </body> 1 2 3 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-aJY0EaxC-1578023422169)(HTML.assets/1530671768110.png)] 5.4 刪除線 <body> <del>這是一段要被刪除的文字</del> </body> 1 2 3 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X4f2bCuN-1578023422172)(HTML.assets/1530671905293.png)] 5.5 下標(biāo)文字 <body> H2O </body> 1 2 3 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-E8DEONkQ-1578023422179)(HTML.assets/1530672009385.png)] 5.6 上標(biāo)文字 32 = 9 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NTEZhEkv-1578023422180)(HTML.assets/1530672138124.png)] 5.7 小號字 正常文字 小號文字 1 2 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6KckvEOc-1578023422182)(HTML.assets/1530672191397.png)] 5.8 大號字 <body> 小號文字 正常文字 <big>大號文字</big> </body> 1 2 3 4 5 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gCJaBbhq-1578023422184)(HTML.assets/1530672254286.png)] 六、圖像與鏈接 1、圖像元素  元素引入外部圖像，元素是空元素。 1.1 src屬性 src 屬性（必需），表示引入圖像的 URL 地址。 <img src="images/img.png"> 1 圖像可以是本地地址，也可以是網(wǎng)絡(luò)地址。 <img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg"> 1 1.2 圖像大小 width 和 height 屬性用于設(shè)置圖像顯示的寬度和高度。 <img src="img.png" width="350" height="233" /> 1 1.3 圖像定位(了解) align 屬性用于設(shè)置圖像顯示的位置。 left：水平方向居左。 right：水平方向居右。 top：垂直方向居上。 bottom：垂直方向居下。 middle：居中。 <img src="img.png" width="350" height="233" align="right" /> 1 1.4 alt屬性 <img src="abcdef.png" alt="無法加載圖片"/> 1 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-evR6GiGo-1578023422185)(HTML.assets/1530673186561.png)] 2、超鏈接 2.1 用法 href 屬性（必需），表示指定跳轉(zhuǎn)的 URL 地址 <a >百知教育</a> 1 2.2 打開方式： target 屬性 元素的 target 屬性用于設(shè)置鏈接的打開方式。 _blank：在新窗口打開鏈接。 _self：在當(dāng)前窗口打開鏈接。 <a target="_blank">百知教育</a> 1 2.3 錨點 <body> <a name="postion"></a>         <a href="#postion">定位到postion的位置</a>   </body> 1 2 3 4 5 6 7 8 9 2.4 回到頂部的空鏈接 <body>  <a href="#">回到頂部</a>    </body> 1 2 3 4 5 6 7 8 七、列表 1、無序列表 1.1 定義無序列表 元素定義無序列表，用于列出頁面上沒有特定次序的條目。 <ul> <li>北京市</li> <li>上海市</li> <li>重慶市</li> </ul> 1 2 3 4 5 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8MFYHQJB-1578023422187)(HTML.assets/1530684550787.png)] 1.2 type屬性 定義列表的項目符號的類型 disc：實心圓，默認(rèn)值。 circle：空心圓。 square：實心矩形。 <ul type="circle"> <li>北京市</li> <li>上海市</li> <li>重慶市</li> </ul> 1 2 3 4 5 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gCwhGGdG-1578023422188)(HTML+CSS_pic/1530684771419.png)] 2、有序列表 2.1 定義有序列表 <ol> <li>北京市</li> <li>上海市</li> <li>重慶市</li> </ol> 1 2 3 4 5 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ofA5U8WE-1578023422190)(HTML.assets/1530684878880.png)] 2.2 type屬性 1：數(shù)字值，默認(rèn)值。 a 或 A：小寫或大寫字母。 i 或 I：小寫或大寫羅馬數(shù)字。 <ol type="a"> <li>北京市</li> <li>上海市</li> <li>重慶市</li> </ol> 1 2 3 4 5 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3l1LPm9P-1578023422191)(HTML.assets/1530685009075.png)] 3、自定義列表 <dl>     <dt>北京</dt>     <dd>海淀</dd>     <dd>昌平</dd>     <dd>朝陽</dd>     <dt>廣東</dt>     <dd>廣州</dd>     <dd>深圳</dd>     <dd>東莞</dd> </dl> 1 2 3 4 5 6 7 8 9 10 八、表格 1、表格使用 表格由 < table > 標(biāo)簽來定義。每個表格均有若干行（由標(biāo)簽定義），每行被分割為若干單元格（由標(biāo)簽定義）。 <table> <tr> <td>第1行，第1列</td> <td>第1行，第2列</td> </tr> <tr> <td>第2行，第1列</td> <td>第2行，第2列</td> </tr> </table> 1 2 3 4 5 6 7 8 9 10 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JL9Sjv2t-1578023422196)(HTML.assets/1530685462072.png)] 2、表格屬性 屬性名稱 描述 width 和 height 設(shè)置表格的寬度和高度 align 設(shè)置表格的對齊方式 border 設(shè)置表格的邊框?qū)挾?lt;br /> bgcolor 設(shè)置表格的背景顏色 cellpadding 設(shè)置內(nèi)邊距（單元格邊框與內(nèi)容之間的距離） cellspacing 設(shè)置外邊距（單元格之間的距離） bordercolor 邊框顏色 <table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left"> <tr> <td>第1行，第1列</td> <td>第1行，第2列</td> </tr> <tr> <td>第2行，第1列</td> <td>第2行，第2列</td> </tr> </table> 1 2 3 4 5 6 7 8 9 10 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3bucqAYt-1578023422198)(HTML.assets/1530685943196.png)] 3、tr元素 屬性名稱 值 描述 align right、left、center 左右對齊方式 valign top 、middle 、bottom 垂直對齊方式 bgcolor rgb(xxx,xxx,xxx)、colorName 背景顏色 <table border="1" cellspacing="0" width="500px" height="100px"> <tr align="center"> <td>第1行，第1列</td> <td>第1行，第2列</td> </tr> <tr align="right" valign="top" bgcolor="blue"> <td>第2行，第1列</td> <td>第2行，第2列</td> </tr> </table> 1 2 3 4 5 6 7 8 9 10 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-737Gkc1r-1578023422199)(HTML.assets/1530695272576.png)] 4、td元素 元素是定義表格的數(shù)據(jù)單元格。 屬性名稱 值 描述 align right、center、left 設(shè)置水平對齊方式 valign top、middle、bottom 設(shè)置垂直對齊方式 width和height pixels 、% 設(shè)置單元格的寬和高 colspan和rowspan number 設(shè)置單元格的跨列和跨行數(shù)量 bgcolor rbg()、colorName 單元格背景色 <table border="1" cellspacing="0" width="500px" height="100px"> <tr> <td align="center">第1行，第1列</td> <td valign="top">第1行，第2列</td> </tr> <tr> <td width="300px">第2行，第1列</td> <td bgcolor='red'>第2行，第2列</td> </tr> </table> 1 2 3 4 5 6 7 8 9 10 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IcLpE6Ii-1578023422201)(HTML.assets/1530697152946.png)] 合并行和列 <table border="1" cellspacing="0" width="500px" height="200px"> <tr> <td>第1行，第1列</td> <td>第1行，第2列</td> </tr> <tr> <td colspan="2">第2行，第1列</td>   </tr> <tr> <td>第3行，第1列</td> <td rowspan="2">第3行，第2列</td> </tr> <tr> <td>第4行，第1列</td> </tr> </table> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-z6ythYQ4-1578023422203)(HTML.assets/1530697074613.png)] 5、表格標(biāo)題caption 元素用于定義表格的標(biāo)題，必須緊隨元素之后，且只能對每個表格定義一個標(biāo)題。 <table border="1" cellspacing="0" width="500px" height="100px"> <caption>表格標(biāo)題</caption> <tr> <td>第1行，第1列</td> <td>第1行，第2列</td> </tr> <tr> <td>第2行，第1列</td> <td>第2行，第2列</td> </tr> </table> 1 2 3 4 5 6 7 8 9 10 11 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-V3X7gcxe-1578023422204)(HTML.assets/1530697414224.png)] 6、表頭thead、tbody表主體、tfoot表腳注 標(biāo)簽定義表格的表頭。 <table border="1" cellspacing="0" width="500px" height="100px"> <caption>信息</caption> <thead> <tr> <th>姓名</th>    <th>性別</th> </tr> </thead> <tr> <td>Tom</td> <td>boy</td> </tr> <tr> <td>Linda</td> <td>girl</td> </tr> </table> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 tfoot 元素應(yīng)該與 thead 和 tbody 元素結(jié)合起來使用。（比較少用） 九、表單 1、form 元素 表單用標(biāo)簽描述，表單內(nèi)部可以有多個子標(biāo)簽，用來完成用戶信息的收集，并發(fā)送請求給服務(wù)器。 屬性：action=“xxx” method=“get/post” 請求地址請求方式 http://www.baidu.com?uname=abc&passwd=123 <form action="http://www.baidu.com" method="get"> username:<input type="text" name="uname" id="uname115"/>   # abc password:<input type="text" name="passwd" id="pwd115"/>    # 123 <input type="submit" value="提交" id="sub115"/> </form> 1 2 3 4 5 6 2、表單元素 元素有很多不同類型，根據(jù)不同的 type 屬性來決定。 用戶名：<input type="text" name="txt" />   1 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nLWfznhF-1578023422206)(HTML.assets/1530757524606.png)] type屬性： 類型名稱 描述 text 文本輸入框 password 密碼框 radio 單選按鈕 checkbox 復(fù)選框 button 按鈕 submit 提交按鈕 reset 重置按鈕 file 文件域 name屬性：標(biāo)簽的普通的屬性，相當(dāng)于別名，是每個輸入控件的重要屬性==請求參數(shù)名。 id屬性：標(biāo)簽的唯一標(biāo)識名，不能重復(fù)。 value屬性：標(biāo)簽的普通屬性，是中藥屬性==請求參數(shù)值。 2.1 文本框 用戶名：<input type="text" name="txt" />   1 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-H6IYvY3p-1578023422207)(HTML.assets/1530758139189.png)] 用戶名：<input type="text" name="pwd" value="Mr_lee" maxlength="10" readonly="readonly" /> 1 2.2 密碼框 密碼：<input type="password" name="pwd" value="123456" /> 1 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7Nk9Lys0-1578023422208)(HTML.assets/1530758213655.png)] 2.3 單選按鈕  <input type="radio" name="sex" value="1">男        <input type="radio" name="sex" value="0" checked="checked">女 1 2 3 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XP3i844U-1578023422210)(HTML.assets/1530758647865.png)] 2.4 復(fù)選框 <input type="checkbox" name="course" value="Mysql">Mysql <input type="checkbox" name="course" value="HTML">HTML <input type="checkbox" name="course" value="Linux">Linux <input type="checkbox" name="course" value="Django">Django 1 2 3 4 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-r5mPRrZ3-1578023422211)(HTML.assets/1530758924865.png)] 2.5 按鈕 <input type="button" name="btn" value="點我"> 1 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ozchiqAW-1578023422214)(HTML.assets/1530759170832.png)] 2.6 提交按鈕 <input type="submit" name="sub_btn" value="提交"> 1 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kIOKVxLo-1578023422215)(HTML.assets/1530759206331.png)] 2.7 重置按鈕 <input type="reset" name="set_btn" value="重置"> 1 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cG06duKx-1578023422217)(HTML.assets/1530759252821.png)] 2.8 文件域 <input type="file"> 1 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mHkQp3fZ-1578023422219)(HTML.assets/1530759404657.png)] 2.9 文本域 <textarea name="txtInfo" rows="4" cols="20">aa</textarea> 1 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-406qSTUX-1578023422221)(HTML.assets/1530759866508.png)] 3、下拉選框 選擇課程： <select name="course"> <option value="1">Java</option> <option value="2" selected="selected">C++</option> <option value="3">PHP</option> </select> 1 2 3 4 5 6 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-b9rrRffX-1578023422222)(HTML.assets/1530759604602.png)] 4、表單綜合實例 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9sgjtXvT-1578023422223)(HTML.assets/1530759682014.png)] 十、特殊符號 顯示結(jié)果 描述 實體名稱 空格   < 小于號 < > 大于號 > © 版權(quán)（copyright） © ® 注冊商標(biāo) ® ? 商標(biāo) ? ile"> [外鏈圖片轉(zhuǎn)存中...(img-mHkQp3fZ-1578023422219)] ##### 2.9 文本域 ```html <textarea name="txtInfo" rows="4" cols="20">aa</textarea> 1 2 3 4 5 6 7 [外鏈圖片轉(zhuǎn)存中…(img-406qSTUX-1578023422221)] 3、下拉選框 選擇課程： <select name="course"> <option value="1">Java</option> <option value="2" selected="selected">C++</option> <option value="3">PHP</option> </select> 1 2 3 4 5 6 [外鏈圖片轉(zhuǎn)存中…(img-b9rrRffX-1578023422222)] 4、表單綜合實例 [外鏈圖片轉(zhuǎn)存中…(img-9sgjtXvT-1578023422223)] 十、特殊符號 顯示結(jié)果 描述 實體名稱 空格   < 小于號 < > 大于號 > © 版權(quán)（copyright） © ® 注冊商標(biāo) ® ? 商標(biāo) ?

HTML 知識點總結(jié)

分類

日歷

鏈接

個人資料

存檔