<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          HTML 知識點總結
          
				
           2019-12-12      seo達人      
          
			
          
			
          
				
          一、HTML簡介

          
HTML 俗稱網頁，就是我們打開瀏覽器訪問任何一個網站所看到的都是由 HTML 頁面提供的（或者與 HTML 技術相關的內容提供）。

          


          
HTML 全稱為 HyperText Markup Language，被譯為超文本標記語言。所謂的超文本就是不僅只有文本內容，包括鏈接、音頻和視頻、圖像等內容。所謂標記語言，簡單來說就是元素。也就是說，HTML 提供一系列的元素來構成一個頁面中最基礎的內容。

          


          
HTML 是一種描述 Web 文檔結構和語義的語言，它由元素組成，每個元素可以有一些屬性或文本。

          


          
當你保存 HTML 文件時，既可以使用 .htm 也可以使用 .html 文件后綴。

          


          
編寫HTML代碼的工具：

          


          
記事本

          
sublime text

          
hbuilder

          
webstorm

          
vscode

          
pycharm – python代碼 也可以寫html代碼

          
二、第一張網頁

          
一個頁面有且只有一個根標簽是html， 元素一般包含 和 兩個元素，也就是 HTML 的頭部和主體內容。

          


          
<html>

          
    <head>

          
        <title>網頁的標題</title>

          
    </head>

          
    <body>

          
        <!-- 這是一個文本框 -->

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

          
    </body>

          
</html>

          
1

          
2

          
3

          
4

          
5

          
6

          
7

          
8

          
9

          
HTML標簽：由尖括號包圍：

          
成對出現： <p></p> ,即開標簽和閉標簽.

          
屬性： 定義在開標簽中，如input標簽中的type屬性

          
簡寫： 開閉標簽之間的內容是標簽體，如果標簽體為空，則可以簡寫：

          
注釋： 是注釋標簽

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

          
三、HTML頭部

          
< head > 元素包含了當前 HTML 頁面的所有頭部元素，在 < head > 元素內必須定義 < title > 元素，還可以定義 < script >、< link > 等元素。

          


          
這些 HTML 的頭部元素定義了當前頁面的標題、編碼、使用的腳本或樣式等信息。

          


          
1、title元素

          
< title >元素定義了當前HTML頁面的標題

          


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

          
1

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

          


          
2、meta元素

          
元素提供了 HTML 頁面的元數據（Metadata），元數據是存儲數據的信息。

          
通常用于設置頁面的編碼、描述、關鍵詞、作者等信息。

          


          
元素不會顯示在頁面中，但會被瀏覽器解析。

          
2.1 定義網頁內容的編碼格式

          
<meta charset="utf-8">

          
1

          
2.2 定義HTML頁面關鍵字，用于搜索引擎

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

          
1

          
2.3 定義HTML頁面描述

          
<meta name="description" content="百知教育IT培訓,java培訓,PHP培訓,UI培訓,H5培訓,linux培訓,大數據培訓,Python人工智能,IT行業培訓領跑者,高薪就業 ">

          
1

          
2.4 定義HTML頁面作者

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

          
1

          
四、HTML主體

          
1、body元素

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

          
一個 HTML 文件只能存在一個 標簽。

          


          
2、HTML元素基本構成

          
2.1 元素類型

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

          


          
閉合元素：必須包含開始元素和結束元素，如果沒有結束元素會產生意料之外的錯誤。

          


          
<title>百知教育Python人工智能培訓</title>

          
<p>這是一個段落標簽</p>                     <!--該標簽的作用是表示一個段落，會有換行--> 

          
1

          
2

          
空元素：也可以叫做單元素，只需要開始元素，而不需要結束元素。

          


          
<meta name="description" content="渥瑞達Web前端培訓">

          


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

          
1

          
2

          
3

          


          


          
2.2 HTML屬性

          
屬性是設置在HTML元素中的，用于為元素添加附加信息。屬性一般都是定義在開始元素中，并且是以“名稱/值”對出現

          


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

          


          
 <input type="button" value="點我" />   <!-- 這是一個按鈕 -->

          
1

          
2

          
3

          
五、HTML文本

          
1、標題元素

          
HTML 提供了 6 個標題元素，由大到小依次為 <h1> 到 <h6>

          


          
<h1>這是一級標題</h1>

          


          
<h2>這是二級標題</h2>

          


          
<h3>這是三級標題</h3>

          


          
<h4>這是四級標題</h4>

          


          
<h5>這是五級標題</h5>

          


          
<h6>這是六級標題</h6>

          
1

          
2

          
3

          
4

          
5

          
6

          
7

          
8

          
9

          
10

          
11

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

          


          
2、段落

          
元素定義段落

          


          
: 瀏覽器會自動地在段落的前后添加空行 ```html

          
這是一個段落.                

          
1

          
這是另一個段落.

          

          

          
注意： 在html中手動換行無效<br />
<br />
3、換行<br />
元素定義的段落內容是不會自動換行的，如果換行需要使用 br 元素<br />
<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>生活賦予我們一種巨大的和無限高貴的禮品，這就是青春：充滿著力量，充滿著期待志愿，充滿著求知和斗爭的志向，充滿著希望信心和青春。<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LbaNYf1L-1578023422165)(HTML.assets/1530670731312.png)]<br />
<br />
4、水平線<br />
在瀏覽器中顯示一條水平線（分隔線）效果。<br />
屬性：size=“10” color=“red” width=“100px 或者 50%” align=“left/right/center”<br />
<br />
10像素高 顏色 寬度 對齊方式<br />
<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>生活賦予我們一種巨大的和無限高貴的禮品，這就是青春：充滿著力量，充滿著期待志愿，充滿著求知和斗爭的志向，充滿著希望信心和青春。<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nK6UOf0r-1578023422166)(HTML.assets/1530671029915.png)]<br />
<br />
5、文本修飾<br />
5.1 粗體字<br />
這是一段正常未加粗的文本內容.<br />
&lt;br&gt;<br />
&lt;b&gt;這是一段加粗之后的文本內容.&lt;/b&gt;<br />
&lt;br&gt;<br />
&lt;strong&gt;粗體--著重強調&lt;/strong&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Va3GdgFK-1578023422168)(HTML.assets/1530672074778.png)]<br />
<br />
5.2 斜體字<br />
&lt;i&gt;這是一段斜體的文本內容.&lt;/i&gt;<br />
1<br />
5.3 下劃線<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-aJY0EaxC-1578023422169)(HTML.assets/1530671768110.png)]<br />
<br />
5.4 刪除線<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X4f2bCuN-1578023422172)(HTML.assets/1530671905293.png)]<br />
<br />
5.5 下標文字<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-E8DEONkQ-1578023422179)(HTML.assets/1530672009385.png)]<br />
<br />
5.6 上標文字<br />
32 = 9<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NTEZhEkv-1578023422180)(HTML.assets/1530672138124.png)]<br />
<br />
5.7 小號字<br />
正常文字<br />
&lt;small&gt;小號文字&lt;/small&gt;<br />
1<br />
2<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6KckvEOc-1578023422182)(HTML.assets/1530672191397.png)]<br />
<br />
5.8 大號字<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;small&gt;小號文字&lt;/small&gt;<br />
<span style="white-space:pre;"> </span>正常文字<br />
<span style="white-space:pre;"> </span>&lt;big&gt;大號文字&lt;/big&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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 />
圖像可以是本地地址，也可以是網絡地址。<br />
<br />
&lt;img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg"&gt;<br />
1<br />
1.2 圖像大小<br />
width 和 height 屬性用于設置圖像顯示的寬度和高度。<br />
<br />
&lt;img src="img.png" width="350" height="233" /&gt;<br />
1<br />
1.3 圖像定位(了解)<br />
align 屬性用于設置圖像顯示的位置。<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="無法加載圖片"/&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-evR6GiGo-1578023422185)(HTML.assets/1530673186561.png)]<br />
<br />
2、超鏈接<br />
2.1 用法<br />
href 屬性（必需），表示指定跳轉的 URL 地址<br />
<br />
&lt;a &gt;百知教育&lt;/a&gt;<br />
1<br />
2.2 打開方式： target 屬性<br />
元素的 target 屬性用于設置鏈接的打開方式。<br />
<br />
_blank：在新窗口打開鏈接。<br />
_self：在當前窗口打開鏈接。<br />
&lt;a  target="_blank"&gt;百知教育&lt;/a&gt;<br />
1<br />
2.3 錨點<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;a name="postion"&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp;&lt;!-- 定義錨點 --&gt;<br />
<span style="white-space:pre;"> </span>&lt;!-- 頁面其它內容<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;!-- 鏈接到錨點 --&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;!-- 頁面其它內容<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、無序列表<br />
1.1 定義無序列表<br />
元素定義無序列表，用于列出頁面上沒有特定次序的條目。<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8MFYHQJB-1578023422187)(HTML.assets/1530684550787.png)]<br />
<br />
1.2 type屬性<br />
定義列表的項目符號的類型<br />
<br />
disc：實心圓，默認值。<br />
circle：空心圓。<br />
square：實心矩形。<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ofA5U8WE-1578023422190)(HTML.assets/1530684878880.png)]<br />
<br />
2.2 type屬性<br />
1：數字值，默認值。<br />
a 或 A：小寫或大寫字母。<br />
i 或 I：小寫或大寫羅馬數字。<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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;朝陽&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; 標簽來定義。每個表格均有若干行（由 標簽定義），每行被分割為若干單元格（由 標簽定義）。<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JL9Sjv2t-1578023422196)(HTML.assets/1530685462072.png)]<br />
<br />
2、表格屬性<br />
屬性名稱<span style="white-space:pre;"> </span>描述<br />
width 和 height<span style="white-space:pre;"> </span>設置表格的寬度和高度<br />
align<span style="white-space:pre;"> </span>設置表格的對齊方式<br />
border<span style="white-space:pre;"> </span>設置表格的邊框寬度<br />
bgcolor<span style="white-space:pre;"> </span>設置表格的背景顏色<br />
cellpadding<span style="white-space:pre;"> </span>設置內邊距（單元格邊框與內容之間的距離）<br />
cellspacing<span style="white-space:pre;"> </span>設置外邊距（單元格之間的距離）<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3bucqAYt-1578023422198)(HTML.assets/1530685943196.png)]<br />
<br />
3、tr元素<br />
屬性名稱<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>左右對齊方式<br />
valign<span style="white-space:pre;"> </span>top 、middle 、bottom<span style="white-space:pre;"> </span>垂直對齊方式<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-737Gkc1r-1578023422199)(HTML.assets/1530695272576.png)]<br />
<br />
4、td元素<br />
元素是定義表格的數據單元格。<br />
屬性名稱<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>設置水平對齊方式<br />
valign<span style="white-space:pre;"> </span>top、middle、bottom<span style="white-space:pre;"> </span>設置垂直對齊方式<br />
width和height<span style="white-space:pre;"> </span>pixels 、%<span style="white-space:pre;"> </span>設置單元格的寬和高<br />
colspan和rowspan<span style="white-space:pre;"> </span>number<span style="white-space:pre;"> </span>設置單元格的跨列和跨行數量<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-z6ythYQ4-1578023422203)(HTML.assets/1530697074613.png)]<br />
<br />
5、表格標題caption<br />
元素用于定義表格的標題，必須緊隨 元素之后，且只能對每個表格定義一個標題。<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;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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-V3X7gcxe-1578023422204)(HTML.assets/1530697414224.png)]<br />
<br />
6、表頭thead、tbody表主體、tfoot表腳注<br />
標簽定義表格的表頭。<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;!-- 定義表頭單元格 會加粗顯示 --&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 元素應該與 thead 和 tbody 元素結合起來使用。 （比較少用）<br />
<br />
九、表單<br />
1、form 元素<br />
表單用標簽描述，表單內部可以有多個子標簽，用來完成用戶信息的收集，并發送請求給服務器。<br />
<br />
屬性：action=“xxx” method=“get/post”<br />
<br />
請求地址 請求方式<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 />
元素有很多不同類型，根據不同的 type 屬性來決定。<br />
<br />
用戶名：&lt;input type="text" name="txt" /&gt;&nbsp; &lt;!-- text表示文本框--&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nLWfznhF-1578023422206)(HTML.assets/1530757524606.png)]<br />
<br />
type屬性：<br />
類型名稱<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>復選框<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屬性 ：標簽的普通的屬性，相當于別名，是每個輸入控件的重要屬性==請求參數名。<br />
<br />
id屬性 ： 標簽的唯一標識名，不能重復。<br />
<br />
value屬性 ：標簽的普通屬性，是中藥屬性==請求參數值。<br />
<br />
2.1 文本框<br />
用戶名：&lt;input type="text" name="txt" /&gt;&nbsp; &lt;!-- text表示文本框--&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-H6IYvY3p-1578023422207)(HTML.assets/1530758139189.png)]<br />
<br />
用戶名：&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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7Nk9Lys0-1578023422208)(HTML.assets/1530758213655.png)]<br />
<br />
2.3 單選按鈕<br />
&lt;!-- name：值必須一樣，value：表示提交表單時的值 checked:默認選中--&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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XP3i844U-1578023422210)(HTML.assets/1530758647865.png)]<br />
<br />
2.4 復選框<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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-r5mPRrZ3-1578023422211)(HTML.assets/1530758924865.png)]<br />
<br />
2.5 按鈕<br />
&lt;input type="button" name="btn" value="點我"&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ozchiqAW-1578023422214)(HTML.assets/1530759170832.png)]<br />
<br />
2.6 提交按鈕<br />
&lt;input type="submit" name="sub_btn" value="提交"&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kIOKVxLo-1578023422215)(HTML.assets/1530759206331.png)]<br />
<br />
2.7 重置按鈕<br />
&lt;input type="reset" name="set_btn" value="重置"&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cG06duKx-1578023422217)(HTML.assets/1530759252821.png)]<br />
<br />
2.8 文件域<br />
<br />
&lt;input type="file"&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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 />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-b9rrRffX-1578023422222)(HTML.assets/1530759604602.png)]<br />
<br />
4、表單綜合實例<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9sgjtXvT-1578023422223)(HTML.assets/1530759682014.png)]<br />
<br />
十、特殊符號<br />
顯示結果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>實體名稱<br />
空格<span style="white-space:pre;"> </span>&nbsp;<br />
&lt;<span style="white-space:pre;"> </span>小于號<span style="white-space:pre;"> </span>&lt;<br />
&gt;<span style="white-space:pre;"> </span>大于號<span style="white-space:pre;"> </span>&gt;<br />
&copy;<span style="white-space:pre;"> </span>版權（copyright）<span style="white-space:pre;"> </span>&copy;<br />
&reg;<span style="white-space:pre;"> </span>注冊商標<span style="white-space:pre;"> </span>&reg;<br />
?<span style="white-space:pre;"> </span>商標<span style="white-space:pre;"> </span>?<br />
ile"&gt;<br />
<br />
<br />
[外鏈圖片轉存中...(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 />
[外鏈圖片轉存中…(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 />
[外鏈圖片轉存中…(img-b9rrRffX-1578023422222)]<br />
<br />
4、表單綜合實例<br />
[外鏈圖片轉存中…(img-9sgjtXvT-1578023422223)]<br />
<br />
十、特殊符號<br />
顯示結果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>實體名稱<br />
空格<span style="white-space:pre;"> </span>&nbsp;<br />
&lt;<span style="white-space:pre;"> </span>小于號<span style="white-space:pre;"> </span>&lt;<br />
&gt;<span style="white-space:pre;"> </span>大于號<span style="white-space:pre;"> </span>&gt;<br />
&copy;<span style="white-space:pre;"> </span>版權（copyright）<span style="white-space:pre;"> </span>&copy;<br />
&reg;<span style="white-space:pre;"> </span>注冊商標<span style="white-space:pre;"> </span>&reg;<br />
?<span style="white-space:pre;"> </span>商標<span style="white-space:pre;"> </span>?<br />
<br />
<br />
          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合