html基礎必備-分隔標記，前端小白一看就會

節、分區和分割線

這些標記用于將頁面分成多個部分。熟練地掌握這些標記將意味著構建出具有良好的結構和布局的頁面，使其更加友好和易于閱讀。

分區 - <div> </div>

div標記定義了HTML文件中的一個部分或分區。它通常包含需要組合在一起的標題、段落、表格或其他元素。通過設置<div class="">與css一起使用來設置網頁某個部分的顯示。

段落 - <p> </p>

p標記用來定義文本的段落，就像你在書中看到的那樣，一旦文本達到屏幕邊緣就會自動折到下一行。當另一個<p>標記用于開始下一個段落時，瀏覽器將在段落之間添加一些空白。p標記具有以下屬性：

align="" - 段落中文本的對齊方式：left, center or right
width="" - 段落將占據頁面的固定寬度或百分比，默認為100%

內聯 - <span> </span>

span標記用于將內聯元素組合在一起，例如句子中的幾個單詞，以便僅對這些單詞應用css樣式。span標記可以在div和p標記中使用，因為它不會創建新的塊。

換行 - <br>

br標記相當于一個回車符，用于在新行開始文本。一行中的多個<br>標記將在網頁上創建一個很大的垂直空間。

水平分隔線 - <hr>

hr標記通常被稱為HTML行分隔符標記，創建一條通常用于視覺上分隔頁面的水平線。它具有以下屬性：

width="" - 線條將占用固定寬度，默認100%寬度
color="" - 線條顏色
noshade - 取消3D外觀，創建一條平的實線分隔線

不換行 - <nobr> </nobr>

出于某種原因，你希望文本在一條直線上繼續，而不是在屏幕的邊緣換行，可以使用nobr。注意：這將迫使用戶向右滾動以查看行的其余部分，這是一種糟糕的設計。

例子

下面是以上標記的示例：

瀏覽器顯示內容如下所示：

種分割線Html代碼

一、基本線條：

1、<HR>

2、align線條位置（可選left、right、center）；width線條長度；color顏色；size厚度

<HRalign=center width=300 color=#987cb9SIZE=1>

二、特效（效果并不是孤立的，可相互組合）

1、兩頭漸變透明：

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>

2、紡錘形：

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>

3、右邊漸變透明：

<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>

4、左邊漸變透明：

<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>

5、虛線：

<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>

6、雙線：

<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>

7、立體效果：

<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>

8、鋼針效果：

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

９．垂直分割線

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

虛線的Html代碼

HTML代碼：

<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

TML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”，主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述。

1 HTML骨架格式

日常生活的書信，我們要遵循共同的約定。

同理：HTML 有自己的語言語法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

html結構：包括head body
html標簽是以尖括號包圍的關鍵字
html標簽通常是成對出現的，有開始就有結束，包含成對標簽、獨立標簽
html通常都有屬性，格式：屬性名＝“屬性值”(多個屬性之間空格隔開)
html標簽不區分大小寫,建議小寫

2 html基本標簽

HTML標簽

作用：所有HTML中標簽的一個根節點。

head標簽

作用：用于存放：title,meta,base,style,script,link

注意：在head標簽中我們必須要設置的標簽是title

title標簽

作用：讓頁面擁有一個屬于自己的標題。

body標簽

作用：頁面在的主體部分，用于存放所有的HTML標簽：p,h,a,b,u,i,s,em,del,ins,strong,img

3 顏色的表示方式

color:文本的顏色
bgcolor:背景色
background:背景圖片

第一種方式：使用顏色名稱: 僅僅有16種顏色名可用英文字母，其余的要用16進制值。

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

第二種方式：RGB模式

第三種：十六進制

#000000 #ffffff #325687 #377405

4 文檔類型<!DOCTYPE>（重點）

<!DOCTYPE html>這句話就是告訴我們使用哪個html版本，我們使用的是 html 5 的版本。 html有很多版本，那我們應該告訴用戶和瀏覽器我們使用的版本號。

標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范，必需在開頭處使用標簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析。

5 HTML標簽的語義化（重點）

所謂標簽語義化，就是指標簽的含義。

為什么要有語義化標簽：方便代碼的閱讀和維護，同時讓瀏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容，使用語義化標簽會具有更好地搜索引擎優化

核心：合適的地方給一個最為合理的標簽。

語義是否良好： 當我們去掉CSS之后，網頁結構依然組織有序，并且有良好的可讀性，不管是誰都能看懂這塊內容是什么。

遵循的原則：先確定語義的HTML ，再選合適的CSS。

6 總結：（重要知識點）

雙標簽

<html></html>
<head></head>
<title></title>
<body></body>
<table></table>
<tr></tr>
<td></td>
<span></span>
<p></p>
<form></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<object></object>
<style></style>
<b></b>
<u></u>
<strong></strong>
<i></i>
<div></div>
<a></a>
<script></script>
<center><center>

單標簽

<br>
<hr>
<img>
<input>
<param>
<meta>
<link>

排版標簽

1.注釋標簽：<!–注釋–>
-------------------------------------
2.換行標簽：<br/>
-------------------------------------
3.段落標簽：<p>文本文字
   特點：段與段之間有行高
   屬性：align對齊方式
           (left：左對齊 center：居中 right：右對齊)
-------------------------------------
4.水平線標簽:<hr/>
   屬性:
        width：水平線的長度(兩種:第一種:像素表示；第二種，百分比表示)
        size: 水平線的粗細 (像素表示，例如：10px)
        color: 水平線的顏色
        align:水平線的對齊方式(left：左對齊 center：居中 right：右對齊)
-------------------------------------
5.容器標簽（重點）
     <div>:塊級標簽，獨占一行，換行
     <span>:行級標簽，所有內容都在同一行作用
     <div>:主要是結合css頁面分塊布局
     <span>:進行友好提示信息

標題標簽 (熟記)

為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，隨著數字增大文字逐漸變小，字體是加粗的，內置字號，默認占據一行；

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

列表標簽

容器里面裝載著文字或圖表的一種形式，叫列表。列表最大的特點就是整齊、整潔、有序

無序列表 ul （重點）

無序列表標簽： <ul></ul>
    屬性：type :三個值，分別為：
           circle(空心圓) ,disc(默認,實心圓),square(黑色方塊)
    列表項：<li></li>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器，可以容納所有元素。

無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

有序列表 ol

有序列表標簽：<ol>
      屬性：type：1、A、a、I、i（數字、字母、羅馬數字）
      列表項： <li></li>

定義列表dl

\dl>
<dt>名詞1
<dd>名詞1解釋1
<dd>名詞1解釋2
…
<dt>名詞2
<dd>名詞2解釋1
<dd>名詞2解釋2
…
</dl>

dl>
名詞1
名詞1解釋1
名詞1解釋2
... 名詞2
名詞2解釋1
名詞2解釋2
...

圖片標簽

獨立標簽

屬性:
src：圖片地址： 相對路徑 （同一個網站） 絕對路徑 （不同網站）
width:寬度height:高度border:邊框align:對齊方式，代表圖片與相鄰的文本的相當位置（有三個屬性值：top middle bottom）
alt:圖片的文字說明hspace 和 vspace 設定圖片邊沿上下左右空白，以免文字或其它圖片過于貼近

鏈接標簽

超鏈接可以是文本，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。（不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接）

屬性：
href:跳轉頁面的地址(跳轉到外網需要添加協議)；
name:名稱，錨點(回到錨點: 頂部，底部，中間)，在訪問錨點的書寫格式:#name的值
target:_self(自己) _blank(新頁面，之前頁面存在) _
__parent top 默認
self_search相等于給頁面起一個名字，如果再次打開時，如果頁面存在，則不再打開新的頁面。可以是任意名字。

如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。

在線咨詢

上一篇：html單選按鈕默認選中怎么做？input標簽的單選按鈕實例
下一篇：盤點目前人最多的mmo手游2024 高人氣mmorpg手游排行榜前十名

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商