TML 基礎(chǔ)

非常簡單的HTML文檔

HTML 標題

HTML 段落

HTML 鏈接

HTML 圖片

實例解析

HTML 標題

HTML 標題

在html源碼中插入注釋

插入水平線

實例解析

HTML 段落

HTML 段落

更多段落

本例演示在 HTML 文檔中折行的使用。

HTML 格式化的某些問題。

實例解析

HTML 文本格式化

文本格式化

此例演示如何使用 pre 標簽對空行和空格進行控制。

此例演示不同的"計算機輸出"標簽的顯示效果。

此例演示如何在 HTML 文件中寫地址。

此例演示如何實現(xiàn)縮寫或首字母縮寫。

此例演示如何改變文字的方向。

此例演示如何實現(xiàn)長短不一的引用語。

文本下劃線與刪除線

實例解析

HTML 樣式

HTML Style 元素

背景色樣式

字體樣式，顏色，大小

文本對齊樣式

設(shè)置文本字體

設(shè)置文本字體大小

設(shè)置文本字體顏色

設(shè)置文本字體，字體大小，字體顏色

HTML使用不同樣式

沒有下劃線的鏈接

鏈接到一個外部樣式表

實例解析

HTML 鏈接

創(chuàng)建超級鏈接

將圖像作為鏈接

在新的瀏覽器窗口打開鏈接

鏈接到同一個頁面的不同位置

跳出框架

創(chuàng)建電子郵件鏈接

創(chuàng)建電子郵件鏈接 2

實例解析

HTML 圖像

插入圖像

從不同的位置插入圖片

排列圖片

本例演示如何使圖片浮動至段落的左邊或右邊。

制作圖像鏈接

創(chuàng)建圖像映射

實例解析

HTML 表格

簡單的表格

沒有邊框的表格

表格中的表頭

帶有標題的表格

跨行或跨列的表格單元格

表格內(nèi)的標簽

單元格邊距(Cell padding)

單元格間距(Cell spacing)

實例解析

HTML 列表

無序列表

有序列表

不同類型的有序列表

不同類型的無序列表

嵌套列表

嵌套列表 2

定義列表

實例解析

HTML Forms 和 Input

創(chuàng)建文本域(Text fields)

創(chuàng)建密碼域

復(fù)選框

單選按鈕

簡單的下拉列表

預(yù)選下拉列表

本例演示如何創(chuàng)建一個文本域（多行文本輸入控件）。

創(chuàng)建一個按鈕

本例演示如何在數(shù)據(jù)周圍繪制一個帶標題的框。

帶有文本域與輸入域的表單

帶有復(fù)選框與提交按鈕的form表單

帶有單選框與提交按鈕的表單

發(fā)送郵件表單

實例解析

HTML iframe

內(nèi)聯(lián)框架 (HTML頁面中插入框架)

實例解析

HTML 頭部元素

描述了文檔標題

HTML頁面中默認的URL鏈接

提供文檔元數(shù)據(jù)

實例解析

HTML 腳本

插入一個腳本

使用 <noscript> 標簽

實例解析

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實用視頻。

主要內(nèi)容：這是HTML課程的第四課，主要講解HTML的文字標簽和格式標簽。在今天我們做一個屬于自己的簡歷。

上節(jié)回顧

在上一節(jié)中主要講解了HTML的標題標簽（h1~h7）以及加粗、斜體、下劃線、上下標等格式的標簽。上節(jié)請戳→HTML電腦編程03 標題物理字體標簽的使用，大學(xué)生學(xué)編程

HTML

font標簽

font標簽通過字面意思來看，就是字體的意思。是的這是一個用來顯示文字的標簽。不過值得說的是，這個文字可以通過屬性的方式，指定顏色和字體大小。比如：

font標簽的寫法

效果：

font標簽的顯示效果

從書寫的HTML代碼可以看出，font標簽包括兩個參數(shù)：

1. color（字體的顏色）：顏色的值可以為英文，也可以為RGB數(shù)值。
   

2. size（字體的大小）：通過數(shù)字1~7可以控制字體的大小。

3. face（文字的顯示字體）：這個屬性可以設(shè)置顯示的字體。如可以寫為：face="楷體"

顏色體系

在HTML中包括兩種顏色體系。一種就是直接寫顏色的英文，如：red（紅色）、blue（藍色）、green（綠色）等。

不同顏色

另外一種顏色體系是RGB。由R（Red）、G（Green）、B（Blue）三種顏色組成。相信小時候很多人都知道兩種不同的顏料，可以轉(zhuǎn)換為不同的顏色。RGB就是通過紅綠藍不同的明暗程度。來表示所有的顏色的。

RGB

RGB中的每一個顏色都是以六位十六進制進行表示。數(shù)值越大顏色越深。如：000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#號。

段落標簽

段落標簽為p。會為里面的文字自動分段顯示：

p標簽自動分段

換行標簽

換行標簽為br，這是個單標簽。寫法為：<br/>。

br標簽的形式

效果：

換行標簽的效果

默認情況下，HTML的文檔排列形式為自上而下，自左而右。標簽包括行級標簽和塊級標簽。如果想要對塊級標簽進行換行，你就需要使用br標簽。

其他幾個標簽

下面是幾個標簽，大家直接Sublime中寫入看一下效果哦。在以后就直接使用啦

居中預(yù)格式化標簽

的網(wǎng)站不在于網(wǎng)頁的眩目多彩，而在于信息的流量和瀏覽者的視覺感受。小小的文字在不同的設(shè)計師手中會演繹成不同的藝術(shù)樂章。作為網(wǎng)頁設(shè)計師，必須下工夫做好網(wǎng)頁文本的排版設(shè)計，希望下面介紹的網(wǎng)頁文本編排秘招能給大家一點啟示。

本文主要介紹在網(wǎng)站設(shè)計過程中文本排版應(yīng)注意的基本問題和常規(guī)解決方法。

不合理的網(wǎng)頁文本排版會對瀏覽者的視力產(chǎn)生消極的影響，不亞于庸俗的網(wǎng)頁內(nèi)容對于瀏覽者心靈的毒害。設(shè)計師要避免這樣的問題出現(xiàn)，其實也很簡單，記住5要素：字體大小、字間距離、行內(nèi)字數(shù)、行間距離和段落距離。

1．字體大小

標準正文字體大小一般為9pt（點數(shù)）或12px（像素）。由于顯示器屏幕越來越大，同一字體大小設(shè)置會比以前顯示得小，現(xiàn)在有些網(wǎng)頁正文字體大小設(shè)計趨向增大，可以在這個基礎(chǔ)上增加2個單位，但不能超過16像素，否則就會覺得太大，顯得版面內(nèi)容太空。

在網(wǎng)頁正文中適合視覺閱讀的字體大小為12pt，但由于在一個頁面中需要安排的內(nèi)容較多，通常采用9pt，所以建議根據(jù)個人網(wǎng)頁內(nèi)容而設(shè)定。

較大的字體可用于標題或其他需要強調(diào)的地方，小一些的字體可以用于頁腳和輔助信息。需要注意的是，小字體容易產(chǎn)生整體感和精致感，但可讀性較差。

2．字間距離

正文字距一般保持正常即可，即為0em（字體高度），不要超過1em，否則就顯得不連貫。

3．行內(nèi)字數(shù)

行內(nèi)字數(shù)一般根據(jù)版面大小而定，建議正字數(shù)保持在40個字左右為宜。

4．行間距離

正文行距一般設(shè)為1.6em（字體高度）左右，正常范圍為1.2-2em（字體高度）。不宜太小，否則會擠在一起，無法識別；太大就容易產(chǎn)生斷行現(xiàn)象。

行距的變化也會對文本的可讀性產(chǎn)生很大影響。一般情況下，接近字體尺寸的行距設(shè)置比較適合正文。這主要是因為適當(dāng)?shù)男芯鄷纬梢粭l明顯的水平空白帶，以引導(dǎo)瀏覽者的目光，而行距過寬會使一行文字失去較好的延續(xù)性。

除了對于可讀性的影響，行距本身也是具有很強表現(xiàn)力的設(shè)計語言，為了加強版式的裝飾效果，可以有意識地加寬或縮窄行距，體現(xiàn)獨特的審美意趣。例如，加寬行距可以體現(xiàn)輕松、舒展的情緒，應(yīng)用于娛樂性、抒情性的內(nèi)容恰如其分。另外，通過精心安排，使寬、窄行距并存，可增強版面的空間層次與彈性，表現(xiàn)出獨具匠心。

5．段落距離

正文段距一般可設(shè)為1em（字體高度），即相當(dāng)于空一行，由于在CSS樣式表中沒有直接的段距設(shè)置，可通過設(shè)置margin（邊距）、padding（填充）屬性來實現(xiàn)。

1.閱后如果喜歡，不妨點贊、評論和關(guān)注一下。

2.如果喜歡玩軟件，請關(guān)注本頭條號閱讀相關(guān)文章。

3.在學(xué)習(xí)中有什么問題，歡迎與我溝通交流，號搜索：微課傳媒，我在這里等你喲！