html簡(jiǎn)介
#HTML
超文本標(biāo)記語(yǔ)言鞍恢,標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用莺匠。
“超文本”就是指頁(yè)面內(nèi)可以包含圖片豺撑、鏈接嗡载,甚至音樂谓传、程序等非文字元素玲躯。
超文本標(biāo)記語(yǔ)言的結(jié)構(gòu)包括“頭”部分(英語(yǔ):Head)痰驱、和“主體”部分(英語(yǔ):Body)既鞠,其中“頭”部提供關(guān)于網(wǎng)頁(yè)的信息录豺,“主體”部分提供網(wǎng)頁(yè)的具體內(nèi)容
##什么是HTML
HTML是用來描述網(wǎng)頁(yè)的一種語(yǔ)言朦肘。
- HTML 指的是超文本標(biāo)記語(yǔ)言: HyperText Markup Language
- HTML 不是一種編程語(yǔ)言,而是一種標(biāo)記語(yǔ)言
- 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
- HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁(yè)
- HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
- HTML文檔也叫做 web 頁(yè)面
##HTML標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag) 双饥。
- HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞媒抠,比如 <html>
- HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的,比如 <b> 和 </b>
- 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽咏花,第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
- 開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽
|<font size = 5><font color=f09345><標(biāo)簽></font>內(nèi)容<font color=f09345></標(biāo)簽></font></font>|
|-----|
##HTML元素
"HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴(yán)格來講, 一個(gè) HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽趴生,如下實(shí)例:
HTML 元素:
<p>這是一個(gè)段落</p>
##HTML網(wǎng)頁(yè)結(jié)構(gòu)
下面是一個(gè)可視化的網(wǎng)頁(yè)結(jié)構(gòu):
![](http://ogjdtuxan.bkt.clouddn.com/html_struct.png)
其中白色區(qū)域才是在網(wǎng)頁(yè)中可見的部分
##HTML版本
從初期的網(wǎng)絡(luò)誕生后,已經(jīng)出現(xiàn)了許多HTML版本:
|版本| 發(fā)布時(shí)間|
|----|------|
HTML| 1991|
HTML+| 1993|
HTML 2.0| 1995
HTML 3.2| 1997
HTML 4.01| 1999
XHTML 1.0 |2000
HTML5|2012
XHTML5 |2013
##<!DOCTYPE> 聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁(yè)昏翰。
網(wǎng)絡(luò)上有很多不同的文件苍匆,如果能夠正確聲明HTML的版本,瀏覽器就能正確顯示網(wǎng)頁(yè)內(nèi)容矩父。
doctype 聲明是不區(qū)分大小寫的锉桑,以下方式均可:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
**通用聲明**
html5 :
<!DOCTYPE html>
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整網(wǎng)頁(yè)聲明類型 [DOCTYPE 參考手冊(cè)](http://www.runoob.com/tags/tag-doctype.html)。
##中文編碼
目前在大部分瀏覽器中窍株,直接輸出中文會(huì)出現(xiàn)中文亂碼的情況民轴,這時(shí)候我們就需要在頭部將字符聲明為 UTF-8。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁(yè)面標(biāo)題</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落球订。</p>
</body>
</html>
head標(biāo)簽
客戶端來卡號(hào)的看法熬枯受淡放開手
fasjfkashkjsfakhf
sakdfhaj
ks 阿斯蒂芬哈 薩克交話費(fèi)
[百度一下](http://www.baidu.com)
#常用標(biāo)簽
##1.HTML<head>元素
<head> 元素包含了所有的頭部標(biāo)簽元素后裸。在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息冒滩。
可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
|標(biāo)簽 |描述|
|---|---|
|<title>| 定義了文檔的標(biāo)題
|<base>| 定義了頁(yè)面鏈接標(biāo)簽的默認(rèn)鏈接地址
|<link> |定義了一個(gè)文檔和外部資源之間的關(guān)系
<meta>| 定義了HTML文檔中的元數(shù)據(jù)
<script>| 定義了客戶端的腳本文件
<style>| 定義了HTML文檔的樣式文件
### < meta>元素
meta標(biāo)簽主要是通過屬性為網(wǎng)頁(yè)提供元數(shù)據(jù)主要包括:name屬性和http-equiv屬性
<mate name=“參數(shù)”, content=“具體描述”>
**name屬性參數(shù):**
1.keywords(關(guān)鍵字)
說明:用于告訴搜索引擎微驶,你網(wǎng)頁(yè)的關(guān)鍵字。舉例:
<meta name="keywords" content="python,技術(shù),理科生因苹,前端">
2.description(網(wǎng)站內(nèi)容的描述)
說明:用于告訴搜索引擎苟耻,你網(wǎng)站的主要內(nèi)容。舉例:
<meta name="description" content="關(guān)于python的技術(shù)博客">
3.author(作者)
說明:用于標(biāo)注網(wǎng)頁(yè)作者 舉例:
<meta name="author" content="726550822@qq.com">
4.viewport(移動(dòng)端的窗口)
說明:這個(gè)屬性常用于設(shè)計(jì)移動(dòng)端網(wǎng)頁(yè)扶檐。在用bootstrap,AmazeUI等框架時(shí)候都有用過viewport凶杖。
<meta name="viewport" content="width=device-width, initial-scale=1">
5.robots(定義搜索引擎爬蟲的索引方式)
說明:robots用來告訴爬蟲哪些頁(yè)面需要索引,哪些頁(yè)面不需要索引款筑。content的參數(shù)有all,none,index,noindex,follow,nofollow智蝠。默認(rèn)是all。
舉例:
<meta name="robots" content="none">
具體參數(shù)如下:
a.none : 搜索引擎將忽略此網(wǎng)頁(yè)奈梳,等價(jià)于noindex杈湾,nofollow。
b.noindex : 搜索引擎不索引此網(wǎng)頁(yè)攘须。
c.nofollow: 搜索引擎不繼續(xù)通過此網(wǎng)頁(yè)的鏈接索引搜索其它的網(wǎng)頁(yè)漆撞。
d.all : 搜索引擎將索引此網(wǎng)頁(yè)與繼續(xù)通過此網(wǎng)頁(yè)的鏈接索引,等價(jià)于index于宙,follow叫挟。
e.index : 搜索引擎索引此網(wǎng)頁(yè)。
f.follow : 搜索引擎繼續(xù)通過此網(wǎng)頁(yè)的鏈接索引搜索其它的網(wǎng)頁(yè)限煞。
6.renderer(雙核瀏覽器渲染方式)
說明:renderer是為雙核瀏覽器準(zhǔn)備的,用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁(yè)面员凝。比如說360瀏覽器署驻。舉例:
<meta name="renderer" content="webkit"> //默認(rèn)webkit內(nèi)核
<meta name="renderer" content="ie-comp"> //默認(rèn)IE兼容模式
<meta name="renderer" content="ie-stand"> //默認(rèn)IE標(biāo)準(zhǔn)模式
**http-equiv屬性**
html
[百度一下](http://www.baidu.com)
|a|b|
|---|---|
|abc|bca
|a|b|
|---|---|
|abc|bca
文本標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.標(biāo)題標(biāo)簽:h1-h6
網(wǎng)頁(yè)的內(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)頁(yè)的內(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)無(wú)效)
但是可以通過一些特殊的符號(hào)旺上,來產(chǎn)生特定的效果
空格符:
強(qiáng)制換行:<br />
-->
<p>
隨著今年蘋果秋季發(fā)布會(huì)的閉幕,從 1(初代 iPhone)到 10(iPhone X)糖埋,<br />
新 iPhone 的命名即將用盡包括數(shù)字 10 以內(nèi)的所有數(shù)字宣吱,<br />
對(duì)于蘋果來說,從明年開始瞳别,為新 iPhone 命名將會(huì)是一件頭疼的事情征候。2÷10=0.2
</p>
<p>
實(shí)際上,去年蘋果公司決定用羅馬數(shù)字 X(讀 ten)來命名開始祟敛,iPhone 已經(jīng)步向了「命名荒」疤坝,
而進(jìn)一步加劇這個(gè)情況的,則是今年的新 iPhone馆铁,由于新 iPhone 并沒有巨大的變化跑揉,
所以它似乎并不足以獲得一個(gè)全新的命名,比如說 iPhone Ⅺ (11)這樣的稱呼。
</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>實(shí)際上现拒,去年<i>蘋果公司</i>決定用羅馬數(shù)字 X(讀 ten)來命名開始,<em>iPhone</em> 已經(jīng)步向了「<b>命名荒</b>」望侈,
而進(jìn)一步加劇這個(gè)情況的印蔬,則是今年的新 iPhone,由于新 iPhone 并沒有<strong><em>巨大</em></strong>的變化甜无,
所以它似乎并不足以獲得一個(gè)全新的命名扛点,比如說 <strong>iPhone Ⅺ</strong> (11)這樣的稱呼。</p>
<!--4.水平線:hr
單標(biāo)簽
-->
<hr />
<!--5.列表標(biāo)簽:ul,ol,dl
ul:無(wú)序列表
ol:有序列表
dl:自定義列表
-->
<ul>
<li>語(yǔ)文</li>
<p>語(yǔ)文是個(gè)什么樣的學(xué)科岂丘。陵究。。奥帘。</p>
<li>數(shù)學(xué)</li>
<li>英語(yǔ)</li>
</ul>
<ol>
<li>北京</li>
<p>北京最大的特點(diǎn)是霧霾~</p>
<li>成都</li>
<p>天府之國(guó)</p>
<li>大連</li>
<p>美麗的海濱城市</p>
<li>重慶</li>
<p>辣妹兒+火鍋</p>
<li>青島</li>
</ol>
<dl>
<!--dt對(duì)列表進(jìn)行分組-->
<dt>A</dt>
<!--dd列舉分組下的內(nèi)容-->
<dd>and</dd>
<dd>are</dd>
<dt>B</dt>
<dd>big</dd>
<dd>bpdy</dd>
</dl>
</body>
</html>
圖片和超鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片和超鏈接</title>
</head>
<body>
<!--1.圖片標(biāo)簽:img標(biāo)簽
單標(biāo)簽
src屬性:圖片地址(可以是本地圖片地址铜邮,也可以是遠(yuǎn)程服務(wù)器上的圖片地址)
title屬性:設(shè)置圖片的標(biāo)題(這個(gè)標(biāo)題是鼠標(biāo)停留在圖片上等一會(huì)兒出現(xiàn)的文字)
alt屬性:用來設(shè)置圖片加載失敗的時(shí)候出現(xiàn)的提示信息
-->
<img id="1" src="img/luffy4.jpg" title="路飛和艾斯" alt="加載失敗"/>
<img id="2" title="寶兒姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img id="3" src="img/luffy4.jpg" title="路飛和艾斯" alt="加載失敗"/>
<img title="寶兒姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飛和艾斯" alt="加載失敗"/>
<img title="寶兒姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飛和艾斯" alt="加載失敗"/>
<img title="寶兒姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飛和艾斯" alt="加載失敗"/>
<img title="寶兒姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飛和艾斯" alt="加載失敗"/>
<img title="寶兒姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<!--2.超鏈接標(biāo)簽:a標(biāo)簽
想要點(diǎn)擊跳轉(zhuǎn)的地方都可以使用超鏈接語(yǔ)法
注意:a標(biāo)簽的內(nèi)容部分是可見的,是可以被點(diǎn)擊
(1)href屬性:跳轉(zhuǎn)目標(biāo)對(duì)應(yīng)的地址
a.其他的網(wǎng)頁(yè)地址 ----- 跳轉(zhuǎn)
b.寫本地的一個(gè)html路徑 ------ 跳轉(zhuǎn)
c.空 ------- 刷新當(dāng)前網(wǎng)頁(yè)(重新加載)
d.選擇器 ------ 讓網(wǎng)頁(yè)跳轉(zhuǎn)到指定的位置
(2)target屬性:設(shè)置跳轉(zhuǎn)方式
_self(默認(rèn)值):在當(dāng)前頁(yè)中刷新出新的內(nèi)容
_blank:創(chuàng)建一個(gè)新的頁(yè)面寨蹋,在新的頁(yè)面中刷新出href指定的內(nèi)容
注意:刷新當(dāng)前網(wǎng)頁(yè)和在當(dāng)前網(wǎng)頁(yè)中跳轉(zhuǎn)到指定位置的時(shí)候松蒜,只能使用默認(rèn)的_self
-->
<a target="_blank" >百度一下</a>
<a >千鋒</a>
<a href="01-文本標(biāo)簽.html">文本標(biāo)簽</a>
<a href="">刷新</a>
<a href="#1">第一張</a>
<a href="#2">第二張</a>
<a href="#3">第三張</a>
</body>
</html>
表格標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格標(biāo)簽</title>
</head>
<body>
<!--表格標(biāo)簽:table標(biāo)簽、tr標(biāo)簽已旧、td標(biāo)簽秸苗、th標(biāo)簽
1.標(biāo)簽
table標(biāo)簽: 表格整體(一個(gè)table標(biāo)簽代表一個(gè)表格)
tr標(biāo)簽:行(一個(gè)tr標(biāo)簽代表表格中的一行)
td標(biāo)簽: 單元格(一個(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" bordercolor="red" bgcolor="beige" cellspacing="0" align="center">
<!--<tr><th>成績(jī)表</th></tr>-->
<!--第一行-->
<tr bgcolor='coral' height="50" align="center">
<!--第一行的第一個(gè)單元格-->
<td width="100">姓名</td>
<td width="60">成績(jī)</td>
<td width="140">是否留級(jí)</td>
</tr>
<!--第二行-->
<tr height="140">
<td bgcolor="cornflowerblue" align="center">張三</td>
<!--第二行的第二個(gè)單元格-->
<td>90</td>
<td>否</td>
</tr>
<!--第三行-->
<tr height="80">
<td>李四</td>
<td>80</td>
<!--第三行的第三個(gè)單元格-->
<td>否</td>
</tr>
</table>
<!--table>tr*3>td*4: 創(chuàng)建一個(gè)3行X4列的表格-->
</body>
</html>