整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這些標記用于將頁面分成多個部分。熟練地掌握這些標記將意味著構建出具有良好的結構和布局的頁面，使其更加友好和易于閱讀。
div標記定義了HTML文件中的一個部分或分區。它通常包含需要組合在一起的標題、段落、表格或其他元素。通過設置<div class="">與css一起使用來設置網頁某個部分的顯示。
p標記用來定義文本的段落，就像你在書中看到的那樣，一旦文本達到屏幕邊緣就會自動折到下一行。當另一個<p>標記用于開始下一個段落時，瀏覽器將在段落之間添加一些空白。p標記具有以下屬性：
span標記用于將內聯元素組合在一起，例如句子中的幾個單詞，以便僅對這些單詞應用css樣式。span標記可以在div和p標記中使用，因為它不會創建新的塊。
br標記相當于一個回車符，用于在新行開始文本。一行中的多個<br>標記將在網頁上創建一個很大的垂直空間。
hr標記通常被稱為HTML行分隔符標記，創建一條通常用于視覺上分隔頁面的水平線。它具有以下屬性：
出于某種原因，你希望文本在一條直線上繼續，而不是在屏幕的邊緣換行，可以使用nobr。注意：這將迫使用戶向右滾動以查看行的其余部分，這是一種糟糕的設計。
下面是以上標記的示例：
瀏覽器顯示內容如下所示：
html概述
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
html基本結構
一個html的基本結構如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body> </html>
第一行是文檔聲明，第二行“”標簽和最后一行“”定義html文檔的整體，“”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統計用。 “”標簽和“”標簽是它的第一層子元素，“”標簽里面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“”內編寫網頁上顯示的內容。
HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本。
此版本文檔用sublime text創建方法： html:xt + tab
文檔示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文檔類型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文檔用sublime text創建方法： html:5 + tab 或者 ! + tab
文檔示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類型 </title> </head> <body> </body> </html>
兩種文檔的區別
1、文檔聲明和編碼聲明
2、html5新增了標簽元素以及元素屬性
html注釋：
html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->
通過
、
、
、
、
,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說：
，再其次是
，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。
<h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3>
html段落標簽
標簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超 文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的 標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。 </p> <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方 式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網 頁可以從一個網頁鏈接跳轉到另外一個網頁。</p> </body> </html>
html換行標簽
代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入
來強制換行，代碼如下：
<p> 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br /> 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。 </p>
html字符實體
代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：
<!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： --> <p> 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br /> 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字符實體，比如：
<!-- “<” 和 “>” 的字符實體為 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html塊標簽
1、
標簽 塊元素，表示一塊內容，沒有具體的語義。
2、 標簽 行內元素，表示一行中的一小段內容，沒有具體的語義。
含樣式和語義的標簽
1、 標簽 行內元素，表示語氣中的強調詞
2、 標簽 行內元素，表示專業詞匯
3、 標簽 行內元素，表示文檔中的關鍵字或者產品名
4、 標簽 行內元素，表示非常重要的內容
語義化的標簽
語義化的標簽，就是在布局的時候多使用有語義的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。
html圖像標簽
標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，它的常用屬性有：
src屬性 定義圖片的引用地址
alt屬性 定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。
<img src="images/pic.jpg" alt="產品圖片" />
絕對路徑和相對路徑
像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。
絕對地址：相對于磁盤的位置去定位文件的地址
相對地址：相對于引用文件本身去定位被引用的文件地址
絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：
“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
“ …/ ” 表示當前文件所在目錄下的上一級目錄，比如：“…/images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
標簽可以在網頁上定義一個鏈接地址，它的常用屬性有：
href屬性 定義跳轉的地址
title屬性 定義鼠標懸停時彈出的提示文字框
target屬性 定義鏈接窗口打開的位置
target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開
target="_blank" 新頁面會在新開的一個瀏覽器窗口打開
續上次沒說完的標題吧，今天也順便講下段落和文本格式化。
首先，需要知道的是，標題很重要。
需要確保將 HTML 標題的標簽只用于標題。不要僅僅是為了生成粗體或大號的文本而使用標題。搜索引擎使用標題為網頁的結構和內容編制索引。因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。就像之前發的那張圖一樣。然后再說說標題的水平線。<hr> 標簽在 HTML 頁面中創建水平線,hr 元素也可用于分隔內容。實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---(二)測試開發轉型</title>
</head>
<body>
<h></h>
<p></p>
<h1>我是最大的，你忍一下</h1>
<hr>
<h2>我是老二，你也要忍一下</h2>
<hr>
<h3>我是老三，我一般</h3>
<hr>
</body>
<a href ="https://www.baidu.com">這是一個招聘網站</a>
</html>
可以看到有分割線
HTML注釋
接著我們說下HTML的注釋，可不是簡單的 //
<!-- 這是一個注釋 -->
需要注意的一點: 開始括號之后（左邊的括號）需要緊跟一個嘆號，結束括號之前（右邊的括號）不需要，合理地使用注釋可以對未來的代碼編輯工作產生幫助。
接著說下HTML的段落
HTML 段落
段落是通過 <p> 標簽定義的。
具體我們來看個實例：
可以看到三個段落，我們再看看代碼是怎么實現的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---(二)測試開發轉型</title>
</head>
<body>
<h></h>
<p>這是第一個段落</p>
<!--我是一個注釋-->
<h1>我是最大的，你忍一下</h1>
<hr>
<p>這是第二個段落</p>
<h2>我是老二，你也要忍一下</h2>
<hr>
<p>這是第三個段落</p>
<h3>我是老三，我一般</h3>
<hr>
</body>
<a href ="https://www.baidu.com">這是一個招聘網站</a>
</html>
不要忘記結束標簽:即使忘了使用結束標簽，大多數瀏覽器也會正確地將 HTML 顯示出來。接著說下在段落中折行，這就需要用到<br>了
我們直接來看看實例:
可以看到有三個折行
來看看代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---(二)測試開發轉型</title>
</head>
<body>
<h></h>
<p>這是第一個段落,你服不服<br>我不服，你個二愣子</p>
<!--我是一個注釋-->
<h1>我是最大的，你忍一下</h1>
<hr>
<p>這是第二個段落<br>你給我滾一邊去</p>
<h2>我是老二，你也要忍一下</h2>
<hr>
<p>這是<br>第三個段落<br></p>
<h3>我是老三，我一般</h3>
<hr>
</body>
<a href ="https://www.baidu.com">這是一個招聘網站</a>
</html>
<br /> 元素是一個空的 HTML 元素。由于關閉標簽沒有任何意義，因此它沒有結束標簽
下一節我們講下HTML的格式化，包含粗體、斜線等
加油，晚安~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
