HTML知識點總結
- table元素
table用來創建表格,表格也可以用來布局,但是嵌套過於復雜,不利於靈活布局,已經幾乎沒人用它來布局了。
表格基本上有如下幾個標簽構成:
(1)<table>標簽用來創建表格的外部框架。
(2)<tr>標簽用來創建表格的行。
(3)<th>標簽用來創建表頭單元格。
(4)<td>標簽用來創建tr行中的單元格。
(5)<caption>標簽用來創建標題。
(6)<thead>標簽用來創建表格的表頭。
(7)<tbody>標簽用來創建表格的主體部分。
(8)<tfoot>標簽用來創建表格的頁腳。
其中 <thead>、<tbody>和<tfoot>標簽實現了表格的語義化布局,這樣表格所組織的內容結構就更加清晰了。也就是說,假如,有一個表格,希望對其中的內容進行分組:
(1)一行能夠起到表格標題的作用。
(2)一些行是表格的主要數據。
(3)最後一行位於表格最底部的總結類型的行。
<thead>中的<th>也是語義化布局的一部分,<th>中的字體會默認加粗。
- <td>rowspan屬性:定義了單元格應該縱跨的行數,也就是實現了單元格縱向合並的效果。
- <td>colspan屬性:定義單元格應該橫跨的列數,也就是實現了單元格橫向合並的效果。
<col>標簽—— column 列:可以為表格中一個或多個列定義屬性值
<colgroup>標簽—— column group 列組:對表格中的列進行組合,以便對其進行樣式修改。
【屬性】
span:規定col元素應該橫跨的列數
- div元素
div是塊級元素,相當於一個容器,在語義上不代表任何特定類型的內容。主要用作大的框架布局,也就是說網頁的骨架主要通過div來架設的,而網頁的血肉則是有span、p或者ul等元素完成。
- section元素
<section>標簽是HTML5新增的語義化標簽,代表文檔中的“節”或“段”。“段”可以是指一篇文章裏按照主題的分段;“節”可以是指一個頁面裏的分組。主要作用為對頁面的內容進行分塊或者對文章的內容進行分段。
section是塊級元素,section標簽通常帶有一個標題和一個內容塊。?
- article元素?
<article>標簽也是HTML5新增的語義化標簽,代表一個頁面中自成一體的內容,目的是為了讓開發者獨立開發或重用。譬如論壇的帖子,博客上的文章,一篇用戶的評論等。除了內容,article會有一個標題(通常會在header裏)和一個footer頁腳。article也是塊級元素
如果在article內部再嵌套article,代表內嵌的article與它外部的內容有關聯。
- section與article的區別:
section和article可以互相嵌套,也就是說他們沒有上下級關系,section可以包含article,article也可以包含section。
拿報紙舉個例子:
一份或一張報紙有很多個版塊,有頭版、國際時事版塊、體育版塊、娛樂版塊、文學版塊等等,像這種有版塊標題的、內容屬於一類的版塊就可以用section包起來。
然後在各個版塊下面,又有很多文章、報道,每篇文章都有自己的文章標題、文章內容。這個時候用article就最好。如果一篇報道太長,分好多段,每段都有自己的小標題,這時候又可以用section把段落包起來。(以上內容來自知乎https://www.zhihu.com/question/20227599 )
- section和div的區別
1、section和div都可以對內容進行分塊,但是section是進行有意義的分塊,無意義的分塊應該由div來做,例如用作設置樣式的頁面容器。
2、section內部必須有標題,標題也代表了section的意義所在。
- 註意:
?1、不要將<section>作為用來設置樣式或行為的“鉤子”容器,那是<div>的工作。
2、如果<article>、<aside>或<nav>更符合狀況,不要使用<section>。
3、不要為沒有標題的內容區塊使用<section>。
4、一條簡單的準則是,只有元素內容會被列在文檔大綱中時,才適合用section元素。
網頁不可能是純靜態的,沒有任何的交互功能;絕大多數的網站都有表單元素的使用。表單提供了一個瀏覽者和網站交互的途徑,比如用戶註冊登錄,用戶留言等功能。
- form
form元素只是一個數據獲取元素的容器,而容器內的元素稱為表單控件。讓表單數據能夠提交,可以將表單元素包裹在<form>之中,最常用的表單控件是input元素。form元素為塊級元素。
- form的主要屬性
name屬性:指定表單的名稱。
action屬性:規定將表單元素數據提交到哪個頁面。
method屬性:規定以何種方式提交表單數據,取值如下:
(1)get:默認值,通過url方式傳輸,並且最大不能夠超過1k,安全性也不是太好。
(2)post:傳輸上大小上沒有限制,並且安全性良好,不通過url傳輸。
novalidate屬性:是HTML5新增的一個屬性,規定當提交表單時不對其進行驗證。
autocomplete屬性:是HTML5新增的一個屬性,規定表單是否應該啟用自動完成功能。當用戶在字段開始鍵入時,瀏覽器基於之前鍵入過的值,應該顯示出在字段中填寫的選項。
- input
?input是很強大的表單控件,它的主要屬性有:
- name屬性:用於規定input元素的名稱
- accept屬性:用來規定能夠通過文件上傳進行提交的文件類型,該屬性只能與type="file"配合使用。
- checked屬性:規定在頁面加載時應該被預先選定的input元素,checked屬性只能在input元素type="radio"或type="checkbox"時使用。
- disabled屬性規定應該禁用input元素。被禁用的字段是不能修改的。
- readonly屬性:規定輸入字段為只讀。
-
maxlength屬性:規定輸入字段的最大長度,以字符個數計,該屬性只能在input元素type="text"或type="password"的時候使用。
-
input的type屬性:?
text 定義單行的輸入字段,用戶可在其中輸入文本
password 定義密碼字段。該字段中的字符被掩碼
file 定義輸入字段和 "瀏覽"按鈕,供文件上傳
radio 定義單選按鈕
checkbox 定義復選框
hidden 定義隱藏的輸入字段
button 定義可點擊按鈕(多數情況下,用於通過JavaScript啟動腳本)
image 定義圖像形式的提交按鈕
reset 定義重置按鈕。重置按鈕會清除表單中的所有數據
submit 定義提交按鈕。提交按鈕會把表單數據發送到服務器
date 定義選取日、月、年的輸入域
month 定義選取月、年的輸入域
time 定義選取月、年的輸入域
- select下拉列表
下拉列表由<select>和<option>標簽配合使用生成。下拉的菜單項是由<option>標簽定義,當提交表單,選中的option的value屬性值會被發送。
<select>標簽還有兩個重要屬性:
(1)multiple:規定select下拉菜單可以選擇多項,默認情況下下拉列表只能選擇一項。
(2)size:規定下拉列表展開之後可見列表項的數目。
- <h1>~<h6>
在HTML中,標題(Heading)元素共有6個級別的標簽:<h1>~<h6>。它們都是塊級元素。標題數字越小,字體就會越大,標題的級別也就越高。
- <p>元素
在HTML中,使用p標簽來標記一段文字。段落標簽會自動換行,並且段落與段落之間有一定的空隙。<p>也是塊級元素,是文本的容器,可以對文本進行更多的操作,比如設置字體大小,顏色,段落的寬度等等。
而<br/>可以在任意地方插入實現換行,但是不會產生空隙,只是單純的換行,他是內聯元素。
- <span>元素?
<span>元素其實和<div>相似,但div是塊級元素,span是內聯元素,它的作用是對一些文本進行修飾,比如你想強調大量文本中同類的短語,那麽對他們使用<span>元素包裹之後就可以很便利的應用相同的樣式。如下圖中,我們只想讓塊級元素和內聯元素這8個字變成紅色且加粗,就可以將“塊級元素”和“內聯元素”包裹在<span></span>中,再對他們設置css樣式。
- <strong>元素
strong:表示內容的重要性,一般表現為加粗。<strong>元素為內聯元素。
- <em>元素
em:表示強調,表現為斜體。<em>
元素是可以嵌套的,嵌套層次越深,表示其包含的內容越需要強調。
HTML列表分為有序列表,無序列表和描述列表。我們常用的是有序列表(ol)與無序列表(ul)。
- 有序列表
<ol>標簽就可以定義一個有序列表,之所以稱其為有序列表,是因為可以使列表具有排序功能。具體的列表項使用<li>元素來規定。
type屬性:實現不同方式的有序排序功能,不贊成使用,通常都會使用樣式取代它。
(1)1表示以1,2,3,4數字方式的排序。
(2)a表示以a,b,c,d小寫字母的方式排序。
(3)A表示以A,B,C,D大寫字母的方式排序。
(4)i表示以i,ii ,iii羅馬數字小寫的方式排序。
(5)I表示以 I,II,III羅馬數字大寫的方式排序。
編號的樣式可以使用CSS中的 list-style-type 屬性定義。
HTML5中新增的reversed屬性可以規定倒序排序。
- 無序列表
HTML無序列表用<ul>標簽定義,之所以稱其為無序列表,是因為列表沒有排序功能。具體的列表項還是使用<li>元素來規定。
type屬性:定義列表項前面的符號形狀,不贊成使用,通常都會使用樣式取代它。
(1)dise:實心圓(默認值)。
(2)circle:空心圓。
(3)square:實心方塊。
?
純CSS打造網頁大白知識點:
首先要把大白分割,整體baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinger,r-bigfinger,l-smallfinger,r-smallfinger,l-leg,r-leg。- 因為大白是白色,所以背景顏色(body)要設為深色。
- 大白居中,div居中要用margin:0 auto;
- 保險起見overflow:hidden
- 設置寬高之後以百分比定義圓角的形狀 border-radius:50%
- margin-bottom設為負值,使身體與頭部有重疊
- 因為只有設置了position 為relative absolute fixed 後 ,設置z-index才生效。並且z-index是相對於同一父親元素的所有子元素的層級關系,z-index的值越大,說明他的位置越高。
- 用到旋轉對稱使左右眼對稱,transform:rotate(**deg)與transform:rotate(-**deg)左右對稱,左右手臂,左右手指,左右腿都會用到。
HTML知識點總結