公主的腿间舌奴们np肉_国产在热线精品视频99公交_公主车上荫蒂添的好舒服_公侵犯人妻中文字慕一区二区_公么大龟弄得我好舒服秀_公交车+多人+高cH文章推荐_日本熟妇另类视频在线播放

HTML 知識(shí)點(diǎn)總結(jié)

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

一、HTML簡(jiǎn)介

HTML 俗稱(chēng)網(wǎng)頁(yè)，就是我們打開(kāi)瀏覽器訪(fǎng)問(wèn)任何一個(gè)網(wǎng)站所看到的都是由 HTML 頁(yè)面提供的（或者與 HTML 技術(shù)相關(guān)的內(nèi)容提供）。



HTML 全稱(chēng)為 HyperText Markup Language，被譯為超文本標(biāo)記語(yǔ)言。所謂的超文本就是不僅只有文本內(nèi)容，包括鏈接、音頻和視頻、圖像等內(nèi)容。所謂標(biāo)記語(yǔ)言，簡(jiǎn)單來(lái)說(shuō)就是元素。也就是說(shuō)，HTML 提供一系列的元素來(lái)構(gòu)成一個(gè)頁(yè)面中最基礎(chǔ)的內(nèi)容。



HTML 是一種描述 Web 文檔結(jié)構(gòu)和語(yǔ)義的語(yǔ)言，它由元素組成，每個(gè)元素可以有一些屬性或文本。



當(dāng)你保存 HTML 文件時(shí)，既可以使用 .htm 也可以使用 .html 文件后綴。



編寫(xiě)HTML代碼的工具：



記事本

sublime text

hbuilder

webstorm

vscode

pycharm – python代碼 也可以寫(xiě)html代碼

二、第一張網(wǎng)頁(yè)

一個(gè)頁(yè)面有且只有一個(gè)根標(biāo)簽是html， 元素一般包含 和 兩個(gè)元素，也就是 HTML 的頭部和主體內(nèi)容。



<html>

    <head>

        <title>網(wǎng)頁(yè)的標(biāo)題</title>

    </head>

    <body>

        <!-- 這是一個(gè)文本框 -->

        <input type="text"></input>

    </body>

</html>

1

2

3

4

5

6

7

8

9

HTML標(biāo)簽：由尖括號(hào)包圍：

成對(duì)出現(xiàn)： <p></p> ,即開(kāi)標(biāo)簽和閉標(biāo)簽.

屬性： 定義在開(kāi)標(biāo)簽中，如input標(biāo)簽中的type屬性

簡(jiǎn)寫(xiě)： 開(kāi)閉標(biāo)簽之間的內(nèi)容是標(biāo)簽體，如果標(biāo)簽體為空，則可以簡(jiǎn)寫(xiě)：

注釋?zhuān)?是注釋標(biāo)簽

HTML文檔在瀏覽器中被解釋運(yùn)行,展示的不是源碼而是渲染之后的效果

三、HTML頭部

< head > 元素包含了當(dāng)前 HTML 頁(yè)面的所有頭部元素，在 < head > 元素內(nèi)必須定義 < title > 元素，還可以定義 < script >、< link > 等元素。



這些 HTML 的頭部元素定義了當(dāng)前頁(yè)面的標(biāo)題、編碼、使用的腳本或樣式等信息。



1、title元素

< title >元素定義了當(dāng)前HTML頁(yè)面的標(biāo)題



<title>百度一下，你就知道</title>

1

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-AGycI1jQ-1578023422160)(HTML.assets/1530668619163.png)]



2、meta元素

元素提供了 HTML 頁(yè)面的元數(shù)據(jù)（Metadata），元數(shù)據(jù)是存儲(chǔ)數(shù)據(jù)的信息。

通常用于設(shè)置頁(yè)面的編碼、描述、關(guān)鍵詞、作者等信息。



元素不會(huì)顯示在頁(yè)面中，但會(huì)被瀏覽器解析。

2.1 定義網(wǎng)頁(yè)內(nèi)容的編碼格式

<meta charset="utf-8">

1

2.2 定義HTML頁(yè)面關(guān)鍵字，用于搜索引擎

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

1

2.3 定義HTML頁(yè)面描述

<meta name="description" content="百知教育IT培訓(xùn),java培訓(xùn),PHP培訓(xùn),UI培訓(xùn),H5培訓(xùn),linux培訓(xùn),大數(shù)據(jù)培訓(xùn),Python人工智能,IT行業(yè)培訓(xùn)領(lǐng)跑者,高薪就業(yè) ">

1

2.4 定義HTML頁(yè)面作者

<meta name="author" content="百知教育">

1

四、HTML主體

1、body元素

標(biāo)簽定義文檔的主體。 元素包含文檔的所有內(nèi)容（比如文本、超鏈接、圖像、表格和列表等等）。body元素中包含的內(nèi)容（子標(biāo)簽）是用戶(hù)可以看到的。

一個(gè) HTML 文件只能存在一個(gè) 標(biāo)簽。



2、HTML元素基本構(gòu)成

2.1 元素類(lèi)型

HTML 是標(biāo)記語(yǔ)言，所謂標(biāo)記就是指頁(yè)面中的元素（元素也可以叫做標(biāo)簽）。一個(gè)完整的 HTML 頁(yè)面都是由眾多不同的元素組成的。



閉合元素：必須包含開(kāi)始元素和結(jié)束元素，如果沒(méi)有結(jié)束元素會(huì)產(chǎn)生意料之外的錯(cuò)誤。



<title>百知教育Python人工智能培訓(xùn)</title>

<p>這是一個(gè)段落標(biāo)簽</p>                     <!--該標(biāo)簽的作用是表示一個(gè)段落，會(huì)有換行--> 

1

2

空元素：也可以叫做單元素，只需要開(kāi)始元素，而不需要結(jié)束元素。



<meta name="description" content="渥瑞達(dá)Web前端培訓(xùn)">



<br/>            <!-- 換行 -- >   

1

2

3





2.2 HTML屬性

屬性是設(shè)置在HTML元素中的，用于為元素添加附加信息。屬性一般都是定義在開(kāi)始元素中，并且是以“名稱(chēng)/值”對(duì)出現(xiàn)



 <input type="text" />   <!-- 這是一個(gè)文本框 -->



 <input type="button" value="點(diǎn)我" />   <!-- 這是一個(gè)按鈕 -->

1

2

3

五、HTML文本

1、標(biāo)題元素

HTML 提供了 6 個(gè)標(biāo)題元素，由大到小依次為 <h1> 到 <h6>



<h1>這是一級(jí)標(biāo)題</h1>



<h2>這是二級(jí)標(biāo)題</h2>



<h3>這是三級(jí)標(biāo)題</h3>



<h4>這是四級(jí)標(biāo)題</h4>



<h5>這是五級(jí)標(biāo)題</h5>



<h6>這是六級(jí)標(biāo)題</h6>

1

2

3

4

5

6

7

8

9

10

11

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-Gpmb9nTx-1578023422163)(HTML.assets/1530670234313.png)]



2、段落

元素定義段落



: 瀏覽器會(huì)自動(dòng)地在段落的前后添加空行 ```html

這是一個(gè)段落.                

1

這是另一個(gè)段落.



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

日歷

鏈接

個(gè)人資料

存檔

金门县| 永安市| 宣武区| 泰州市| 溧水县| 黄骅市| 策勒县| 东兰县| 调兵山市| 民权县| 东至县| 文水县| 台中县| 九寨沟县| 湖北省| 宁城县| 寻甸| 四川省| 晋江市| 镇原县| 弋阳县| 新源县| 吉水县| 临汾市| 金川县| 新绛县| 金堂县| 阳城县| 新蔡县| 油尖旺区| 石渠县| 福清市| 甘孜县| 仙居县| 黑水县| 通榆县| 宁化县| 噶尔县| 阜平县| 海门市| 松阳县|