5月25日 python學習總結 HTML標籤
1、HTML簡介javascript
http://www.cnblogs.com/linhaifeng/articles/8973878.htmlcss
2、HTML標籤與文檔結構html
http://www.cnblogs.com/linhaifeng/articles/8982242.html前端
3、body內經常使用標籤
一 HTML語義化
body中的標籤是會顯示到瀏覽器窗口中的，body內的標籤只有一個做用就是用來標記語義的，語義指的是從字面意思就能夠理解被標記的內容是用來作什麼的html5
雖然不一樣的標籤會有不一樣的顯示樣式，但咱們必定要強制本身忘記全部標籤的顯示樣式，只記它的語義。由於每一個標籤的樣式各不相同，記憶不一樣標籤的樣式來控制顯示樣式，對前端開發來講將會是一種災難，更況且添加樣式並非HTML擅長的事情java
對於那些只用來修改樣式的標籤將會被淘汰掉，好比如下標籤都是沒有語義的，都是用來修改樣式的瀏覽器
#一、<br> 換行 我是帥氣逼人的Egon老師 <br> 我是帥氣逼人的Egon老師 我是帥氣逼人的Egon老師 我是帥氣逼人的Egon老師 #二、<hr> 分割線 #三、<font> 修改文字大小，顏色 <font color="red" size="10px">我是哈哈哈</font> #四、<b> 加粗 <b>論顏值，我秒殺宇宙</b> #五、<u> 下劃線 #六、<i> 傾斜 #七、<s> 刪除線
html5中推出了一些新的標籤網絡
strong == b ins == u em == i del == s 新的標籤是有語義的，而老的只是單純的添加樣式（這是CSS乾的事） strong的語義：定義重要性強調的文字 ins的語義（inserted）：定義插入的文字 em的語義（emphasized）：定義強調的文字 del的語義（deleted）：定義被刪除的文字
二 字符實體
#一、在HTML中對空格／回車／tab不敏感，會把多個空格／回車／tab看成一個空格來處理 #二、字符實體指的是 在HTML中 有的字符是被HTML保留的好比大於號小於號 有的HTML字符，在HTML中是有特殊含義的，是不能在瀏覽器中直接顯示出來的，那麼這些東西想顯示出來就必須經過字符實體，以下
註釋：實體名稱對大小寫敏感！ide
| 內容 | 代碼 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版權 | © |
| 註冊 | ® |
HTML特殊符號對照表post
三 h系列標籤
語義：標記內容爲一個標題，全稱headline
h系列標籤從h1-h6共6個，沒有h7標籤，標記內容爲1~6級標題
雖然h1-h6標籤的顯示樣式是從大到小，但再次強調：記憶HTML標籤的顯示樣式是沒有意義的
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon才華無敵</title>
</head>
<body>
<h1>一級標題</h1><h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<h7>沒有七級標題</h7>
沒有七級標題
</body>
</html>
注意：在企業開發中必定要慎用h系列標籤，特別是h1標籤，在企業開發中通常一個界面中只能出現一個h1標籤（出於SEO考慮）,好比www.163.com。
四 p標籤
語義：標記內容爲一個段落，全稱paragraph
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon無敵</title>
</head>
<body>
<h1>Egon</h1>
<p>論顏值，鶴立雞羣</p>
<p>論才華，天下無敵</p>
</body>
</html>
五 img標籤
語義：標記一個圖片，全稱image
#一、用法 <img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "鼠標懸停到圖片上時顯示的內容" /> #二、注意 2.1 src指定的圖片地址能夠是網絡地址，也能夠是一個本地地址，本地地址能夠用絕對或相對路徑，但一般用相對路徑，相對路徑是以html文件當前所在路徑爲基準進行的 2.2 圖片的格式能夠是png、jpg和gif 2.3 alt="圖片加載失敗時顯示的內容" 2.4 title = "鼠標懸停到圖片上時顯示的內容" 2.5 若是沒有指定圖片的width和height則按照圖片默認的寬高顯示，若是指定圖片的width和height則可能讓圖片變形 那若是又想指定寬度和高度，又不想讓圖片變形，咱們能夠只指定寬度和高度的一個值便可 只要指定了一個值，系統會根據該值計算另一個值，而且都是等比拉伸的，圖片將不會變形
六 a標籤
語義：標記一個內容爲超連接，全稱anchor，錨
#一、超連接標籤是超文本文件的精髓，能夠控制頁面與頁面之間的跳轉，語法以下 <a href="跳轉到的目標頁面地址" target="是否在新頁面中打開" title="鼠標懸浮顯示的內容">須要展示給用戶查看的內容/也能夠是圖片</a> #二、注意： 2.1 a標籤不只能夠標記文字，也能夠標記圖片 <a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a> 2.2 a標籤必須有href屬性，href的值必須是http://或https://開頭 2.3 a標籤還能夠跳轉到本身的頁面 <a href="template/aaa.html">錘你胸口</a> 2.4 target="_blank"表明在新頁面中打開，其他的值均無需記憶， 若是頁面中大量的a標籤都須要設置target="_blank",那麼咱們能夠在head標籤內新增一個base標籤進行統一設置 <base target="_blank"> 若是a標籤本身設置了target，那麼就以本身的爲準，不然就會參照base的設置 2.5 title="鼠標懸浮顯示的內容"
假連接
#一、什麼是假連接？ 就是點擊以後不會跳轉的連接，咱們稱之爲假連接 #二、假連接存在的意義： 在企業開發前期，其餘界面都尚未寫出來， 那麼咱們就不知道應該跳轉到什麼地方，因此就只能使用假連接來代替 #三、假連接的定義格式 一、href="#" :會自動回到網頁的頂部 二、href="javascript:" ：不會返回頂部
頁面內錨點
#一、要想經過a標籤跳轉到指定的位置，那麼必須告訴a標籤一個獨一無二的身份證號碼， 這樣a標籤才能在當前界面中找到須要跳轉到的目標位置 #二、如何爲html中的標籤綁定一個獨一無二的身份證號碼呢？ 在html中，每個標籤都有一個名稱叫作id的屬性 這個屬性就是用來給標籤指定一個獨一無二的身份證號碼的 #三、因此要想實現經過a標籤跳轉到指定的位置，分爲兩步 3.1、給目標位置的標籤添加一個id屬性，而後指定一個獨一無二的值 3.2、告訴a標籤你須要跳轉到的目標標籤對應的獨一無二的身份證號碼是多少 #四、a標籤除了能夠跳轉當前頁面，還能夠跳轉到其餘頁面的指定位置
跳到首頁
#一、跳到首頁 <a href="">刷新頁面，回到頂部，人類感受不出來區別</a> <a href="#">回到頂部</a> #二、注意點： 經過咱們的a標籤跳轉到指定的位置，是沒有過分動畫的 是直接一會兒就跳轉到了指定位置,好比京東主頁 若是跳到首頁須要過渡動畫，則不用a標籤作，好比天貓主頁
<!--
<a href="">刷新頁面，回到頂部</a> 刷新頁面，人類感受不出來區別
<a href="#">回到頂部</a>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p id="sb1">alex是個大SB</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p id="sb2">wxx是個大SB</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<p>我上山是虎，我下海是龍</p>
<a href="#sb1">找第一個SB</a>
<br>
<a href="#sb2">找第一個SB</a>
<br>
<a href="#">不刷新，跳回首頁</a>
<br>
<a href="">刷新，跳回首頁</a>
</body>
</html>
七 列表標籤
語義：標記一堆數據是一個總體/列表
html中列表標籤分爲三種
一、無序列表（列表標籤中使用最多的一種，很是重要）：unordered list
#一、做用： 製做導航條、商品列表、新聞列表等 #二、組合使用ul>li <ul> <li>秒殺</li> <li>優惠券</li> <li>PLUS會員</li> <li>閃購</li> <li>拍賣</li> <li>京東服飾</li> <li>京東超市</li> <li>生鮮</li> <li>全球購</li> <li>京東金融</li> </ul> #三、ul標籤的屬性type（這屬於列表的樣式，因此瞭解便可） type：列表標識的類型 disc：實心圓(默認值) circle：空心圓 square：實心矩形 none：不顯示標識 能夠經過css直接去掉小圓點 <style type="text/css"> ul { list-style: none; } </style> #四、注意 ul與li是組合標籤應該一塊兒出現，而且ul的子標籤只應該是li，而li的子標籤則能夠是任意其餘標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>物品清單</h1> <ul> <li> <h2>蔬菜</h2> <ul> <li>西紅柿</li> <li>花瓜</li> <li>芹菜</li> </ul> </li> <li> <h2>水果</h2> <ul> <li>香蕉</li> <li>菠蘿</li> <li>火龍果</li> </ul> </li> </ul> </body> </html>
二、有序列表（極少使用）
<h1>智商排名</h1>
<ol>
<li>Egon</li>
<li>劉清正</li>
<li>武佩奇</li>
<li>alex</li>
<li>元昊</li>
</ol>
<!--有序列表能幹的事，徹底能夠用無序列表取代-->
<h1>智商排名</h1>
<ul style="list-style: none">
<li>1. Egon</li>
<li>2. 劉清正</li>
<li>3. 武佩奇</li>
<li>4. alex</li>
<li>5. 元昊</li>
</ul>
三、自定義列表（也會常用）
#一、做用分析 選擇用什麼標籤的惟一標準，是看文本的實際語義，而不是看長什麼樣子 無序列表：內容是並列的,沒有前後順序 有序列表：內容是有前後順序的 自定義列表：對一個題目進行解釋說明的時候，用自定義列表,能夠作網站尾部相關信息，網易註冊界面的輸入框 #二、自定義列表也是一個組合標籤：dl>dt+dd dl:defination list，自定義列表 dt：defination title，自定義標題 dd：defination description，自定義描述
<dl>
<dt>自定義標題1<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
<dt>自定義標題2<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
<dt>自定義標題3<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
</dl>
#三、注意: 3.1 dl>dt+dd應該組合出現，dl中只應該存放dt和dd，而能夠在dt和dd中添加任意其餘標籤 3.2 一個dt能夠能夠沒有對應的dd，也能夠有多個，但建議一個dt對應一個dd
<dl>
<dt><h5>購物流程</h5></dt>
<dd>購物流程</dd>
<dd>會員介紹</dd>
<dd>生活旅行</dd>
<dt><h5>配送方式</h5></dt>
<dd>上門自提</dd>
<dd>211限時達</dd>
<dd>配送服務查詢</dd>
<dt><h5>支付方式</h5></dt>
<dd>貨到付款</dd>
<dd>在線支付</dd>
<dd>分期付款</dd>
</dl>
八 table標籤
語義：標記一段數據爲表格
#一、做用 表格標籤是一種數據的展示形式，當數據量很是大的時候，使用表格的形式來展現被認爲是最清晰的 #二、格式 <table> <tr> <td></td> </tr> </table> tr表明表格的一行數據 td表一行中的一個單元格 #三、注意點： 表格標籤有一個邊框屬性，這個屬性決定了邊框的寬度。默認狀況下這個屬性的值爲0，因此看不到邊框
<table border="1px" > <tr> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr> <tr bgcolor="white" > <td>Egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>ALex</td> <td>male</td> <td>73</td> </tr> <tr bgcolor="white"> <td>Wxx</td> <td>female</td> <td>84</td> </tr> </table>
表格屬性
#一、寬度和高度 能夠給table和td設置width和height屬性 1.1 默認狀況下表格的寬高是按照內容的尺寸來調整的，也能夠經過給table標籤設置widht和height來手動指定表格的寬高 1.2 若是給td標籤設置width和height屬性，會修改當前單元格的寬度和高度，只要不超過table的寬高，則不會影響整個表格的寬度和高度 #二、水平對齊和垂直對齊 水平對齊align能夠給table、tr、td標籤設置 垂直對齊valign只能給tr、td標籤設置 ========水平對齊=========== 取值 align=「left」 align=「center」 align=「right」 2.1 給table標籤設置水平對齊，可讓表格在水平方向上對齊 強調：table只能設置水平方向 2.2 給tr設置水平對齊，能夠控制當前行全部單元格內容都水平對齊 2.3 給td設置水平對齊，能夠控制當前單元格內容水平對齊，tr與td衝突的狀況下，以td爲準 ========垂直對齊=========== 取值 valign=「top」 valign=「center」 valign=「bottom」 2.4 給tr設置垂直對齊可讓當前行全部單元格內容都垂直對齊 2.5 給td設置垂直對齊可讓當前單元格內容垂直對齊 #三、外邊距和內邊距 只能給table設置 3.1 外邊距：單元格與單元格之間的間隔，cellspacing="3px"，默認值爲2px 3.2 內邊距：單元格邊框與文字之間的距離:cellpadding="200px"
#一、方式一 在標籤中，想經過指定外邊距爲0來實現細線表格是不靠譜的，其實他是將2條線合成了一條線.因此看上去很不舒服,以下實現 <table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px"> <tr bgcolor="white"> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr> <tr bgcolor="white" > <td>Egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>ALex</td> <td>male</td> <td>73</td> </tr> <tr bgcolor="white"> <td>Wxx</td> <td>female</td> <td>84</td> </tr> </table> #二、方式二（推薦使用） 細線表格的製做方式： 1、給table標籤設置bgcolor 2、給tr標籤設置bgcolor 三、給table標籤設置cellspacing="1px" 注意： table、tr、td標籤都支持bgcolor屬性 <table width="200px" height="200px" bgcolor="black" cellspacing="1px"> <tr bgcolor="white"> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr> <tr bgcolor="white" > <td>Egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>ALex</td> <td>male</td> <td>73</td> </tr> <tr bgcolor="white"> <td>Wxx</td> <td>female</td> <td>84</td> </tr> </table>
表格的結構
爲了方便管理維護以及提高語義，咱們將表格中存儲的數據分爲四類： #一、表格的標題:caption 特色:相對於表格寬度自動居中對齊 注意: 1.1 該標籤必定要寫在table標籤裏，不然無效 1.2 caption必定要緊跟在table標籤內的第一個 #二、表格的表頭信息:thead 特色：專門用來存儲每一列的標題，只要將當前列的標題存儲在這個標籤中就會自動居中+加粗文字 #三、表格的主體信息:tbody 注意： 3.1 若是沒有添加tbody，瀏覽器會自動添加 3.2 若是指定了thread和tfoot，那麼在修改整個表格的高度時，thead和tfoot有本身默認的高度，不會隨着 表格的高度變化而變化 #四、表尾信息:tfoot <html> <head> <meta charset="utf-8"/> </head> <body> <table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px"> <caption>學員信息統計</caption> <thead> <tr bgcolor="white"> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> </thead> <tbody> <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> </tbody> <tfoot> <tr bgcolor="white"> <td>3</td> <td>3</td> <td>3</td> </tr> </tfoot> </table> </body> </html>
單元格合併
#一、水平向上的單元格colspan 能夠給td標籤添加一個colspan屬性，來把水平方向的單元格當作多個單元格來看待 <td colspan="2"></td> #二、垂直向上的單元格rowspan 能夠給td標籤設置一個rowspan屬性，來把垂直方向的的單元格當成多個去看待 #注意注意注意: 1、因爲把某一個單元格看成了多個單元格來看待，因此就會多出一些單元格，因此須要刪掉一些單元格 二、必定要記住，單元格合併永遠是向後或者向下合併，而不能向前或向上合併
練習：
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon無敵</title>
<base target="_blank">
<style>
</style>
</head>
<body>
<table border="0" cellspacing="1" bgcolor="#D7A7EE" width="500px" height="200px">
<tr bgcolor="white">
<td colspan="3" align="center">星期一菜譜</td>
</tr>
<tr bgcolor="white">
<td rowspan="2">素菜</td>
<td>情操茄子</td>
<td>花椒扁豆</td>
</tr>
<tr bgcolor="white">
<td>小蔥豆腐</td>
<td>炒白菜</td>
</tr>
<tr bgcolor="white">
<td rowspan="2">葷菜</td>
<td>油燜大蝦</td>
<td>海蔘魚翅</td>
</tr>
<tr bgcolor="white">
<td>
紅燒肉<img src="hsr.jpeg" alt="">
</td>
<td>烤全羊</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon無敵</title>
<base target="_blank">
</head>
<body>
<table border="0" cellspacing="1" bgcolor="blue" width="500px" height="200px">
<caption>課程表</caption>
<tr bgcolor="white" align="center">
<td>項目</td>
<td colspan="6">上課</td>
<td align="center">休息</td>
</tr>
<tr bgcolor="white" align="center">
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr bgcolor="white" align="center">
<td rowspan="4">上午</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>英語</td>
<td>物理</td>
<td>計算機</td>
<td rowspan="4">休息</td>
</tr>
<tr bgcolor="white" align="center">
<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>
</tr>
<tr bgcolor="white" align="center">
<td>化學</td>
<td>語文</td>
<td>體育</td>
<td>計算機</td>
<td>英語</td>
<td>計算機</td>
</tr>
<tr bgcolor="white" align="center">
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>英語</td>
<td>物理</td>
<td>計算機</td>
</tr>
<tr bgcolor="white" align="center">
<td rowspan="2">下午</td>
<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>
<td rowspan="2">休息</td>
</tr>
<tr bgcolor="white" align="center">
<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>
</tr>
</table>
</body>
</html>
九 form標籤
語義：標記表單
#一、什麼是表單？ 表單就是專門用來接收用戶輸入或採集用戶信息的 #二、表單的格式 <form> <表單元素> </form>
連接：https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911
圖片:https://pan.baidu.com/s/1db6o--q557aKmtYJSBsyqA
在form內還能夠添加一種標籤 <fieldset>添加邊框 <legend>註冊頁面</legend> 表單控件...... </fieldset>
<html>
<head>
<title>表單練習</title>
<meta charset="utf-8"/>
</head>
<body>
<form action="http://www.baidu.com">
<fieldset>
<legend>註冊頁面</legend>
<p>
帳號：<input type="text" placeholder="請輸入你的用戶名" name="user">
</p>
<p>
密碼：<input type="password" placeholder="請輸入你的密碼" name="password">
</p>
<p>
性別：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" checked="checked" value="none">保密
</p>
<p>
<!--注意點：單選框or複選框都須要指定相同的name值-->
愛好：
<input type="checkbox" name="sport" value="basketball">籃球
<input type="checkbox" name="sport" value="football">足球
<input type="checkbox" checked="checked" name="sport" value="crazy">足浴
</p>
<p>
簡介：
<textarea name="" id="" cols="30" rows="10" name="desc"></textarea>
</p>
<p>
生日：
<input type="date" name="birth">
</p>
<p>
郵箱：
<input type="email" name="email">
</p>
<p>
電話：
<input type="number" name="phone">
</p>
<p>
<input type="submit" value="註冊">
<input type="reset" value="清空">
</p>
</fieldset>
</form>
</body>
</html>
相關文章
- 1. 5月28日 python學習總結 CSS學習（二）
- 2. 2020年5月10日學習總結
- 3. 5月25日
- 4. html 標籤總結
- 5. 8月25日總結
- 6. HTML學習小結之HTML標籤
- 7. 5月7日 python學習總結 MySQL數據庫（一）
- 8. 2018年5月25日 linux運維學習日誌
- 9. HTML 5 學習筆記之 canvas 標籤
- 10. SEO--HTML meta標籤總結
- 更多相關文章...
- • XML 總結 下一步學習什麼呢？ - XML 教程
- • Mybatis select標籤 - MyBatis教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章