標簽中,一般包含網頁中除頭部和底部之外的其他內容。6 瀏覽器審查HTML標簽元素
瀏覽器頁面按F12打開
左邊顯示為HTML,右邊顯示為CSS(后面會學到)
7 表格標題標簽
表格的標題:caption
caption元素定義表格標題。
caption標簽必須緊隨table標簽之后。只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。
8 合并單元格
跨行合并:rowspan
跨列合并:colspan
“2”表示合并兩個單元格,數值是多少就合并多少個單元格。
看不懂的小伙伴不要氣餒,后續的分享中將持續解釋,只要你跟著我分享的課程從頭到尾去學習,每篇文章看三遍,一個月后,回過頭來看之前的文章就會感覺簡單極了。
本章已結束,下篇文章將分享《08 表單和表單控件》小伙伴們不要錯過喲!上述內容是作者本人的學習筆記,需要原視頻學習資料可以在公眾號回復關鍵詞“前端資料”
頁編程之表格樣式。
同學們好,我是一名免費的少兒編程老師。今天我要分享的內容是以列為單位設置表格樣式。在插入表格課程中,我已經講解了HTML中沒有單獨的列標簽,列是由對應的單元格組成的行形成的。雖然如此,但列這個概念仍然是存在的。
讓我們來看一下今天的示例效果。這個網頁上有一個3行3列的表格,其中3列分別是姓名、科目和分數,而3行分別是表頭行、字體加粗的內容和兩行。第一列和第二列的背景顏色是綠色,第三列的背景顏色是灰色。在一列中,每一個單元格的樣式都是統一的。
接下來,讓我們看看實現的代碼。以列為單位設置表格樣式,實際上是通過這兩個標簽來實現的,分別是colgroup和col。colgroup翻譯過來就是“列”的意思,而colgroup則是“列主”的意思。
首先,讓我們來看看colgroup標簽。這個標簽是一個無屬性的圍堵標簽,它的作用只有一個,即聲明這個標簽內包含的是本表格列的樣式。通過這個標簽,我們可以向整個列應用樣式,而不需要為每一個單元格或每一行設置樣式。
這個標簽必須在table標簽內,如果有caption標簽,則必須在thead標簽之前使用。如果不明白各標簽的先后順序,可以看看上節課的內容。colgroup標簽僅僅是聲明,具體的樣式是要使用col標簽來實現的。col標簽的數量應該與TDTH的標簽數量一致,一一對應地設置。第1行的col標簽對應第1列的樣式,第2行的col標簽對應第2列的樣式,以此類推。
有些同學會問,老師,你這里的表格有三列,但是你只寫了兩個col標簽,這時候就要講到col標簽在HTML5中的兩個常用屬性,一個是col屬性,說明了這一行的col標簽的樣式可以跨幾列。
例如,在這里將第一行的col標簽的Span屬性設置為2,這就意味著這個樣式在當前位置跨了兩列。換句話說,讓第一列和第二列使用了同一個樣式。
第二個屬性是它的style標簽。這個style標簽的內容是CSS的一段代碼,通過這個屬性我們可以為列添加各種效果。嚴格來說,style并不是卡標簽的一個專用屬性,而是HTML的全局屬性之一。所謂的全局屬性就是只要是HTML標簽都自帶這一個屬性。對于各位同學來說,這是一個新概念,你們只需要記住就可以了。通過使用colgroup標簽和col標簽的配合,我們不僅能夠靈活快速地為表格添加樣式,進行美化,還能大幅減少代碼量,提高頁面加載速度。
以上就是今天的分享,希望各位同學能夠牢記在心,并在下一次練習中做到不看視頻也能夠寫出代碼。如果需要獲取相關案例和文檔,可以向我提問。我們下期再見。如果你對網頁編程、服務端編程、數據庫、算法等感興趣,歡迎點贊、關注!
要建立一個新網站時,有一個良好的前端開發基礎很重要。
本文將解釋什么是HTML5,以及如何創建一個項目中使用的HTML5基本模板。
下面我們來看一下最基本的HTML5代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
文檔內容......
</body>
</html>
注意:對于中文網頁需要使用 <meta charset="utf-8"> 聲明編碼,否則會出現亂碼。
HTML 中的 doctype 是什么
HTML 代碼中的第一行應該是 doctype 聲明。doctype 告訴瀏覽器頁面是用什么版本的 HTML 編寫的。
<!DOCTYPE html>
什么是 HTML 根元素
<html> 標簽是 HTML 文件最頂層的元素。你需要把 <head> 和 <body> 標簽嵌套在它里面。
HTML 里的 head 標簽
head 元素是所有頭部元素的容器。位于 <head> 內部的元素可以包含腳本、指引瀏覽器找到樣式表、提供元信息,等等。
下面是可用在 head 部分的標簽:
<base>
<link>
<meta>
<script>
<style>
<title>
什么是 UTF-8 字符編碼?
UTF-8 是網頁中使用的標準字符編碼。這通常是元素中顯示的第一個標記。<head><meta charset="utf-8">
根據萬維網聯盟的說法:
基于 Unicode 的編碼(如 UTF-8)可以支持多種語言,并且可以容納這些語言的任何混合的頁面和表單。它的使用還消除了服務器端邏輯的需要,即單獨確定所服務的每個頁面或每個傳入表單提交的字符編碼。
什么是 HTML 標題標簽?
標記是網頁的標題。此文本顯示在瀏覽器的標題欄中。<title>
<title>文檔標題</title>
什么是 HTML 文檔主體元素標簽?
<body> 標簽定義文檔的主體。
HTML 文檔的元數據和文檔信息包裝在 head 元素中,文檔的內容則包裝在 body 元素中。
body 元素總是緊跟在 head 元素之后,它是 html 元素的第二個子元素。
<body> 元素包含 HTML 文檔的所有內容,例如標題、段落、圖像、超鏈接、表格、列表等。
注意:一個 HTML 文檔中只能有一個 <body> 元素。
因此:HTML 5 樣板添加到每個 HTML 頁面。此起始代碼包含重要信息,如文檔類型、元數據、外部樣式表和腳本標簽。