在網頁開發中，我們需要掌握的常用HTML標簽有哪些？

果想開發一個網站，除了要精通后端開發語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統一的文檔中，這就形成了我們可以看得見的網頁。那么，HTML都有哪些常用的標簽呢？

一、文檔類型聲明。

html5文檔類型聲明：<!doctype html>

html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標簽。

這個標簽是html最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內部。

<html>

</html>

三、雙標簽和單標簽。

在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。

四、head頭部標簽。

head頭部有以下幾種常用標簽：

meta：主要提供有關頁面的元信息。

link：用來定義文檔與外部資源的關系，最常用的是調用CSS樣式文件。

title：頁面標題的標簽。

script：用來調用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。

五、body主體標簽。

1、塊級標簽。

塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁面顯示的效果如下圖：

常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內聯標簽。

內聯標簽與塊級標簽不同，它不能獨自占有一行，會與其它內聯標簽在同一樣展示；內聯標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：

常用的內聯標簽有：span、a、b、strong、i、em 。

3、內聯塊級標簽。

內聯塊級標簽，既有一些內聯標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：

常用的內聯塊級標簽有：img、input、textarea。

4、區域標簽。

所謂區域標簽，就是主要用來劃分布局頁面區域的。如：頭部、主體內容、側邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。

常用的區域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側邊欄）、section（主體）、article（獨立內容）。

5、表單標簽。

這個表單標簽我們也是會經常用到的，如：登錄網站的時候、提交數據的時候。如下圖的評論表單：

?表單常用的標簽有：form、input、select、option、textarea 。

以上就是我們開發網頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。

SS樣式被稱為“層疊樣式表”，是一種網頁制作不可或缺的技術，是用于修飾網頁樣式，達到設計效果的一種樣式語言。

而由于樣式效果非常多，在工作中并非所有的樣式都會用到，因此經常可能遇到某些特定樣式會突然想不起來的情況，更何況對于初學者來說遇到這種情況。

接下來就跟著小凡一起整理一下這些常用而易忘的css樣式。

css樣式的效果

01、文字超出部分顯示省略號

單行文本的超出部分顯示省略號。（一定要給元素本身設置寬度）

.title {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

CSS樣式效果圖

多行文本的超出部分顯示省略號

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

CSS樣式效果圖

PS：建議加上word-break:break-all 否則遇到長單詞會出現很神奇的布局情況。

圖一

圖二

圖一未添加，圖二添加后的不同效果

02、中英文(長單詞)自動換行

word-break:break-all; 只對英文起作用，以字母作為換行依據

word-wrap:break-word; 只對英文起作用，以單詞作為換行依據

white-space:pre-wrap; 只對中文起作用，強制換行

white-space:nowrap;都起作用，強制不換行

PS:網頁中英文單詞通過“_”(下劃線)和 “-”（中劃線）連接的英文單詞在編譯處理是方式是截然不同的。

下劃線是程序命名方法下劃線命名法的規范,其他命名規范還有駝峰式命名。屬于程序專用的命名規范。可以連接想連的部分為一個變量名，不是單詞。

下劃線連接單詞效果

中劃線是英語復合詞有連接2個單詞的意思，但前后是2個獨立單詞。

中劃線連接單詞效果

03、設置表單輸入框placeholder的樣式

input::-webkit-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-ms-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-moz-placeholder {
  color:skyblue;
  text-align: center;
}

CSS樣式效果圖

04、不固定高度的元素文字垂直居中

兼容IE8：偽元素和inline-block/vertical-align

.box::before {
  content:"";
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
  text-align: center;
}

CSS樣式效果圖

不兼容IE8以下: flex布局

.box {
  background: skyblue;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS樣式效果圖

05、文字兩端對齊

.wrap {
  margin: 0 auto;
  width: 800px;
  text-align: justify;
  text-justify: distribute-all-lines;
  /* 兼容IE6-8 */
  text-align-last: justify;
  -moz-text-align-last: justify;
}

CSS樣式效果圖

06、iOS頁面中滑動卡頓

body,html {
  -webkit-overflow-scrolling:touch
}

07、設置滾動條樣式

 .wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
}


.wrap::-webkit-scrollbar {
  /* 整體大小樣式 */
  width: 10px;
  height: 10px;
  }


.wrap::-webkit-scrollbar-thumb {
  /* 滾動條里的滑塊 */
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255,255,255,0.2) 55%,
  rgba(255,255,255,0.2) 75%,
  transparent 75%,
  transparent);
}


.test::-webkit-scrollbar-track {
/* 滾動條的軌道 */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ededed;
  border-radius: 10px;
}

CSS樣式效果圖

08、隱藏滾動條但又可以滾動

.wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.wrap::-webkit-scrollbar {
/* 整體大小樣式 */
  display: none;
}

CSS樣式效果圖

09、css繪制三角

無邊框三角

div {
  width:0;
  height:0;
  border-width: 0 40px 40px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,0.3);
}

CSS樣式效果圖

帶邊框三角

div {
  position: relative;
  width:0;
  height:0;
  border-width: 40px 0 40px  40px ;
  border-style: solid;
  border-color:  transparent  black ;
}


div::after {
  content: "";
  position: absolute;
  top:-36px;
  left:-38px;
  border-width: 36px 0 36px  36px ;
  border-style: solid;
  border-color:  transparent red ;
}

CSS樣式效果圖

10、文字間的間距

text-indent 文章段落首行縮進

letter-spacing 字與字之間的間距

.wrap {
  margin: 0 auto;
  width: 600px;
  text-indent: 2em;
  letter-spacing: 10px;
}

CSS樣式效果圖

11、禁止用戶選中元素

有些時候不想讓用戶選中內容，復制網站上文字內容。

.wrap { 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

12、元素占滿整個屏幕

以往需要在做全屏遮罩功能的時候會設置height:100%。但是這種做法需要該遮罩層的所有父級元素都逐級設置高度才能使遮罩繼承高度屬性。所以可以使用100vh單位來實現。

.mask {
  width:100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
}

CSS樣式效果圖

以上就是為學員們整理的針對工作中對商品/新聞等標題的樣式處理，彈窗做法的一些經常遇到的css樣式實現方法。

如果覺得有用可以收藏關注，同時還可以留言說出你想知道或者是遇到的不會的樣式處理，我們還將繼續推出后續內容，繼續為大家解讀別的常用css實用技巧以及其他的前端開發新技能，讓我們期待下一期吧。

文末領資料

Web前端設計秘籍——30個工作中常用的CSS樣式

SS

CSS全稱為 Cascading Style Sheets,譯為層疊樣式表。CSS有三種樣式：內聯樣式，內嵌樣式，外聯樣式。

內聯樣式

內聯樣式通過HTML元素的style屬性來設置CSS樣式，語法如下：

 style="CSS屬性：CSS屬性值"；

示例代碼：

 <!DOCTYPE html>
 <html>
     <head>
         <title>內聯樣式</title>
         <meta charset="UTF-8">
     </head>
     <body>
         <!-- style="css屬性:css屬性值;" -->
         <div style="color:red;">啟嘉班</div> 
     </body> 
 </html>

* 內聯樣式的缺點: 只對當前元素有效, 導致CSS代碼可能出現冗余

內嵌樣式表

通過HTML元素的style屬性來設置CSS樣式，語法如下：

 <style>
     選擇器{
         屬性名:屬性值；
     }
 </style>

示例代碼：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>內嵌樣式</title>
     <style>
         p{
             color: chartreuse;
             font-size: 50px;
         }
        
     
     </style>
 </head>
 <body>
     <p>19級啟嘉班</p>
 </body>
 </html>

優點: 相對于內聯樣式

*通過CSS選擇器定位HTML頁面中一個或一類元素

缺點:相對于內聯樣式

* 將CSS代碼嵌入到HTML頁面中,只能對當前HTML頁面有效

* 編碼的風格不符合編碼原則中的低耦合

* 導致CSS代碼可能出現冗余

外聯樣式

通過HTML元素的<link>元素來設置CSS樣式表

1.創建一個CSS文件,用來存儲CSS樣式內容

2.在HTML頁面中通過<link>元素引入外部指定的CSS文件

<link>元素:

* 作用: 用來引入HTML頁面外部的資源

屬性:

* rel屬性: 用來設置外部資源與當前HTML頁面的關系

* href屬性: 用來設置引入外部資源的路徑(相對路徑和絕對路徑)

語法結構如下：

 <link rel="stylesheet" href="CSS文件路徑">

示例代碼：

 <link rel="stylesheet" href="style.css">

優點: 相對于內嵌樣式表和內聯樣式

* 將CSS樣式與HTML頁面進行分離(低耦合)

* 不會出現內嵌樣式表或內聯樣式產生的代碼冗余

缺點: 可能對HTML頁面的加載造成負擔,導致性能下降

下一節更新CSS選擇器

在線咨詢

上一篇：設計師妹紙，北漂兩年半的轉行經歷（一）-從平面設計師到UI
下一篇：Shopify訂單狀態JavaScript資產介紹

您的項目需求

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

整合營銷服務商

在網頁開發中，我們需要掌握的常用HTML標簽有哪些？

一、文檔類型聲明。

二、html主標簽。

三、雙標簽和單標簽。

四、head頭部標簽。

五、body主體標簽。

SS

內聯樣式

內嵌樣式表

外聯樣式

您的項目需求