1.序言
1.web標準
web前端的內(nèi)容：HTML、CSS、JavaScript
web標準(萬維網(wǎng)-W3C指定的)中規(guī)定HTML是結(jié)構(gòu)標準，CSS是表現(xiàn)標準, JS是行為標準
a.HTML結(jié)構(gòu)標準中規(guī)定了網(wǎng)頁上能夠顯示的內(nèi)容，比如顯示文字、圖片、音頻、視頻、Flash、按鈕、輸入框等....
b.CSS表現(xiàn)標準規(guī)定網(wǎng)頁的內(nèi)容的布局和樣式，比如內(nèi)容該顯示在什么位置，內(nèi)容是什么顏色、多大、多寬等....
c.JS行為標準規(guī)定網(wǎng)頁的內(nèi)容在某種情況下發(fā)生什么樣的改變（動態(tài)變化）
2.HTML
a.什么是html
HTML又叫超文本標記語言（是標記語言，不是編程語言）
b.html版本
狹義的h5: 指html第5個大版本
廣義的h5: 指的是html5+CSS3+javascript
c.html文件結(jié)構(gòu)(由不同的標簽組成)
<html>
<head>
內(nèi)容是不可見的
</head>
<body>
內(nèi)容是可見的
</body>
</html>
3.HTML中的標簽
網(wǎng)頁中的內(nèi)容就是通過html中的不同的標簽(標記)來確定
標簽語法：
a.常規(guī)標簽(雙標簽): <標簽名 屬性名1=屬性值1 屬性名2=屬性值2...>標簽內(nèi)容</標簽名>
b.單標簽：<標簽名 屬性名1=屬性值1 屬性名2=屬性值2...> 或者 <標簽名 屬性名1=屬性值1 屬性名2=屬性值2.../>
說明：
<>,</>：固定寫法，html中所有的標簽都是寫在<>中的
標簽名：不是隨意命名的，而是一些固定的值，例如：<p></p> - p標簽、a標簽、b標簽、h1標簽、input標簽、img標簽等。
標簽名前不能有空隙
屬性：屬性放在開始標簽中，屬性名和值之間用=連接，多個屬性之間用空格隔開。屬性可以是自定義的屬性也可以是標簽自帶的屬性
標簽內(nèi)容：雙標簽才存在標簽內(nèi)容，標簽內(nèi)容可以是任何東西(可以是文字也可以是其他的標簽)
例如:<div>我是python</div>， <div><p></p><img></div>
</>: 結(jié)束標簽，單標簽沒有一個單獨的結(jié)束標簽
4.基本語法
HTML語法中大小寫不敏感：html和HTML,HtMl是一樣的
文件名命名要求：是由字母和數(shù)字組成，但是數(shù)字不開頭，一般都是小寫的。網(wǎng)站首頁的html文件命名為index
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
DOCTYPE：用來說明當前的html文件中使用的html版本
html: 代表HTML5
-----------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> <!--html4-->
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!--html2-->
<!DOCTYPE html> <!--html5-->
-----------------------------------------------------------------------------------------------------
html標簽：代表整個網(wǎng)頁
-----------------------------------------------------------------------------------------------------
<html>
-----------------------------------------------------------------------------------------------------
1.head標簽：head標簽中的內(nèi)容不可見，一般做一些網(wǎng)頁設置性的操作
2.head標簽中的內(nèi)容：head標簽中的子標簽是固定：
meta標簽：單標簽，charse屬性用來設置網(wǎng)頁的編碼方式
title標簽：設置網(wǎng)頁標題
link標簽
style標簽
script標簽
base標簽
-----------------------------------------------------------------------------------------------------
<head>
<meta charset="utf-8" />
<title>學習HTML</title>
</head>
-----------------------------------------------------------------------------------------------------
body標簽中的內(nèi)容是在網(wǎng)頁中可見的部分
html學習目標就是掌握body中的常用標簽
-----------------------------------------------------------------------------------------------------
<body>
今天開始學習web前端
</body>
</html>
2.html簡介
#HTML
超文本標記語言，標準通用標記語言下的一個應用。
“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
超文本標記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容
##什么是HTML
HTML是用來描述網(wǎng)頁的一種語言。
- HTML 指的是超文本標記語言: HyperText Markup Language
- HTML 不是一種編程語言，而是一種標記語言
- 標記語言是一套標記標簽 (markup tag)
- HTML 使用標記標簽來描述網(wǎng)頁
- HTML 文檔包含了HTML 標簽及文本內(nèi)容
- HTML文檔也叫做 web 頁面
##HTML標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag) 。
- HTML 標簽是由尖括號包圍的關(guān)鍵詞，比如 <html>
- HTML 標簽通常是成對出現(xiàn)的，比如 <b> 和 </b>
- 標簽對中的第一個標簽是開始標簽，第二個標簽是結(jié)束標簽
- 開始和結(jié)束標簽也被稱為開放標簽和閉合標簽
|<font size = 5><font color=f09345><標簽></font>內(nèi)容<font color=f09345></標簽></font></font>|
|-----|
##HTML元素
"HTML 標簽" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結(jié)束標簽，如下實例:
HTML 元素:
<p>這是一個段落</p>
##HTML網(wǎng)頁結(jié)構(gòu)
下面是一個可視化的網(wǎng)頁結(jié)構(gòu)：
其中白色區(qū)域才是在網(wǎng)頁中可見的部分
##HTML版本
從初期的網(wǎng)絡誕生后，已經(jīng)出現(xiàn)了許多HTML版本:
|版本| 發(fā)布時間|
|----|------|
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)頁。
網(wǎng)絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁內(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)頁聲明類型 [DOCTYPE 參考手冊](http://www.runoob.com/tags/tag-doctype.html)。
##中文編碼
目前在大部分瀏覽器中，直接輸出中文會出現(xiàn)中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
3.head標簽
客戶端來卡號的看法熬枯受淡放開手
fasjfkashkjsfakhf
sakdfhaj
ks 阿斯蒂芬哈 薩克交話費
[百度一下](http://www.baidu.com)
#常用標簽
##1.HTML<head>元素
<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區(qū)域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
|標簽 |描述|
|---|---|
|<title>| 定義了文檔的標題
|<base>| 定義了頁面鏈接標簽的默認鏈接地址
|<link> |定義了一個文檔和外部資源之間的關(guān)系
<meta>| 定義了HTML文檔中的元數(shù)據(jù)
<script>| 定義了客戶端的腳本文件
<style>| 定義了HTML文檔的樣式文件
### < meta>元素
meta標簽主要是通過屬性為網(wǎng)頁提供元數(shù)據(jù)主要包括：name屬性和http-equiv屬性
<mate name=“參數(shù)”, content=“具體描述”>
**name屬性參數(shù):**
1.keywords(關(guān)鍵字)
說明：用于告訴搜索引擎，你網(wǎng)頁的關(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(作者)
說明：用于標注網(wǎng)頁作者 舉例：
<meta name="author" content="726550822@qq.com">
4.viewport(移動端的窗口)
說明：這個屬性常用于設計移動端網(wǎng)頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。
<meta name="viewport" content="width=device-width, initial-scale=1">
5.robots(定義搜索引擎爬蟲的索引方式)
說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。content的參數(shù)有all,none,index,noindex,follow,nofollow。默認是all。
舉例：
<meta name="robots" content="none">
具體參數(shù)如下：
a.none : 搜索引擎將忽略此網(wǎng)頁，等價于noindex，nofollow。
b.noindex : 搜索引擎不索引此網(wǎng)頁。
c.nofollow: 搜索引擎不繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。
d.all : 搜索引擎將索引此網(wǎng)頁與繼續(xù)通過此網(wǎng)頁的鏈接索引，等價于index，follow。
e.index : 搜索引擎索引此網(wǎng)頁。
f.follow : 搜索引擎繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。
6.renderer(雙核瀏覽器渲染方式)
說明：renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器。舉例：
<meta name="renderer" content="webkit"> //默認webkit內(nèi)核
<meta name="renderer" content="ie-comp"> //默認IE兼容模式
<meta name="renderer" content="ie-stand"> //默認IE標準模式
**http-equiv屬性**
```html
[百度一下](http://www.baidu.com)
|a|b|
|---|---|
|abc|bca
|a|b|
|---|---|
|abc|bca
4.文本標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.標題標簽：h1-h6
網(wǎng)頁的內(nèi)容涉及到標題的時候使用
-->
<h1>我是標題1</h1>
<h2>我是標題2</h2>
<h3>我是標題3</h3>
<h4>我是標題4</h4>
<h5>我是標題5</h5>
<h6>我是標題6</h6>
-----------------------------------------------------------------------------------------------------
--2.段落標簽: p
網(wǎng)頁的內(nèi)容中一個段落文字對應一個p標簽
p標簽的內(nèi)容結(jié)束后會自動換行
注意：html中的文字是不會因為手動的回車和空格以及縮進產(chǎn)生空白效果(換行、空格、縮進無效)
但是可以通過一些特殊的符號，來產(chǎn)生特定的效果
空格符：
強制換行:<br />
<p>
隨著今年蘋果秋季發(fā)布會的閉幕，從 1（初代 iPhone）到 10（iPhone X），<br />
新 iPhone 的命名即將用盡包括數(shù)字 10 以內(nèi)的所有數(shù)字，<br />
對于蘋果來說，從明年開始，為新 iPhone 命名將會是一件頭疼的事情。2÷10=0.2
</p>
<p>
實際上，去年蘋果公司決定用羅馬數(shù)字 X（讀 ten）來命名開始，iPhone 已經(jīng)步向了「命名荒」，
而進一步加劇這個情況的，則是今年的新 iPhone，由于新 iPhone 并沒有巨大的變化，
所以它似乎并不足以獲得一個全新的命名，比如說 iPhone Ⅺ （11）這樣的稱呼。
</p>-----------------------------------------------------------------------------------------------------
--3.文字效果:
a.加粗：b標簽，strong標簽
b標簽：單純的在樣式上進行加粗
strong標簽：除了將文字加粗顯示外還有強調(diào)的意義
b.傾斜：i標簽,em標簽
em標簽有強調(diào)的作用
-->
<p>實際上，去年<i>蘋果公司</i>決定用羅馬數(shù)字 X（讀 ten）來命名開始，<em>iPhone</em> 已經(jīng)步向了「<b>命名荒</b>」，
而進一步加劇這個情況的，則是今年的新 iPhone，由于新 iPhone 并沒有<strong><em>巨大</em></strong>的變化，
所以它似乎并不足以獲得一個全新的命名，比如說 <strong>iPhone Ⅺ</strong> （11）這樣的稱呼。</p>
<!--4.水平線：hr
單標簽
-->
<hr />
--5.列表標簽:ul,ol,dl
ul:無序列表
ol:有序列表
dl:自定義列表
-->
<ul>
<li>語文</li>
<p>語文是個什么樣的學科。。。。</p>
<li>數(shù)學</li>
<li>英語</li>
</ul>
<ol>
<li>北京</li>
<p>北京最大的特點是霧霾~</p>
<li>成都</li>
<p>天府之國</p>
<li>大連</li>
<p>美麗的海濱城市</p>
<li>重慶</li>
<p>辣妹兒+火鍋</p>
<li>青島</li>
</ol>
<dl>
<!--dt對列表進行分組-->
<dt>A</dt>
<!--dd列舉分組下的內(nèi)容-->
<dd>and</dd>
<dd>are</dd>
<dt>B</dt>
<dd>big</dd>
<dd>bpdy</dd>
</dl>
</body>
</html>
5.圖片和超鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片和超鏈接</title>
</head>
<body>
-----------------------------------------------------------------------------------------------------
--1.圖片標簽:img標簽
單標簽
src屬性：圖片地址（可以是本地圖片地址，也可以是遠程服務器上的圖片地址）
title屬性：設置圖片的標題(這個標題是鼠標停留在圖片上等一會兒出現(xiàn)的文字)
alt屬性：用來設置圖片加載失敗的時候出現(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.超鏈接標簽:a標簽
想要點擊跳轉(zhuǎn)的地方都可以使用超鏈接語法
注意：a標簽的內(nèi)容部分是可見的，是可以被點擊
(1)href屬性：跳轉(zhuǎn)目標對應的地址
a.其他的網(wǎng)頁地址 ----- 跳轉(zhuǎn)
b.寫本地的一個html路徑 ------ 跳轉(zhuǎn)
c.空 ------- 刷新當前網(wǎng)頁(重新加載)
d.選擇器 ------ 讓網(wǎng)頁跳轉(zhuǎn)到指定的位置
(2)target屬性：設置跳轉(zhuǎn)方式
_self(默認值):在當前頁中刷新出新的內(nèi)容
_blank:創(chuàng)建一個新的頁面，在新的頁面中刷新出href指定的內(nèi)容
注意：刷新當前網(wǎng)頁和在當前網(wǎng)頁中跳轉(zhuǎn)到指定位置的時候，只能使用默認的_self
-->
<a target="_blank" >百度一下</a>
<a >千鋒</a>
<a href="01-文本標簽.html">文本標簽</a>
<a href="">刷新</a>
<a href="#1">第一張</a>
<a href="#2">第二張</a>
<a href="#3">第三張</a>
</body>
</html>
6.表格標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
</head>
<body>
-----------------------------------------------------------------------------------------------------
表格標簽:table標簽、tr標簽、td標簽、th標簽
1.標簽
table標簽: 表格整體（一個table標簽代表一個表格）
tr標簽：行(一個tr標簽代表表格中的一行)
td標簽: 單元格(一個td代表一個單元格)
th標簽: 表頭
2.屬性
a.border屬性: 設置表格的邊框的寬度（只能作用于table）
b.bordercolor:設置邊框顏色 （只能作用于table）
c.background:設置背景圖片
d.bgcolor:設置背景顏色(可以作用于table\tr\td)
e.cellspacing:設置單元格與單元格之間的間距（默認是1）
f.cellpadding:設置內(nèi)容和單元格之間的間距
g.width: 一般作用于某一個單元格，影響的是這個單元格對應的那一列
h.height: 一般作用于行，影響的是一行的高度
i.align：設置對齊方式(可以作用于table\tr\td)
作用于table，讓整個表格在瀏覽器中居中
作用于tr/td，讓內(nèi)容在單元格中居中
-->
<table border="1" bordercolor="red" bgcolor="beige" cellspacing="0" align="center">
<!--<tr><th>成績表</th></tr>-->
<!--第一行-->
<tr bgcolor='coral' height="50" align="center">
<!--第一行的第一個單元格-->
<td width="100">姓名</td>
<td width="60">成績</td>
<td width="140">是否留級</td>
</tr>
<!--第二行-->
<tr height="140">
<td bgcolor="cornflowerblue" align="center">張三</td>
<!--第二行的第二個單元格-->
<td>90</td>
<td>否</td>
</tr>
<!--第三行-->
<tr height="80">
<td>李四</td>
<td>80</td>
<!--第三行的第三個單元格-->
<td>否</td>
</tr>
</table>
<!--table>tr*3>td*4: 創(chuàng)建一個3行X4列的表格-->
</body>
</html>
7.細線表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>細線表格</title>
</head>
<body>
<p>XXX信息表</p>
<table cellspacing="1" bgcolor="purple">
<tr bgcolor="white" height="80" align="center">
<td width="120">姓名</td>
<td width="250">畢業(yè)院校</td>
</tr>
<tr bgcolor="white" height="100">
<td>余婷</td>
<td>
<!--注意：
1.設置寬和高只有大的值有效(相對于因為別的原因而影響的寬高)
2.表格中的內(nèi)容不一定只是文字，也可以是別的內(nèi)容
-->
<img src="img/luffy4.jpg"/>
<a >清華大學</a>
</td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
8.不規(guī)則表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>細線表格</title>
</head>
<body>
<p>XXX信息表</p>
<table cellspacing="1" bgcolor="purple">
<tr bgcolor="white" height="80" align="center">
<td width="120">姓名</td>
<td width="250">畢業(yè)院校</td>
</tr>
<tr bgcolor="white" height="100">
<td>余婷</td>
<td>
<!--注意：
1.設置寬和高只有大的值有效(相對于因為別的原因而影響的寬高)
2.表格中的內(nèi)容不一定只是文字，也可以是別的內(nèi)容
-->
<img src="img/luffy4.jpg"/>
<a >清華大學</a>
</td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
