html開(kāi)發(fā)筆記20-合并單元格-列和行

、什么是合并單元格？

一個(gè)表格中分為行和列，有時(shí)候你經(jīng)常在網(wǎng)頁(yè)中看到類似這樣的表格，有時(shí)候是合并了列，有時(shí)候是合并了行。那么這個(gè)是怎么做的？也是通過(guò)下面的方法實(shí)現(xiàn)的。

二、怎么合并？

向單元格添加屬性即可實(shí)現(xiàn)，合并列和行的屬性不一樣

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

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

3、合并后的單元格（行或列）必然會(huì)自動(dòng)多出來(lái)一個(gè)，需要手動(dòng)刪掉。

4、重點(diǎn)：合并單元格只和 td 標(biāo)簽有關(guān)系：

（1）合并列：是左右合并，在左側(cè)的 td 標(biāo)簽中添加 colspan="2" 要合并的 td 的數(shù)量。

（2）合并行：是上下合并，在上面的 td 標(biāo)簽中添加 rowspan="2" 要合并的td的數(shù)量。

（3）合并完后刪除多余的 td 標(biāo)簽。

三、兩個(gè)屬性的用法

1、合并列的用法：

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

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


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

2、合并行的用法：

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

完整代碼：↓

TML（網(wǎng)頁(yè)）

Web領(lǐng)域的一些基本概念。

WEB

Web（World Wide Web）叫全球廣域網(wǎng)，俗稱萬(wàn)維網(wǎng)（www）。

W3C

W3C（World Wide Web Consortium）叫萬(wàn)維網(wǎng)聯(lián)盟，是國(guó)際最著名的標(biāo)準(zhǔn)化組織，制定了web標(biāo)準(zhǔn)。

WEB標(biāo)準(zhǔn)

一個(gè)網(wǎng)頁(yè)包含了html元素 Css JavaScript，Html元素決定了網(wǎng)頁(yè)結(jié)構(gòu)，Css進(jìn)行了修飾美化，JavaScript控制了交互行為和動(dòng)態(tài)效果。

web標(biāo)準(zhǔn)包含了下面三個(gè)方面：

結(jié)構(gòu)標(biāo)準(zhǔn)（HTML）：用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類。
表現(xiàn)標(biāo)準(zhǔn)（CSS）：用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式。
行為標(biāo)準(zhǔn)（JavaScript）：用于定義網(wǎng)頁(yè)的交互和行為。

HTML定義

Html不是一種編程語(yǔ)言，而是描述性的標(biāo)記語(yǔ)言，主要作用是定義內(nèi)容的結(jié)構(gòu)。

2014年10月萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成了HTML5標(biāo)準(zhǔn)制定，是目前最新的HTM版本。

HTML5的出世，標(biāo)志著web進(jìn)入一個(gè)富客戶端（具有很強(qiáng)的交互性和體驗(yàn)的客戶端程序）時(shí)代，像APP網(wǎng)頁(yè)，小程序都是HTML5的應(yīng)用場(chǎng)景。

Html5新特性：

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

頁(yè)面基本結(jié)構(gòu)

<!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="關(guān)鍵詞" />
    <meta name="Description" content="頁(yè)面描述" />
    <title>頁(yè)面標(biāo)題</title>
</head>
<body>

</body>
</html>

關(guān)于viewport

viewport用戶網(wǎng)頁(yè)的可視區(qū)域，一個(gè)針對(duì)移動(dòng)網(wǎng)頁(yè)優(yōu)化的頁(yè)面 viewport meta 標(biāo)簽如下：

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

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

常見(jiàn)元素

head區(qū)域元素：

meta title style link script base。

body區(qū)域元素：

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

元素分類

塊級(jí)元素：每個(gè)元素都是獨(dú)占一行

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

行內(nèi)元素：元素在同一行水平排列

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

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

通過(guò)Css：display:inline-block 改變?cè)亍?/span>

元素默認(rèn)樣式

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

*{
    margin: 0;
    padding: 0;
}

另外一種方案使用normalize.css，它將不同瀏覽器下的默認(rèn)樣式進(jìn)行了統(tǒng)一，

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

CSS（層疊樣式表）

Css的單位

html中的單位是像素px

絕對(duì)單位

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

相對(duì)單位

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

字體屬性

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

p{
    font-size: 20px;        /*字體大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;   /*字體類型：顯示PingFang SC，沒(méi)有就顯示默認(rèn)*/
    font-style: italic ;        /*italic表示斜體，normal表示不傾斜*/
    font-weight: bold;  /*粗體或?qū)懀?00｜500｜600）*/
    font-variant: small-caps;  /*小寫(xiě)變大寫(xiě)*/
}

行高（line-height）

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

line-height

文本垂直居中

對(duì)于單行文本可以設(shè)置行高 = 盒子高度。

對(duì)于多行元素的垂直對(duì)齊，我們可以使用vertical-align: middle屬性，不過(guò)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;
/* 指定長(zhǎng)度值 */
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 ; 單個(gè)字母之間的間距。
word-spacing: 1em; 單詞之間的間距。
text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
color:red; 字體顏色。
text-align: center; 文字對(duì)齊方式，屬性值可以是：left、right、center、justify。
text-transform: lowercase; uppercase（大寫(xiě)）、lowercase（小寫(xiě)）capitalize（首字母大寫(xiě)）。
text-indent:10px; 文本首行縮進(jìn)。
text-shadow:2px 2px #ff0000; 文字陰影效果。
white-space: normal; 設(shè)置元素空白處理，normal，nowrap，break-spaces。

Overflow屬性

內(nèi)容溢出處理

visible：默認(rèn)值，多余的內(nèi)容會(huì)全部顯示出來(lái)。
hidden：超過(guò)元素的內(nèi)容隱藏。
auto：內(nèi)容超出顯示滾動(dòng)條。
scroll：Windows總是顯示滾動(dòng)條。Mac和auto 屬性相同。

濾鏡

filter:gray()

背景屬性

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

優(yōu)先級(jí)

理解優(yōu)先級(jí)很重要，有助于我們排查一些問(wèn)題。瀏覽器將優(yōu)先級(jí)分為兩部分：HTML的行內(nèi)樣式和選擇器的樣式。

行內(nèi)樣式

行內(nèi)樣式是直接作用在元素，它的優(yōu)先級(jí)高于選擇器樣式，使用！important可以提高樣式表的優(yōu)先級(jí)。

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

選擇器樣式

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

優(yōu)先級(jí)規(guī)則如下：

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

優(yōu)先級(jí)

我們通過(guò)下圖這種標(biāo)記方式，就可以判斷出選擇器的優(yōu)先級(jí)。

優(yōu)先級(jí)

兩條經(jīng)驗(yàn)法則

盡量不要使用ID選擇器，因?yàn)樗鼤?huì)大幅提升優(yōu)先級(jí)。當(dāng)需要覆蓋這個(gè)選擇器時(shí)，通常找不到另一個(gè)有意義的ID，于是就需要復(fù)制原來(lái)的選擇器加上另一個(gè)類來(lái)讓它區(qū)別于想要覆蓋的選擇器。
不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就需要再加上一個(gè)！important，而且依然要處理優(yōu)先級(jí)的問(wèn)題。

基礎(chǔ)選擇器

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

組合選擇器

由多個(gè)基礎(chǔ)選擇器組合成的復(fù)雜選擇器。

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

復(fù)合選擇器

多個(gè)基礎(chǔ)選擇器連起來(lái)（中間沒(méi)有空格）組成一個(gè)復(fù)合選擇器（如：ul.nav）。復(fù)合選擇器選中的元素將匹配其全部基礎(chǔ)選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。

偽類選擇器

用于選中某種特定狀態(tài)的元素，優(yōu)先級(jí)（0，1，0）。

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

:nth-child(an+b)

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

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

偽元素選擇器

偽元素選擇器可以向HTML標(biāo)記中未定義的地方插入內(nèi)容，優(yōu)先級(jí)（0，0，1）。

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

屬性選擇器

屬性選擇器用于根據(jù)HTML屬性進(jìn)行匹配元素，優(yōu)先級(jí)（0，1，0）。

[attr]——匹配的元素?fù)碛兄付▽傩詀ttr，無(wú)論屬性值是什么，如：input[disabled]。
[attr="value"]——匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值等于指定的字符串值，如：input[type="radio"]。
[attr^="value"] ——“開(kāi)頭”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值的開(kāi)頭是指定的字符串值，例如：a[href^="https"]。
[attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值包含指定的字符串值，如：[class＊="sprite-"]。
[attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值是一個(gè)空格分隔的值列表，列表中的某個(gè)值等于指定的字符串值，如：a[rel="author"]。
[attr|="value"]——匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值要么等于指定的字符串值，要么以該字符串開(kāi)頭且緊跟著一個(gè)連字符（-）。

小結(jié)

本文要點(diǎn)回顧，歡迎留言交流。

Web中的一些基本概念介紹。
Html頁(yè)面結(jié)構(gòu)，元素分類。
Css優(yōu)先級(jí)。
Css選擇器，（基礎(chǔ)選擇器，組合選擇器，復(fù)合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。

一章職業(yè)規(guī)劃和前景

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

第二章 html基本結(jié)構(gòu)

認(rèn)識(shí)HTML：
html不是一種編程語(yǔ)言，是一種標(biāo)志語(yǔ)言
標(biāo)記語(yǔ)言是由一套標(biāo)識(shí)標(biāo)簽組成的
html使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)
html結(jié)構(gòu)：

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

不成對(duì)出現(xiàn)的標(biāo)簽
<br> <hr> <meta> <img> <input..> <option..> <link>
HTML 基本標(biāo)簽的講解：
<html> <head> <body>標(biāo)簽
<h1>—-<h6>僅僅用于標(biāo)題文本，不要為了產(chǎn)生粗體文本使用它們
<p>標(biāo)簽段落標(biāo)簽
<strong><b>標(biāo)簽
都會(huì)讓文字產(chǎn)生加粗效果
<strong>用于強(qiáng)調(diào)文本，強(qiáng)度更深，表示重要文本—>用于SEO優(yōu)化
<b>只是視覺(jué)加粗效果—>單純?yōu)榱水a(chǎn)生加粗
<em> <i>標(biāo)簽
em用于強(qiáng)調(diào)文本
i只是視覺(jué)斜體效果
<strong>比<em>強(qiáng)調(diào)更強(qiáng)
特殊符號(hào)：
—->空格
> —>大于號(hào)
&lt；—>小于號(hào)
&quot；—>引號(hào)
?–>版權(quán)號(hào)

第三章 html基本標(biāo)簽

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

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

direction 表示滾動(dòng)方向，取值有（left,right,up,down,默認(rèn)left）
loop表示滾動(dòng)循環(huán)的次數(shù)，默認(rèn)為無(wú)限循環(huán)

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

表示當(dāng)鼠標(biāo)移上區(qū)域的時(shí)候停止?jié)L動(dòng)，鼠標(biāo)移開(kāi)繼續(xù)滾動(dòng)

第四章 img圖片標(biāo)簽與路徑

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

第五章三種列表的講解

三種列表的知識(shí)講解：
<ul>無(wú)序列表
無(wú)序列表是一個(gè)沒(méi)有順序項(xiàng)目的列表，此列表項(xiàng)默認(rèn)粗體圓點(diǎn)進(jìn)行標(biāo)識(shí)

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

有序列表

有序列表也是一列項(xiàng)目，只是列表項(xiàng)目使用的是數(shù)字進(jìn)行標(biāo)記。有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>標(biāo)簽。

<ol>
 <li>內(nèi)容一</li>
 <li>內(nèi)容二</li>
 <li>內(nèi)容三</li>
</ol>

列表符號(hào)
無(wú)序列表-列表符號(hào):
type="circle" 空心圓 type=“disc” 實(shí)心圓默認(rèn)值 type="square" 方塊符
有序列表-列表符號(hào)
type="A" A B C D
type="a" a b c d
type="1" 1 2 3 4 默認(rèn)值type=”I” I II III type=”i” i ii iii
列表嵌套
無(wú)序列表-嵌套

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

定義列表
定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)定義列表項(xiàng)以 <dt>開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始。

<dl> 
 <dt>pc網(wǎng)頁(yè)制作</dt> 
 <dd>學(xué)習(xí)DIV+CSS JS JQ 項(xiàng)目實(shí)戰(zhàn)</dd> 
 <dt>手機(jī)網(wǎng)頁(yè)制作</dt> 
 <dd>手機(jī)網(wǎng)頁(yè)制作實(shí)戰(zhàn)</dd>
</dl>

dd是對(duì)dt的解釋
< dl>< /dl>用來(lái)創(chuàng)建一個(gè)普通的列表,
< dt>< /dt>用來(lái)創(chuàng)建列表中的上層項(xiàng)目，
< dd>< /dd>用來(lái)創(chuàng)建列表中最下層項(xiàng)目，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對(duì)之間。

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

dl是definition list的縮寫(xiě)
dt是definition title的縮寫(xiě)
dd是definition description的縮寫(xiě)
list-style屬性具有三個(gè)屬性分量：
list-style-position ：設(shè)置列表項(xiàng)圖標(biāo)的位置，位于文本內(nèi)或者文本外
list-style-type：設(shè)置列表項(xiàng)圖標(biāo)的類型
list-style-image：使用圖像設(shè)置列表項(xiàng)圖標(biāo)

第六章表單元素(上)

表單標(biāo)簽:
<form>表單標(biāo)簽
<form>表單是一個(gè)包含表單元素的區(qū)域，包括起來(lái)的都是表單的內(nèi)容

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

HTML標(biāo)簽 - Action和確認(rèn)按鈕：
當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。

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

HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽：
隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器

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

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

<input type="text" name="" value="今天心情不錯(cuò)" />
<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沒(méi)有默認(rèn)值
<label>標(biāo)簽的使用
<label></label>
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。
不過(guò)，它為鼠標(biāo)用戶改進(jìn)了可用性。
如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。
就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label> 標(biāo)簽的for 屬性應(yīng)當(dāng)與相關(guān)元素的 id屬性相同。
例子：（重要—注冊(cè)表單–用戶體驗(yàn)–必做）

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

第七章表單和表格(下)

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

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

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

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

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

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

<td>單元格標(biāo)簽:
<td>可以定義表格中的一個(gè)單元格，<td></td>表示一個(gè)單元格。

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

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

第一部分總結(jié)：

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

HTML部分導(dǎo)圖總結(jié)

HTML5標(biāo)簽集合

學(xué)習(xí)從來(lái)不是一個(gè)人的事情，要有個(gè)相互監(jiān)督的伙伴，想要學(xué)習(xí)或交流前端問(wèn)題的小伙伴可以私信“學(xué)習(xí)”小明加群獲取2019web前端最新入門資料，一起學(xué)習(xí)，一起成長(zhǎng)！

在線咨詢

上一篇：html常用代碼大全
下一篇：基于JSChart實(shí)現(xiàn)Web端K線圖

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

html開(kāi)發(fā)筆記20-合并單元格-列和行

、什么是合并單元格？

二、怎么合并？

三、兩個(gè)屬性的用法

TML（網(wǎng)頁(yè)）

WEB

W3C

WEB標(biāo)準(zhǔn)

HTML定義

頁(yè)面基本結(jié)構(gòu)

關(guān)于viewport

常見(jiàn)元素

元素分類

元素默認(rèn)樣式

CSS（層疊樣式表）

Css的單位

字體屬性

文本屬性

Overflow屬性

濾鏡

背景屬性

優(yōu)先級(jí)

基礎(chǔ)選擇器

組合選擇器

復(fù)合選擇器

偽類選擇器

偽元素選擇器

屬性選擇器

小結(jié)

您的項(xiàng)目需求

、什么是合并單元格？

二、怎么合并？

三、兩個(gè)屬性的用法