那些容易被你忽略的HTML重要屬性，你知道幾個？

言

在前端開發編寫html文件的時候，我們可能會很熟練的寫出常見的html元素，但是如果問到某些元素的差別時，大家不一定能說的出來，今天就給大家總結一下那些很常見但容易混淆的屬性。

html與css

css引入

css樣式文件引入的方式有兩種，分別是link標簽和@import。

link語法結構

link語法結構如下，注意rel='stylesheet'屬性要加上。

link語法結構

@import語法結構

當@import用在html中時，需要配合style標簽

@import在html中

當@import用在css文件中，直接使用@import url()即可

@import在css中

link與@import的區別與選擇

既然link與@import都可以用來引入css，那么它們的區別是什么呢？我們又該如何選擇呢？

link是XHTML標簽的一種，除了可以加載css外，還可以定義其他rel屬性，而@import只能用來加載css。
link標簽在加載css時，與頁面一同加載，而@import需要等到網頁完全加載以后才進行加載。
link是XHTML標簽，不存在兼容問題，而@import是在CSS2.1中提出的，對于低版本的瀏覽器不支持。
link標簽可以通過Javascript代碼去控制其屬性，而@import不可以。

javascript控制link

@import支持在css文件中再次引入其他css文件，方便對多個css文件的管理。

因為@import引入的文件需要在網頁完全加載后再加載，如果在網絡速度較慢的情況下，會出現頁面閃現，因此建議使用link標簽代替@import。

readonly與disabled屬性

html元素的readonly與disabled屬性一般都是用于無法改變表單的內容，但是兩者也是有區別的。

readonly屬性只針對input(text,password)和textarea元素，而disabled適用于所有表單元素，包括select,radio,checkbox,button等。
在表單元素使用了disabled后，該元素的的值不會隨著form的action請求傳遞到服務器端，而使用readonly的元素值可以傳遞到服務器端。

以下是一些關于兩者的使用建議。

在表單中為用戶預填的唯一標識碼，不允許用戶改動，而且需要傳遞到后臺的使用readonly屬性。
用戶提交完表單元素后，等待服務器端的驗證，這個過程應該將元素設為disabled，button和submit也應該設為disabled，以防止重復提交。

img元素的title和alt屬性

title屬性

img標簽的title屬性是用來提供一些建議性的信息，在鼠標停留在上方時會顯示，它對于圖片來說只是一種注釋性的信息，重要性偏低。

alt屬性

alt屬性是為不能顯示圖像時，用來指定替換文字，需要注意的是替換文字是用來代替文字的，而不是用來注釋文字的。

屬性的使用

在做圖片為主的網頁時，考慮到網頁的SEO，應當設置圖片的alt屬性為圖片的真實內容，而給title設置一些建議性的內容。

總結

今天這篇文章主要將了幾個html中容易混淆的屬性，你有收獲嗎？

文摘自這一年來自己在工作中經歷的幾個比較好的CSS問題（不一定復雜，但個人覺得都挺值得一說），這些CSS問題平時很少遇到，即使遇到后也不一定知道解決方案，即使知道解決方案也不一定知道產生的原理，同時也準備了2個JS問題，希望幫到各位朋友。期待您的點贊，謝謝。

一、CSS篇

1.1 元素默認藍色邊框

input標簽元素（如button、text 、areatext）的一些事件（如click、focus等），在很多瀏覽器下默認會有藍色邊框出現，如把一個普通button的background和border都設置為none后，觸發點擊后樣式如下：

這是由元素默認的輪廓線產生的，這是瀏覽器的一種防護機制，起到突出元素的作用，把它干掉就行了，方法如下：

// 方法1:
outline: none / medium;

// 方法2：
outline-width: 0

1.2 背景透明，文字不透明

我們通常是使用 opacity來做背景的透明化處理，該屬性被所有瀏覽器支持，可以大膽使用，透明度從0.0（完全透明）到1.0（完全不透明），但該方法會使其所有子元素都透明，此時若只想讓背景透明，其他不透明，則可以使用rgba處理背景：

background-color: rgba( red , green , blue , alpha )
復制代碼

其中這個alpha 即設置透明度，取值在0~1之間。該方法除IE9以下不可用外，其他瀏覽器均可用，看一下效果：

同理，我們也可以用這個方法把整個背景做透明了，即多寫一個div作為modal層做透明處理，可以明顯看到上面文字并未透明：

上述種效果代碼如下：

// html
<section>
  <div class="item-pic">
    <header class="header1">
      <h4>你會微笑放手,說好不哭讓我出新專輯</h4>
    </header>
  </div>
  <div class="item-pic">
    <header class="header2">
      <h4>你會微笑放手,說好不哭讓我出新專輯</h4>
    </header>
  </div>
  <div class="item-pic">
    <div class="handle-opacity"> <!-- 透明罩 -->
      <header>
        <h4>你會微笑放手,說好不哭讓我出新專輯</h4>
      </header>
    </div>
  </div>
</section>
<style lang="less">
.header1 {
  opacity: .6;
}
.header2 {
  background-color: rgba(0, 0, 0, 0.45);
}
.handle-opacity {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.45);
  header {
    background-color: rgba(0, 0, 0, 0.45);
  }
}
</style>

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

1.3 div內置img元素，底部總有間距

用一個div包裹一個img，會出現img不能完全覆蓋div空間，總會在底邊留下一點空隙。

這種現象產生的原因是img是行內元素，瀏覽器為下行字符（如：g、y、j、p、q）留下的一些空間，這些字符是會比其他字符多占據底部一些空間（具體以當前字體大小有關），這種規則會影響行內元素img標簽（其默認垂直對齊方式是依照基線來的，即vertical-align: baseline），同樣行內元素都會和外部元素留這么一丟丟安全距離。上圖右側就是加了文字的效果，這樣就更說明一切了。

現在我們知道這種現象主要是由于下行字符串保護機制和img是行內元素這兩個因素導致的，那解決方案就從這兩處入手，整理如下：

div設置font-size: 0或line-height: 0，進而行高為0；
img設置 vertical-align: top 或者 middle/，使其不再以默認基線為對齊方式；
img設置 display:block，使其變成塊級元素。

綜上，個人認為方法3是最好用的，方法1不推薦使用。

1.4 元素自動填充上背景色

該現場多在表單輸入等場景上會出現，初次看到確實很怪異，效果如圖：

即當瀏覽器（chrome）給輸入框自動填充內容后，也會自動給輸入框帶上背景（黃或灰藍），該問題是由于chrome會默認給自動填充的input、select、textarea等加上:-webkit-autofill私有偽屬性造成的，比較好的解決方案就是做樣式覆蓋，代碼如下：

input:-webkit-autofill{
  box-shadow: 0 0 0px 1000px white inset !important;
}
select:-webkit-autofill{
  box-shadow: 0 0 0px 1000px white inset !important;
}
textarea:-webkit-autofill{
  box-shadow: 0 0 0px 1000px white inset !important;
}

比較渣的辦法是設置禁止自動填充，但還是別那樣做了...

1.5 transform 基數值導致字體模糊

transform作為CSS3最為自豪的屬性，已經成為了當前前端開發中不可或缺的方法，但它有個渲染的問題，即當元素設置有transform，且其值為基數或小數，同事其整體高度也有基數時，其內部文字會變模糊，如圖：

上圖上模糊狀態下的，下圖是修正過的，具體原因經查可能是因為transform變換會在瀏覽器上單獨創建一個繪畫層并重新進行渲染，在此渲染過程中也處理了周圍的文字，如果高度為奇數的文字可能會存在半個像素的計算量，瀏覽器對這半個像素會進行優化渲染，所以邊緣會出現模糊的情況。解決方案即：

不要給transform屬性值設置奇數和小數值；
調整整體元素高度不要為基數。

1.6 :last-child 和 :last-of-type

作為CSS常用偽類選擇器，:last-child經常會被用到，但有時遇到極端情況，它會意外失效，讓人摸不著頭腦，例子如下： 3個img標簽包裹在card中，當前需求是使最后一張圖的邊框呈粉色，代碼如下：

// html
<div class="card">
  <img 
    v-for="(item,i) in pics"
    :key="i"
    :src="item"
  />
</div>
// css
<style lang="less">
.card {
  > img {
      width: 150px;
      margin-right: 10px;
      &:last-child {
        border: 5px solid pink;
      }
   }
}
</style>

同理用:last-of-type也能實現：

.card {
  > img {
      width: 150px;
      margin-right: 10px;
      &:last-of-type {
        border: 5px solid pink;
      }
   }
}

效果如下：

現在要往img后加一個span，發現:last-child已失效：

// html
<div class="card">
  <img 
    v-for="(item,i) in pics"
    :key="i"
    :src="item"
  />
  <span>next is ...</span>
</div>
// css
<style lang="less">
.card {
  > img {
      width: 150px;
      margin-right: 10px;
      &:last-child {
        border: 5px solid pink;
      }
   }
}
</style>

而此時:last-of-type依然沒問題：

現在得出結論：

:last-child選取一群兄弟元素中的最后一個元素，且最后的這個元素必須是所聲明的指定元素（注意2個條件）；
:last-of-type選取一群兄弟元素中的最后一個指定類型的元素。

可知，:last-of-type更嚴謹一些，不容易產生意外bug，我更推薦使用它。同理適用于:nth-last-child(n)和:nth-last-of-type(n)

二、DOM篇

這部分我會敘述一些DOM操作遇到的一些容易被忽視的問題。

2.1 IOS日期顯示問題

經常做H5移動端開發的朋友我想對這個問題肯定不陌生，那就是在部門IOS版本（IOS5及以下）中，對以“-”間隔的字符串時間格式的解析是不成功的，比如我們寫了這么一個雞肋時間格式適配器：

function DateFormat(date) {
  if(!date) return null;
  date=new Date(date);
  let Y=date.getFullYear();
  let M=(date.getMonth() >=0 && date.getMonth() <=8) ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`;
  let D=(date.getDate() >=0 && date.getDate() <=9) ? `0${date.getDate()}`: `${date.getDate()}`;
  return `Y-M-D`
}

此時如果在IOS5及以下版本的iphone下，傳入 "2019-12-31"就會呈現出 NaN-NaN-NaN，而其他IOS版本及安卓系統都是沒問題的。

針對上述問題，要做兼容適配，即把以"-"間隔的事件字符串替換成以"/"即可，同樣是這個適配器，添加一段代碼：

function DateFormat(date) {
  if(!date) return null;
  if(typeof date==='string' &&  date.indexOf('T')!=-1 && date.indexOf('+')!=-1) {
    date=date.replace(/-/g, '/').replace('T',' ').substring(0,date.indexOf('.'))
  }
  date=new Date(date);
  let Y=date.getFullYear();
  let M=(date.getMonth() >=0 && date.getMonth() <=8) ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`;
  let D=(date.getDate() >=0 && date.getDate() <=9) ? `0${date.getDate()}`: `${date.getDate()}`;
  return `Y-M-D`
}

2.2 ENTER鍵使當前頁刷新

這個真的很詭異的問題，當在一個表單中執行了ENTER鍵提交后，如果是打開新頁面顯示提交結果，則會發現當前表單頁面也跟著刷新了，這種體驗當然是很糟糕的。經查證，該問題的產生條件為：Form中只有一個input時，此時執行ENTER鍵會自動提交表單并刷新頁面。解決方案也很粗暴，直接在input輸入框附近寫一個隱藏標簽，這樣就有2個input了，即避免了產生默認刷新的bug，實例如下：

<form>
  <input 
    type="text" 
    v-model.trim="searchText" 
    placeholder="搜索您感興趣的內容"
    @keyup.enter="goSearch" 
  />
  <input 
    id="hidden" 
    type="text" 
    style="display:none" 
    @keyup.enter="goSearch"
  />
</form>

如有不同見解和問題，請留言指出，期待您的點贊。最后祝您2020好運連連。

作者：_嗚啦啦啦火車笛
鏈接：https://juejin.im/post/5e0abd926fb9a04825712e3f

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學習如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

本教程包含了數百個 HTML 實例。

使用本站的編輯器，您可以輕松實現在線修改 HTML，并查看實例運行結果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</html>

實例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset=“utf-8”> 定義網頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML

標簽

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 <b> 和 </b>

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

<標簽>內容</標簽>

html元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:

HTML 元素:

<p>這是一個段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶

html網頁結構

<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <h1>這是一個標題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 聲明是不區分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。

在線咨詢

上一篇：5個 CSS 特效實現和發現靈感網站推薦
下一篇：NO17，Excel實用小技巧—刪除網頁復制來的小控

您的項目需求

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

整合營銷服務商