1.web標(biāo)準(zhǔn)
web標(biāo)準(zhǔn)是萬(wàn)維網(wǎng)指定的網(wǎng)頁(yè)開發(fā)標(biāo)準(zhǔn),主要包含三類:
結(jié)構(gòu)標(biāo)準(zhǔn) - html(決定網(wǎng)頁(yè)中的內(nèi)容)
表現(xiàn)標(biāo)準(zhǔn) - CSS(決定網(wǎng)頁(yè)中內(nèi)容的布局和樣式)
行為標(biāo)準(zhǔn) - javascript(決定網(wǎng)頁(yè)內(nèi)容的動(dòng)態(tài)變化)
2.認(rèn)識(shí)html
html又叫超文本標(biāo)記語(yǔ)言(和markdowm一樣)
一個(gè)網(wǎng)頁(yè)本質(zhì)就是一個(gè)html文件
3.html文件基本結(jié)構(gòu)
一個(gè)html標(biāo)簽中有一個(gè)head標(biāo)簽和一個(gè)body標(biāo)簽
4.html的基本語(yǔ)法
1)語(yǔ)法
雙標(biāo)簽:<標(biāo)簽名 屬性1=值1 屬性2=值2 ...>標(biāo)簽內(nèi)容</標(biāo)簽名>
單標(biāo)簽:<標(biāo)簽名 屬性1=值1 屬性2=值2 ...> 或者 <標(biāo)簽名 屬性1=值1 屬性2=值2 .../>
2)說(shuō)明
<>和/ - 都是固定寫法
標(biāo)簽名 - 只能寫html相應(yīng)版本提供的標(biāo)簽的標(biāo)簽名;什么標(biāo)簽是什么類型是確定的！
注意:標(biāo)簽名前不能出現(xiàn)空格
屬性 - 屬性是以'屬性名=值'的形式出現(xiàn),多個(gè)屬性之間用空格隔開;
屬性的順序不影響結(jié)果;不管是什么屬性的值,值必須用雙引號(hào)引起來(lái)
標(biāo)簽內(nèi)容 - 任何內(nèi)容都可以作為標(biāo)簽內(nèi)容();例如:文字、標(biāo)簽、文字和標(biāo)簽的組合
注意:html中大小寫不敏感
說(shuō)明html版本
html - html5
網(wǎng)頁(yè)基本結(jié)構(gòu)
一個(gè)html代表整個(gè)網(wǎng)頁(yè);一個(gè)html標(biāo)簽中有一個(gè)head標(biāo)簽和一個(gè)body標(biāo)簽
1.head的作用
head標(biāo)簽主要負(fù)責(zé)網(wǎng)頁(yè)的圖標(biāo)和標(biāo)題的顯示以及網(wǎng)頁(yè)的基本設(shè)置
2.head標(biāo)簽中的標(biāo)簽
head可以寫的標(biāo)簽有:meta、title、style、link、script、base
meta - 設(shè)置網(wǎng)頁(yè)元數(shù)據(jù)(例如:網(wǎng)頁(yè)的編碼方式、網(wǎng)絡(luò)的搜索關(guān)鍵字、網(wǎng)頁(yè)介紹)
-->
<head>
<!--設(shè)置文本編碼方式-->
<meta charset="utf-8" />
<!--設(shè)置網(wǎng)頁(yè)標(biāo)題-->
<title></title>
<!--設(shè)置網(wǎng)頁(yè)圖標(biāo)
rel屬性 - 設(shè)置被導(dǎo)入的文件的作用；
- stylesheet - 樣式表
- icon - 網(wǎng)頁(yè)圖標(biāo)
type屬性 - 設(shè)置文件類型:文件屬性/文件后綴
- text/css - 導(dǎo)入的文件是:后綴是.css的文本文件
- image/png - 導(dǎo)入的文件是圖片,圖片的后綴是.png
href屬性 - 被導(dǎo)入的文件路徑
-->
<link rel="icon" type="image/ico" href="img/aaa.ico" />
</head>
1.標(biāo)題標(biāo)簽:h1 ~ h6
如果文字的意義是標(biāo)題的時(shí)候才選擇標(biāo)簽是標(biāo)題標(biāo)簽
<h1>我是標(biāo)題1</h1>
<h2>我是標(biāo)題1</h2>
<h3>我是標(biāo)題3</h3>
<h4>我是標(biāo)題4</h4>
<h5>我是標(biāo)題5</h5>
<h6>我是標(biāo)題6</h6>
2.段落標(biāo)簽:n
一個(gè)段落就是一個(gè)p標(biāo)簽(多個(gè)p標(biāo)簽自動(dòng)換行)
-->
3.普通文字標(biāo)簽:font
多個(gè)font標(biāo)簽的文字可以在一行顯示
-->
4.空格和換行
網(wǎng)頁(yè)內(nèi)容中收到輸入的空格和換行都是沒(méi)有意義的
1)換行標(biāo)簽:br
在網(wǎng)頁(yè)中的任何位置需要換行的時(shí)候直接加<br>或者<br />
2)空格:空格符號(hào)
- 一個(gè)空格(單位是像素)
  - 一個(gè)空格(單位是空格鍵)
<p>
1,<br />
2,<br />
3,<br />
4,<br />
5,<br />
</p>
5.文字效果:傾斜、加粗
1)加粗:<b></b>、<strong></strong>
2)傾斜:<i></i>、<em></em> - em有強(qiáng)調(diào)的作用
5.水平線:hr
<hr />
1.無(wú)序列表:ul-li
ul標(biāo)簽 - 表示整個(gè)列表容器
li標(biāo)簽 - 表示列表中的元素
<ul>
<li>python</li>
<li>java</li>
<li>h5</li>
<li>測(cè)試</li>
<li>go語(yǔ)言</li>
</ul>
2.有序列表:ol-li
ol標(biāo)簽 - 表示整個(gè)列表容器
li標(biāo)簽 - 表示列表中的元素
<ol>
<li>將肉洗干凈,然后加水煮到8分熟</li>
<li>撈起來(lái)切片</li>
<li>油鍋里放油,然后再放干海椒、花椒、生姜。炸香</li>
<li>再將肉放進(jìn)去炸</li>
<li>起鍋前放鹽和白糖</li>
</ol>
3.自定義列表:dl-dt-dd
dl - 表示整個(gè)列表容器
dt - 表示一個(gè)分組
dd - 每個(gè)分組中的內(nèi)容
-->
<dl>
<dt>文科</dt>
<dd>歷史</dd>
<dd>地理</dd>
<dt>理科</dt>
<dd>物理</dd>
<dd>化學(xué)</dd>
</dl>
1.圖片標(biāo)簽:img
1)src屬性:圖片地址
本地文件路徑(絕對(duì)路徑/相對(duì)路徑)
網(wǎng)絡(luò)圖片路徑
2)title屬性:圖片標(biāo)題(鼠標(biāo)懸停在圖片上等一會(huì)兒才會(huì)出現(xiàn))
3)alt屬性:圖片加載失敗的提示信息
<!--顯示本地圖片-->
<img src="img/luffy.jpg" />
<br />
<!--顯示網(wǎng)絡(luò)圖片-->
<img src="" />
2.超鏈接:a
<a href="跳轉(zhuǎn)的目的地">可見可點(diǎn)擊的部分</a>
1)href屬性 - 跳轉(zhuǎn)到目的地
a.網(wǎng)頁(yè)地址 - 跳轉(zhuǎn)到指定網(wǎng)頁(yè)
b.本地html文件地址 - 在瀏覽器中直接打開指定html文件對(duì)應(yīng)的網(wǎng)頁(yè)
c.選擇器 - 將當(dāng)前頁(yè)面滾動(dòng)到選擇器所在的位置
d.# - 刷新頁(yè)面
2)target屬性 - 頁(yè)面打開方式
a._self - 默認(rèn)值,在當(dāng)前頁(yè)面中渲染出新的頁(yè)面
b._black - 不動(dòng)原頁(yè)面,在新的窗口中渲染新的頁(yè)面
<!--文字超鏈接-->
<a >百度</a>
<!--圖片超鏈接-->
<br />
<h1 id="page1">第一章</h1>
<h1 id="page2">第二章</h1>
<h1 id="page3">第三章</h1>
</body>
1.表格標(biāo)簽:table-tr-td
1)table標(biāo)簽 - 代表整個(gè)表格
border屬性 - 設(shè)置線框?qū)挾?br>
bordercolor - 邊框線的顏色;顏色單詞或者
cellspacing - 設(shè)置單元格與單元格以及單元格和表格之間的間隙,默認(rèn)1
bgcolor - 設(shè)置整個(gè)表格的背景顏色
width - 設(shè)置整個(gè)表格的寬度
height - 設(shè)置整個(gè)表格的高度
align - 設(shè)置整個(gè)表格在網(wǎng)頁(yè)中的對(duì)齊方式:center,left,right
cellpadding - 設(shè)置整個(gè)表格中所有的單元格中的內(nèi)容到邊框的距離
2)tr標(biāo)簽 - 一個(gè)tr代表一行
bgcolor - 設(shè)置一行的所有顏色
height - 設(shè)置指定行的高度
align - 設(shè)置指定行中所有的單元格中的內(nèi)容在單元格中的對(duì)齊方式
cellpadding - 設(shè)置整個(gè)行中所有的單元格中的內(nèi)容到邊框的距離
3)td標(biāo)簽 - 一個(gè)td代表一個(gè)單元格
bgcolor - 設(shè)置指定單元格的顏色
width - 設(shè)置指定單元格的那一列的寬度
align - 指定單元格中的內(nèi)容在單元格中對(duì)齊的方式
cellpadding - 設(shè)置指定的單元格中的內(nèi)容到邊框的距離
colspan - 行合并
rowspan - 列合并
