目標：Front-end Engineer → Full-stack Engineer
瀏覽器及其內核
HTML
開發工具
sublime
輕量級的ide
1.使用技巧
h${}*6
vsCode
寫大專案時使用
1.使用技巧
SEO-搜索引擎優化
<html lang= "en">
<head>
<meta charset="utf-8">
<!-- charset:編碼字符集-->
<title>我是title</title>
<meta content="服裝" name="keywords">
<meta content="這是一件你穿了就不想脫的衣服" name="description">
</head>
<body>
<!-- 告訴搜索引擎爬蟲，我們的網站是關于什么內容的 -->
<!-- SEO -->
</body>
</html>
路徑
1. 網上url
<img src="https://xxxxxx.jpg" style="width:200px;">
2.本地的絕對路徑
D:/a/b/test.html
D:/a/b/c/123.jpg
<img src="D:/a/b/c/123.jpg>"
3. 本地的相對路徑
…/來表示上一級目錄
-
D:/a/b/test.html
D:/a/b/123.jpg
<img src="123.jpg>" -
D:/a/b/test.html
D:/a/c/123.jpg
<img src="../c/123.jpg>"
標簽
? 代表h5新標簽
| 標簽 | 描述 |
|---|---|
<!--...--> | 定義注釋， |
<！DOCTYPE> | 定義檔案型別， |
💎<a> </a> | 1. 超鏈接 2. 定義錨 href="#id1" target="_blank"連接有id的元素 3. 打電話 href="tel:12345" 4. 協議限定符 href="javascript:while(1){alert('1')}" |
<abbr> </abbr> | 定義縮寫， |
<acronym> </acronym> | 定義只取首字母的縮寫， |
<address> </address> | 定義檔案作者或擁有者的聯系資訊， |
<applet> </applet> | **不贊成使用，**定義嵌入的 applet， |
<area /> | 定義影像映射內部的區域，嵌套在<map>中 |
<article> </article> ? | 定義文章， |
<aside> </aside> ? | 定義頁面內容之外的內容， |
<audio> </audio> ? | 定義聲音內容， |
<b> </b> | 定義粗體字， |
<base /> | 定義頁面中所有鏈接的默認地址或默認目標， |
<basefont /> | **不贊成使用，**定義頁面中文本的默認字體、顏色或尺寸， |
<bdi> </bdi> ? | 定義文本的文本方向，使其脫離其周圍文本的方向設定， |
<bdo> </bdo> | 定義文字方向， |
<big> </big> | 定義大號文本， |
<blockquote> </blockquote> | 定義長的參考， |
<body> </body> | 定義檔案的主體， |
<br /> | 定義簡單的折行， |
<button> </button> | 定義按鈕 (push button)， |
<canvas> </canvas> ? | 定義圖形， |
<caption> </caption> | 定義表格標題， |
<center> </center> | **不贊成使用，**定義居中文本， |
<cite> </cite> | 定義參考(citation)， |
<code> </code> | 定義計算機代碼文本， |
<col /> | 定義表格中一個或多個列的屬性值， |
<colgroup> </colgroup> | 定義表格中供格式化的列組， |
<command> </command> ? | 定義命令按鈕， |
<datalist> </datalist> ? | 定義下拉串列， |
<dd> </dd> | 定義定義串列中專案的描述，來解釋<dt> |
<del> </del> | 定義被洗掉文本， |
<details> </details> ? | 定義元素的細節， |
<dir> </dir> | **不贊成使用，**定義目錄串列， |
<div> </div> | 定義檔案中的節， |
<dfn> </dfn> | 定義定義專案， |
<dialog> </dialog> ? | 定義對話框或視窗， |
<dl> </dl> | 定義無序定義串列， |
<dt> </dt> | 定義定義串列中的專案， |
<em> </em> | 定義強調文本， |
<embed /> ? | 定義外部互動內容或插件， |
<fieldset> </fieldset> | 定義圍繞表單中元素的邊框， |
<figcaption> </figcaption> ? | 定義<figure>的標題， |
<figure> </figure> ? | 定義媒介內容的分組，以及它們的標題， |
<font> </font> | **不贊成使用，**定義文字的字體、尺寸和顏色， |
<footer> </footer> ? | 定義 section 或 page 的頁腳， |
💎<form> </form> | 定義供用戶輸入的 HTML 表單，可以發送資料 method="get/post" action="地址" 里面的是<input> |
<frame /> | 定義框架集的視窗或框架， |
<frameset> </frameset> | 定義框架集， |
<h1> </h1>… | 定義 HTML 標題， |
<head> </head> | 定義關于檔案的資訊， |
<header> </header> | 定義 section 或 page 的頁眉， |
<hr /> | 定義水平線， |
<html> </html> | 定義 HTML 檔案， |
<i> </i> | 定義斜體字， |
<iframe> </iframe> | 定義行內框架， |
💎<img /> | 定義影像，src="" style="" alt="" title="" |
💎<input /> | 定義輸入控制元件，type="text/password/submit/radio/checkbox" value="提交" name="" 發送資料radio單選框控制name一致實作多組單選 onfocus="if(this.value=='請輸入用戶名'){this.value='';this.style.color='#fff'}"onblur="if(this.value==''){this.value='請輸入用戶名';this.style.color='#999'}"checked="checked" |
<ins> </ins> | 定義被插入文本， |
<isindex /> | **不贊成使用，**定義與檔案相關的可搜索索引， |
<kbd> </kbd> | 定義鍵盤文本， |
<keygen /> ? | 定義生成密鑰， |
<label> </label> | 定義 input 元素的標注， |
<legend> </legend> | 定義 fieldset 元素的標題， |
💎<li> </li> | 定義有序ol無序ul串列的專案， |
<link /> | 定義檔案與外部資源的關系， |
<map> </map> | 定義影像映射， |
<mark> <mark> ? | 定義有記號的文本， |
<menu> </menu> | 定義命令的串列或選單， |
<menuitem> </menuitem> | 定義用戶可以從彈出選單呼叫的命令/選單專案， |
<meta> | 定義關于 HTML 檔案的元資訊， |
<meter> </meter> ? | 定義預定義范圍內的度量， |
<nav> </nav> ? | 定義導航鏈接， |
<noframes> </noframes> | 定義針對不支持框架的用戶的替代內容， |
<noscript> </noscript> | 定義針對不支持客戶端腳本的用戶的替代內容， |
<object> </object> | 定義內嵌物件， |
<ol> </ol> | 定義有序串列，type=“1”(a/A/i/I) reversed=“reversed” start=“2” |
<optgroup> </optgroup> | 定義選擇串列中相關選項的組合， |
💎<option> </option> | 定義選擇串列中的選項， |
<output> </output> ? | 定義輸出的一些型別， |
💎<p> </p> | 定義段落， |
<param /> | 定義物件的引數， |
<pre> </pre> | 定義預格式文本， |
<progress> </progress> ? | 定義任何型別的任務的進度， |
<q> </q> | 定義短的參考， |
<rp> </rp> ? | 定義若瀏覽器不支持 <ruby>顯示的內容， |
<rt> </rt> | 定義 ruby 注釋的解釋， |
<ruby> </ruby> | 定義 ruby 注釋， |
<s> </s> | **不贊成使用，**定義加洗掉線的文本， |
<samp> </samp> | 定義計算機代碼樣本， |
<script> </script> | 定義客戶端腳本， |
<section> </section> ? | 定義 section， |
💎<select> </select> | 定義選擇串列（下拉串列），和<option>組合在一起,<select name= "province"> 而option里的字默認是value |
<small> </small> | 定義小號文本， |
<source> ? | 定義媒介源， |
<span> </span> | 定義檔案中的節， |
<strike> </strike> | **不贊成使用，**定義加洗掉線文本， |
<strong> </strong> | 定義強調文本， |
<style> </style> | 定義檔案的樣式資訊， |
<sub> </sub> | 定義下標文本， |
<summary> </summary> ? | 為<details>定義可見的標題， |
<sup> </sup> | 定義上標文本， |
<table> </table> | 定義表格， |
<tbody> </tbody> | 定義表格中的主體內容， |
<td> </td> | 定義表格中的單元，在<tr>里 |
<textarea> </textarea> | 定義多行的文本輸入控制元件， |
<tfoot> </tfoot> | 定義表格中的表注內容（腳注），包裹住<tr> |
<th> </th> | 定義表格中的表頭單元格，在<tr>里 |
<thead> </thead> | 定義表格中的表頭內容，包裹住<tr> |
<time> </time> ? | 定義日期/時間， |
<title> </title> | 定義檔案的標題， |
<tr> </tr> | 定義表格中的行， |
<track> ? | 定義用在媒體播放器中的文本軌道， |
<tt> </tt> | 定義打字機文本， |
<u> </u> | **不贊成使用，**定義下劃線文本， |
💎<ul> </ul> | 定義無序串列，type=“disc”(square/circle) |
<var> </var> | 定義文本的變數部分， |
<video> </video> ? | 定義視頻， |
<wbr> ? | 定義可能的換行符， |
<xmp> | **不贊成使用，**定義預格式文本， |
特殊標簽
空格
<
小于號 less than
>
大于號 great than
發送資料
資料名
資料值
發送資料成功：
網頁導航欄顯示：....test.html?username= sunny&password=123
標簽的歸類
1. 行級元素 inline
內容決定元素所占位置；
不可以通過css改變寬高
span strong em a del
凡是有inline的，都會帶有文字特性，會以4px分隔
2. 塊級元素 block
獨占一行；
可以通過css改變寬高
div p ul li ol form address
3.行級塊元素|行內塊元素 inline-block
img
凡是有inline的，都會帶有文字特性，會以4px分隔
CSS
引入方式
1. 行間樣式
<div style="width:100px;"> </div>
2. 頁面級css
<style type="text/css"> </style>
3. 外部css檔案
<link rel="stylesheet" type="text/css" href="地址">
頁面加載
同步異步問題
打開一個網頁加載html檔案時，會異步加載css檔案（異步是同時的意思）
選擇器
1. id選擇器
一對一對應
<div id="only"> </div>
#only {}
2. class選擇器
多對多對應
<div class="demo demo1"> </div>
.demo {}
3. 標簽選擇器
<div></div>
div {}
4. 通配符選擇器
* {}
5. 屬性選擇器
[class] {}
[class="demo"] {}
6. 父子選擇器/派生選擇器
中間以空格隔開 是包括所有的子孫
選擇程序是自右向左的程序
7. 直接子元素選擇器
div > em {}
8. 并列選擇器
<div> <\div> <div class="demo"> </div> <p class="demo"> </p>
div.demo{}
9. 分組選擇器
分開的組，共用一個代碼塊 公司里喜歡各組單獨成行
em, strong, span {}
10. 偽類選擇器
a:hover {} [href]:hover {}
權重值
單個的大小比較
!important–>行間樣式–>id–>class | 屬性 | 偽類–>標簽選擇器–>通配符
css權重
Infinity<Infinity+1
| 元素 | 權重值(進制256) |
|---|---|
| !important | Infinity |
| 行間樣式 | 1 0 0 0 |
| id | 1 0 0 |
| class|屬性|偽類 | 1 0 |
| 標簽|偽元素 | 1 |
| 通配符 | 0 |
屬性名：屬性值；
善用字典查詢
注釋
/*我是注釋,只有塊注釋*/
字體相關屬性
font-size: 12px;
設定字體大小（字體的高） 瀏覽器默認是16px，常用是12，14px
font-weight: bold;
lighter normal|400 bold|700 bolder (數字表示100-900)，有沒有變得更粗取決于改字體的字體包
font-style: italic;
normal：默認值，瀏覽器會顯示標準的字體樣式，italic: 斜體
font-family: arial;
喬布斯發明的字體：arial
color: #ffffff;
- low式：pink; (transparent是透明色)
- 顏色代碼：#ffffff; 可簡化 #fff;
- 顏色函式: rgb(255,255,255);
text-align: left;
center: 居中顯示
line-height: 12px;
單行文本所占高度 line-height = height:單行文本垂直居中
1.2em: font-size*1.2
text-indent: 2em;
首行縮進2個單位
1em= 1* font-size
text-decoration: line-through;
none:這個元素的樣式清除
underline; overline
cursor:pointer;
pointer： 滑鼠在上面變成小手
help：變成問號
copy…有很多
opacity:0.5;
不透明度 (1為默認代表完全不透明)
盒子相關屬性
width: 100px;
內部盒子的寬
height: 100px;
內部盒子的高
border: 1px solid black;
1: 代表border-width 粗細
2: 代表border-style 樣式：
- none：沒有邊框即忽略所有邊框的寬度（默認值）
- solid：邊框為單實線(最為常用的)
- dashed：邊框為條虛線
- dotted：邊框為點虛線
- double：邊框為雙實線
3: 代表border-color 顏色
border四個邊還可以拆分為border-left,border-right,border-top,border-bottom
還可以：border-left-color: red;
border是在width height之外的
border-radius: 10px;
盒子的圓角
border-radius: 50% 是一個正圓
display: block;
inline 行級元素
block 塊級元素
inline-block 行內塊元素
margin: padding: border-width:
padding: 100px 150px 100px; 上 左右 下
padding: 上下 左右
padding-top|left|right|bottom
層模型相關屬性（定位 浮動）
position: absolute;
絕對定位
left, right, top, bottom都是對于瀏覽器的哪邊的邊框的距離
- 脫離原來位置進行定位（每一個absolute都是一個新的層）
- 子絕父相
- 最近的有相對定位的父級進行定位，如果沒有相對于檔案進行定位
position: relative;
- 保留原來位置進行定位
- 相對于原來自己的位置進行定位
position: fixed;
廣告定位
z-index: 1;
z軸觸發點是螢屏，箭頭向人延伸，值越大 層越在上面
overflow: hidden;
溢位部分隱藏
float: left/right;
無論標簽的屬性如何(block,inline,inline-block)，都可以讓其站隊(按照父盒子的大小進行自動換行，按次序分配位置)，并且也可以修改各個的margin等值
- 浮動元素產生了浮動流
- 所有產生了浮動流的元素，塊級元素看不到他們
- 產生了bfc的元素和文本類屬性(帶有inline屬性包括inline-block)的元素以及文本和帶有浮動流的元素 都能看到浮動元素
- ===>(比如“123”的文字可以在一個float元素的右面，但是一個div卻和該float元素重疊)
一些布局
相對于螢屏的居中：
div { position: fixed; left: 50%; top: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; }
兩欄布局
<div class="right"></div>
<div class="left"></div>要先寫right,不然沒有規定.right的top值會被上面的div頂下來.right { position: absolute; right: 0; width: 100px; height: 100px; background-color: #fcc; } .left { margin-right: 100px; height: 100px; background-color: #123; }
CSS語言BUG
1. margin塌陷
父子嵌套 垂直方向的margin會取最大值
解決方法:
- 父盒子觸發bfc (block format context) = 特定的盒子設定另一套語法規則【只加了css即可】
- 為父元素定義1像素的上邊框或上內邊距，(不推薦)
如何觸發一個盒子的bfc(觸發后該盒子變成BFC,改變了渲染規則):
- position: absolute;
- display: inline-block;
- float: left/right;
- overflow: hidden;
2. margin合并
兄弟上下，垂直margin會合并，取其中的最大值
解決方法：
- 新建一個盒子，包裹住(下面的)兄弟盒子，新盒子觸發BFC【必須要加一層html再加css】(在開發里面不能隨意改變html的結構，所以是堅決不允許這種方法的)
- 不解決，盡量避免（比如上面的盒子的margin達到目標值）
標簽的初始化
a
a {
text-decoration: none;
color: #424242;
}
em
em {
font-style: normal;
color: #c00;
}
ul
ul {
list-style: none;
padding: 0;
margin: 0;
}
通配符
一般來說瀏覽器的body會有默認的8像素的margin
* {
padding: 0;
margin: 0;
}
開發經驗
先寫css后面寫html 先寫功能后選配置
eg:
.red { n background-color: red; } .green { background-color: green; } .size1 { width: 100px; height: 100px; } .size2 { width: 200px; height: 200px; }之后寫html就可以根據功能拿相應的class
盒子模型
內 --------------------------------------------------------------------------->外
盒子內容（藍）----->內邊距（綠）------>盒子壁（黃）----->盒子外面的間距（橙）
width+height--------->padding------------->border--------------->margin
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/257480.html
標籤：其他
上一篇：寒假學習——ES6（4）
下一篇：Vue基礎(一)