49、html基礎認識&常用標簽(1)
從今天期我們進入前端的學習,先學習html,沒有任何復雜難懂的邏輯需要燒腦,只需要記憶、練習、練習、練習。
一、HTML初識
1、web服務本質
import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind((‘localhost‘,8081)) sock.listen(5) while True: print("server is working.....") conn, address = sock.accept() request= conn.recv(1024) conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello Yuan</h1>","utf8")) conn.close() if __name__ == ‘__main__‘: main()
2、html是什麽
1)超文本標記語言(Hypertext Markup Language,HTML)通過標簽語言來標記要顯示的網頁中的各個部分。一套規則,瀏覽器認識的規則
2)瀏覽器按順序渲染網頁文件,然後根據標記符解釋和顯示內容。但需要註意的是,對於不同的瀏覽器,對同一標簽可能會有不完全相同的解釋(兼容性),學習期間建議使用google(谷歌)和Mozilla Firefox(火狐)來進行測試。
3)靜態網頁文件擴展名:.html 或 .htm
4)bs模式 Browser-server
5)HTML 不是一種編程語言,而是一種標記語言 (markup language)
6)HTML 使用標記標簽來描述網頁
3、html結構
1)<!DOCTYPE html> 告訴瀏覽器使用什麽樣的html或者xhtml來解析html文檔
2)<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔,在它們之間是文檔的頭部<head>和主體<body>。
3)<head></head>元素出現在文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示,但是其間的元素有特殊重要的意義。
4)<title></title>定義網頁標題,在瀏覽器標題欄顯示。
5)<body></body>之間的文本是可見的網頁主體內容
4、html標簽格式
標簽的語法:
<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標簽名>
<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
二、常用標簽介紹
1、<!DOCTYPE> 標簽
<!DOCTYPE html> 聲明位於文檔中的最前面的位置,處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。
作用:聲明文檔的解析類型(document.compatMode),避免瀏覽器的怪異模式。
document.compatMode:
1)BackCompat:標準兼容模式關閉。瀏覽器使用自己的怪異模式解析渲染頁面。
2)CSS1Compat:標準兼容模式開啟。瀏覽器使用W3C的標準解析渲染頁面。
這個屬性會被瀏覽器識別並使用,但是如果你的頁面沒有DOCTYPE的聲明,那麽compatMode默認就是BackCompat
2、meta標簽
meta介紹:
<meta>元素可提供有關頁面的元信息(meta-information),針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標簽位於文檔的頭部,不包含任何內容。
<meta>提供的信息是用戶不可見的
meta標簽的組成:meta標簽共有兩個屬性,它們分別是http-equiv屬性和name 屬性,不同的屬性又有不同的參數值,這些不同的參數值就實現了不同的網頁功能。
1)name屬性: 主要用於描述網頁,與之對應的屬性值為content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="搜索關鍵詞"> <meta name="description" content="網頁簡介">
2)http-equiv屬性:相當於http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確地顯示網頁內容,與之對應的屬性值為content,content中的內容其實就是各個參數的變量值。
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> (網頁在兩秒後跳轉至百度) <meta http-equiv="content-Type" charset=UTF8"> (頁面編碼)
3、link標簽
<link rel="icon" href=""> 網頁標題前的logo
三、<body>內常用標簽
1、基本標簽(塊級標簽和內聯標簽)
1)塊級標簽:獨占一行 例:h1,p標簽
2)內聯標簽:按內容占位 例:a,img標簽
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題. <p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白. <b> <strong>: 加粗標簽. <strike>: 為文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標 和 下角表. <br>:換行. <hr>:水平線
2、字符實體
顯示結果 | 描述 | 實體名稱 | 實體編號 |
---|---|---|---|
空格 | |   | |
< | 小於號 | < | < |
> | 大於號 | > | > |
& | 和號 | & | & |
" | 引號 | " | " |
‘ | 撇號 | ' (IE不支持) | ' |
¢ | 分(cent) | ¢ | ¢ |
£ | 鎊(pound) | £ | £ |
¥ | 元(yen) | ¥ | ¥ |
€ | 歐元(euro) | € | € |
§ | 小節 | § | § |
? | 版權(copyright) | © | © |
? | 註冊商標 | ® | ® |
? | 商標 | ™ | ™ |
× | 乘號 | × | × |
÷ | 除號 | ÷ | ÷ |
3、<img>圖形標簽
常用屬性:
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
4、<a>超鏈接標簽(錨標簽)
超鏈接是指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,也可以是相同網頁上 的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序
URL:
URL是統一資源定位器(Uniform Resource Locator)的縮寫,也被稱為網頁地址,是因特網上標準的資源的地址。 URL舉例 http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分組成 第1部分:為協議:http://、ftp://等 第2部分:為站點地址:可以是域名或IP地址 第3部分:為頁面在站點中的目錄:stu 第4部分:為頁面名稱,例如 index.html 各部分之間用“/”符號隔開。
常用屬性:
<a href="" target="_blank" >click</a> href屬性指定目標網頁地址。該地址可以有幾種類型: 1、絕對 URL - 指向另一個站點(比如 href="http://www.jd.com) 2、相對 URL - 指當前站點中的相對路徑(href="index.htm") 3、錨 URL - 指向頁面中的錨(href="#top") 錨中的“#top”,top為其他標簽的id,需要自己給需要指向的標簽起名 id是一個任何標簽可以使用的通用屬性用來給標簽起名,id屬性值具唯一性 target: _blank 瀏覽器新打開一個窗口中載入目標文檔。 _self(默認)瀏覽器在原窗口中載入目標文檔。
5、表格標簽
表格概念
表格是一個二維數據空間,一個表格由若幹行組成,一個行又有若幹單元格組成,單元格裏可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式(即按行和列組織)的數據。
表格的基本結構:
<table> 表格開始 <tr> 行 <th>標題</th> 列 <th>標題</th> </tr> <tr> 行 <td>內容</td> 列 <td>內容</td> </tr> </table> 表格結束
<th>,<td>區別,<th>用來用來標識表格中的表頭單元格,體現的效果就是文本加粗,除此與<td>相同
常用屬性:
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.(最好通過css來設置長寬)
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列(即合並單元格)
了解屬性:
bordercolor:邊框顏色
bgcolor:背景顏色
background:背景圖像
align:表格或內容位置 (left,center,right)
<caption>標題</caption>:標簽放在table標簽裏
6、練習
素材:
girl.jpglogo.png
答案:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>星期一菜譜</title> <link rel="icon" href="logo.png"> </head> <body> <table border="5" bordercolor="pink" cellpadding="20px" cellspacing="0px" align="center"> <tr> <th colspan="3" align="center">星期一菜譜</th> </tr> <tr> <td rowspan="2">素菜</td> <td>青草茄子</td> <td>花椒扁豆</td> </tr> <tr> <td>小蔥豆腐</td> <td>炒白菜</td> </tr> <tr> <td rowspan="2">葷菜</td> <td>油燜大蝦</td> <td>海參魚翅</td> </tr> <tr> <td>紅燒肉<a href="課程表.html" target="_blank"><img src="girl.jpg" width="70px" height="100px"></a></td> <td>烤全羊</td> </tr> </table> </body> </html>菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>課程表</title> <link rel="icon" href="logo.png"> </head> <body> <table border="1px" bordercolor="blue" align="center"> <caption>課程表</caption> <tr> <th>項目</th> <th colspan="5" align="center">上課</th> <th colspan="2" align="center">休息</th> </tr> <tr> <th>星期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> <tr> <td rowspan="4">上午</td> <td>語文</td> <td>數學</td> <td>英語</td> <td>英語</td> <td>物理</td> <td>計算機</td> <td rowspan="4">休息</td> </tr> <tr> <td>數學</td> <td>數學</td> <td>地理</td> <td>歷史</td> <td>化學</td> <td>計算機</td> </tr> <tr> <td>化學</td> <td>語文</td> <td>體育</td> <td>計算機</td> <td>英語</td> <td>計算機</td> </tr> <tr> <td>政治</td> <td>英語</td> <td>體育</td> <td>歷史</td> <td>地理</td> <td>計算機</td> </tr> <tr> <td rowspan="2">下午</td> <td>語文</td> <td>數學</td> <td>英語</td> <td>英語</td> <td>物理</td> <td>計算機</td> <td rowspan="2">休息</td> </tr> <tr> <td>數學</td> <td>數學</td> <td>地理</td> <td>歷史</td> <td>化學</td> <td>計算機</td> </tr> </table> </body> </html>課程表
49、html基礎認識&常用標簽(1)