第1關:文字控制類標籤基礎知識
任務描述
本關任務:完成一組與文字控制類標籤相關的選擇題。
相關知識
為了完成本關任務,你需要掌握:1.標題段落標籤及其用法,2.文字格式標籤及其用法,3.特殊字元標籤及其用法。
塊級元素與行內元素
塊級元素
塊級元素是指顯示為乙個區塊內容的元素,在瀏覽器顯示時,通常會以新行來開始(和結束)。其特點是:
總在新行上開始
高度、行高以及內外邊距都可控
預設寬度為容器的100%
可以巢狀行內元素和其他塊級元素
行內元素
行內元素也叫內聯元素,是指顯示為一行內容的元素,在瀏覽器顯示時,會順次在一行排列,而不另起新行。其特點是:
和其他元素排成一行
高度、行高以及內外邊距不可控
寬度就是其內容的寬度,不可改變
行內元素只能容納文字或其他行內元素
標題段落標籤
文字標題標籤
文字標題標籤是雙標籤,塊級元素,用於規定文字內容標題的層次。在html中提供了6級標題標籤,從一級
這是第1個段落
第3關:水平線標籤
任務描述
本關任務:編寫乙個標題下方帶有水平線的網頁。顯示效果如下:
相關知識
為了完成本關任務,你需要掌握:1.水平線標籤和換行標籤用法,2.水平線標籤相關的屬性。
完成本任務需要的標籤
完成本任務需要使用水平線標籤在這裡插入**片
和換行標籤
在這裡插入**片
水平線標籤相關的屬性
size:水平線的粗細,長度單位,預設為px
width:水平線長,長度單位,預設為px
align:水平線對齊,可取left、center、right
color:水平線顏色,其取值可為顏色單詞,或顏色碼。
noshade:無陰影設定,新增時無陰影,不新增時有陰影。
程式設計要求
根據前面的效果圖,在右側編輯器中的begin - end區域內補充**,具體要求是:
1.在一級標題文字「第一章 html5基礎」下方新增一條水平線,水平線的下方使用換行標籤新增乙個空行
2.為水平線標籤新增size屬性,取值為3
3.為水平線標籤新增width屬性,取值為400
4.將水平線的顏色設定為藍色
5.去掉水平線的陰影效果
測試說明
補充**後,測評,平台會對你編寫的**進行測試,如果正確則完成闖關任務。
參考**:
這是第1個段落。
第4關:文字修飾類標籤任務描述
本關任務:編寫乙個html文件,並按要求對文字進行修飾。顯示效果如下:
相關知識
為了完成本關任務,你需要掌握:1.font標籤及其屬性,2.常用文字修飾標籤的功能。
font標籤及其屬性
font標籤可對文字的字型大小大小、字型和顏色進行修飾。對應的屬性為:
size:設定文字字型大小,其取值為1~7
face:設定文字字型
color:設定文字顏色,值為顏色單詞或顏色**
align:設定文字對齊,取值可以是left、center、right、justify
文字修飾類的其他標籤
文字修飾類的其他標籤如下圖
程式設計要求
根據前面的效果圖,在右側編輯器中的兩個begin - end區域內補充**,具體要求是:
1.採用font標籤為一級標題文字「第一章 html5基礎」新增「黑體」字型和「紅色」顯示
2.分別採用加粗、斜體、下劃線、上標和下標標籤為相應的文字新增顯示效果
測試說明
補充**後,測評,平台會對你編寫的**進行測試,如果正確則完成闖關任務。
參考**:
這是加粗顯示的文字這是斜體顯示的文字
這是帶下劃線的文字
x3-2y2=1
HTML body標籤 文字標籤
標題標題標籤共有六個,會將其中的資料加粗加黑顯示,並且顯示依次減弱,標題標籤自帶換行功能 塊級標籤 屬性 align center 居中 left 居左 right 居右 注意 標籤的屬性是對標籤的功能進一步的補充,可以由開發人員自由指定標籤的屬性值,來達到想要的顯示效果。hr 會在頁面顯示一條水平...
標籤,短文本引用 標籤,長文字引用
引用文字,預設顯示雙引號,不需要在文字中新增 標籤,長文字引用 瀏覽器對標籤的解析是縮排樣式。在 html 中輸入回車 空格都是沒有作用的。在html文字中想輸入回車換行,就必須輸入 空格 需要幾個空格就加幾個 新增水平線 1,聯絡位址資訊 2,在瀏覽器上顯示的樣式為斜體 加入 1,var i i ...
HTML body標籤之文字標籤
表示用h1 h6這幾個符號表示 eg 作用將其中的文字加粗加黑顯示,h1 h6顯示效果依次減弱,並且標題標籤自帶換行功能。像這樣自己佔一行的標籤也叫塊級標籤。標籤屬性 標籤的屬性是對標籤功能進一步的補充,可以由開發人員自由的指定屬性值,來達到想要的顯示效果。標題標籤的屬性有 屬性名屬性值 作用ali...