互聯(lián)網(wǎng)高速發(fā)展的今天，我們通過(guò)瀏覽器可以看到各種各樣的網(wǎng)站，包含了各式不同的領(lǐng)域還有內(nèi)容，通過(guò)點(diǎn)擊網(wǎng)站上的標(biāo)簽和欄目我們就能夠很方便地看到網(wǎng)站上顯示的各種數(shù)據(jù)，而這些都是建立在HTML這種標(biāo)記語(yǔ)言的基礎(chǔ)上做到的。

HTML的英文全稱為Hyper Text Markup Language，中文稱作超文本標(biāo)記語(yǔ)言，是一種專門(mén)用來(lái)建立網(wǎng)站的標(biāo)識(shí)語(yǔ)言。其中包括了許多標(biāo)簽將分散的網(wǎng)絡(luò)數(shù)據(jù)連接到一起，聚合同一之后形成了我們現(xiàn)在所看到的網(wǎng)頁(yè)。

看到這里是不是有許多朋友想要知道這個(gè)HTML語(yǔ)言該怎么去學(xué)習(xí)呢？是需要找老師統(tǒng)一學(xué)，還是去圖書(shū)館找專業(yè)書(shū)籍自己學(xué)好呢？不用擔(dān)心，因?yàn)榻裉煲o大家推薦的就是一個(gè)專門(mén)為大家提供各種編程語(yǔ)言教程的學(xué)習(xí)網(wǎng)站。

這個(gè)網(wǎng)站名叫 runoob，直接在瀏覽器上搜索即可找到。

在首頁(yè)可以看到該欄目的第二個(gè)就是關(guān)于HTML的學(xué)習(xí)教程，點(diǎn)擊左邊的方框可以調(diào)整你的課程進(jìn)度，在第一章節(jié)的教程中很清晰地講解了什么是HTML，以及告訴了你一些關(guān)于網(wǎng)站建立的小知識(shí)。

下方的提示框會(huì)給你提供一些對(duì)HTML零基礎(chǔ)新手的科普，關(guān)于這種標(biāo)記語(yǔ)言應(yīng)該如何進(jìn)行保存，如何查看文件后輟名，如何打開(kāi)代碼文件等等，還會(huì)提供一些專用工具供你學(xué)習(xí)使用。同時(shí)網(wǎng)站會(huì)給你簡(jiǎn)單介紹一些網(wǎng)頁(yè)編程語(yǔ)言的區(qū)別，還有各種用途上的區(qū)分，非常地詳細(xì)。

在第三章節(jié)的編輯器一欄里，會(huì)提供給你一些HTML的專用編輯器，例如VS Code，還有sublime text 等實(shí)用工具，在后面會(huì)教你如何將這些HTML必備編輯器下載并安裝，然后在瀏覽器上面運(yùn)行。

通過(guò)插件還有語(yǔ)言編程的格式我們就能夠?qū)W會(huì)如何制作第一步的標(biāo)題了，剛開(kāi)始的一步比較簡(jiǎn)單，相信大家很快就能學(xué)會(huì)如何在網(wǎng)頁(yè)上顯示自己打入的文字了。之后進(jìn)一步的學(xué)習(xí)就是關(guān)于如何調(diào)整文字段落，還有各種標(biāo)識(shí)的使用。

在如何進(jìn)行文字排版編輯的方面，教程中也講述得很詳細(xì)，包括一些用戶們常犯的錯(cuò)誤，還有一些網(wǎng)頁(yè)的實(shí)例，甚至是這個(gè)教學(xué)網(wǎng)站上的排版示范都會(huì)進(jìn)行一一講解。

更深入的章節(jié)會(huì)對(duì)如何進(jìn)行圖像排列，傳輸?shù)确矫孢M(jìn)行細(xì)講，教程中把大部分網(wǎng)站會(huì)使用到的技巧還有排版方式都分成了許多個(gè)小片段，方便大家能夠?qū)γ總€(gè)方面針對(duì)性地學(xué)習(xí)。這些內(nèi)容并不多，幾乎每一個(gè)片段都是用很直白的語(yǔ)言進(jìn)行講解，方便所有人都能夠看懂，并且在下方都會(huì)有更詳細(xì)的術(shù)語(yǔ)解析，還有一些比較難懂的點(diǎn)會(huì)舉例解釋。

經(jīng)過(guò)十幾章節(jié)的教學(xué)之后，基本上能夠掌握HTML語(yǔ)言的基本用法，還有一些簡(jiǎn)單的操作了，這個(gè)時(shí)候如果想要進(jìn)階學(xué)習(xí)的話還可以在網(wǎng)站上查找其他的進(jìn)階語(yǔ)言用法，例如CSS, JavaScript等等復(fù)雜一些的語(yǔ)言，相應(yīng)的你也會(huì)學(xué)到更多如何運(yùn)營(yíng)網(wǎng)頁(yè)的方法。

當(dāng)然如果想要自己建立一個(gè)網(wǎng)站的話，還需要更多資源還有設(shè)備，例如高速的網(wǎng)絡(luò)連接保持網(wǎng)頁(yè)的穩(wěn)定性，以及穩(wěn)定的服務(wù)器，用來(lái)保證自己的網(wǎng)頁(yè)24小時(shí)都能保持流暢可用。不過(guò)這些都是在學(xué)會(huì)了如何建立網(wǎng)頁(yè)之后才考慮的事了。

現(xiàn)在網(wǎng)上也有許多編程教學(xué)，在網(wǎng)上自學(xué)一門(mén)知識(shí)一門(mén)語(yǔ)言變得非常方便，但是僅僅是擁有資源還是不夠的。學(xué)習(xí)如何建立自己的網(wǎng)站還需要大量的努力以及知識(shí)的積累，通過(guò)不斷的練習(xí)還有實(shí)踐才能自如地使用，只有基礎(chǔ)扎實(shí)，建立出來(lái)的網(wǎng)站才能夠長(zhǎng)久。但還需要大家能夠行動(dòng)起來(lái)，只有去學(xué)習(xí)去實(shí)踐才能夠真正學(xué)會(huì)東西，希望這個(gè)教學(xué)網(wǎng)站推薦能夠幫到更多人！

由于漢字的特殊性，在css網(wǎng)頁(yè)布局中，中文排版有別于英文排版。排版是一個(gè)麻煩的問(wèn)題，小編認(rèn)為，作為一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師和網(wǎng)頁(yè)制作人員，掌握一些簡(jiǎn)單的中文排版技巧是不可或缺的，所以今天特意總結(jié)了幾個(gè)簡(jiǎn)單實(shí)用的技巧，希望對(duì)大家有所幫助。

　　一、如何設(shè)定文字字體、顏色、大小等

　　font-style設(shè)定斜體，比如font-style:italic

　　font-weight設(shè)定文字粗細(xì)，比如font-weight:bold

　　font-size設(shè)定文字大小，比如font-size:12px

　　line-height設(shè)定行距，比如line-height:150%

　　color設(shè)定文字顏色，注意不是font-color喔，比如color:red

　　font-family設(shè)定字體，比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-serif

　　二、使用margin，text-align 控制段落

　　中文段落使用p標(biāo)簽，左右、段前段后的空白，都可以通過(guò)margin來(lái)控制。

　　比如

　　p{

　　margin:18px 6px 6px 18px;/*分別是上、右、下、左，十二點(diǎn)開(kāi)始的順時(shí)針?lè)较?/

　　}

　　而text-align則用于文字的對(duì)齊方式。

　　比如

　　p{

　　text-align:center;/*居中對(duì)齊*/

　　}

　　除了居中對(duì)齊之外,對(duì)齊方式還有左對(duì)齊、右對(duì)齊和兩端對(duì)齊，對(duì)應(yīng)的屬性值分別為left、right、justify。

　　提示：由于默認(rèn)的margin值會(huì)導(dǎo)致頁(yè)面排版出現(xiàn)問(wèn)題，特別是ul、ol、p、dt、dd等標(biāo)簽。小編的解決之道就是把所有標(biāo)簽的margin值定義為0。

　　三、豎排文字—使用writing-mode

　　writing-mode屬性有兩個(gè)值lr-tb和tb-rl，前者是默認(rèn)的左-右、上-下，后者是上-下、右-左。

　　寫(xiě)法如

　　p{

　　writing-mode:tb-rl;

　　}

　　四、使用list-style美化列表

　　如果我們的排版涉及到列表，不妨考慮為它添加些項(xiàng)目符號(hào)進(jìn)行美化。

在CSS里，項(xiàng)目符號(hào)包括disc（實(shí)心圓點(diǎn)）、circle（空心圓圈）、square（實(shí)心方塊）、decimal（阿拉伯?dāng)?shù)字）、lower-roman（小寫(xiě)羅馬數(shù)字）、upper-roman（大寫(xiě)羅馬數(shù)字）、lower-alpha（小寫(xiě)英文字母）、upper-alpha（大寫(xiě)英文字母）、none（無(wú)）。

　　嘿嘿！我們可用的項(xiàng)目符號(hào)數(shù)量不少喔，但美中不足的是我們不能為它們?cè)O(shè)定大小，也不能設(shè)定垂直方向上的對(duì)齊。

　　如果我們想設(shè)定一個(gè)列表的項(xiàng)目符號(hào)為方塊，可以這樣寫(xiě)：

　　li{

　　list-style:square;

　　}

　　小編在這里提醒大家一下：當(dāng)一個(gè)項(xiàng)目列表的左外邊距設(shè)為零的時(shí)候，list-style-position:outside的項(xiàng)目符號(hào)不會(huì)顯示。

　　五、使用text-overflow 實(shí)現(xiàn)固定寬度漢字截?cái)?/strong>

　　用后臺(tái)語(yǔ)言可以對(duì)從數(shù)據(jù)庫(kù)里的字段內(nèi)容做截?cái)嗵幚?，如果想?duì)列表應(yīng)用該樣式，我們可以這樣寫(xiě)：

　　li{

　　overflow:hidden;

　　text-overflow:ellipsis;

　　white-space:nowrap;

　　}

　　六、首字下沉

　　如果你想制作首字下沉效果，不妨考慮偽對(duì)象:first-letter并配合font-size、float屬性。

　　p:first-letter{

　　padding:6px;

　　font-size:32pt;

　　float:left;

　　}

　　七、首行縮進(jìn)—使用text-indent

　　text-indent可以使得容器內(nèi)首行縮進(jìn)一定單位。比如中文段落一般每段前空兩個(gè)漢字。

可以這么寫(xiě)

　　p{

　　text-indent:2em;/*em是相對(duì)單位，2em即現(xiàn)在一個(gè)字大小的兩倍*/

　　}

　　注意：如果font-size是12px的話，那么text-indent:2em則代表縮進(jìn)24px。

　　八、固定寬度漢字（詞）折行—使用word-break

　　在排版的時(shí)候，你是否為一個(gè)詞組，其中一個(gè)字出現(xiàn)在上面而另一個(gè)字折斷到下一行去而發(fā)愁呢？不用愁，這時(shí)使用word-break就可以輕松解決問(wèn)題了。

　　九、關(guān)于漢字注音—使用ruby標(biāo)簽和ruby-align屬性

　　最后小編向大家介紹一下ruby標(biāo)簽和ruby-align屬性 。這是一個(gè)比較冷門(mén)的技巧，可能平時(shí)使用不多，但小編覺(jué)得不妨提供給大家預(yù)防不時(shí)之需。

　　如果我們想為漢字注音就可以這樣寫(xiě)

　　<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

　　然后通過(guò)ruby-align設(shè)置其對(duì)齊方式。

以上就是今日整理的“Web前端教程：簡(jiǎn)單實(shí)用的CSS網(wǎng)頁(yè)布局中文排版技巧”一文，希望為正在學(xué)習(xí)Web前端的同學(xué)提供參考。你記住并理解了嗎？以后酷仔每日均會(huì)提供MySQL、Python及Web相關(guān)的教程及習(xí)題，趕快學(xué)習(xí)起來(lái)吧。