前端（一）—— 前端三種語言、
阿新 • • 發佈：2018-09-19
dev 十進制數 分享圖片 html註釋 網站前臺 特點 顯示 desc 美的 
前端三種語言、核心標簽、常見標簽、標簽分類
一、前端
前端即網站前臺部分，運在PC端，移動端等瀏覽器上展現給客戶瀏覽的的網頁。隨著互聯網技術的發展，HTML5，CSS3，前端框架的應用，跨平臺響應式網頁設計能夠適應各種屏幕分辨率，完美的動效設計，給用戶帶來極高的用戶體驗。前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript。
二、HTML、CSS、JavaScript
1、HTML
（1）html是超文本標記語言
（2）不是編程語言，不具備編程語言的具備的程序邏輯，負責完成頁面的結構
（3）文件後綴是 .html 或 .htm
html組成：標簽、指令、實體
1.標簽：由<>包裹，以字母開頭可以結合合法字符可以被瀏覽器解析的標記(純數字或者字母與數字的組合)
<zero>qqqqqq</zero>
<!-- html註釋 -->
2.指令：被<>包裹，以!開頭的可以被瀏覽器解析的標記
<!doctype html>
3.實體：被&;包裹的#開頭的十進制數或特殊字母組合
<www>
2、CSS
（1）css是級聯樣式表
（2）不是編程語言，不具備編程語言的具備的程序邏輯，負責頁面的風格設計，樣式美觀
（3）文件後綴是 .css
css由選擇器、作用域、樣式塊組成 選擇器：由標簽、類、id單獨或組合出現 作用域：一組大括號包含的區域 樣式塊：滿足css連接語法的眾多樣式 <style> /*zero 選擇器，{} 作用域 ，color 樣式塊*/ zero{ color: red; /*css中最後一條樣式的 ; 可以省略*/ background-color: blue } </style>
3、JavaScript
（1）JS是瀏覽器腳本語言，可以編寫運行在瀏覽器上的程序
（2）負責頁面特效、調用瀏覽器的API(BOM)、操作改變頁面內容(DOM)，從後端獲取數據 (Ajax)，渲染頁面等
（3）文件後綴是 .js
JS組成：BOM、DOM、Ajax、渲染頁面等
BOM:js操作瀏覽器
DOM:就是操作頁面文檔
ES:js語法(ECAMScript)
<script type="text/javascript">
// js註釋 可以省略;(盡量寫)
alert(‘ggggggg‘);
</script>
三、頁面的基礎模板
1、h5語法特點
- 不區分大小寫
- 有很多系統標簽,一般都具有語義
- 可以隨意定義自定義標簽
- h5內容不保留空白字符(制表符)
- 提倡小寫
<!-- 文檔類型; 標簽語法為html5 --> <!doctype html> <!-- html:文檔根標簽 --> <html> <!-- html只有一兒一女:head,body,所以可以省略縮減 --> <!-- html語法中沒有明確規定縮減規則,但從美觀可讀性出發,開發者要嚴格遵循縮減 --> <head> <!-- 包含內容:樣式表,腳本,元信息,內嵌代碼塊 --> <meta charset=‘utf-8‘ /> <title>簡單模板</title> </head> <body> <!-- 包含內容:幾乎一切內容 --> </body> </html
四、核心模板標簽
1、元標簽（meta）
<!-- 字符編碼 -->
<meta charset="utf-8" />
<!-- SEO -->
<meta name="keywords" content="新浪,門戶,資訊" />
<meta name="description" content="新浪網為全球用戶24小時提供全面及時的中文資訊" />
<!-- 移動適配 -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
2、鏈接標簽（link）
<!-- tag圖片 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- 外聯樣式表 -->
<link rel="stylesheet" type="text/css" href="style.css" />
3、樣式標簽（style）
<!-- 內聯樣式表 -->
<style></style>
4、腳本標簽（script）
<script type="text/javascript"></script>
五、常用標簽
1、無語義標簽
<!-- div 最常用標簽 -->
<div><div>
<!-- span 最常用的純文本標簽 -->
<span></span>
2、常用語義標簽
<h1>一級標題</h1>
<h2>二級標題</h2>
<h6>六級標題</h6>
正文
<!-- 換行 -->
<br>haode<br>
<!-- 加入分割線 -->
<hr>1<hr>2<hr>
3、文本標簽
<!-- i 很常用的標簽，一般不作文斜體文本使用，作文字體圖片使用 -->
<i>斜體</i>
<em>以斜體方式強調</em>
<b>加粗</b>
<strong>以加粗方式強調</strong>
<!-- p 段落標簽具有具體區域，成段出現，段落之前崔仔段落間距 -->
<p>段落標簽</p>
<p>段落標簽</p>
<!-- pre 原樣文本標簽,保留所有字符，原樣輸出 -->
<pre>123 456 7</pre>
<!-- ins樣式具有下劃線 -->
<ins>插入的文本</ins>
<!-- del樣式具有中劃線 -->
<del>刪除的文本</del>
<!-- sup上標，下面效果10的平方 -->
<span>10<sup>2</sup></span>
<!-- sub是下標，下面效果水分子 -->
<span>H<sub>2</sub>O</span>
<!-- small小號字體，下面效果右邊小號字體 -->
<span>你好<small>好</small></span>
<!-- ruby與rt組合，拼音 -->
<ruby>
牛皮<rt>niupi</rt>
</ruby>
<!-- 塊 -->
<section></section>
六、標簽分類
1、單標簽 / 雙標簽
單標簽：單標簽在本身標簽標識結束，主要應用場景為功能性標簽,結束標誌可省略
雙標簽：雙標簽有成對的結束標識，主要應用場景為內容性標簽,結束標誌可省略（不建議）
<!-- 單標簽 -->
<meta charset="UTF-8" />
<meta charset="UTF-8">
<!-- 雙標簽 -->
<div>div1</div>
2、行標簽 / 塊標簽
行標簽：內聯標簽，內聯標簽本身不具備寬度，通常同行顯示
塊標簽：塊級標簽，塊標簽擁有本身寬度，通常獨自占據一行
<!-- 行標簽 -->
<span>span1</span>
<span>span2</span>
<!-- 塊標簽 -->
<div>div1</div>
<div>div2</div>
3、單一 / 組合標簽
單一標簽：單獨出現，表示具體的功能或展示具體的內容
組合標簽：配合使用，才能產生相應的內容與效果
<!-- 組合標簽必須組合出現，協同下才能顯示產生相應的內容和效果 -->
<ruby>
號<<rt>hao</rt>
</ruby>
<!doctype html> <!-- html:文檔根標簽 --> <html> <!-- html只有一兒一女:head,body,所以可以省略縮減 --> <!-- html語法中沒有明確規定縮減規則,但從美觀可讀性出發,開發者要嚴格遵循縮減 --> <head> <!-- 包含內容:樣式表,腳本,元信息,內嵌代碼塊 --> <!-- 字符編碼 --> <meta charset="utf-8" /> <!-- <meta http-equiv="content-type" content="text/html;charset=utf-8" /> --> <!-- SEO --> <meta name="keywords" content="新浪,資訊" /> <meta name="description" content="新浪微博是……" /> <!-- 移動適配 --> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <!-- tag圖片 --> <!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> --> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <title>第一個頁面</title> </head> <body> <!-- 包含內容:幾乎一切內容 --> </body> </html>View Code
前端（一）—— 前端三種語言、