重溫HTML和CSS3

時間 2019-12-05

標籤重溫 html css3 css 欄目 HTML 简体版

原文原文鏈接

重溫Web前端基礎

本篇幅中着重文字，只是記錄一些本身的看法，鞏固下自身基礎

網頁結構是什麼？

結構層 html 導航，列表，段文字，圖片，連接，
表示層 css 顏色，大小，位置，
行爲層 JavaScript，彈出，切換等。javascript

什麼是html？

HTML是用來描述網頁的一種語言。
不是編程語言，是標記語言css

什麼是CSS？

CSS （層疊樣式表）
是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。html

何爲javascript？

JavaScript一種腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。普遍用於客戶端的腳本語言，最先是在HTML網頁上使用，用來給HTML網頁增長動態功能。前端

HTML

1993年開始提出草案，發展到如今，已經經歷二十餘年，版本也已經更新到如今的H5，html語言做爲網絡語言標準，在計算機的發展史中有不可或缺的地位。java

一.書寫本身的第一個頁面css3

<!-- <!DOCTYPE html> 聲明爲 HTML5 文檔 -->
<!DOCTYPE html>
<!--html 元素是 HTML 頁面的根元素 -->
<html lang="en">
    <!-- head頭部標籤 -->
<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>Document</title>
</head>
<body>
    <!-- 頁面內容 -->
    <div>這是個人第一個頁面</div>
</body>
</html>

html語言在當今web頁面中有不可或缺的地位。web

二.HTML代碼規範
在以前不少 Web 開發人員對 HTML 的代碼規範知之甚少，在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。使用 XHTML後開發人員才逐漸養成了比較好的 HTML 編寫規範
<!DOCTYPE html>，文檔聲明放在首行
<div></div>,推薦使用小寫字母，雖然咱們在書寫代碼時候，一些標籤不管大小寫都會被瀏覽器解析，可是若是咱們在開發時使用大小寫混寫，美感度會大大下降，或許根本就不存在所謂的美感度吧，而且在後續的維護中，你會更加糟心。
註釋：
在書寫代碼時切記必定要書寫註釋，一個開發項目少說也得個幾千行吧，說大了幾十萬行都會有的，若是你不寫註釋，可能你今天加班寫的代碼，明天早上睡醒你都不知道本身寫的是哪部分區域，或許甚至都不知道本身寫的是什麼了。編程

閉合標籤：瀏覽器

<body>
    <!-- 頁面內容 -->
    <div>這是個人第一個頁面
</body>

就比如上面的代碼，雖然可以被瀏覽器正常閱讀出來，
這種後果就不用我過多說了吧。網絡

屬性命名：在寫HTML時推薦使用小寫命名，不要隨便命名，按照老前輩的來，就好導航欄，咱們通常命名爲nav，在css樣式中，一眼就可看到，假如你給它命名爲a，那就夠咱們尋找半天了。

圖片屬性：通常在用img插入圖片時，順手寫上alt屬性，這樣一來即便客戶在網絡不佳時，依然能看到這部分區域是什麼，增長用戶的體驗感。

避免一行代碼過長、空行、縮進、不在html代碼中寫css和javascript等等

CSS

CSS始於1999年，時至今日，也近二十年，css3的出現爲html樣式提供了莫大的工做效率，以前，html工做人員想要畫出一個圓角，須要用使用大量html標籤或者插入各類圖片來合成，然而css的出現，只須要使用一個border-radius屬性就能夠完成。開發人員今後從切圖的工做中解放出來，一個圓角，一個border-radius便可解決
使用css寫兩個樣式
1.使用僞元素寫出來個心形

<style>
        /* 基於父級定位 */
    .heart{
     position: relative;
    }
    /* 使用僞元素畫出兩個圖像,使用圖形拼接來造出一個心 */
    .heart::after,
    .heart::before{
        content: "";
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        margin: auto;
        width: 50px;
        height: 80px;
        background: red;
        /* borde-radius 有四個值 分別對應四個角，分別對應 左上 右上 右下 左下 */
        border-radius: 50px 50px 0 0;  

        /* 旋轉元素，兩個一塊兒旋轉。等下只須要調動一個便可 */
        transform: rotate(-45deg);
        transform-origin: 0 100%;        
    }
    /* 旋轉元素 使它和before僞元素 拼接成一個心 */
    .heart::after{
        left: -100px;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
    }
    </style>
</head>
<body>
    <div class="heart"></div>
</body>
</html>

2.再來一個太極圖

<div id="taiji"></div>

下面css樣式

#taiji {
            position: relative;
            width: 200px;
            height: 100px;
            background: white;
            border-color: black;
            border-style: solid;
            border-width: 4px 4px 100px 4px;
            border-radius: 100%;
            /* 這裏50%也是能夠的，目的是把正方形變成圓 */
            margin: 100px auto;
            
            animation: myfirst 4s linear infinite;
            /* 這句代碼是引用動畫，須要動態的能夠添加這句代碼，動畫定義在下方，若是不須要動態的，就無需添加這句話 */
        }

        #taiji::before,
        #taiji::after {
            content: " ";
            position: absolute;
            top: 50%;
            left: 0;
            width: 25px;
            height: 25px;
            background: white;
            border: 38px solid black;
            /* //調成50%也是能夠的 */
            border-radius: 100%;
        }

        #taiji::after {
            left: 50%;
            background: black;
            border-color: white;
        }

再給它加上動畫，讓它勻速無限旋轉下去

@keyframes myfirst {
            0% {
                /* 當在0%時，讓他旋轉0度 */
                transform: rotate(0deg);
            }
            100% {
                /* 當在100%時，讓他旋轉360度 */
                transform: rotate(360deg);
            }

        }

小結：在咱們用jQ寫效果時，偶爾回顧下原生的，會發現不少樂趣。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。