從零開始前端學習[5]:關於html5預設標籤樣式的介紹以及定義清除

阿新 • • 發佈：2019-02-10

關於html5預設標籤樣式的介紹以及定義清除

預設樣式介紹
清除預設的樣式

預設樣式介紹

先來看程式碼，看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標籤的預設樣式</title>
    <style type="text/css">
        body{
            background: deeppink;
        }
        h1{
            background 
: blue;
            border: 1px solid black;
        }
        h2 {
            background: blue;
            border: 1px solid black;
        }
        h3{
            background: blue;
            border: 1px solid black;
        }
        h4{
            background: blue;
            border: 1px solid black 
;
        }
        h5{background: blue;
            border: 1px solid black;
        }
        h6{
            background: blue;
            border: 1px solid black;
        }
        p{
            background: green;
            border: 1px solid black;
        }
        div dl{
            border 
:1px solid black;
            background: rebeccapurple;
        }
        div dl dt{
            border:1px solid black;
            background: red;
        }
        div dl dt dd{
            border:1px solid black;
            background: #84a3e3;
        }

    </style>
</head>
<body>
    <h1>這是h1標籤</h1>
    <h2>這是h2標籤</h2>
    <h3>這是h3標籤</h3>
    <h4>這是h4標籤</h4>
    <h5>這是h5標籤</h5>
    <h6>這是h6標籤</h6>
    <p>
        這是一個段落的p標籤
    </p>

    <a href="#">這是a標籤</a>
    <div>
        <dl>
            <dt>張三</dt>
            <dd>學生</dd>
            <dd>4班</dd>
            <dt>李四</dt>
            <dd>學生</dd>
            <dd>5班</dd>
        </dl>
    </div>
    <img src="http://img002.21cnimg.com/photos/album/20150702/m600/2D79154370E073A2BA3CD4D07868861D.jpeg" alt="">

</body>
</html>

顯示效果如下:
這裡寫圖片描述

上述的預設樣式:

h1—h6的預設樣式顯示為：其預設距離瀏覽器左側有一段距離，可以看成標題標籤的預設外邊距距離，或者看成body標籤的內邊距的距離
段落p標籤也是一樣，距離上下左右等都有一段距離
a標籤的字型預設是藍色，並且會有一個下劃線
定義列表dl dt dd同樣也是這樣一種效果
圖片也是預設會有內外邊距
ul li或者ol li的預設樣式會預設顯示其序號

所以系統提供的標籤中，往往一些標籤是有特殊的預設的樣式，但是這種樣式在使用中，有時候我們並不需要其預設的樣式顯示，所以就需要清除其預設樣式，所以一般情況，我們都會消除去預設樣式

關於消除其預設樣式

<style type="text/css">
            body,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
            ul,ol{margin:0;list-style:none;padding:0;}
            img{
                padding:0;border:0;margin:0;display:block;  <!--去掉預設的邊框-->
            }
            a{text-decoration:none;color:inherit;}
            *{margin:0;padding:0;}
        </style>

使用上述樣式清除後的效果如下所示：

這裡寫圖片描述

清除瀏覽器預設樣式後，顯示會顯得緊湊很多

從零開始前端學習[5]:關於html5預設標籤樣式的介紹以及定義清除

關於html5預設標籤樣式的介紹以及定義清除預設樣式介紹清除預設的樣式預設樣式介紹先來看程式碼，看效果 <!DOCTYPE html> <html la

從零開始前端學習[20]:前端與後臺可能需要使用互動的表單form，input標籤

前端與後臺可能需要使用互動的表單標籤 form表單和input標籤 textarea文字域表單 select,option下拉列表表單 fieldset和legend組合表單 label標籤 form表單和input標籤什麼是表單？？？表

從零開始前端學習[29]:Css3中新增加的選擇器一

Css3中新增加的選擇器以前的選擇器新增加的選擇器以前的選擇器萬用字元選擇器 *{margin:10px auto;padding:10px} ID選擇器: #main{width:100px;height:10

從零開始前端學習[33]:Cs3中的transition過渡-animation動畫

Cs3中的transition過渡-animation動畫 transition過渡 animation動畫 transition過渡記得在html學習中，提到過transition和transform這兩個屬性值，transfrom

從零開始，學習web前端之HTML5

什麼是HTML5 HTML5是HTML最新的修訂版本，2014年10月由全球資訊網聯盟（W3C）完成標準制定。是下一代 HTML 標準。為什麼要學習HTML5 HTML5定義了一系列新元素，如新語義標籤、智慧表單、多媒體標籤等，可以幫助開發者

從零開始，學習web前端之HTML基礎

我在大學的專業是計算機網路技術，大學期間有這樣一門課是“網頁設計與製作”，當時對這門課挺感興趣，就學習了下。通過簡單的html、css和js能展現出自己想要的東西，感覺挺有意思的。雖然陰差陽錯之下成為了一名Android開發工程師，但是前端方面的知識也一直在

從零開始，學習web前端之js基礎

js來源 Javascript作為web標準中的行為標準，最初起名叫LiveScript，它是Netscape開發出來一種指令碼語言，其目的是為了擴充套件基本的Html的功能，驗證web頁表單資訊，為web頁增加動態效果。為了趕上java的熱潮，Netscap

從零開始機器學習比賽經驗（bird分享）

競爭力 aca 新的 ast 成績 ats span boosting https 視頻地址：https://pan.baidu.com/s/1b25yNG 機器學習比賽入門條件 1.過的去的code能力：Leetcode平臺 leetcode平臺可以幫助我們提高基本的算法

《逐夢旅程：Windows遊戲編程之從零開始》學習筆記之二：GDI框架

register 開發操作程序 turn use 繪制 cal 完整 1 //===========================================【程序說明】=================================== 2 //

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

微信公共號(企業號)開發框架-gochat的從零開始教程(二): 5分鐘快速搭建自己的公共號

上一章裡我們把前期準備和環境配置已經完成啦，本章講一下怎麼通過5分鐘快速搭建自己的公共號～首先，前往github頁面下載gochat框架的原始碼，原始碼中已經包含了一個最基礎的公共號開發模版。（這裡非常非常希望大家在下載的

從零開始——網際網路學習路線(上）

學習路線分上中下三篇，本文是第一篇。其他兩篇這兩天會陸續釋出。歡迎大家關注訂閱。有建議歡迎評論區留言~。下面的所有的學習資料博主都已經分類整理好了，資料是博主以及身邊同學學習時使用的資料，公眾號後臺回覆“資料”即可獲取整理好的資料。本文主要分為三個部分：如

從零開始一起學習SLAM | SLAM有什麼用？

SLAM是 Simultaneous Localization And Mapping的英文首字母組合，一般翻譯為：同時定位與建圖、同時定位與地圖構建。「同時定位與地圖構建」這幾個詞，乍一聽起來非常拗口，為了不在一開始就嚇跑讀者，我們先不對其進行專業的解釋，用一個日常生活中形象的例子來進行說明。初

從零開始一起學習SLAM | 三維空間剛體的旋轉

剛體，顧名思義，是指本身不會在運動過程中產生形變的物體，如相機的運動就是剛體運動，運動過程中同一個向量的長度和夾角都不會發生變化。剛體變換也稱為歐式變換。視覺SLAM中使用的相機就是典型的剛體，相機一般通過人手持、機載（安裝在機器人上）、車載（固定在車輛上）等方式在三維空間內運動，形式

從零開始一起學習SLAM | 為啥需要李群與李代數？

很多剛剛接觸SLAM的小夥伴在看到李群和李代數這部分的時候，都有點濛濛噠，感覺突然到了另外一個世界，很多都不自覺的跳過了，但是這裡必須強調一點，這部分在後續SLAM的學習中其實是非常重要的基礎，不信你看看大神們的論文就知道啦。關於李群李代數，其實高翔的《視覺SLAM十四講》裡推導什麼的挺清楚了，本文就在高

從零開始一起學習SLAM | 相機成像模型

上一篇文章《從零開始一起學習SLAM | 為啥需要李群與李代數？》以小白和師兄的對話展開，受到了很多讀者的好評。本文繼續採用對話的方式來學習一下相機成像模型，這個是SLAM中極其重要的內容，必須得掌握哦~ 小白：師兄，上次聽你講了李群李代數，有種“聽君一席話勝讀十年書”的趕腳~後來看書感覺容易理解多了呢！師

從零開始一起學習SLAM | 不推公式，如何真正理解對極約束?

自從小白向師兄學習了李群李代數和相機成像模型的基本原理後，感覺書上的內容沒那麼難了，公式推導也能推得動了，感覺進步神速，不過最近小白在學習對極幾何，貌似又遇到了麻煩。。。小白：師兄，對極幾何這塊你覺得重要嗎？師兄：當然重要啦，這個是多視角立體視覺的核心啊小白：那師兄一定得幫幫我講清

梳理Python基本認識基本型別，從零開始，學習Python

先羅列一下Python提供的基本資料型別：數值(整型、浮點型、複數、布林型等)、字串、列表、元組、字典、集合等，將它們簡單分類如下：推薦下小編的Python學習群；629440234，不管你是小白還是大牛，小編我都歡迎，不定期分享乾貨，包括小編自己整理的一份2018最新的Python和0基礎入

從零開始一起學習SLAM | 給點雲加個濾網

對VSLAM和三維重建感興趣的在計算機視覺life”公眾號選單欄回覆“三維視覺”進交流群。小白：師兄，上次你講了點雲拼接後，我回去費了不少時間研究，終於得到了和你給的參考結果差不多的點雲，不過，這個點雲“可遠觀而不可近看”，放大了看就只有一個個稀疏的點了。究竟它能幹什麼呢？師兄：這個問題嘛。。

從零開始一起學習SLAM（1）為什麼要學SLAM？

從零開始一起學習SLAM | 為什麼要學SLAM？計算機視覺的研究目前主要分為兩大方向：基於學習的方法和基於幾何的方法。其中基於學習的方法最火的就是深度學習，而基於幾何方法最火的就是視覺SLAM。 SLAM將成為計算機視覺的下一個風口在前幾

從零開始前端學習[5]:關於html5預設標籤樣式的介紹以及定義清除

關於html5預設標籤樣式的介紹以及定義清除

相關推薦