一.HTML文檔結構
最基本的HTML文檔:
<!DOCTYPE html> <html lang="zh-CN"> #這個lang表示語言，zh-CN是中文的意思，就是說，你整個文檔的內容以中文為主，如果以英文為主，就寫成lang='en' <head> <meta charset="UTF-8"> <title>css樣式優先級</title> </head> <body> </body> </html>
1. <!DOCTYPE html> 聲明為HTML5文檔.
2.<html>, </html> 是文檔開始標記和結束的標記,是HTML頁面的根元素,在他們之間是文檔的頭部(head) 和 身體 (body)
3. <head>, </head> 定義了HTML文檔的開頭部分, 包含<mata>數據, 它們之間的內容不會在瀏覽器文檔窗口顯示, 里面的內容是給瀏覽器看的, <body>里面的內容才是給人看的.
4. <title>, </title> 里面寫的就是網頁標題,在瀏覽器的標題欄顯示,就好比打開博客園,瀏覽器上面寫着 博客園 .
5. <body>, </body> 之間的文本是可見的網頁主題內容,就是我們打開網頁看見的內容.
上述的格式內容打開pycharm創建一個html文件, 整個結構就全都出來啦.
二. HTML標簽格式, 嚴格封閉
1. HTML標簽是有尖括號(大於小於號)包圍的關鍵字,如 <html>, <div> 等
2. HTML標簽通常都是成對出現的, 比如: <div> 和 </div> ,第一個是開始,帶斜杠的是結束.
3. 也有一部分標簽是單獨呈現的, 比如: <br/>, <hr/> 等,這些標簽后面都帶斜杠.
4. 標簽里面可以帶若干屬性, 也可以不帶屬性.
標簽的語法:
1. <標簽名 屬性1 = '屬性值1' 屬性2 = '屬性值2' ......>內容部分</標簽名>
<div class = 'c1'>吳彥祖</div>
幾個重要的屬性
1. id: 定義標簽的唯一ID, HTML文檔樹中的唯一, 可以在標簽過多的時候作為區分的依據. id不能重復.
2. class: 為html 元素定義一個或多個類名.
<div class= 'xxx'>xxx</div>
3. style: 規定元素的行內樣式(css樣式)
可以直接寫在標簽里,比如<div style='color:red;'>哈哈</div> 哈哈就變成了紅色, 也可以寫在head里面,在head里面寫一個<style>,然后在<style>里面寫一個body里面想要改的<div>標簽,然后大括號里面寫屬性.
注釋 和python一樣 'ctrl + ?'
三. HTML常用標簽
head內常用標簽
1.<title></title> 定義網頁標題
2. <style></style>定義內部表樣式(body中的內容)
3. <script></script>定義JS代碼或引入外部JS文件
4. <link/> 引入外部樣式表文件 (你建了一個HTML文件,然后又建了一個css文件,要想css文件可以給htm加效果,需要在HTML的head里面寫<link/>)
5. <mate/> 定義原網頁信息
四. body內常用的標簽
div標簽和span標簽(常用)
這兩個標簽最大的特點就是可以用過css控制.
div標簽定義一個塊級元素, 沒有實際意義, 只是通過css 渲染不同的效果.(塊級元素自己占一行)
span標簽定義內聯(行內)元素,沒有實際意義,通過css渲染出不同的效果.(內聯標簽不需另起一行)
標簽嵌套
塊級標簽一般可以嵌套內聯標簽和某些塊級標簽, 內聯標簽只能嵌套內聯標簽. div可以嵌套div
img標簽
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">
圖片的路徑可以寫相對路徑也可以寫絕對路徑, 最好寫相對路徑
a標簽
超鏈接標簽: 就是把這個連接寫到里面, 你一點擊它,它就跳轉到你的這個網址, 這個網址可以是一個圖片,可以是一個網址.
<a href="http://www.baidu.com" target="_blank" >點我</a> _blank是新開一個網頁, _self是在原網頁上打開
1. 絕對URL 指向另一個網址
2. 相對URL 指向站點中確切的路徑(href = 'index.html') # django的時候用的比較多
3. 錨URL 指向頁面中的錨(點擊一下就回到了頂部)
列表
1.無序列表
<ul type="disc"> <li>第一項</li> <li>第二項</li> </ul>
# 常用: 在css里面設置 ul{list-style-type: none} (無樣式)
2.有序列表
<ol type="1" start="2"> <li>第一項</li> <li>第二項</li> </ol>
# type屬性: start 是數字幾開始
1 數字列表,默認值
A 大寫字母
a 小寫字母
I 大寫羅馬
i 小寫羅馬
五. 表格
<table border='1'> <thead> #標題部分 <tr> #一行 <th>序號</th> #一個單元格 <th>姓名</th> <th>愛好</th> </tr> </thead> <tbody> #內容部分 <tr> #一行 <td>1</td> #一個單元格 <td>周潤發</td> <td>賭牌</td> </tr> <tr> <td>2</td> <td>梁朝偉</td> <td>演戲</td> </tr> </tbody> </table>
# 這些內容需要些到body里面
屬性:
1. border: 表格邊框.
2. cellpadding: 內邊距 (內邊框和內容的距離)
3. cellspacing: 外邊距. (內外邊框的距離)
4. width: 像素 百分比. (最好通過css來設置長寬)
5. rowspan: 單元格豎跨多少行(重要)
6. colspan: 單元格橫跨多少列 (即合並單元格)(重要)
效果:
六. input
屬性說明:
1. name: 表單提交是的''鍵'', 注意和id的區別
2. value: 表單提交時對應項的值
(1) type='button', 'reset', 'submit' 時,為按鈕上顯示的文本內容
(2) type='text', 'password', 'hidden'時, 為輸入框的初始值
(3) type='checkbox', 'radio', 'file' 為輸入相關聯的值
3. checked: radio和checkbox默認被選中的項
4. readonly: text和password設置只讀
5. disabled: 所有input均適用
七.form標簽(重點)
功能
表單用於向服務器傳輸數據,從而實現用戶與web服務器的交互
表單能夠包含input系列標簽,比如文本字段,復選框(多選框),單選框,提交按鈕等等.
表單還包含textarea, select, fieldset 和 label標簽.
表單屬性
表單元素
基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤后，服務器反饋一個輸入完成的信息。
八. select
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> #默認選中，當屬性和值相同時，可以簡寫一個selected就行了 <option value="3">廣州</option> <option value="4">深圳</option> </select> </form>
屬性說明:
multiple: 布爾屬性,設置后為多選下拉框,否則默認單選
disabled: 禁用
selected: 默認選中該項
value: 定義提交時的選項值