1.web基礎(chǔ)
1.web標(biāo)準(zhǔn)(萬維網(wǎng)-w3c)：
a.結(jié)構(gòu)標(biāo)準(zhǔn)：HTML -> 決定網(wǎng)頁(yè)上有什么內(nèi)容(能夠顯示什么內(nèi)容)
b.表現(xiàn)標(biāo)準(zhǔn)：css -> 決定網(wǎng)頁(yè)上內(nèi)容的布局和顯示方式
c.行為標(biāo)準(zhǔn):JavaScript -> 決定網(wǎng)頁(yè)上動(dòng)態(tài)的效果
2.認(rèn)識(shí)HTML
HTML是超文本標(biāo)記語(yǔ)言(可以用來標(biāo)記文本,圖片,視頻,音頻,flash,按鈕,輸入框等內(nèi)容)
HTML不是編程語(yǔ)言,不會(huì)編譯執(zhí)行,語(yǔ)法錯(cuò)誤也不會(huì)報(bào)錯(cuò)導(dǎo)致程序不能往后運(yùn)行
3.HTML版本
廣義的H5:指HTML5+CSS3+js
狹義的H5:HTML5
4.HTML編程
a.HTML標(biāo)記語(yǔ)言對(duì)應(yīng)的文件的后綴,一般都是html
b.HTML的結(jié)構(gòu):整個(gè)html是通過不同的標(biāo)簽來組成
5.標(biāo)簽/標(biāo)記
a.雙標(biāo)簽(常規(guī)標(biāo)簽)
<標(biāo)簽名 屬性=屬性值 屬性=屬性值>內(nèi)容</標(biāo)簽名>
b.單標(biāo)簽(自閉合標(biāo)簽)
<標(biāo)簽名 屬性=屬性值 />
<標(biāo)簽名 屬性=屬性值>
說明:
標(biāo)簽名:HTML標(biāo)準(zhǔn)是固定的(注意:<和標(biāo)簽名之間不能有空白)
屬性:屬性和標(biāo)簽名之間用空格隔開,以屬性名=屬性值的形式存在,多個(gè)屬性之間用空格隔開
(屬性可以是HTML中的,也可以自定義屬性)
標(biāo)簽內(nèi)容:是指開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容.標(biāo)簽的內(nèi)容可以是任何內(nèi)容(字符串或者其它標(biāo)簽)
<a></a>
補(bǔ)充:HTML不區(qū)分大小寫
6.網(wǎng)頁(yè)結(jié)構(gòu)
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
2.標(biāo)簽
1.html標(biāo)簽代表整個(gè)網(wǎng)頁(yè)
<html></html>
2.head標(biāo)簽中的內(nèi)容一般都是看不見,并且里面的子標(biāo)簽是固定的
title標(biāo)簽 --- 設(shè)置標(biāo)題
meta標(biāo)簽
link標(biāo)簽
style標(biāo)簽
script標(biāo)簽
base標(biāo)簽
<head>
<!--設(shè)置網(wǎng)頁(yè)標(biāo)題(可見)-->
<title>HTML基礎(chǔ)</title>
<!--charset:設(shè)置編碼方式-->
<meta charset="utf-8"/>
</head>
3.body標(biāo)簽中的內(nèi)容,負(fù)責(zé)整個(gè)網(wǎng)頁(yè)的顯示部分
<body></body>
4.標(biāo)題標(biāo)簽(h1-h6)
<h1>我是標(biāo)題1</h1>
<h3>我是標(biāo)題3</h3>
5.段落標(biāo)簽(p)
a.一個(gè)P標(biāo)簽對(duì)應(yīng)一個(gè)段落
b.p標(biāo)簽的內(nèi)容結(jié)束會(huì)和其他的內(nèi)容之間默認(rèn)有一個(gè)空格
<p>
可能我撞了南墻才會(huì)回頭吧
</p>
<p>
可能我見了黃河才會(huì)死心吧
</p>
<p>
可能我偏要一條路走到黑吧
</p>
6.文本符號(hào)
:--- 空格
其它的查手冊(cè)
<p>
可能我偏要 一條路走到黑吧
</p>
7.換行標(biāo)簽(br)
<p>
可能我偏要<br />一條路走到黑吧
</p>
8.超鏈接(a)
<a >百度一下</a>
9.文字加粗(strong/b), 文字傾斜(i/em), 水平線
<!--6.文字加粗(strong/b)-->
<p><strong>加粗強(qiáng)調(diào)文字</strong></p>
<p><b>加粗文字</b></p>
<!--7.文字傾斜(i/em)-->
<p><em>文字傾斜強(qiáng)調(diào)</em></p>
<p><i>文字傾斜</i></p>
<p><strong><em>加粗傾斜</em></strong></p>
<!--8.水平線-->
<hr />
3.列表
3.1.有序列表
<ol>
<li>數(shù)學(xué)</li>
<li>語(yǔ)文</li>
<li>英語(yǔ)</li>
</ol>
3.2.無序列表
<ul>
<li>成都</li>
<li>北京</li>
<li>重慶</li>
</ul>
3.3.自定義列表
<dl>
<dt>城市:</dt>
<dd>成都</dd>
<dd>上海</dd>
</dl>
4.圖片和超鏈接
4.1.圖片標(biāo)簽
a.src屬性:圖片的地址(本地地址\網(wǎng)絡(luò)地址)
本地地址:絕對(duì)路徑和相對(duì)路徑
注意:本地 圖片需要放到工程目錄下的img文件夾下
b.title屬性:圖片的標(biāo)題(鼠標(biāo)停留在圖片上,隔一段時(shí)間才顯示出來)
c.alt屬性:圖片加載失敗后顯示的內(nèi)容
<img alt="圖片加載失敗" title="路飛" src="img/lufei.jpg"/>
<!--<img alt="圖片加載失敗" src="網(wǎng)絡(luò)地址" />-->
4.2.超鏈接(a)
網(wǎng)頁(yè)上點(diǎn)擊后可以跳轉(zhuǎn)的標(biāo)簽都是超連接
href屬性:跳轉(zhuǎn)地址(本地地址,網(wǎng)絡(luò)地址)
網(wǎng)絡(luò)地址:跳轉(zhuǎn)到對(duì)應(yīng)的網(wǎng)頁(yè)
本地地址:當(dāng)前工程的其他的html文件路徑
空串/#:刷新頁(yè)面回到網(wǎng)頁(yè)的頂部
選擇器:讓網(wǎng)頁(yè)滾動(dòng)到網(wǎng)頁(yè)上任意的位置
target屬性:
_self:在當(dāng)前頁(yè)面中打開href的地址
_blank:在新的頁(yè)面中打開href的地址
a.點(diǎn)擊文字跳轉(zhuǎn)
b.點(diǎn)擊圖片跳轉(zhuǎn)
<a target="_blank">百度一下</a>
<a href="index.html">主頁(yè)</a>
<!--b.點(diǎn)擊圖片跳轉(zhuǎn)-->
<a target="_blank"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534750747&di=c5971a4e518c5d8ff836ea585c210a39&imgtype=jpg&er=1&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F1801%2F10063UL7-5.jpg"/></a>
5.表格
table -- 標(biāo)簽代表這個(gè)表格
tr -- 代表行
td -- 代表列
table屬性
1.border:設(shè)置整個(gè)表格中邊框的寬度
2.width:設(shè)置整個(gè)表格的寬度
3.height:設(shè)置整個(gè)表格的高度
4.align:center -- 讓整個(gè)表在其父標(biāo)簽中居中
5.bgcolor:背景顏色 6.cellpadding="100":設(shè)置內(nèi)容與單元格之間的距離
7.cellspacing:設(shè)置單元格與單元格之間的距離
8.bordercolor:設(shè)置邊框顏色
tr屬性
1.height:設(shè)置單獨(dú)的某一行的高度
td屬性
1.width:設(shè)置某一列的寬度
<!--創(chuàng)建一個(gè)2*3的表格-->
<table border="1" bordercolor="red" align="center" bgcolor="aqua" cellspacing="0">
<tr>
<td class="style1">姓名</td>
<td class="style1">成績(jī)</td>
<td class="style1">是否留級(jí)</td>
</tr>
<tr>
<td class="style1"></td>
<td class="style1"></td>
<td class="style1"></td>
</tr>
</table>
<!--復(fù)雜表格-->
<table border="1" width="300" height="100" align="center" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
