整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
一個表格中分為 行 和 列 ，有時候你經(jīng)常在網(wǎng)頁中看到類似這樣的表格，有時候是合并了列，有時候是合并了行。那么這個是怎么做的？也是通過下面的方法實現(xiàn)的。
向單元格添加屬性即可實現(xiàn)，合并 列 和 行的屬性不一樣
1、合并列的屬性：clospan="2" //要合并幾列數(shù)字就是幾
2、合并行的屬性：rowspan="2" //同理，要合并幾行數(shù)字就是幾
3、合并后的單元格（行或列）必然會自動多出來一個，需要手動刪掉。
4、重點：合并單元格只和 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)簽。
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列。
完整代碼：↓
Web領(lǐng)域的一些基本概念。
Web（World Wide Web）叫全球廣域網(wǎng)，俗稱萬維網(wǎng)（www）。
W3C（World Wide Web Consortium）叫萬維網(wǎng)聯(lián)盟，是國際最著名的標(biāo)準(zhǔn)化組織，制定了web標(biāo)準(zhǔn)。
一個網(wǎng)頁包含了html元素 Css JavaScript，Html元素決定了網(wǎng)頁結(jié)構(gòu)，Css進(jìn)行了修飾美化，JavaScript控制了交互行為和動態(tài)效果。
web標(biāo)準(zhǔn)包含了下面三個方面：
Html不是一種編程語言，而是描述性的標(biāo)記語言，主要作用是定義內(nèi)容的結(jié)構(gòu)。
2014年10月萬維網(wǎng)聯(lián)盟（W3C）完成了HTML5標(biāo)準(zhǔn)制定，是目前最新的HTM版本。
HTML5的出世，標(biāo)志著web進(jìn)入一個富客戶端（具有很強(qiáng)的交互性和體驗的客戶端程序）時代，像APP網(wǎng)頁，小程序都是HTML5的應(yīng)用場景。
Html5新特性：
<!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="頁面描述" />
<title>頁面標(biāo)題</title>
</head>
<body>
</body>
</html>viewport用戶網(wǎng)頁的可視區(qū)域，一個針對移動網(wǎng)頁優(yōu)化的頁面 viewport meta 標(biāo)簽如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">head區(qū)域元素：
meta title style link script base。
body區(qū)域元素：
塊級元素：每個元素都是獨占一行
行內(nèi)元素：元素在同一行水平排列
inline-block：元素可以排列在同一行顯示，并且可以設(shè)置一些塊元素屬性
通過Css：display:inline-block 改變元素。
很多元素都自帶了默認(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
html中的單位是像素px
絕對單位
相對單位
屬性：字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性（粗體、斜體、下劃線）
p{
font-size: 20px; /*字體大小*/
line-height: 30px; /*行高*/
font-family: PingFang SC; /*字體類型：顯示PingFang SC，沒有就顯示默認(rèn)*/
font-style: italic ; /*italic表示斜體，normal表示不傾斜*/
font-weight: bold; /*粗體或?qū)懀?00｜500｜600）*/
font-variant: small-caps; /*小寫變大寫*/
}行高（line-height）
一般約定行高、字號都是偶數(shù)，這樣保證它們的差一定偶數(shù)除2得到整數(shù)，如下圖所示：
line-height
文本垂直居中
對于單行文本可以設(shè)置行高 = 盒子高度。
對于多行元素的垂直對齊，我們可以使用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;內(nèi)容溢出處理
filter:gray()理解優(yōu)先級很重要，有助于我們排查一些問題。瀏覽器將優(yōu)先級分為兩部分：HTML的行內(nèi)樣式和選擇器的樣式。
行內(nèi)樣式
行內(nèi)樣式是直接作用在元素，它的優(yōu)先級高于選擇器樣式，使用！important可以提高樣式表的優(yōu)先級。
<div style="font-size:16px">
</div>選擇器樣式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">優(yōu)先級規(guī)則如下：
優(yōu)先級
我們通過下圖這種標(biāo)記方式，就可以判斷出選擇器的優(yōu)先級。
優(yōu)先級
兩條經(jīng)驗法則
由多個基礎(chǔ)選擇器組合成的復(fù)雜選擇器。
多個基礎(chǔ)選擇器連起來（中間沒有空格）組成一個復(fù)合選擇器（如：ul.nav）。復(fù)合選擇器選中的元素將匹配其全部基礎(chǔ)選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。
用于選中某種特定狀態(tài)的元素，優(yōu)先級（0，1，0）。
:nth-child(an+b)
更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS
偽元素選擇器可以向HTML標(biāo)記中未定義的地方插入內(nèi)容，優(yōu)先級（0，0，1）。
屬性選擇器用于根據(jù)HTML屬性進(jìn)行匹配元素，優(yōu)先級（0，1，0）。
本文要點回顧，歡迎留言交流。
一章 職業(yè)規(guī)劃和前景
第二章 html基本結(jié)構(gòu)
<html> <head></head> <body></body> </html>
第三章 html基本標(biāo)簽
<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滾動速度)
第四章 img圖片標(biāo)簽與路徑
第五章 三種列表的講解
<ul> <li></li> <li></li> <li></li> </ul>
<ol> <li>內(nèi)容一</li> <li>內(nèi)容二</li> <li>內(nèi)容三</li> </ol>
<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>pc網(wǎng)頁制作</dt> <dd>學(xué)習(xí)DIV+CSS JS JQ 項目實戰(zhàn)</dd> <dt>手機(jī)網(wǎng)頁制作</dt> <dd>手機(jī)網(wǎng)頁制作實戰(zhàn)</dd> </dl>
<dl> <dt>中國城市</dt> <dd>北京 </dd> <dd>上海 </dd> <dd>廣州 </dd> <dt>美國城市</dt> <dd>華盛頓 </dd> <dd>芝加哥 </dd> <dd>紐約 </dd> </dl>
第六章 表單元素(上)
<form> <input type="text"/> </form>
<form action="html.do" method="get"> username: <input type="text" name="user" /> <input type="submit" value="提 交" /> </form>
<form> <input type="hidden" name="hid" value="value"> </form>
<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>
<p>單向選擇</p> <label for="male">男：</label><input type="radio" name="sex" id="male"/> <label for="nv">女：</label><input type="radio" name="sex"checked="check"/>
第七章 表單和表格(下)
<form> <select name="" id=""> <option value="1">1月</option> <option value="2">2月</option> </select> </form>
<table border="1"> <tr> <td>姓名</td> <td>性別</td> </tr> </table>
<table border="1"> <tr> <td>姓名</td> <td>性別</td> </tr> <tr> <td>姓名</td> <td>性別</td> </tr> </table>
<table border="1"> <tr> <td >姓名</td> <td>性別</td> <td>愛好</td> </tr> </table>
第一部分總結(jié)：
HTML部分導(dǎo)圖總結(jié)
學(xué)習(xí)從來不是一個人的事情，要有個相互監(jiān)督的伙伴，想要學(xué)習(xí)或交流前端問題的小伙伴可以私信“學(xué)習(xí)”小明加群獲取2019web前端最新入門資料，一起學(xué)習(xí)，一起成長！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
