HTML01
1 WEB三要素
1.1 瀏覽器： 向服務器發送請求，下載服務器中的網頁（HTML文件），然后執行HTML文件，從而顯示內容
1.2 服務器：接收瀏覽器的相應請求，并作出相應的回應
1.3 http協議：服務器和瀏覽器之間的通訊協議
?
2 HTML工作原理
2.1 HTML是部署在服務器上的文本文件
2.1 根據http協議，瀏覽器向服務器發出請求，服務器作出響應，給瀏覽器返回一個HTML文件
2.3 瀏覽器解釋THML文件中的內容，從而顯示出解釋出來的內容
?
1 <!doctype html> <!-- 指定html文件的版本，默認是html5 --> 2 3 <html> 4 5 <!-- head元素是所有頭部元素的容器，title/meta/link/style/script都可以放到head元素里面 --> 6 <head> 7 <title>我是標題</title> <!-- 設定文檔標題 --> 8 <meta charset = "utf-8" /> <!-- 這頂文檔編碼 --> 9 10 <!-- 內部樣式 --> 11 <style type="text/css"> 12 /* *{ 13 margin: 0; 14 padding: 0; 15 }*/ 16 ul{ 17 list-style: none; 18 } 19 </style> 20 </head> 21 22 <body> 23 <!-- 文本元素 --> 24 <!-- 標題、段落、列表、分區、行內元素 統稱為文本元素 --> 25 <h1>主標題，每個文檔只能出現一次</h1> 26 <p>我是段落<p/> 27 <ol> 28 <li>我是列表選項1</li> 29 <li>我是列表選項2</li> 30 <li>我是列表選項3</li> 31 </ol> 32 33 <ol> 34 <li> 35 Web三要素 36 <ul> 37 <li>服務器</li> 38 <li>瀏覽器</li> 39 <li>http協議</li> 40 </ul> 41 </li> 42 </ol> 43 44 <div>我是塊分區元素</div> 45 <span>我是行內分區元素</span> 46 <hr /> 47 48 <!-- 元素顯示方式 --> 49 <!-- 塊級元素：默認情況下單獨占一行（即：會自動換行）, p div hr 50 行內元素：默認情況下不會換行，可以同其它行內元素位于同一行，span a img --> 51 <span>行內元素有：span i em b strong del u br 實體代換 空格</span> 52 <hr /> 53 54 <!-- 圖像和超鏈接 --> 55 <span>圖像：img</span> 56 <div> 57 <img src="異常樹.png" alt="" width = 300px height = 300px /> 58 </div> 59 <span>超鏈接：a 利用a標簽可以這只錨點</span> 60 <hr /> 61 62 <!-- 表格 --> 63 <table border="1px solid red"> 64 <thead> 65 <tr> 66 <td colspan="3" align="center">這是表頭</td> 67 </tr> 68 </thead> 69 <tbody> 70 <tr> 71 <td>表格內容1</td> 72 <td>表格內容2</td> 73 <td>表格內容3</td> 74 </tr> 75 <tr> 76 <td>表格內容1</td> 77 <td>表格內容2</td> 78 <td>表格內容3</td> 79 </tr> 80 </tbody> 81 <tfoot> 82 <tr > 83 <td colspan="3" align="center">這是表尾</td> 84 </tr> 85 </tfoot> 86 </table> 87 <hr /> 88 89 <!-- 表單 --> 90 <form action=""> 91 用戶名：<input type="text" placeholder="請輸入用戶名" /> 92 <br /> 93 密 碼：<input type="password" placeholder="請輸入密碼" /> 94 <br /> 95 96 <ol> 97 <li> 98 愛好 99 <ul> 100 <li><input id="l" type="checkbox" /><label for="l">籃球</label></li> 101 <li><input id="z" type="checkbox" /><label for="z">足球</label></li> 102 <li><input id="p" type="checkbox" /><label for="p">乒乓球</label></li> 103 </ul> 104 </li> 105 <li> 106 學科 107 <select name="" id=""> 108 <option value="">Java</option> 109 <option value="">Python</option> 110 <option value="">MySQL</option> 111 </select> 112 </li> 113 </ol> 114 115 <table border="1px solid red"> 116 <tr> 117 <td rowspan="2">性別</td> 118 <td><input name="g" id="m" type="radio"><label for="m">男</label></td> 119 </tr> 120 <tr> 121 <td><input name="g" id="f" type="radio"><label for="f">女</label></td> 122 </tr> 123 </table> 124 125 </form> 126 127 </body> 128 </html> 代碼示例form表單的筆記見博客，其他元素的筆記請自行查閱文檔
轉載于:https://www.cnblogs.com/NeverCtrl-C/p/6653499.html
總結
- 上一篇： Android开发视频教程
- 下一篇： web前端小数点位数处理