服務 外部 倒序 菜單項 script ova validate 手指 esc

• 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是很強大的表單控件，它的主要屬性有：

1. name屬性：用於規定input元素的名稱
2. accept屬性：用來規定能夠通過文件上傳進行提交的文件類型，該屬性只能與type="file"配合使用。
3. checked屬性：規定在頁面加載時應該被預先選定的input元素，checked屬性只能在input元素type="radio"或type="checkbox"時使用。
4. disabled屬性規定應該禁用input元素。被禁用的字段是不能修改的。
5. readonly屬性：規定輸入字段為只讀。

6. maxlength屬性：規定輸入字段的最大長度，以字符個數計，該屬性只能在input元素type="text"或type="password"的時候使用。

7. 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。

1. 因為大白是白色，所以背景顏色（body）要設為深色。
2. 大白居中，div居中要用margin：0 auto；
3. 保險起見overflow：hidden

首先寫head：

1. 設置寬高之後以百分比定義圓角的形狀 border-radius:50%
2. margin-bottom設為負值，使身體與頭部有重疊
3. 因為只有設置了position 為relative absolute fixed 後 ，設置z-index才生效。並且z-index是相對於同一父親元素的所有子元素的層級關系，z-index的值越大，說明他的位置越高。

所以給頭部設置position：relative，然後將層級z-index：100 其次寫eye1,eye2:

1. 用到旋轉對稱使左右眼對稱，transform：rotate（**deg）與transform：rotate（-**deg）左右對稱，左右手臂，左右手指，左右腿都會用到。

附代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{background: #595959;} #baymax{ margin: 0 auto; height: 600px; } #head{ height: 64px; width: 100px; background-color: white; border-radius: 50%; margin: 0 auto; margin-bottom: -20px; border-bottom: 5px solid #E0E0E0; z-index: 100; /*生成相對定位的元素*/ position: relative; } #eye1{ width: 15px; height: 15px; background: black; border-radius: 50%; position: absolute; left: 20px; top: 20px; transform: rotate(8deg); } #eye2{ width: 15px; height: 15px; background: black; border-radius: 50%; position: absolute; transform: rotate(-8deg); left: 60px; top: 20px; } #mouth{ width: 40px; height: 2px; background: black; position: absolute; left: 30px; top: 27px; } #torso,#belly{ width: 150px; height: 180px; margin: 0 auto; background: white; border-radius: 45%; border: 5px solid #DCDCDC; border-top: none ; z-index:1; } #belly{ width: 200px; height: 240px; margin-top: -145px; position: relative; z-index: 5; } #cover{ width: 180px; height: 250px; margin: 0 auto; background: white; border-radius: 47%; position: relative; top:-20px ; } #heart{ width: 20px; height:20px; border-radius: 50%; background: white; border: 1px solid #DCDCDC; box-shadow:2px 5px 2px #ccc inset; margin: 0 auto; z-index: 111; position: relative; right:-40px; top:50px; } #left-arm,#right-arm{ width: 80px; height: 220px; margin: 0 auto; background: white; border-radius: 47%; transform:rotate(23deg); position: relative; top: -270px; left: -95px; } #right-arm{ transform:rotate(-23deg); position: relative; top: -490px; left: 95px; } #l-bigfinger{ width: 20px; height: 60px; margin: 0 auto; background: white; border-radius: 47%; transform:rotate(125deg); position: absolute; top: 190px; left:35px; } #l-smallfinger{ width: 15px; height: 40px; margin: 0 auto; background: white; border-radius: 47%; transform:rotate(125deg); position: absolute; top: 190px; left:52px; } #r-smallfinger{ width: 15px; height: 40px; margin: 0 auto; background: white; border-radius: 47%; transform:rotate(-125deg); position: absolute; top: 190px; left:12px; } #r-bigfinger{ width: 20px; height: 60px; margin: 0 auto; background: white; border-radius: 47%; transform:rotate(-125deg); position: absolute; top: 190px; left:25px; } #left-leg{ width: 75px; height: 150px; margin: 0 auto; background: white; border-radius: 47%; position: relative; left: -40px; top: -500px; border-bottom-right-radius: 15%; } #right-leg{ width: 75px; height: 150px; margin: 0 auto; background: white; border-radius: 47%; position: relative; left: 40px; top: -650px; border-bottom-left-radius: 15%; } </style> </head> <body> <div id="baymax"> <div id="head"> <div id="eye1"></div> <div id="eye2"></div> <div id="mouth"></div> </div> <div id="torso"> <div id="heart"></div> </div> <div id="belly"> <div id="cover"></div> </div> <div id="left-arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <div id="right-arm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <div id="left-leg"></div> <div id="right-leg"></div> </div> </body> </html>

HTML知識點總結