全端开发——html简介与常用标签
1.html是什么？
?超文本標(biāo)記語言（Hypertext Markup Language，HTML）通過標(biāo)簽語言來標(biāo)記要顯示的網(wǎng)頁中的各個部分。一套規(guī)則，瀏覽器認(rèn)識的規(guī)則
?瀏覽器按順序渲染網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示內(nèi)容。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)簽可能會有不完全相同的解釋（兼容性）
?靜態(tài)網(wǎng)頁文件擴(kuò)展名：.html 或 .htm
?
2.html不是什么？
HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
3.html結(jié)構(gòu)
?<!DOCTYPE html> 告訴瀏覽器使用什么樣的html或者xhtml來解析html文檔
?<html></html>是文檔的開始標(biāo)記和結(jié)束標(biāo)記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
?<head></head>元素出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。
?<title></title>定義網(wǎng)頁標(biāo)題，在瀏覽器標(biāo)題欄顯示。
?<body></body>之間的文本是可見的網(wǎng)頁主體內(nèi)容
4.html標(biāo)簽格式
標(biāo)簽的語法：
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標(biāo)簽名>
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
二、常用標(biāo)簽
1.<!DOCTYPE>標(biāo)簽
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
?作用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。
document.compatMode：
1.BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。
2.CSS1Compat：標(biāo)準(zhǔn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁面。
這個屬性會被瀏覽器識別并使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認(rèn)就是BackCompat
2.<head>內(nèi)常用標(biāo)簽
<meta>標(biāo)簽
1.meta介紹
<meta>元素可提供有關(guān)頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
<meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。
<meta>提供的信息是用戶不可見的
2.meta標(biāo)簽的組成：
meta標(biāo)簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁功能。
（1）name屬性：主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content,content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
<meta name="keywords" content="北京汽車網(wǎng)，北京汽車報(bào)價(jià)，北京車市最新報(bào)價(jià)， 北京汽車報(bào)道，北京易車網(wǎng)，北京汽車團(tuán)購服務(wù)">
<meta name="description" content="北京汽車網(wǎng)，北京汽車報(bào)價(jià)，北京車市最新報(bào)價(jià)，北京汽車報(bào)道，北京易車網(wǎng)，北京汽車團(tuán)購服務(wù)">
?
（2）http-equiv屬性：相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個參數(shù)的變量值。
<title>meta標(biāo)簽</title><meta charset="UTF-8"> <meta http-equiv="content-type" charset="utf8">和上面的是一樣的，都是指定編碼的<meta http-equiv="refresh" content="2;url=http://www.baidu.com"> <!--兩秒之后跳轉(zhuǎn)到百度頁面(注意后面的引號，分別在秒數(shù)的前面和網(wǎng)址的后面)--> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <!--設(shè)定當(dāng)前網(wǎng)頁的兼容模式為IE7(哪怕你用其他版本的瀏覽器打開，它也是支持IE7版本的)-->非<meta>標(biāo)簽
<link rel="icon" href="http://www.jd.com/favicon.ico"> <!--設(shè)置頭部圖標(biāo)，，就像我們打開百度網(wǎng)址上會有百度的小圖標(biāo)--> <link rel="stylesheet" href="css.css"> #加載css <script src="hello.js"></script> #加載js3.<body>內(nèi)常用標(biāo)簽
基本標(biāo)簽
''' <hn>: n的取值范圍是1~6; 從大到小. 用來表示標(biāo)題.<p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.<b> <strong>: 加粗標(biāo)簽.<strike>: 為文字加上一條中線.<em>: 文字變成斜體.<sup>和<sub>: 上角標(biāo) 和 下角表.<br>:換行.<hr>:水平線特殊字符：< >；"；©®'''從上面的練習(xí)中總結(jié)：
標(biāo)簽的分類一：
自閉合標(biāo)簽：單標(biāo)簽
閉合標(biāo)簽：雙標(biāo)簽
標(biāo)簽的分類二：
塊級標(biāo)簽：就是獨(dú)占一行，可以自行設(shè)置寬高！如：先學(xué)到的 div,p,h1-h6
內(nèi)聯(lián)標(biāo)簽：按內(nèi)容占位，高度和廣度是由自己的內(nèi)容填充的 如： a,br,img
判斷塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽的方法：
1.是否獨(dú)占一行（可以通過設(shè)置背景顏色去判斷）
2.是否可以單獨(dú)為元素設(shè)置高度和寬度。
<div>和<span>
<div></div> ： <div>只是一個塊級元素，并無實(shí)際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn).
<span></span>： <span>表示了內(nèi)聯(lián)行(行內(nèi)元素),并無實(shí)際的意義,主要通過CSS樣式為其賦予不同的表現(xiàn).
塊級元素與行內(nèi)元素的區(qū)別
所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行。如果單獨(dú)在網(wǎng)頁中插入這兩個元素，不會對頁面產(chǎn)生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
圖片標(biāo)簽: <img>?
''' src: 要顯示圖片的路徑.alt: 圖片沒有加載成功時的提示.title: 鼠標(biāo)懸浮時的提示信息.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)'''超鏈接標(biāo)簽(錨標(biāo)簽): <a> </a>
什么是超級鏈接？
所謂的超鏈接是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系，這個目標(biāo)可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上
的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應(yīng)用程序
列表標(biāo)簽
''' <ul>: 無序列表 [type屬性：disc(實(shí)心圓點(diǎn))(默認(rèn))、circle(空心圓圈)、square(實(shí)心方塊)]<ol>: 有序列表<li>:列表中的每一項(xiàng).<dl> 定義列表<dt> 列表標(biāo)題<dd> 列表項(xiàng)'''表格標(biāo)簽: <table>
表格概念
表格是一個二維數(shù)據(jù)空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數(shù)字符號、預(yù)置文本和其它的表格等內(nèi)容。
表格最重要的目的是顯示表格類數(shù)據(jù)。表格類數(shù)據(jù)是指最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)。
表格的基本結(jié)構(gòu)：
屬性：
'''<tr>: 表行<th>: 表頭 <td>:表數(shù)據(jù)屬性:border: 表格邊框.cellpadding: 內(nèi)邊距cellspacing: 外邊距.width: 像素 百分比.（最好通過css來設(shè)置長寬）rowspan: 單元格豎跨多少行colspan: 單元格橫跨多少列（即合并單元格）'''?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--有序列表-- order list--> <!--默認(rèn)是1,2,3,4有序，如果加type就會以你指定的有序--> <ol type="a"> <li>haha</li><li>haha</li><li>haha</li><li>haha</li><li>haha</li> </ol> <!--無序列表--> <ul><li>鳥</li><li>鳥</li><li>鳥</li><!--實(shí)心圓（默認(rèn)是實(shí)心圓）--><li type="disc">鳥</li><!--空心圓--><li type="circle">鳥</li><!--方形--><li type="square">鳥</li> </ul> <!--定義列表--> <!--define liset--> <dl><!--定義的標(biāo)題內(nèi)容 define title--><dt>河北省</dt><!--內(nèi)容--><dd>石家莊</dd><dd>天津</dd><dd>雄安</dd> </dl> </body> </html>轉(zhuǎn)載于:https://www.cnblogs.com/lujiacheng-Python/p/9838979.html
總結(jié)
以上是生活随笔為你收集整理的全端开发——html简介与常用标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Golang 连接Kafka
- 下一篇： 进程创建 033