html開發筆記20-合并單元格-列和行

、什么是合并單元格？

一個表格中分為行和列，有時候你經常在網頁中看到類似這樣的表格，有時候是合并了列，有時候是合并了行。那么這個是怎么做的？也是通過下面的方法實現的。

二、怎么合并？

向單元格添加屬性即可實現，合并列和行的屬性不一樣

1、合并列的屬性：clospan="2" //要合并幾列數字就是幾

2、合并行的屬性：rowspan="2" //同理，要合并幾行數字就是幾

3、合并后的單元格（行或列）必然會自動多出來一個，需要手動刪掉。

4、重點：合并單元格只和 td 標簽有關系：

（1）合并列：是左右合并，在左側的 td 標簽中添加 colspan="2" 要合并的 td 的數量。

（2）合并行：是上下合并，在上面的 td 標簽中添加 rowspan="2" 要合并的td的數量。

（3）合并完后刪除多余的 td 標簽。

三、兩個屬性的用法

1、合并列的用法：

（1）首先確定你要合并的單元格在第幾行第幾列，然后找到它，從他的td標簽中添加屬性。

例如要合并第4行的，第4和第5列：


<tr>
    <td>第三節</td>
    <td>html</td>
    <td>css</td>
    <td colspan="2">php</td> <!-- 合并 列 的用法-->
    <td>php</td>
  </tr>

2、合并行的用法：

例如下面：合并第3行和第4行的第1列。

完整代碼：↓

TML（網頁）

Web領域的一些基本概念。

WEB

Web（World Wide Web）叫全球廣域網，俗稱萬維網（www）。

W3C

W3C（World Wide Web Consortium）叫萬維網聯盟，是國際最著名的標準化組織，制定了web標準。

WEB標準

一個網頁包含了html元素 Css JavaScript，Html元素決定了網頁結構，Css進行了修飾美化，JavaScript控制了交互行為和動態效果。

web標準包含了下面三個方面：

結構標準（HTML）：用于對網頁元素進行整理和分類。
表現標準（CSS）：用于設置網頁元素的版式、顏色、大小等外觀樣式。
行為標準（JavaScript）：用于定義網頁的交互和行為。

HTML定義

Html不是一種編程語言，而是描述性的標記語言，主要作用是定義內容的結構。

2014年10月萬維網聯盟（W3C）完成了HTML5標準制定，是目前最新的HTM版本。

HTML5的出世，標志著web進入一個富客戶端（具有很強的交互性和體驗的客戶端程序）時代，像APP網頁，小程序都是HTML5的應用場景。

Html5新特性：

用于繪畫的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
對本地離線存儲的更好的支持。
新的特殊內容元素，比如 article、footer、header、nav、section。
新的表單控件，比如 calendar、date、time、email、url、search。

頁面基本結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="關鍵詞" />
    <meta name="Description" content="頁面描述" />
    <title>頁面標題</title>
</head>
<body>

</body>
</html>

關于viewport

viewport用戶網頁的可視區域，一個針對移動網頁優化的頁面 viewport meta 標簽如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。

常見元素

head區域元素：

meta title style link script base。

body區域元素：

div、section、article、aside、header、footer
p
span、em、strong
table、thead、tbody、tr、td
ul、ol、dl、dt、dd
a
form、input、select、textarea、button

元素分類

塊級元素：每個元素都是獨占一行

address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是css layout的主要標簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1-h6 – 標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容）
noscript – ）可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol – 排序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

行內元素：元素在同一行水平排列

a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體
big – 大字體
br – 換行
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
label – 表格標簽
s – 中劃線(不推薦)
select – 項目選擇
small – 小字體文本
span – 常用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
var – 定義變量

inline-block：元素可以排列在同一行顯示，并且可以設置一些塊元素屬性

通過Css：display:inline-block 改變元素。

元素默認樣式

很多元素都自帶了默認樣式，不同瀏覽器下默認樣式表現不一致，為了統一或者滿足一些需求我們需求將所有默認樣式清空，這種處理方式又稱為 Css Reset，比如：

*{
    margin: 0;
    padding: 0;
}

另外一種方案使用normalize.css，它將不同瀏覽器下的默認樣式進行了統一，

https://github.com/necolas/normalize.css

CSS（層疊樣式表）

Css的單位

html中的單位是像素px

絕對單位

in：英寸，1in = 2.54cm = 96px
pc：皮卡，1皮卡 = 1/16英寸
pt：點，1點 = 1/72英寸
px：像素，1點 = 1/96英寸

相對單位

em：font-size中相對于父元素的字體大小，在元素屬性中使用是相對于自身字體大小
rem：根元素的字體大小，在元素屬性中使用是相對于根元素字體大小
1h：元素的line-height
vw：視窗寬度的1%
vh：視窗高度的1%
vmin：視窗較小尺寸的1%
vmax：視圖大尺寸的1%

字體屬性

屬性：字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性（粗體、斜體、下劃線）

p{
    font-size: 20px;        /*字體大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;   /*字體類型：顯示PingFang SC，沒有就顯示默認*/
    font-style: italic ;        /*italic表示斜體，normal表示不傾斜*/
    font-weight: bold;  /*粗體或寫（400｜500｜600）*/
    font-variant: small-caps;  /*小寫變大寫*/
}

行高（line-height）

一般約定行高、字號都是偶數，這樣保證它們的差一定偶數除2得到整數，如下圖所示：

line-height

文本垂直居中

對于單行文本可以設置行高 = 盒子高度。

對于多行元素的垂直對齊，我們可以使用vertical-align: middle屬性，不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。

vertical-align

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

文本屬性

letter-spacing: 0.5em ; 單個字母之間的間距。
word-spacing: 1em; 單詞之間的間距。
text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
color:red; 字體顏色。
text-align: center; 文字對齊方式，屬性值可以是：left、right、center、justify。
text-transform: lowercase; uppercase（大寫）、lowercase（小寫）capitalize（首字母大寫）。
text-indent:10px; 文本首行縮進。
text-shadow:2px 2px #ff0000; 文字陰影效果。
white-space: normal; 設置元素空白處理，normal，nowrap，break-spaces。

Overflow屬性

內容溢出處理

visible：默認值，多余的內容會全部顯示出來。
hidden：超過元素的內容隱藏。
auto：內容超出顯示滾動條。
scroll：Windows總是顯示滾動條。Mac和auto 屬性相同。

濾鏡

filter:gray()

背景屬性

background-color:#fff; 設置背景顏色。
background-image:url(img.png); 設置圖像為背景。
background-repeat: no-repeat; no-repeat不要平鋪，repeat-x橫向平鋪；repeat-y縱向平鋪。
background-position:center top; 設置背景圖片在容器的位置，top，bottom，left，right，center。
background-attachment:scroll; 設置背景圖片隨滾動條移動，scroll（跟隨滾動），fixed（固定）。
background-origin:border-box; css3，border-box（背景相對于邊框框定位），padding-box（背景相對于填充框定位），content-box（背景相對于內容框定位）。
background-clip:border-box; css3，背景裁切。
background-size:cover; css3，調整尺寸，contain（在不裁剪或拉伸圖像的情況下，在其容器內盡可能大地縮放圖像），cover（盡可能大地縮放圖像以填充容器，必要時拉伸圖像。），auto（在相應的方向上縮放背景圖像，以保持其固有比例。）。

優先級

理解優先級很重要，有助于我們排查一些問題。瀏覽器將優先級分為兩部分：HTML的行內樣式和選擇器的樣式。

行內樣式

行內樣式是直接作用在元素，它的優先級高于選擇器樣式，使用！important可以提高樣式表的優先級。

<div style="font-size:16px">
</div>

選擇器樣式

<style type="text/css">
    p{
      font-size: 16px;
    }
</style>
<link rel="stylesheet" href="style/app.css">

優先級規則如下：

如果選擇器的ID數量最多的勝出。
如果ID數量一致，那么擁有最多類的選擇器勝出。
如果以上兩次比較都一致，那么擁有最多標簽名的選擇器勝出。

優先級

我們通過下圖這種標記方式，就可以判斷出選擇器的優先級。

優先級

兩條經驗法則

盡量不要使用ID選擇器，因為它會大幅提升優先級。當需要覆蓋這個選擇器時，通常找不到另一個有意義的ID，于是就需要復制原來的選擇器加上另一個類來讓它區別于想要覆蓋的選擇器。
不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就需要再加上一個！important，而且依然要處理優先級的問題。

基礎選擇器

類型或標簽選擇器，匹配目標元素的標簽名，如：p，input[type=text]，優先級（0，0，1）。
類選擇器，匹配class屬性中有指定類名的元素，如：.box，優先級（0，1，0）。
ID選擇器，匹配擁有指定ID屬性的元素，如：#id，優先級（1，0，0）。
通用選擇器（*），匹配所有元素，優先級（0，0，0）。

組合選擇器

由多個基礎選擇器組合成的復雜選擇器。

后代組合器（單個空格（）表示），比如 .nav li，表示li是一個擁有nav類的元素的后代。
子組合器（>），匹配的元素是直接后代，.parent > .child。
相鄰兄弟組合器（+），匹配的元素緊跟在后面其它元素后面，div + p。
通用兄弟組合器（~），匹配所有跟隨在指定元素之后的兄弟元素，它不會選中目標元素之前的兄弟元素，li.active ~ li。

復合選擇器

多個基礎選擇器連起來（中間沒有空格）組成一個復合選擇器（如：ul.nav）。復合選擇器選中的元素將匹配其全部基礎選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。

偽類選擇器

用于選中某種特定狀態的元素，優先級（0，1，0）。

:first-child——匹配的元素是其父元素的第一個子元素。
:last-child——匹配的元素是其父元素的最后一個子元素。
:only-child——匹配的元素是其父元素的唯一一個子元素（沒有兄弟元素）。
:nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數，該公式指定要選中哪個元素。要了解一個公式的工作原理，請從0開始代入n的所有整數值。公式的計算結果指定了目標元素的位置。下表給出了一些例子。

:nth-child(an+b)

:nth-last-child(an+b)——類似于：nth-child()，但不是從第一個元素往后數，而是從最后一個元素往前數。括號內的公式與：nth-child()里的公式的規則相同。
:first-of-type——類似于：first-child，但不是根據在全部子元素中的位置查找元素，而是根據擁有相同標簽名的子元素中的數字順序查找第一個元素。
:last-of-type——匹配每種類型的最后一個子元素。
:only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個子元素。
:nth-of-type(an+b)——根據目標元素在特定類型下的數字順序以及特定公式選擇元素，類似于：nth-child。
:nth-last-of-type(an+b)——根據元素類型以及特定公式選擇元素，從其中最后一個元素往前算，類似于：nth-last-child。
:not(<selector>)——匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器，它只能指定元素本身，無法用于排除祖先元素，同時不允許包含另一個排除選擇器。
:focus——匹配通過鼠標點擊、觸摸屏幕或者按Tab鍵導航而獲得焦點的元素。
:hover——匹配鼠標指針正懸停在其上方的元素。
:root——匹配文檔根元素。對HTML來說，這是html元素，但是CSS還可以應用到XML或者類似于XML的文檔上，比如SVG。在這些情況下，該選擇器的選擇范圍更廣。還有一些表單域相關的偽類選擇器。
:disabled——匹配已禁用的元素，包括input、select以及button元素。
:enabled——匹配已啟用的元素，即那些能夠被激活或者接受焦點的元素。
:checked——匹配已經針對選定的復選框、單選按鈕或選擇框選項。
:invalid——根據輸入類型中的定義，匹配有非法輸入值的元素。例如，當<inputtype="email">的值不是一個合法的郵箱地址時，該元素會被匹配。

更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS

偽元素選擇器

偽元素選擇器可以向HTML標記中未定義的地方插入內容，優先級（0，0，1）。

::before——創建一個偽元素，使其成為匹配元素的第一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::before。
::after——創建一個偽元素，使其成為匹配元素的最后一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::after。
::first-letter——用于指定匹配元素的第一個文本字符的樣式，如：h1::first-letter。
::first-line——用于指定匹配元素的第一行文本的樣式。
::selection——用于指定用戶使用鼠標高亮選擇的任意文本的樣式。通常用于改變選中文本的background-color。只有少數屬性可以使用，包括color、background-color、cursor、text-decoration。

屬性選擇器

屬性選擇器用于根據HTML屬性進行匹配元素，優先級（0，1，0）。

[attr]——匹配的元素擁有指定屬性attr，無論屬性值是什么，如：input[disabled]。
[attr="value"]——匹配的元素擁有指定屬性attr，且屬性值等于指定的字符串值，如：input[type="radio"]。
[attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值的開頭是指定的字符串值，例如：a[href^="https"]。
[attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值包含指定的字符串值，如：[class＊="sprite-"]。
[attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值是一個空格分隔的值列表，列表中的某個值等于指定的字符串值，如：a[rel="author"]。
[attr|="value"]——匹配的元素擁有指定屬性attr，且屬性值要么等于指定的字符串值，要么以該字符串開頭且緊跟著一個連字符（-）。

小結

本文要點回顧，歡迎留言交流。

Web中的一些基本概念介紹。
Html頁面結構，元素分類。
Css優先級。
Css選擇器，（基礎選擇器，組合選擇器，復合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。

一章職業規劃和前景

職業方向規劃定位：
web前端開發工程師
web網站架構師
自己創業
轉崗管理或其他
web前端開發的前景展望：
未來IT行業企業需求最多的人才
結合最新的html5搶占移動端的市場
自己創業做老板
隨著互聯網的普及web開發成為企業的寵兒和核心
web職業發展目標：
第一、梳理知識架構
負責內容的HTML
負責外觀的css（層疊樣式表）
負責行為的js
ps切圖
第二、分解目標（起步階段、提升階段、成型階段）
起步階段：
基本知識的掌握
常用工具的掌握
溝通技巧的掌握（圍繞客戶的需求）
良好的開發習慣（加注釋、對齊方式）
提升階段：
熟悉掌握HTML基本標簽和屬性
熟練掌握css的基本語法和使用
瀏覽器兼容和w3c標準的掌握
結合html+css+js開始系統項目的開發
成型階段：
精通DIV+CCS布局
精通css樣式表控制html標簽
熟悉運用js制作動態網站的效果
能獨立開發完成網站

第二章 html基本結構

認識HTML：
html不是一種編程語言，是一種標志語言
標記語言是由一套標識標簽組成的
html使用標簽來描述網頁
html結構：

<html>
 <head></head>
 <body></body>
</html>

不成對出現的標簽
<br> <hr> <meta> <img> <input..> <option..> <link>
HTML 基本標簽的講解：
<html> <head> <body>標簽
<h1>—-<h6>僅僅用于標題文本，不要為了產生粗體文本使用它們
<p>標簽段落標簽
<strong><b>標簽
都會讓文字產生加粗效果
<strong>用于強調文本，強度更深，表示重要文本—>用于SEO優化
<b>只是視覺加粗效果—>單純為了產生加粗
<em> <i>標簽
em用于強調文本
i只是視覺斜體效果
<strong>比<em>強調更強
特殊符號：
—->空格
> —>大于號
&lt；—>小于號
&quot；—>引號
?–>版權號

第三章 html基本標簽

HTMl基本標簽：
span標簽
對被用來組合文檔中的行內元素
注意：span沒有固定的格式表現，當對它應用樣式時，才會產生視覺上的變化
<pre>標簽
文字的格式按源碼的排版來顯示，我們稱之為預處理格式
<a>標簽—>他有一個必不可少的屬性 href
target屬性：
_self(在原來頁面打開)
_blank（新窗口打開）
_top（打開時忽略所有的框架）
_parent（在父窗口中打開）
創建錨點和錨鏈接
錨點也是一種超鏈接，是頁面內進行跳轉的超鏈接
第一步：創建錨點 <a name="錨點名稱"></a>
第二步：使用創建好的錨點名稱 <a href="#錨點名稱">內容</a>
marquee標簽
可以創建一個內容滾動效果

<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>

direction 表示滾動方向，取值有（left,right,up,down,默認left）
loop表示滾動循環的次數，默認為無限循環

onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滾動速度)

表示當鼠標移上區域的時候停止滾動，鼠標移開繼續滾動

第四章 img圖片標簽與路徑

圖片標簽與路徑：
常見圖片格式 jpg png gif
Gif （只支持全透明）
Jpeg /jpg
Png 半/全透明都支持
圖片標簽寫法：
<img src="" alt="" width="" height="" />
圖片四要素：
src="" 圖片路徑
alt="" 圖片含義
width="" 圖片寬度和圖片大小保持一致
height="" 圖片高度和圖片大小保持一致
title=""
路徑知識：
相對路徑、絕對路徑：
相對路徑：(Relative Path) 相對于該文件的路徑；
絕對路徑：(Absolute Path) 從磁盤出發的路徑；
<img src="" …… align="" /> align屬性–設置圖片與后面文字的位置關系
值–top、bottom、middle、absmiddle、left、right
在靜態頁面中：
/開頭表示根目錄；
./表示當前目錄；（斜畫線前面一個點）
../上級目錄；（斜畫線前面兩個點）
直接用文件名不帶/也表示同一目錄
這些都是相對于當前文件的位置來說的，如果用絕對路徑的話就是寫全了。

第五章三種列表的講解

三種列表的知識講解：
<ul>無序列表
無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

有序列表

有序列表也是一列項目，只是列表項目使用的是數字進行標記。有序列表始于 <ol> 標簽。每個列表項始于 <li>標簽。

<ol>
 <li>內容一</li>
 <li>內容二</li>
 <li>內容三</li>
</ol>

列表符號
無序列表-列表符號:
type="circle" 空心圓 type=“disc” 實心圓默認值 type="square" 方塊符
有序列表-列表符號
type="A" A B C D
type="a" a b c d
type="1" 1 2 3 4 默認值type=”I” I II III type=”i” i ii iii
列表嵌套
無序列表-嵌套

<ul>
 <li>柚子
 <ul>
 <li>沙田柚</li>
 <li>蜜柚</li>
 </ul>
 </li>
 <li>荔枝</li>
 <li>蘋果</li></ul>

有序列表-嵌套

<ol>
 <li>茶
 <ul>
 <li>紅茶</li>
 <li>綠茶</li>
 </ul>
 </li>
 <li>果汁</li>
 <li>牛奶</li></ol>

定義列表
定義列表不僅僅是一列項目，而是項目及其注釋的組合。定義列表以 <dl> 標簽開始。每個定義列表項以 <dt>開始。每個自定義列表項的定義以 <dd> 開始。

<dl> 
 <dt>pc網頁制作</dt> 
 <dd>學習DIV+CSS JS JQ 項目實戰</dd> 
 <dt>手機網頁制作</dt> 
 <dd>手機網頁制作實戰</dd>
</dl>

dd是對dt的解釋
< dl>< /dl>用來創建一個普通的列表,
< dt>< /dt>用來創建列表中的上層項目，
< dd>< /dd>用來創建列表中最下層項目，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標志對之間。

<dl>
 <dt>中國城市</dt>
 <dd>北京 </dd>
 <dd>上海 </dd>
 <dd>廣州 </dd>
 <dt>美國城市</dt>
 <dd>華盛頓 </dd>
 <dd>芝加哥 </dd>
 <dd>紐約 </dd>
</dl>

dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫
list-style屬性具有三個屬性分量：
list-style-position ：設置列表項圖標的位置，位于文本內或者文本外
list-style-type：設置列表項圖標的類型
list-style-image：使用圖像設置列表項圖標

第六章表單元素(上)

表單標簽:
<form>表單標簽
<form>表單是一個包含表單元素的區域，包括起來的都是表單的內容

<form>
 <input type="text"/>
</form>

HTML標簽 - Action和確認按鈕：
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

<form action="html.do" method="get"> 
 username: <input type="text" name="user" /> 
 <input type="submit" value="提 交" />
</form>

HTML標簽 - 隱藏域隱藏標簽：
隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，以利于被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到服務器

<form> 
 <input type="hidden" name="hid" value="value">
</form>

<input>標簽的掌握
常用type類型：
<input type="" name="" value="" />
type="text" 單行文本輸入框
type="password" 密碼（maxlength=""）
type="radio" 單項選擇（checked="checked"）
type="checkbox" 多項選擇
type="button" 按鈕
type="submit" 提交 type="image"圖片提交
type="file" 上傳文件
type="reset"重置
type="hidden" 隱藏
關于表單中的設置默認值：

<input type="text" name="" value="今天心情不錯" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">

<select name="" >
 <option value=""></option>
 <option value="" selected="selected"></option>
<select>

textarea沒有默認值
<label>標簽的使用
<label></label>
label 元素不會向用戶呈現任何特殊效果。
不過，它為鼠標用戶改進了可用性。
如果您在 label 元素內點擊文本，就會觸發此控件。
就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的for 屬性應當與相關元素的 id屬性相同。
例子：（重要—注冊表單–用戶體驗–必做）

<p>單向選擇</p>
<label for="male">男：</label><input type="radio" name="sex" id="male"/>
<label for="nv">女：</label><input type="radio" name="sex"checked="check"/>

第七章表單和表格(下)

表單和表格標簽：
<textarea>文本域標簽
<textarea>標簽：
<textarea></textarea>是文本域標簽，可以在其中插入一段文字內容，它有兩個常用屬性rows和cols
注意：
rows表示這個文本域有多少行
cols表示這個文本域有多少列
除了這兩個屬性它還有readonly（只讀，文本域的內容無法改變，相當于協議）和title（鼠標放上提示）
<select>標簽的掌握
注：當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，并且在將 <select> 表單數據提交給服務器時包括 name屬性

<form> 
 <select name="" id="">
 <option value="1">1月</option> 
 <option value="2">2月</option> 
</select>
</form>

常用到的屬性：disabled=“disabled” name="sel" size="2"
<table>表格標簽
<table>表格標簽：<table>是表格標簽，可以用它定義一個表格。

<table border="1">
 <tr>
 <td>姓名</td>
 <td>性別</td>
 </tr>
</table>

注意：<table>的border屬性不能少
<tr> <td>標簽的使用
<tr>行標簽：
<tr>可以定義表格中的一行，一個<tr></tr>表示一行。

<table border="1">
<tr>
 <td>姓名</td>
 <td>性別</td>
</tr>
<tr>
 <td>姓名</td>
 <td>性別</td>
</tr>
</table>

<td>單元格標簽:
<td>可以定義表格中的一個單元格，<td></td>表示一個單元格。

<table border="1">
<tr>
<td >姓名</td>
<td>性別</td>
<td>愛好</td>
</tr>
</table>

border-collapse 屬性設置是否將表格邊框折疊為單一邊框：
border-collapse:collapse;
colspan左右合并
rowspan上下合并

第一部分總結：

非可視化標簽：head meta style scrpit...
可視化標簽：img div span a ul li…
只有可視化標簽，才能用css改變它
單標簽：meta link base img input br hr
雙標簽：html head body div a p span ..ul li ol dl ….
常用可視化標簽
div
一般用它來布局
a 超鏈接標簽
href*屬性：設置跳轉的網頁地址
target屬性：設置跳轉的目標
結論：凡事頁面可以點擊跳轉或者表單提交的文字，都用a標簽
img
src*屬性用來設置圖片的url數據
alt提供給搜索引擎搜索的
width
height
結論：顯示圖片
ul li
列表
結論：只要將來設計頁面中有固定樣式的列表，就用ul和li
table caption tr td (th)
慢慢已經被淘汰了被ul li代替
如果是合并豎排的就是合并行（rowspan）
如果是合并橫排的就是合并列（colspan）

HTML部分導圖總結

HTML5標簽集合

學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料，一起學習，一起成長！

在線咨詢

上一篇：html常用代碼大全
下一篇：基于JSChart實現Web端K線圖

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商