01.HTML基礎(chǔ)知識(shí)
02.文本標(biāo)簽
03.圖片和超鏈接
04.表格標(biāo)簽
05.細(xì)線表格
06.不規(guī)則表格
01.HTML基礎(chǔ)知識(shí)
1.web標(biāo)準(zhǔn)
web前端的內(nèi)容：HTML伞辛、CSS萧朝、JavaScript
web標(biāo)準(zhǔn)(萬維網(wǎng)制定的)中規(guī)定HTML是結(jié)構(gòu)標(biāo)準(zhǔn)，CSS是表現(xiàn)標(biāo)準(zhǔn)，JS是行為標(biāo)準(zhǔn)
a.HTML結(jié)構(gòu)標(biāo)準(zhǔn)中規(guī)定了網(wǎng)頁上能夠顯示的內(nèi)容件炉，比如顯示文字、圖片伯顶、音頻莉撇、視頻害晦、flash特铝、按鈕、輸入框等....
b.CSS表現(xiàn)標(biāo)準(zhǔn)規(guī)網(wǎng)頁的內(nèi)容的布局和樣式壹瘟，比如內(nèi)容該顯示在什么位置鲫剿，內(nèi)容是什么顏色、多大稻轨、多寬等....
c.JS行為標(biāo)準(zhǔn)規(guī)定網(wǎng)頁的內(nèi)容在某種情況下發(fā)生什么樣的改變(動(dòng)態(tài)變化)
2.HTML
a.什么是html
HTML又叫超文本標(biāo)記語言(是標(biāo)記語言灵莲，不是編程語言)
b.html版本
狹義的h5：指HTML第5個(gè)大版本
廣義的h5：指的是html5+CSS3+JavaScript
c.html文件結(jié)構(gòu)(由不同的標(biāo)簽組成)
<html>
<head>
內(nèi)容是不可見的
</head>
<body>
內(nèi)容是可見的
</body>
</html>
3.HTML中的標(biāo)簽
網(wǎng)頁中的內(nèi)容就是通過html中的不同的標(biāo)簽(標(biāo)記)來確定
標(biāo)簽語法：
a.常規(guī)標(biāo)簽(雙標(biāo)簽)：<標(biāo)簽名 屬性1=屬性值1 屬性2=屬性值2....>標(biāo)簽內(nèi)容</標(biāo)簽名>
b.單標(biāo)簽：<標(biāo)簽名 屬性1=屬性值1 屬性名2=屬性值2....> 或者 <標(biāo)簽名 屬性名1=屬性值1 屬性名2=屬性值2.../>
說明：
<>，</>：固定寫法澄者，html中所有的標(biāo)簽都是寫在<>中的
標(biāo)簽名：不是隨意命名的笆呆，而是一些固定的值请琳，例如：<p></p> -> p標(biāo)簽、a標(biāo)簽赠幕、b標(biāo)簽俄精、h1標(biāo)簽、input標(biāo)簽榕堰、img標(biāo)簽等竖慧。
標(biāo)簽名前不能有空隙
屬性：屬性放在開始標(biāo)簽中，屬性名和值之間用=連接逆屡，多個(gè)屬性之間用空格隔開圾旨。屬性也可以是自定義的屬性也可以是標(biāo)簽自帶的屬性
標(biāo)簽內(nèi)容：雙標(biāo)簽才存在的標(biāo)簽內(nèi)容，標(biāo)簽內(nèi)容可以是任何東西(可以是文字魏蔗，也可以是其他的標(biāo)簽)
例如：<div>我是python</div>砍的， <div><p></p></div>
</>：結(jié)束標(biāo)簽，單標(biāo)簽沒有一個(gè)單獨(dú)的結(jié)束標(biāo)簽
4.基本語法
HTML中大小寫不敏感：html和HTML是一樣的
文件名命名要求：是由字母和數(shù)字組成莺治，但是數(shù)字不開頭廓鞠，一般都是小寫的。網(wǎng)站首頁的html文件命名為index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
1.head標(biāo)簽：head標(biāo)簽中的內(nèi)容不可見谣旁，一般做一些網(wǎng)頁設(shè)置性的操作
2.head標(biāo)簽中的內(nèi)容：head標(biāo)簽中的字標(biāo)簽是固定的：
meta標(biāo)簽：?jiǎn)螛?biāo)簽床佳，charset屬性用來設(shè)置網(wǎng)頁的編碼方式
title標(biāo)簽：設(shè)置網(wǎng)頁標(biāo)題
link標(biāo)簽
style標(biāo)簽
script標(biāo)簽
base標(biāo)簽
body標(biāo)簽中的內(nèi)容是在網(wǎng)頁中可見的部分
html學(xué)習(xí)目標(biāo)就是掌握body中常用的標(biāo)簽
02.文本標(biāo)簽
1.標(biāo)題標(biāo)簽：h1-h6
網(wǎng)頁的內(nèi)容涉及到標(biāo)題的時(shí)候使用
<h1>我是標(biāo)題1</h1>
<h2>我是標(biāo)題2</h2>
<h3>我是標(biāo)題3</h3>
<h4>我是標(biāo)題4</h4>
<h5>我是標(biāo)題5</h5>
<h6>我是標(biāo)題6</h6>
2.段落標(biāo)簽：p
網(wǎng)頁的內(nèi)容中一個(gè)段落文字對(duì)應(yīng)一個(gè)p標(biāo)簽
p標(biāo)簽的內(nèi)容結(jié)束后會(huì)自動(dòng)換行
注意：html中的文字是不會(huì)因?yàn)槭謩?dòng)的回車和空格以及縮進(jìn)產(chǎn)生空白效果(回車、空格榄审、縮進(jìn)無效)
但是可以通過一些特殊的符號(hào)砌们，來產(chǎn)生特定的效果
空格符： ；
強(qiáng)制換行：
<p>啦啦啦啦啦啦啦啦<br />綠綠綠綠綠綠綠綠綠綠綠綠綠綠綠綠綠綠綠</p>
3.文字效果
a.加粗：b標(biāo)簽搁进，strong標(biāo)簽
b標(biāo)簽：?jiǎn)渭兊脑跇邮缴线M(jìn)行加粗
strong標(biāo)簽：除了將文字加粗顯示外還有強(qiáng)調(diào)的意義
b.傾斜：i標(biāo)簽浪感，em標(biāo)簽
em標(biāo)簽有強(qiáng)調(diào)的意義
<p>嘖嘖嘖嘖嘖嘖嘖嘖嘖嘖嘖嘖<b>嘖嘖嘖</b>嘖嘖嘖嘖嘖嘖<strong>嘖嘖嘖</strong>嘖嘖嘖</p>
4.水平線：hr
單標(biāo)簽
<hr />
5.列表標(biāo)簽：ul、ol拷获、dl
- ul：無序列表
- ol：有序列表
- dl：自定義列表
<ul>
<li>語文</li>
<p>描述語文的文字</p>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ul>
<ol>
<li>北京</li>
<p>特點(diǎn)霧霾</p>
<li>成都</li>
<li>大連</li>
<li>重慶</li>
</ol>
<dl>
<!--dt對(duì)列表進(jìn)行分組-->
<dt>A</dt>
<!--dd列舉分組下的內(nèi)容-->
<dd>B</dd>
<dd>C</dd>
<dt>a</dt>
<dd>b</dd>
<dd>c</dd>
</dl>
03.圖片和超鏈接
1.圖片標(biāo)簽：img標(biāo)簽
單標(biāo)簽
- src屬性：圖片地址(可以是本地圖片地址篮撑，也可以是遠(yuǎn)程服務(wù)器上的圖片地址)
- title屬性：設(shè)置圖片的標(biāo)題(這個(gè)標(biāo)題是鼠標(biāo)停留在圖片上一會(huì) 才會(huì)顯示的)
- alt屬性：用來設(shè)置圖片加載失敗的時(shí)候出現(xiàn)的提示信息
<img title="山" src="http://pic5.photophoto.cn/20071228/0034034901778224_b.jpg" alt="加載失敗" />
2.超鏈接標(biāo)簽：a標(biāo)簽
想要點(diǎn)擊跳轉(zhuǎn)的地方都可以使用超鏈接語法
注意：a標(biāo)簽的內(nèi)容部分是可見的，是可以被點(diǎn)擊的
（1）href屬性：跳轉(zhuǎn)目標(biāo)對(duì)應(yīng)的地址
a.其他的網(wǎng)頁地址
b.寫本地的一個(gè)html路徑
c.空 ----- 刷新當(dāng)前網(wǎng)頁
d.選擇器 ------ 讓網(wǎng)頁跳轉(zhuǎn)到指定的位置
（2）target屬性：設(shè)置跳轉(zhuǎn)方式
_self(默認(rèn)值)：在當(dāng)前頁中刷新出新的內(nèi)容
_black：創(chuàng)建一個(gè)新的頁面匆瓜，在新的頁面中刷新出href指定的內(nèi)容
注意：刷新當(dāng)前網(wǎng)頁和在當(dāng)前網(wǎng)頁跳轉(zhuǎn)到指定的位置的時(shí)候，只能默認(rèn)使用_self
04.表格標(biāo)簽
1.表格標(biāo)簽：table標(biāo)簽未蝌、tr標(biāo)簽驮吱、td標(biāo)簽、th標(biāo)簽
table標(biāo)簽：表格整體(一個(gè)table標(biāo)簽代表一個(gè)表格)
tr標(biāo)簽：行(一個(gè)tr標(biāo)簽代表表格中的一行
td標(biāo)簽：?jiǎn)卧?一個(gè)td代表一個(gè)單元格)
th標(biāo)簽：表頭
2.屬性
a.border屬性：設(shè)置表格的邊框的寬度(只能作為table)
b.bordercolor：設(shè)置邊框顏色(只能作用于table)
c.background：設(shè)置背景圖片
d.bgcolor：設(shè)置背景顏色(可以作用于table\tr\td)
e.cellspacing：設(shè)置單元格和單元格之間的間距(默認(rèn)是1)
f.cellpadding：設(shè)置內(nèi)容和單元格之間的間距
g.width：一般作用于某一個(gè)單元格萧吠，影響的是這個(gè)單元格對(duì)應(yīng)的那一列
h.height：一般作用于行左冬，影響的是一行的高度
i.align：設(shè)置對(duì)齊方式(可以做用以table\tr\td)
作用于table：讓整個(gè)表格在瀏覽器中居中
作用于tr/td：讓內(nèi)容在單元格中居中
<table border="1" cellspacing="0" align="center">
<!--成績(jī)表-->
<!--第一行-->
<tr bgcolor="red" height="50" align="center">
<!--第一行的第一個(gè)單元格-->
<td width="100">姓名</td>
<td width="60">成績(jī)</td>
<td width="140">是否留級(jí)</td>
</tr>
<!--第二行-->
<tr bgcolor="yellow" height="70">
<td bgcolor="white">張三</td>
<!--第二行的第二個(gè)單元格-->
<td>90</td>
<td>否</td>
</tr>
<!--第三行-->
<tr bgcolor="aqua" height="90">
<td>李四</td>
<td>80</td>
<!--第三行的第三個(gè)單元格-->
<td>否</td>
</tr>
</table>
05.細(xì)線表格
<th>XXX信息表</th>
<table border="1" cellspacing="0" >
<tr height="80">
<td width="120">姓名</td>
<td width="250">畢業(yè)院校</td>
</tr>
<tr height="100">
<td>zk</td>
<td><a href="">艾利斯頓商學(xué)院</a></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
</table>
<!--注意：
1.設(shè)置寬和高只有大的值有效
2.表格中的內(nèi)容不一定只是文字，也可以是別的內(nèi)容
-->
06.不規(guī)則表格
- colspan：列合并
- rowspan：行合并
過程：先確定表格中最多多少行纸型，然后再數(shù)每一行有多少個(gè)單元格拇砰。
再確定每個(gè)單元格是否有合并現(xiàn)象梅忌，如果單元格有行的合并就設(shè)置單元格的rowspan屬性，
如果有列的合并及設(shè)置單元格的colspan屬性除破。
<table bgcolor="black" cellspacing="1" width="600" height="500">
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
