前端，从入门到入土
前端，從入門到入土
?
寫在前面，更是寫給自己：
???????2020年11月16日，我發(fā)表了我的第一篇博客，主要是為了自己學習，給自己看的一篇博客，希望能堅持下去，記錄我學習前端時的點點滴滴，希望不要成為黑歷史2333，希望我每次打開我的博客看到這段話時，能保持第一次編程的好奇。
???????加油！
????????????????????????????????????????2020年11月16日的我
我的博客：
→→→CSDN博客←←←
學習方法：
網(wǎng)課：BV14J4114768
資料：w3school
HTML
開頭
? “<!DOCTYPE>”：document type，文檔類型聲明，作用是告訴瀏覽器使用哪種HTML版本來顯示網(wǎng)頁
<!DOCTYPE html>? 意思是：這網(wǎng)頁用html5版本來顯示
<html lang="en"> <html lang="zh-CN">? lang = language，雖然en，但你可以輸入中文，中文同理，但是會影響到谷歌生草機
<mate charset="UTF-8"> <mate name="viewport" content="width=device-width, initial-scale=1.0">? charset：字符集，識別和存儲文字，常見的有GB2312（簡體中文）、BIG5（繁體中文）、GBK（簡體和繁體中文）和UTF-8，UTF-8被稱為萬國碼，基本包含了全世界國家需要用到的字符，寫它就完事了
? 以上部分直接在VC中輸入"!"即可自動生成
標簽（很多但很有用）
標題標簽：
<h1>從h1到h6是標題標簽</h1> <h2>我是二級標簽</h2> <h3>等級從1到6字體逐漸變小變細</h3> <h4>只會在一行內(nèi)顯示</h4>?
段落標簽：
<p>p是paragraph的縮寫，可以分成若干的段落</p>在html文件的文本里回車是木大的，瀏覽器會自動忽視回車，兩個及以上的空格會減少到一個空格
?
換行標簽：
就這？<br />爬！效果：
就這？
爬！
?
文本格式化標簽：
<strong>這是加粗</strong> <b>b也是加粗，strong是加粗，雖然這倆看起來都是加粗</b> <em>這是傾斜</em> <i>i也是傾斜，弟位和b差不多</i> <del>這是刪除線</del> <s>s也是刪除線，弟位……</s> <ins>這是下劃線</ins> <u>u也是下劃線，弟位同前面幾個……</u>?
div和span標簽：
<div>這是div標簽，自己獨占一行，后面不能寫別的東西</div> <span>這是span標簽，一行可以放好幾個</span>div=division，意為分割、分區(qū)，是大箱子；span意為跨度、跨距，是小箱子
?
圖像標簽和路徑：
src屬性是圖片路徑，是img標簽的***必須屬性***，它用于指定圖像文件的路徑和文件名
<img src="img.jpg"/>效果：
alt屬性是文本，當圖像無法顯示時用此文本替換圖片
<img src="img1.jpg" alt="←這是我的頭像">注意：并"img1.jpg"這張圖片，所以出錯了；
效果：
圖片：我裂開了
title，屬性是文本，提示用，鼠標放在圖像上時顯示文本
<img src="img.jpg" title="這是我的頭像"/>效果：
因為文字被迫把圖片裁小，導致字體不清楚，湊合看
width和height，屬性為像素，可以設置圖像的大小
<img src="img.jpg" width="114"/>效果：
width(寬)和height(高)只用設置一個，圖片會等比例縮放，如果想兩個都設，可能會發(fā)生如下情況
<img src="img.jpg" height="114" width="514"/>效果：
img.zip(滑稽)
border，屬性為像素，可以設定圖片的邊框
<img src="img.jpg" border="20"/>（vc中border的字體顏色和其他如src或alt的不一樣，因為邊框主要在CSS中使用）
效果：
這相片要是個灰白的就成遺照了
相對路徑：相對于HTML文件的路徑
| 同一級路徑 | 圖像文件位于HTML文件的同一級 如<img src="img.jpg"/> | |
| 下一級路徑 | / | 圖像文件位于HTML文件的下一級 如<img src="images/img.jpg"/> |
| 上一級路徑 | …/ | 圖像文件位于HTML文件的上一級<img src="../image.jpg"/> |
絕對路徑：從盤符開始的路徑，或者是圖片所在的網(wǎng)址
<img src="C:\Users\Beaker\Desktop\practice\img.jpg"/>這個路徑為我電腦內(nèi)頭像所在的位置
?
超鏈接標簽
格式：<a herf="跳轉(zhuǎn)目標" target="目標窗口的彈出方式"> 文本或圖像 </a>
a = anchor，意為：錨
| href | 必須屬性，指定鏈接目標的url地址 |
| target | 指定鏈接頁面的打開方式，其中_self為默認值，_blank為在新窗口中打開方式 |
分類：
外部鏈接：
<a href="http://www.baidu.com" target="_self">百度</a>從當前頁面跳轉(zhuǎn)到百度
內(nèi)部鏈接：
<a href="practice2.html" target="_blank">練習2</a>在新窗口中打開練習2，因為練習2和練習1在同一級路徑下，所以href有名稱就行
空鏈接：沒有確定的鏈接目標時，可以這么寫
<a href="#" 空白頁 </a>下載鏈接：下載鏈接：如果href里面是一個文件，那么會下載這個文件
網(wǎng)頁元素鏈接：在網(wǎng)頁中的各種網(wǎng)頁元素，如文本、圖像、表格、音頻、視頻等都可以添加到超鏈接
<a href="http://www.baidu.com"><img src="img.jpg"/></a>錨點鏈接：點鏈接可以快速定位到頁面中的某個位置
<a href="#live">個人信息</a> <h6 id="live">個人信息介紹</h6>?
注釋標簽
? 以<!--開始，以-->結束，中間放注釋語句
? 快捷鍵Ctrl+/
?
表格標簽
? <table></table>：表格
? <tr></tr>：行（必須放在table內(nèi)）
? <td></td>：單元格（table data，必須放在tr內(nèi)）
? <th></th>：表頭單元格（table head，用法同td），表頭單元格里面的文本會加粗居中顯示
? <thead></thead>：定義表格的頭部，內(nèi)部必須有tr標簽，方便閱讀
? <tbody></tbody>：定義表格的主體，用法同thead
? 示例：
<table><thead><tr><th>姓名</th> <th>性別</th> <th>年齡</th></tr></thead><tbody><tr><td>小明</td> <td>男</td> <td>18</td></tr></tbody> </table>? 表格屬性（不常用，經(jīng)常通過CSS來設置）：
| align | left、center、right | 設置表格相對周圍元素的對齊方式 |
| border | 1或"" | 設置表格有沒有邊框，默認為""，表示沒有 |
| cellpadding | 像素值 | 設置文本和邊框之間有多大的空白，默認1像素 |
| cellspacing | 像素值 | 設置邊框的粗細，默認像素2 |
| width和height | 像素值或百分比 | 規(guī)定表格的寬度和高度 |
? 示例：
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="300">…… </table>? 合并單元格：
| (2,1) | (2,2) | (2,3) |
| (3,1) | (3,2) | (3,3) |
? rowspan：跨行合并，例如(2,1)和(3,1)合并，從最上面的單元格為目標作開始
? colspan：跨列合并，例如(1,2)和(1,3)合并，從最左邊的單元格為目標作開始
? 示例：（以上表為例，將(1,2)和(1,3)合并、(2,1)和(3,1)合并）
<table><tr><td></td><td colspan="2"></td></tr><tr><td colspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr> </table>? 記得刪除被合并的單元格！！！
?
列表標簽
無序列表
使用<ul></ul>定義無序列表，使用<li></li>定義列表項
<ul><li>就這</li><li>不會吧？不會吧？</li><li>別惡心我</li> </ul>效果：
? 就這？
? 不會吧？不會吧？
? 別惡心我
（想去掉前面的加重號請學習CSS（其實不用li，用p就好了））
有序列表
使用<ol>定義有序列表，使用<li>定義列表項，使用方法同無序列表
效果：
就這？
不會吧？不會吧？
別惡心我
自定義列表
使用<dl>定義列表，使用<dt>定義項目，使用<dd>定義項目中的小項目
<dl><dt>聯(lián)系方式</dt><dd>QQ</dd><dd>微信</dd><dd>郵箱</dd> </dl>效果：
聯(lián)系方式
? 微信
? 郵箱
（別問前面怎么不要空格，問就是CSS）
表格主要用于展示數(shù)據(jù)，而列表重要的是布局
?
表單標簽
? 在HTML中，一個完整的表單通常由表單域、表單控件（也稱表單元素）和提示信息組成
表單域
? 表單域是一個包含表單元素的區(qū)域
? 在HTML中， <form>標簽用于 定義表單域，以實現(xiàn)用戶信息的收集和傳遞
? <form>會把它范圍內(nèi)的表單元素信息提交給服務器
<form action="url地址" method="提交方式" name="表單域名稱">各種表單元素控件 </form>? 常用屬性：
| action | url地址 | 用于指定接受并處理表單數(shù)據(jù)的服務器程序的url地址 |
| method | get/post | 用于設置表單數(shù)據(jù)的提交方式，其取值為get或post |
| name | 名稱 | 用于指定表單元素的名稱，以區(qū)分同一個頁面中的多個表單域 |
表單元素
input標簽
? <input>標簽用于收集用戶信息
? 在<input>標簽中，包含一個***type***屬性，更具不同的type屬性值，輸入字段擁有很多種形式（可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等）
<input type="屬性值" />? type屬性的屬性值極其描述如下：
| button | 定義可點擊按鈕（多數(shù)情況下，用于通過JS啟動腳本） |
| checkbox | 定義復選框 |
| file | 定義輸入字段和“瀏覽”按鈕，供文件上傳 |
| hidden | 定義隱藏的輸入字段 |
| image | 定義圖像形式的提交按鈕 |
| password | 定義密碼字段，該字段中的字符被掩碼 |
| radio | 定義單選按鈕 |
| reset | 定義重置按鈕，重置按鈕會清楚表單中的所有數(shù)據(jù) |
| submit | 定義提交按鈕，提交按鈕會把表單數(shù)據(jù)發(fā)送到服務器 |
| text | 定義單行的輸入字段，用戶可在其中輸入文本，默認寬度為20個字符 |
? 除type屬性外，<input>標簽還有其他很多屬性，其常用屬性如下：
| name | 由用戶自定義 | 定義input元素的名稱 |
| value | 由用戶自定義 | 規(guī)定input元素的值 |
| checked | checked | 規(guī)定input元素首次加載時應該被選中 |
| maxlength | 正整數(shù) | 規(guī)定輸入字段中的字符的最大長度 |
? <label>標簽為input元素定義標注
? <label>標簽用于綁定一個表單元素，當點擊<label>標簽內(nèi)的文本時，瀏覽器就會自動將光標轉(zhuǎn)到或者選擇到對應的表單元素上，用來增加用戶體驗
select標簽
? 在頁面中，如果有多個選項讓用戶選擇，并且想要節(jié)約頁面空間時，我們可以使用<select>標簽控件定義下拉列表
? 內(nèi)部的每個選項均放在<option>標簽內(nèi)，且至少有一個<option>標簽
? 可用selected來規(guī)定select元素首次加載時的默認選中項
textarea標簽
? 可以輸入較多的文本，可以輸入多行文本
? cols=“每行中的字符數(shù)” row=“顯示的行數(shù)”（實際應用中為什么不用神奇的CSS呢？）
? 表單標簽整活：
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML練習</title> </head> <body><form>用戶名：<input type="text" value="請輸入用戶名" maxlength="6" name="name"> <br>密碼：<input type="password" name="password"><br><input type="radio" name="sex" checked="checked" id="man"><label for="sex">男</label><input type="radio" name="sex" id="woman"><label for="woman">女</label><br>愛好：<input type="checkbox" name="hobby" checked="checked" id="eat"><label for="eat">吃飯</label><input type="checkbox" name="hobby" id="sleep"><label for="sleep">睡覺</label><input type="checkbox" name="hobby" id="fight"><label for="fight">打豆豆</label><br>籍貫：<select><option selected="selected">（請選擇出生地）</option><option>地球</option><option>月球</option><option>火星</option><option>M78星云</option></select><br>上傳照片：<input type="file"><br>愿望：<textarea cols="30" rows="5">你不會真敢想吧？</textarea><br><input type="button" value="獲取驗證碼"><br><input type="submit" value="點擊注冊"><br><input type="reset" value="重新來過"></form> </body> </html>?
特殊字符
? 一些字符不方便在HTML頁面中使用，此時可以使用特殊字符來替代
| 空格 | | |
| < | 小于號 | < |
| > | 大于號 | > |
| & | 和符 | & |
| ￥ | 人民幣 | ¥ |
| ? | 版權 | © |
| ? | 注冊商標 | ® |
| ° | 度 | ° |
| ± | 正負號 | ± |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
| 2 | 平方 | ² |
| 3 | 立方 | ³ |
CSS
簡介
? CSS，是層疊樣式表(Cascading Style Sheets)的簡稱，如果說HTML是前端中的名詞，那么CSS就是前端中的形容詞，主要用于設置HTML頁面中的文本內(nèi)容、圖片的外形以及版面的布局和外觀顯示樣式
? 簡而言之，做美容的
? CSS最大的優(yōu)勢是讓HTML專注做結構，樣式交給CSS，即結構(HTML)和樣式(CSS)相分離
? 格式：選擇器 {屬性:參數(shù);}
? 舉個栗子：
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS實驗</title><style>p {color: aqua;font-size: 36px;}</style> </head> <body><p>就這？</p> </body> </html>? 注意：CSS內(nèi)的注釋為/*注釋文本*/，而非HTML的<!--注釋文本-->
基礎選擇器
? 栗子：
<div>我是div1</div> <div>我是div2</div> <p>我是p1 </p> <ul><li>我是li1</li> </ul> <ol><li>我是li2</li> </ol>? 如何把div里面的文字改成紅色？只想改第一個div里面的文字呢？把ul里面的li文字改為紅色呢？
? 為了把不同的標簽選出來，用選擇器來解決
標簽選擇器
? 標簽選擇器（元素選擇器）是指用HTML標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統(tǒng)一的CSS樣式
?
類選擇器
? 想要差異化選擇不同的標簽，單獨選一個或者某幾個標簽，可以使用類選擇器
? 語法：
.類名{屬性1：屬性值1; }? 栗子：
<style>.red{color:red;} </style> …… <div class="red">文本</div>? class內(nèi)可以寫多個類名，中間用空格隔開，例如
<style>.red {color:red;}.font35 {font-size:35px;} </style> …… <p class="red font35">文本</p>?
id選擇器
? id選擇器可與為標有特定id的HTML元素指定特定的樣式
? HTML元素以id屬性來設置id選擇器，CSS中id選擇器以"#"來定義
? 語法：
<style>#id {屬性1:屬性值1;} </style>? 栗子：
<style>#red {color:red;} </style> …… <div id="pink">文本 </div>? 類選擇器和id選擇器的區(qū)別：
? 1. ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次
? 2. **可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。**我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）
?
通配符選擇器
? 在CSS中，通配符選擇器使用 “*” 定義，它表示選取頁面中所有元素（標簽）
? 語法：
<style>* {屬性1:屬性值1;} </style>? 栗子：
<style>* {color:red;} </style> …… <div>文本1</div> <p>文本2</p>總結
- 上一篇： 50 Tomcat 集群部署
- 下一篇： 前端开发利器--PxCook（像素大厨）