重溫HTML和CSS3

Taonce 發(fā)布于2019-08-29 16:21 / 2103人閱讀

摘要：不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。何為一種腳本語(yǔ)言，是一種動(dòng)態(tài)類(lèi)型弱類(lèi)型基于原型的語(yǔ)言，內(nèi)置支持類(lèi)型。二代碼規(guī)范在之前很多開(kāi)發(fā)人員對(duì)的代碼規(guī)范知之甚少，在年至年，許多開(kāi)發(fā)人員從轉(zhuǎn)換到。

重溫Web前端基礎(chǔ) 本篇幅中著重文字，只是記錄一些自己的見(jiàn)解，鞏固下自身基礎(chǔ) 網(wǎng)頁(yè)結(jié)構(gòu)是什么？

結(jié)構(gòu)層 html 導(dǎo)航，列表，段文字，圖片，鏈接，
表示層 css 顏色，大小，位置，
行為層 JavaScript，彈出，切換等。

什么是html？

HTML是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
不是編程語(yǔ)言，是標(biāo)記語(yǔ)言

什么是CSS？

CSS （層疊樣式表）
是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

何為javascript？

JavaScript一種腳本語(yǔ)言，是一種動(dòng)態(tài)類(lèi)型、弱類(lèi)型、基于原型的語(yǔ)言，內(nèi)置支持類(lèi)型。廣泛用于客戶(hù)端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。

HTML

1993年開(kāi)始提出草案，發(fā)展到現(xiàn)在，已經(jīng)經(jīng)歷二十余年，版本也已經(jīng)更新到現(xiàn)在的H5，html語(yǔ)言作為網(wǎng)絡(luò)語(yǔ)言標(biāo)準(zhǔn)，在計(jì)算機(jī)的發(fā)展史中有不可或缺的地位。

一.書(shū)寫(xiě)自己的第一個(gè)頁(yè)面





    

    
    
    
    
    
    Document


    
    這是我的第一個(gè)頁(yè)面

html語(yǔ)言在當(dāng)今web頁(yè)面中有不可或缺的地位。

二.HTML代碼規(guī)范
在之前很多 Web 開(kāi)發(fā)人員對(duì) HTML 的代碼規(guī)范知之甚少，在2000年至2010年，許多Web開(kāi)發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。使用 XHTML后開(kāi)發(fā)人員才逐漸養(yǎng)成了比較好的 HTML 編寫(xiě)規(guī)范
，文檔聲明放在首行

,推薦使用小寫(xiě)字母，雖然我們?cè)跁?shū)寫(xiě)代碼時(shí)候，一些標(biāo)簽無(wú)論大小寫(xiě)都會(huì)被瀏覽器解析，但是如果我們?cè)陂_(kāi)發(fā)時(shí)使用大小寫(xiě)混寫(xiě)，美感度會(huì)大大降低，或許根本就不存在所謂的美感度吧，并且在后續(xù)的維護(hù)中，你會(huì)更加糟心。
注釋：
在書(shū)寫(xiě)代碼時(shí)切記一定要書(shū)寫(xiě)注釋?zhuān)粋€(gè)開(kāi)發(fā)項(xiàng)目少說(shuō)也得個(gè)幾千行吧，說(shuō)大了幾十萬(wàn)行都會(huì)有的，如果你不寫(xiě)注釋?zhuān)赡苣憬裉旒影鄬?xiě)的代碼，明天早上睡醒你都不知道自己寫(xiě)的是哪部分區(qū)域，或許甚至都不知道自己寫(xiě)的是什么了。

閉合標(biāo)簽：


    
    這是我的第一個(gè)頁(yè)面

就好比上面的代碼，雖然能夠被瀏覽器正常閱讀出來(lái)， enter description here
這種后果就不用我過(guò)多說(shuō)了吧。

屬性命名：在寫(xiě)HTML時(shí)推薦使用小寫(xiě)命名，不要隨便命名，按照老前輩的來(lái)，就好導(dǎo)航欄，我們一般命名為nav，在css樣式中，一眼就可看到，假如你給它命名為a，那就夠我們尋找半天了。

圖片屬性：一般在用img插入圖片時(shí)，順手寫(xiě)上alt屬性，這樣一來(lái)即使客戶(hù)在網(wǎng)絡(luò)不佳時(shí)，依然能看到這部分區(qū)域是什么，增加用戶(hù)的體驗(yàn)感。

避免一行代碼過(guò)長(zhǎng)、空行、縮進(jìn)、不在html代碼中寫(xiě)css和javascript等等

CSS

CSS始于1999年，時(shí)至今日，也近二十年，css3的出現(xiàn)為html樣式提供了莫大的工作效率，之前，html工作人員想要畫(huà)出一個(gè)圓角，需要用使用大量html標(biāo)簽或者插入各種圖片來(lái)合成，然而css的出現(xiàn)，只需要使用一個(gè)border-radius屬性就可以完成。開(kāi)發(fā)人員從此從切圖的工作中解放出來(lái)，一個(gè)圓角，一個(gè)border-radius即可解決
使用css寫(xiě)兩個(gè)樣式
1.使用偽元素寫(xiě)出來(lái)個(gè)心形

2.再來(lái)一個(gè)太極圖

下面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;
            /* 這句代碼是引用動(dòng)畫(huà)，需要?jiǎng)討B(tài)的可以添加這句代碼，動(dòng)畫(huà)定義在下方，如果不需要?jiǎng)討B(tài)的，就無(wú)需添加這句話(huà) */
        }

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

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

再給它加上動(dòng)畫(huà)，讓它勻速無(wú)限旋轉(zhuǎn)下去

 @keyframes myfirst {
            0% {
                /* 當(dāng)在0%時(shí)，讓他旋轉(zhuǎn)0度 */
                transform: rotate(0deg);
            }
            100% {
                /* 當(dāng)在100%時(shí)，讓他旋轉(zhuǎn)360度 */
                transform: rotate(360deg);
            }

        }

小結(jié)：在我們用jQ寫(xiě)效果時(shí)，偶爾回顧下原生的，會(huì)發(fā)現(xiàn)很多樂(lè)趣。

云服務(wù)器 GPU云服務(wù)器 html5前端css3 html5與css3 html5前端開(kāi)發(fā)css3 html3 css3 js jquery

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113696.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Taonce

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

一篇就夠了（建議收藏）——超詳解sizeof與strlen的用法

閱讀 3933·2021-09-09 09:33
阿里云代金券、優(yōu)惠券、提貨券是什么，如何領(lǐng)取和使用？

閱讀 1796·2021-09-06 15:14
align-self: stretch 失效

閱讀 1935·2019-08-30 15:44
圣杯布局——針對(duì)前端小白篇

閱讀 3089·2019-08-29 18:36
css 3D動(dòng)畫(huà)

閱讀 3775·2019-08-29 16:22
重溫HTML和CSS3

閱讀 2104·2019-08-29 16:21
CSS 文本控制

閱讀 2542·2019-08-29 15:42
基于Bootstrap做定制，并與官方庫(kù)保持更新的方法

閱讀 1657·2019-08-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

重溫HTML和CSS3

相關(guān)文章