第六十六篇 前端基礎一
目錄javascript
1、前端導言
1.現階段前端學習的內容：HTML、CSS、JavaScript、jQuery、bootstrapcss
2.這些內容分別指的是：html
1.html：頁面架構 2.css：頁面佈局 3.javascript：頁面交互 4.jquery：js的工具包 5.bootstrap：快速實現頁面搭建的框架 前端：寫網頁、用戶能看到的一切交互頁面、app、小程序
2、HTML
1.HTML導讀
1.內容概況：前端
1.什麼是HTML：超文本標記語言 1.1 超文本：文本、圖片、音頻、視頻、超連接 1.2 標記：符號、標籤，用於解釋，沒有邏輯 2.語言的組成：轉義字符、指令、標籤 3.學習HTML的目的：完成頁面架構的搭建（用什麼標籤完成什麼樣的標籤嵌套關係）
2.熟悉HTML語法：java
<!--文檔指令，建議出如今HTML文件的最上方，一個HTML文件只出現一次，HTML表示該文件採用HTML5語法進行編寫-->
<!--每搭建一個頁面就必需要寫一個版本類型的語句，若是多寫了，它會被放到body中-->
<!doctype html>
<!--html語言不區分大小寫，能夠在語句的任何位置使用大小寫字母，推薦用小寫，更容易理解-->
<!-- <html></html>是頁面標籤的意思，一個HTML文件只出現一次，包含全部頁面內容，且只有頭標籤head與體標籤body兩個子標籤，這兩個子標籤在一個HTML文件中都是隻出現一次-->
<html>
<!-- <head></head>頭標籤：它包含頁面樣式、腳本、後勤操做（頁面編碼、標題和圖標）-->
<head>
<!--頁面標題標籤，用來顯示頁面標籤標題，如登陸百度頁面，頁面標籤標題顯示: 百度一下，你就知道-->
<title>第一個頁面</title>
<meta charset="utf-8"> <!-- 規定文件編碼的元標籤，由於元標籤只須要標註具體功能，不須要包裹內容，因此表明標籤結束的斜槓寫在標籤的最後便可（能夠省略）-->
<style></style> <!--頁面樣式標籤，用來存放出如今head中的css3樣式代碼的標籤-->
<script></script> <!--腳本標籤，用來存放出如今head中的js腳本代碼的標籤-->
</head>
<!-- <body></body>體標籤：頁面顯示內容的存放區域、樣式、腳本-->
<body>
helloworld
<!--頁面中全部顯示給用戶查看的內容：普通文本、圖片、音頻等等，通常都放在這裏-->
<!--不顯示給用戶查看的內容：簡單與複雜的系統標籤、腳本標籤以及隱藏的內容等，通常也會出如今這裏-->
<style></style> <!--頁面樣式-->
<script></script> <!--腳本-->
<!--頁面體標籤的結束標識，與頁面體標籤的開始一同包裹頁面主體部分全部顯示給用戶查看的內容（還包含其餘不顯示的內容）-->
</body>
<!--頁面根標籤的結束標識，頁面的全部內容都應該出如今html標籤內部（被HTML標籤開始與結束包裹）-->
</html>
<!--若是在一個頁面中寫了多個文檔指令或頁面標籤，則除了第一個的會保留原樣外，其餘重複的都會放在第一個頁面的體標籤中-->
3.補充：jquery
<!-- 關鍵詞元標籤，讓該頁面更容易被百度這樣的搜索引擎，經過關鍵詞搜索到--> <meta name="keywords" content="8-12個以英文逗號隔開的單詞或詞語"> <!-- 網頁描述元標籤，也是輔助於讓頁面更容易被搜索引擎搜索到--> <meta name="description" content="80字之內的介紹網站的文字"> <!-- 屏幕適配元標籤，讓該頁面適配移動端屏幕尺寸--> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/> <!-- 設置頁面標籤 圖片連接標籤 --> <link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
2.HTML相關內容
1.指令：css3
1.被尖括號包裹，以感嘆號開頭的書寫格式就是指令 2.好比註釋：<!-- -->，能夠在裏面用一個減號，可是推薦兩個減號的寫法 3.又好比指定文檔類型的文檔指令：<!doctype html>
2.轉義字符(http://tool.oschina.net/commons?type=2)：bootstrap
1.被and和分號包裹，包裹內容能夠是井號與數字的組合，也能夠是多個字母 2.比較經常使用的有： 2.1 < —— 小於(<) 2.2 > —— 大於(>) 2.3 —— 空格 2.4 © —— 版權
3.標籤：小程序
1.被尖括號包裹，以字母開頭，後面能夠接數字或減號 2.系統標籤：h1~h六、P、span、div、i、b、a、img、hr、br、table、form、input 3.自定義標籤：知足合法命名規範的全部標籤 4.注意：HTML語言中，系統建議只使用系統標籤，不建議使用自定義標籤
3.HTML經常使用標籤
1.自定義標籤：架構
提倡規範命名的合法自定義標籤 <num></num> <my-tag></my-tag> <student1></student1>
2.系統標籤：
頁面結構相關的系統標籤 1.頁面根標籤：<html></html> 2.頁面頭標籤：<head></head> 3.頁面體標籤：<body></body> 4.頁面標題標籤：<title></title> 5.元標籤：<meta /> (熟練以後單標籤中斜槓可寫可不寫) 6.連接標籤：<link /> 7.樣式標籤：<style></style> 8.腳本標籤：<script></script> 簡單的系統標籤 1.標題標籤：<h1></h1> ... <h6></h6> 2.段落標籤：<p></p> 3.換行標籤：<br /> 4.分割線標籤：<hr /> 5.行文本標籤：<span></span>（通常用於嵌套其餘文本標籤） 6.斜體標籤：<i></i> (推薦) 或 <em></em> (以斜體做爲強調的強調標籤) 7.加粗標籤：<b></b> (經常使用) 或 <strong></strong> (以加粗做爲強調的強調標籤) 8.圖片標籤：<img /> 9.超連接標籤：<a></a> 10.「架構」標籤：<div></div> 11.角標標籤：<sup></sup> (上角標) <sub></sub> (下角標) 複雜的系統標籤（組合標籤） 1.無需列表標籤：<ul><li></li></ul> 2.表格標籤：<table><tr><td></td></tr></table>或<table><tr><th></th></tr></table> <table><!-- 包含大量的表格子標籤 --></table> 3.表單標籤：<form><input></input></form> <form><!-- 包含大量的表單子標籤 --></form>
3.實例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
</head>
<body>
<!-- 重點：<h1></h1>的語義：該頁面的主標題 -->
<h1 title="樣式，懸浮在此行文字的字體上">
一級標題
</h1>
<h2>
二級標題
</h2>
<h6>
六級標題
</h6>
正文文本 正文文本 <!--若是不加空格轉義字符 或<br>換行標籤，則不管空多少格或換行，都只會空出固定的一點點空隙-->
<!-- <p></p>段落標籤：自帶換行，有段落間距（不是行間距）-->
<p>
段落之間的間距不是行間距
</p>
<p>
通常段落間距比行間距要大
</p>
<!-- <br>換行標籤，給文字換行-->
正文文本 <br>
正文文本 <br>
<!-- <span></span>行文本標籤 -->
<span>通常用來嵌套其餘文本類標籤，好比：這是<sup>上角標</sup>，這是<sub>下角標</sub></span>
<!--<i></i>加粗標籤-->
<i>加粗</i>
<!-- <a></a>:超連接標籤-->
<!-- 全局屬性href中寫超連接的目標地址；全局屬性target值爲"_blank"時，會新開一個標籤頁面跳轉到目標頁面，默認值是_self，是在當前頁面跳轉 -->
<a href="https://www.baidu.com" target="_blank">百度</a><br>
<!-- 圖片標籤；屬性title中的值能夠在鼠標懸停時提示文本內容；當img標籤資源加載失敗時，會顯示屬性alt的值 -->
<img title="幽靈公主" alt="幽靈公主" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1564404410&di=d9fbb4c06e3fc427341ecd9dbc98488c&src=http://b-ssl.duitang.com/uploads/item/201609/30/20160930174809_BAyu3.thumb.700_0.jpeg" >
<!-- 列表標籤：無序<ul><li></li></ul> 有序<ol><li></li></ol>
<!-- 能夠用快捷方法：ul>li{第$列}*5，最後按Tab鍵-->
<ul>
<li>第一列</li>
<li>第二列</li>
</ul>
<!-- 表格標籤：table>tr>th 或者 table>tr>td -->
<!-- tr:行 th:標題單元格 td:普通單元格 -->
<!-- border:邊框；cellspacing:單元格的間距，最小爲0,可是單元格之間是兩條線，能夠用rules="all"處理成一條線；cellpadding：單元格的內邊距（文本於內邊框的間距）-->
<table border="1" width="500" height="300" rules="all" cellspacing="0" cellpadding="10">
<caption>表格標題</caption>
<!--表頭-->
<thead>
<tr>
<!--th{標題}*3,Tab鍵-->
<th>標題</th>
<th>標題</th>
<th>標題</th>
</tr>
</thead>
<!--表體-->
<tbody>
<!--(tr>td{$}*3)*2，tab鍵，兩行三列-->
<!--rowspan:合併行-->
<!--colspan:合併列-->
<tr>
<!--將兩行合成一行-->
<td rowspan="2">單元格</td>
<!--將兩列合成一列-->
<td colspan="2">單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</tbody>
<!--表尾-->
<tfoot>
<tr>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
</tr>
</tfoot>
</table>
</body>
</html>
4.表單：
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>表單</title>
</head>
<body>
<!--form的做用：完成先後臺數據的交互，將用戶錄入的信息提交給後臺，或者上傳文件-->
<form action="">
<p>
<!--label做爲input的文本解釋標籤，for綁定input中的id -->
<!--value屬性是表單標籤的內容，用於提交給後臺的數據；name是提交給後臺的key，後臺經過name取到輸入的值；value是輸入的值-->
<!--type決定標籤的類型本質，能夠是文本、密碼、文件、按鈕等等-->
<!--placeholder是文本佔位符，用於顯示給用戶看須要輸入什麼內容；multiple：多選；checked默認激活；multiple和checked屬於布爾類型屬性，不須要賦值-->
<lable for="username">帳號：</lable>
<input id="username" type="text" value="king" name="user">
</p>
<p>
<label for="password">密碼：</label>
<input id="password" type="password" placeholder="請輸入密碼" name="psw">
</p>
<p>
<input type="hidden" value="jfksdj" name="pk">
</p>
<p>
<input type="file" name="file" multiple>
</p>
<p>
<!--type屬性中的radio只能單選，checked是默認按了一次-->
男<input type="radio" value="male" name="gender" checked>
女<input type="radio" value="female" name="gender">
</p>
<p>
<!-- checkbox能夠多選-->
男<input type="checkbox" value="male" name="gender" checked>
女<input type="checkbox" value="female" name="gender" checked>
其餘<input type="checkbox" value="other" name="gender">
</p>
<p>
<!--button標籤能夠生成按鈕-->
<!--button：普通按鈕；reset：重置按鈕；submit：提交按鈕-->
<button type="button">普通按鈕</button>
<button type="reset">重置按鈕</button>
<button type="submit">提交按鈕</button>
</p>
<p>
<!--input標籤中用type屬性能夠生成按鈕-->
<input type="button" value="按鈕" />
<input type="reset" value="重置" />
<input type="submit" value="登陸" />
</p>
<p>
<!--文本區域標籤能夠生成一個可供輸入文本的框-->
<textarea cols="30" rows="20">文本區域</textarea>
</p>
</form>
</body>
</html>
5.標籤的分類：
按是否自帶換行分類： 1.帶換行：h一、p、div、table、form、tr、ul、li 2.不帶換行：span、i、b、a、img、input、button、label、textarea 按單雙標籤分類（也便是有的標籤既是開始也是結束，斜槓能夠省略）： 1.單標籤（主功能）：br、hr、input、img、link 2.雙標籤（主內容）：html、head、body、h一、p、span、div、a、label、button 注意：斜槓/ 表明標籤的結尾，可是單標籤能夠省略，好比<br/>能夠直接寫成<br> 按簡單標籤或組合標籤（複雜標籤）分類： 1.組合：ul>li table>tr>td|th form>input 2.簡單標籤：其餘
4.w3c頁面架構分析
重點是將整個頁面分紅若干個版塊，這些版塊之間有明顯的分區差異，而後再將各個版塊細分紅更小的結構，直至可以細化到具體的標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>頁面架構</title>
</head>
<body>
<!--
html學習目的：(何時用什麼標籤)
最內層：h1~h六、p、a、img、input
外層：ul>li、form、table
架構：div
-->
<!--頁面頭-->
<div class="header">
<!--一級標題-->
<h1>
<a href=""></a>
</h1>
<!--搜索框-->
<form action="">
<input type="text">
<button></button>
</form>
</div>
<!--導航欄-->
<ul class="nav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</ul>
<!--頁面主體-->
<div class="main">
<!--.main-left+.main-center+.main-right-->
<div class="main-left"></div>
<div class="main-center">
<div class="main-box box1">
<h2>領先的 Web 技術教程 - 所有免費</h2>
<p>在 W3School，你能夠找到你所須要的全部的網站建設教程。</p>
<p>從基礎的 HTML 到 CSS，乃至進階的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<p>
<b>從左側的菜單選擇你須要的教程！</b>
</p>
</div>
<div class="main-box box2">
<img src="" alt="">
<div>
<h2></h2>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="main-right"></div>
</div>
<!--頁面尾部-->
<div class="footer"></div>
</body>
</html>
3、CSS
1.css導讀
一、css是什麼：級聯樣式表 （Cascading Style Sheet）。屬於標記語言，沒有邏輯 二、css做用：設置頁面樣式(長什麼樣)與頁面佈局(標籤位置) 三、學習的內容： 3.1 css如何控制html標籤 - 經過給HTML的標籤添加屬性，來創建聯繫 - css選擇器 3.2css能夠控制的樣式(樣式與佈局) 3.3css如何導入到html文件中 四、學習目的：完成頁面的樣式
2.css三種引入方式
1.css是來控制頁面標籤的樣式，可是能夠根據實際狀況書寫在不一樣的位置，放在不一樣位置有不一樣的專業叫法，能夠分爲行間式、內聯式和外聯式三種
2.行間式：css樣式書寫在標籤的style全局屬性中，一條樣式格式爲 style="樣式名: 樣式值 單位; 樣式名: 樣式值 單位;"，能夠同時出現多條樣式
3.內聯式：css樣式書寫在head標籤內的style標籤中，樣式格式爲：
<style>
css選擇器 {
樣式塊
}
</style>
樣式塊由一條條樣式組成
4.外聯式：css樣式的寫法同內聯式，但樣式書寫在css文件中，在html頁面中用link標籤引入css文件（建議在head標籤中引入）
1.行間式：在標籤的style屬性中書寫樣式；優勢是能夠直接書寫；缺點是可讀性較差、沒有複用性
2.內聯式：在head標籤中的style標籤內書寫樣式；優勢是可讀性強，有複用性；缺點是樣式被HTML綁定，不能提供給其餘HTML頁面使用
3.外聯式：在外部css文件中（CSS Stylesheet文件）書寫樣式，在HTML文件中經過link標籤引入css文件；優勢是可讀性強，有複用性，適合團隊開發（文件級的複用性）
# html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>
<!--二、內聯式-->
<!--書寫位置:在head標籤中的style標籤內-->
<!--css語法：css選擇器 { 樣式1; 樣式2; } -->
<!--優缺點: 可讀性強，有複用性，樣式被html頁面綁定了，不能提供給其它html頁面使用-->
<style>
h2 {
color: red;
font-size: 100px;
text-align: center;
}
</style>
<!--三、外聯式-->
<!--書寫位置:在外部css文件中，在html文件中經過link標籤引入css文件-->
<!--css語法：css選擇器 { 樣式1; 樣式2; } -->
<!--優缺點: 可讀性強，有複用性，適合團隊開發(文件級別的複用性)-->
<link rel="stylesheet" href="css/樣式引入.css">
</head>
<body>
<!--一、行間式-->
<!--書寫位置:在標籤的style屬性中書寫樣式-->
<!--優缺點: 可讀性差，沒有複用性，書寫直接-->
<h1 style="color: red; font-size: 100px; text-align: center;">css的引入</h1>
<h1>h1標籤</h1>
<h2>h2標籤</h2>
<h2>h2標籤</h2>
<h3>h3標籤</h3>
<h3>h3標籤</h3>
<h4>h4標籤</h4>
<h4>h4標籤</h4>
</body>
</html>
# 外部css文件中
/* css/樣式引入.css */
h3 {
color: green;
}
h4 {
font-size: 50px;
text-align: center;
}
3.三種css引入方法的優先級
1.內聯與外聯之間沒有優先級區別，因爲HTML屬於解釋型語言，書寫一行執行一行，所以書寫在下方的會覆蓋掉上方的樣式
2.行間式的優先級高於一切
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>\
<!--優先級：
一、內聯與外聯之間沒有優先級區別，因爲html屬於解釋性語言，書寫在下方的會覆蓋上方的樣式
二、行間式的優先級要高於一切
-->
</head>
<body>
<h3>h3標籤</h3>
<h3>h3標籤</h3>
<h4>h4標籤</h4>
<h4 style="font-size: 100px">h4標籤</h4>
</body>
<style>
h4 {
color: #ff7800;
font-size: 20px;
}
</style>
<link rel="stylesheet" href="css/樣式引入.css">
</html>
4.css基礎選擇器
1.css選擇器的本質就是css與HTML兩種語法創建關聯的特定標識符
2.就是在CSS語法中，經過HTML中標籤的某種名字，與HTML具體的標籤創建關聯，從而使寫在對應CSS選擇器後的CSS樣式能控制HTML中關聯的標籤或標籤們
3.而表示標籤名字的方式有多種，每一種名字在CSS語法中都對應着一種特定標識符
4.基礎選擇器有：通配選擇器、標籤選擇器、class選擇器（推薦）、id選擇器
5.優先級：!important > 行間式 > id選擇器> 類選擇器 > 標籤選擇器 > 通配選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css基礎選擇器</title>
<style>
/*優先級：能夠從做用範圍來判斷 - 做用範圍越精確，優先級越高 */
/*一、統配選擇器*/
* {
color: pink;
font-size: 12px;
}
/*二、標籤選擇器*/
h1 {
font-size: 20px;
}
/*三、類選擇器*/
.h {
font-size: 30px!important;
}
.h2 {
font-size: 40px;
}
.h.h2 {
font-size: 50px;
}
/*四、id選擇器*/
#hhh {
font-size: 100px;
}
/*優先級：!important > 行間式 > id > class > 標籤 > 統配 */
</style>
</head>
<body>
<h1 class="h">1標題</h1>
<h2 id="hhh" class="h h2" style="font-size: 12px">2標題</h2>
</body>
</html>
<!-- #id值，而後Tab鍵，能夠直接打印id--> <!-- .類名，而後Tab鍵，能夠直接打印類-->
相關文章
- 1. Python之路【第十六篇】Django基礎
- 2. Python之路【第十六篇】：Django【基礎篇】 Python之路【第十六篇】：Django【基礎篇】
- 3. Web前端基礎(19):jQuery基礎(六)
- 4. 前端——第六天
- 5. 前端：第六天
- 6. 前端第六波
- 7. python基礎篇（六）
- 8. Flask第十六篇 Flask-SQLAlchemy
- 9. web前端學習-第十六天
- 10. 第六十四篇 索引
- 更多相關文章...
- • R 語言基礎 - R 語言教程
- • Scala 基礎語法 - Scala教程
- • RxJava操作符（六）Utility
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章