初識前端
阿新 • • 發佈：2018-07-21
不同 100% elf 表示 mailto 渲染 嵌套 part html標簽
網頁最主要由3部分組成：結構、表現和行為。
模式是HTML、CSS和JavaScript。
HTML是什麽？ 全稱“Hyper Text Markup Language（超文本標記語言）”，網頁就是用HTML語言制作的。 HTML是一門描述性語言，是一門非常容易入門的語言。 CSS是什麽？ CSS，全稱“（層疊樣式表）”。以後我們在別的地方看到“層疊樣式表”、“CSS樣式”，指的就是CSS。 JavaScript是什麽？ JavaScript是一門腳本語言。 HTML是網頁的結構，CSS是網頁的外觀，而JavaScript是頁面的行為
HTML
開發環境
常見的Hbuild、Sublime Text、Dreamweare都可以用來開發HTML。PyCharm也支持HTML開發
文件後綴名規範：一般使用.html或.htm，網頁文件沒有區別與區分。
整個前端所有的標簽：F12或者鼠標右擊檢查
HTML標簽
1. 在HTML中規定標簽使用英文的尖括號即`<`和`>`包起來，如`<html>`、`<p>`都是標簽。 2. HTML中標簽**通常**都是成對出現的，分為開始標簽和結束標簽，結束標簽比開始標簽多了一個`/`，如`<p>標簽內容</p>`和`<div>標簽內容</div>`。開始標簽和結束標簽之間的就是標簽的內容。 3. 標簽之間是可以嵌套的。例如：div標簽裏面嵌套p標簽的話，那麽`</p>`必須放在`</div>`的前面。 4. HTML標簽不區分大小寫，`<h1>`和`<H1>`是一樣的，但是我們通常建議使用小寫，因為大部分程序員都以小寫為準。 註意：不是所有標簽都支持互相嵌套。
一個HTML文件是有自己固定結構的。 <!DOCTYPE HTML> <html> <head>...</head> <body>...</body> </html>
<!DOCTYPE HTML>是文檔聲明，必須寫在HTML文檔的第一行，位於<html>標簽之前，表明該文檔是HTML5文檔。 1.<html></html> 稱為根標簽，所有的網頁標簽都在<html></html>中。 2.<head></head> 標簽用於定義文檔的頭部，它是所有頭部元素的容器。常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標簽 3.在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽 HTML註釋 格式：<!--這裏是註釋的內容--> 註意事項： 1.HTML註釋不支持嵌套。 2.HTML註釋不能寫在HTML標簽中。
head標簽
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、編碼方式及URL等信息
<head lang=‘en‘> <title>標題信息</title> <meta charset=‘utf-8‘> <link> <style type=‘text/css‘></style> <script type=‘text/javascript‘></script> </head>
<title>標簽
在<title>和</title>標簽之間的文字內容是網頁的標題信息，它會顯示在瀏覽器標簽頁的標題欄中。
<!DOCTYPE HTML> <html> <head> <title>路飛學城</title> </head> <body></body> </html>
Meta標簽
元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標簽位於文檔的頭部，不包含任何內容。提供的信息是用戶不可見的。
meta標簽的組成：meta標簽共有兩個屬性，http-equiv屬性和name屬性，不同的屬性又有不同的參數值，不同的參數值就實現了不同的網頁功能。
http-equiv屬性
它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
<!--重定向 2秒後跳轉到對應的網址，註意分號--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge">
name屬性
主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字可以有多個用 ‘,’號隔開，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="路飛學城">
其他標簽 <!--標題--> <title>路飛學城</title> <!--icon圖標（網站的圖標）--> <link rel="icon" href="fav.ico"> <!--定義內部樣式表--> <style></style> <!--引入外部樣式表文件--> <link rel="stylesheet" href="mystyle.css"> <!--定義JavaScript代碼或引入JavaScript文件--> <script src="myscript.js"></script>
body標簽
想要在網頁上展示出來的內容一定要放在body標簽中。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>路飛學城</title> </head> <body> <h1>海燕</h1> <p>在蒼茫的大海上，</p> <p>狂風卷集著烏雲。</p> <p>在烏雲和大海之間，</p> <p>海燕像黑色的閃電，</p> <p>在高傲地飛翔。</p> </body> </html>
標題標簽h1~h6
<h1> - <h6> 標簽可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。
<!DOCTYPE HTML> <html> <head lang=‘en‘> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>路飛學城</title> </head> <body> <h1>一級標題</h1><h2>二級標題</h2> # <h1>和<h2>書寫在一行上展示，但是在瀏覽器的效果卻是換行了 <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6> </body> </html>
文本樣式標簽主要用來對HTML頁面中的文本進行修飾 1. `<b></b>`：加粗 2. `<i></i>`：斜體 3. `<u></u>`：下劃線 4. `<s></s>`：刪除線 5. `<sup></sup>`：上標 6. `<sub></sub>`：下標
如果想在一段文字中特別強調某幾個字,可以用到`<em>`或`<strong>`標簽（推薦）。 在瀏覽器中`<em>`默認會用斜體表示，`<strong>`會用粗體來表示。
段落標簽P
定義段落
跟普通文本一樣，但我們可以通過css來設置當前段落的樣式
獨占一行 塊級元素
超鏈接標簽a
超級鏈接<a>標記代表一個鏈接點，它的作用是把當前位置的文本或圖片連接到其他的頁面、文本或圖像
<body> <h1> <!-- a鏈接 超鏈接 target:_blank 在新的網站打開鏈接的資源地址 _self 在當前網站打開鏈接的資源地址 title: 鼠標懸停時顯示的標題 --> <a href="http://www.baidu.com" target="_blank" title="路飛學城">路飛學城</a> <a href="a.zip">下載包</a> <a href="mailto:[email protected]">聯系我們</a> <!-- 返回頁面頂部的內容 --> <a href="#">跳轉到頂部</a> <!-- 返回某個id --> <a href="#p1">跳轉到p1</a> <!-- javascript:是表示在觸發<a>默認動作時，執行一段JavaScript代碼，而 javascript:; 表示什麽都不執行，這樣點擊<a>時就沒有任何反應。 --> <a href="javascript:alert(1)">內容</a> <a href="javascript:;">內容</a> </h1> </body>
列表標簽ul,ol
通常後面跟<li>標簽一起用，每條li表示列表的內容
<ul>:unordered lists的縮寫 無序列表 <ol>:ordered listsde的縮寫 有序列表
<!-- 無序列表 type可以定義無序列表的樣式--> <ul type="circle"> <li>我的賬戶</li> <li>我的訂單</li> <li>我的優惠券</li> <li>我的收藏</li> <li>退出</li> </ul> <!-- 有序列表 type可以定義有序列表的樣式 --> <ol type="a"> <li>我的賬戶</li> <li>我的訂單</li> <li>我的優惠券</li> <li>我的收藏</li> <li>退出</li> </ol> 列表標識的起始編號默認為1 ol標簽的屬性：type：列表標識的類型 1：數字 a：小寫字母 A：大寫字母 i：小寫羅馬字符 I：大寫羅馬字符 ul標簽的屬性：type：列表標識的類型 disc：實心圓(默認值) circle：空心圓 square：實心矩形 none：不顯示標識
盒子標簽div
<div>可定義文檔的分區 division的縮寫 區 <div> 標簽可以把文檔分割為獨立的、不同的部分
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8" > <title>常用標簽一</title> </head> <body> <div id="wrap"> <div class="para"> <p style="height: 1000px" id="p1">段落</p> </div> <div class="anchor"> 我是普通的文本 <h1> <a href="http://www.baidu.com" target="_blank" title="路飛學城">路飛學城</a> <a href="a.zip">下載包</a> <a href="mailto:[email protected]">聯系我們</a> <a href="#">跳轉到頂部</a> <a href="#p1">跳轉到p1</a> <a href="javascript:alert(1)">內容</a> <a href="javascript:;">內容</a> </h1> </div> <!-- <h2>路飛學城</h2> <h3>路飛學城</h3> <h4>路飛學城</h4> <h5>路飛學城</h4> <h6>路飛學城</h6> --> <div class="para"> <!-- 定義段落 通常指文章一段內容 --> <p>路飛學城立誌幫助有誌向的年輕人通過努力學習獲得體面的工作和生活!路飛學員通過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啟職業生涯新可能</p> <p>路飛學城立誌幫助有誌向的年輕人通過努力學習獲得體面的工作和生活!路飛學員通過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啟職業生涯新可能</p> <p>路飛學城立誌幫助有誌向的年輕人通過努力學習獲得體面的工作和生活!路飛學員通過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啟職業生涯新可能</p> </div> <div class="lists"> <!-- 無序列表 --> <ul type="circle"> <li>我的賬戶</li> <li>我的訂單</li> <li>我的優惠券</li> <li>我的收藏</li> <li>退出</li> </ul> <!-- 有序列表 --> <ol type="a"> <li>我的賬戶</li> <li>我的訂單</li> <li>我的優惠券</li> <li>我的收藏</li> <li>退出</li> </ol> </div> </div> </body> </html>
圖片標簽<img/>
<img/>標簽在網頁中插入圖片 語法： <img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "提示信息" />
註意： 1.src設置的圖片地址可以是本地的地址也可以是一個網絡地址。 2.圖片的格式可以是png、jpg和gif。 3.alt屬性的值會在圖片加載失敗時顯示在網頁上。 4.還可以為圖片設置寬度(width)和高度(height)，不設置就顯示圖片默認的寬度和高度 <div> <span>與行內元素展示的標簽<span> <span>與行內元素展示的標簽<span> <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px"> <img src="./finance-right.png" alt="人工智能實戰" style="width: 200px;height: 200px"> </div> 瀏覽器查看效果：行內塊元素 5.與行內元素在一行內顯示 6.可以設置寬度和高度 7.span標簽可以單獨摘出某塊內容，結合css設置相應的樣式 <p>路飛學城立誌幫助有誌向的年輕人通過努力學習獲得體面的工作和生活!路飛學員通過學習Python ,<span>金融分析</span>,<span>人工智能</span>等互聯網最前沿技術,開啟職業生涯新可能</p>
換行標簽<br>
<br>標簽用來將內容換行，其在HTML網頁上的效果相當於我們平時使用word編輯文檔時使用回車換行。
分割線 <hr>
<hr>標簽用來在HTML頁面中創建水平分隔線，通常用來分隔內容
特殊字符
瀏覽器在顯示的時候會移除源代碼中多余的空格和空行。 所有連續的空格或空行都會被算作一個空格。 HTML代碼中的所有連續的空行（換行）也被顯示為一個空格。
特殊字符
要想輸入空格，需要用特殊符號 -- 要想輸入 > ， 需要用特殊符號 -- > 要想輸入 < ， 需要用特殊符號 -- < 要想輸入 & ， 需要用特殊符號 -- & 要想輸入 ¥ ， 需要用特殊符號 -- ¥ 要想輸入版權，需要用特殊符號 -- © 要想輸入註冊，需要用特殊符號 -- ®
表格標簽table
表格由<table> 標簽來定義。
每個表格均有若幹行（由 <tr> 標簽定義），每行被分割為若幹單元格（由<td>標簽定義）。
字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等
table----表格 thead-----b表格頭 tbody-----表格主體 tr----表格行 th----表格裏的單元格（默認加粗並且居中） td----表格主體裏的單元格 tfoot----表格底部 表格行和列的合並 rowspan 合並行(豎著合並) colspan 合並列(橫著合並)
表單標簽 form
表單用於顯示、手機信息，並將信息提交給服務器 語法：<form>允許出現表單控件</form> form表單標簽: action:定義表單被提交時發生的動作提交給服務器處理程序的地址 method： 取值： get:默認值，明文提交，所提交的數據時可以顯示在地址上，安全性低；提交數據有大小限制，最大為2KB post:隱式提交-所提交的內容，不會顯示到地址欄上，安全性高，無大小限制 作用：定義表單提交數據時的方式 enctype: 編碼類型，即表單數據進行編碼的方式允許表單將什麽樣的數據提交給服務器 取值： 1.application/x-www-form-urlencode默認。允許將普通字符，特殊字符，都提交給服務器，不允許提交文件 2.multipart/form-data,允許被將文件提交給服務器 3.text/plaln 只允許提交普通字符。特殊字符，文件等都無法提交 如果有文件需要提交給服務器，method必須為POST，enctype必須為multipart/form-data
表單控制分類
HTML標簽可以設置屬性，屬性一般以鍵值對的方式寫在開始標簽中。 <div id="i1">這是一個div標簽</div> <p class=‘p1 p2 p3‘>這是一個段落標簽</p> <a href="http://www.luffycity.com">這是一個鏈接</a> <input type=‘button‘ onclick=‘addclick()‘></input>
1.HTML標簽除一些特定屬性外可以設置自定義屬性，一個標簽可以設置多個屬性用空格分隔，多個屬性不區分先後順序。 2.屬性值要用引號包裹起來，通常使用雙引號也可以單引號。 3.屬性和屬性值不區分大小寫，但是推薦使用小寫。
標簽分類
HTML中標簽元素三種不同類型：塊狀元素，行內元素，行內塊狀元素。
常用的塊狀元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
常用的行內元素
<a> <span> <br> <i> <em> <strong> <label>
常用的行內塊狀元素：
<img> <input>
塊級元素特點：display:block; 1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。獨占一行 2、元素的高度、寬度、行高以及頂和底邊距都可設置。 3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
行內元素特點：display:inline; 1、和其他元素都在一行上； 2、元素的高度、寬度及頂部和底部邊距不可設置； 3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
行內塊狀元素的特點：display:inline-block; 1、和其他元素都在一行上； 2、元素的高度、寬度、行高以及頂和底邊距都可設置 可以通過display屬性對塊級元素、行內元素、行內塊元素進行轉換。
標簽嵌套規則
塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素
例如：
<div><div></div><h1></h1><p><p></div>對
<a href=”#”><span></span></a> 對
<span><div></div></span> 錯
塊級元素不能放在p標簽裏面
<p><ol><li></li></ol></p> 錯
<p><div></div></p> 錯
有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素（h1、h2、h3、h4、h5、h6、p）
li元素可以嵌入ul，ol，div等標簽
<ul> <li> <ul> <li> <div> </div> </li> <li> <ol> <li></li> <li></li> <li></li> <li></li> </ol> </li> </ul> </li> </ul>
初識前端