html第一個網頁
阿新 • • 發佈：2020-11-13
----------我的第一個網頁----------
<!DOCTYPE html> <html> <head> <title>我的第一個網頁</title> </head> <body> <!-- h1~h6是標題標籤,字型都會加粗,字號依次從大變小 --> <h1>Hello World</h1> <!-- 生成一條水平線 border:5px solid/double/dashed/dotted red solid: 實線, double: 雙線 dashed: 虛線, dotted: 點狀線--> <hr style="border:5px solid red"/> Hello HTML!<br/> Hello HTML!<br/> Hello HTML!<br/> </body> </html>
----------頁面插入圖片----------
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>影象和超連結標籤</title> </head> <body> <!-- 引入一幅影象 D:\JavaDevelop\HBuilderProjects\CGB-HTMLCSS-01/img/meinv01.jpg D:\JavaDevelop\HBuilderProjects\CGB-HTMLCSS-01/img/meinv02.jpg --> <img src="./img/meinv01.jpg" width="40%"/> <img src="img/meinv02.jpg" width="40%"/> <hr/> <a href="http://www.baidu.com" target="_blank">
<!-- target="_blank" 意思是是以新的頁面彈窗-->
百度一下,你就知道 </a> <br/><br/> <a href="http://www.baidu.com"> 百度一下,你就不知道 </a> </body> </html>
----------表格標籤----------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格標籤</title> <!-- style標籤內部用於書寫css樣式、css註釋 --> <style> table,td,th{ /* 選中所有名字為table和td的元素 */ border:2px solid red; /* 設定表格邊框和單元格邊框合併 */ border-collapse: collapse; } table{ /* 設定背景 */ background: pink; /* 設定寬度 */ width: 80%; /* 設定左右外邊距自適應(始終保持相等) */ margin-left: auto; margin-right: auto; } td,th{ /* 設定內邊距（元素邊框和內容之間的距離） */ padding:5px; } h1{ /* 設定元素內容居中（left,center,right） */ text-align:center; /* border: 2px solid blue; */ } </style> </head> <body> <h1>這是一個表格</h1> <!-- 建立一個 3*3 的表格 --> <table> <tr> <!-- 合併11和12單元格 colspan="2": 設定當前單元格橫跨兩列 --> <th colspan="2">11</th> <th>13</th> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <!-- 讓21和31單元格合併 --> <td rowspan="2">21</td> <td>22</td> <td>23</td> </tr> <tr> <!-- <td>31</td> --> <td>32</td> <td>33</td> </tr> </table> </body> </html>
----------登錄檔單頁面----------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>歡迎註冊</title> <!-- style標籤內部用於書寫css樣式、css註釋 --> <style> *{ /* 選中所有元素 */ /* font-family: "微軟雅黑"; */ } table,td,th{ /* 選中所有名字為table和td的元素 */ border:2px solid red; /* 設定表格邊框和單元格邊框合併 */ border-collapse: collapse; } table{ /* 設定背景 */ background: lightgray; /* 設定左右外邊距自適應(始終保持相等) */ margin-left: auto; margin-right: auto; } td,th{ /* 設定內邊距（元素邊框和內容之間的距離） */ padding:5px; } h1{ /* 設定元素內容居中（left,center,right） */ text-align:center; /* border: 2px solid blue; */ } </style> </head> <body> <h1>歡迎註冊</h1> <!-- #:做一個佔位,將來知道地址怎麼寫,再把#號換成url地址 --> <form action="#"> <table> <tr> <td>使用者名稱:</td> <td><input type="text" name="user"/></td> </tr> <tr> <td>密碼:</td> <td><input type="password" name="psw"/></td> </tr> <tr> <td>性別:</td> <td> <input type="radio" checked name="gender" value="male"/>男 <input type="radio" name="gender" value="female"/>女 </td> </tr> <tr> <td>愛好:</td> <td> <input type="checkbox" name="like" value="basketball"/>籃球 <input type="checkbox" checked name="like" value="football"/>足球 <input type="checkbox" name="like" value="volleyball"/>排球 </td> </tr> <tr> <td>城市:</td> <td> <select name="city"> <option>北京</option> <option value="shanghai">上海</option> <option selected>廣州</option> <option>深圳</option> </select> </td> </tr> <tr> <td>自我描述:</td> <td> <!-- textarea標籤內部不要敲空格和換行,否則不顯示提示 --> <textarea name="desc" cols="30" rows="5" placeholder="請輸入描述資訊..."></textarea> </td> </tr> <tr> <td colspan="2" style="text-align:center;"> <input type="submit" value="提交"/> </td> </tr> </table> </form> </body> </html>
----------表格標籤----------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> hr{ border:2px solid red; background:red; width:50%; /* 設定左外邊距為0 */ margin-left:0px; } audio{ /* 獲取所有的audio元素 */ width: 300px; height: 30px; border: 2px solid blue; /* 設定圓角邊框 */ border-radius: 20px; } /* 匹配獲得焦點的audio、video元素 */ audio:focus,video:focus{ /* 設定元素的外圍（包在邊框外的線） */ outline: none; } video{ width:50%; border:2px solid red; border-radius: 20px; } </style> </head> <body> <h1>達內雲音樂</h1> <hr/> 沙漠駱駝:<br/> <audio controls src="audio/沙漠駱駝_展展與羅羅.mp3"> 如果您看到這段內容,則說明您的瀏覽器不支援此標籤 </audio> <br/> Marry You:<br/> <audio controls src="audio/Marry_You.mp3"></audio> <br/> Something Just Like This:<br/> <audio controls src="audio/Something_Just_Like_This.mp3"></audio> <h1>雲視訊</h1> <hr/> <video autoplay controls src="video/小拳拳.mp4"></video> <video controls src="video/謝謝你的愛_四川方言版.mp4"></video> <video controls src="video/小芳_李榮浩版.mp4"></video> </body> </html>