當前位置：首頁 >

初始html(常用标签)

發布時間：2025/7/14 48 豆豆

生活随笔收集整理的這篇文章主要介紹了初始html(常用标签) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今天我們來學習Web前端的一些知識，這一階段需要記憶的東西相對來說比較多，需要花時間記憶以及做好練習。

一、HTML初識

1、web服務本質

import socketdef 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標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。?

1）name屬性: 主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

2）http-equiv屬性：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

3、link標簽

三、<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.htmlURL地址由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>課程表課程表

轉載于:https://www.cnblogs.com/moning/p/7679471.html

總結

以上是生活随笔為你收集整理的初始html(常用标签)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： msp430入门学习31
下一篇： mongoose多条件模糊查询实例

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

初始html(常用标签)

總結