前端學習記錄

来源:https://www.cnblogs.com/ouyangkai/archive/2020/06/05/13050256.html
-Advertisement-
Play Games

前端開發 HTML標簽 HTML文檔結構 head <head> <!-- 漢字編碼 --> <meta charset="UTF-8"> <!-- 設置一個網站的搜索關鍵字 --> <meta name="Keywords" content=""/> <!-- 網站描述內容 --> <meta n ...


前端開發

HTML標簽

HTML文檔結構

<head>
	<!-- 漢字編碼 -->
  <meta charset="UTF-8">
	<!-- 設置一個網站的搜索關鍵字 -->
	<meta name="Keywords" content=""/>
	<!-- 網站描述內容 -->
	<meta name="Description" content=""/>
		<!-- 視口設定 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 標題 -->
  <title>少年的博客</title>
	
<!-- 載入頁面圖標 -->
  <link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon">
	<!-- 載入外部css樣式 -->
  <link rel="stylesheet" href="css/base.css">
</head>

body

<!-- 主體內容 -->
<body>
        <h3>Junior</h3>
</body>

style

<!-- css樣式 -->
<style></style>

script

<!-- js -->
<script type="text/javascript">
	// 腳本代碼塊
</script>

格式

標簽 描述
acronym 定義只取首字母的縮寫。
ababr 定義縮寫。
address 定義文檔作者或擁有者的聯繫信息。
b 定義粗體文本。
bdi 定義文本的文本方向,使其脫離其周圍文本的方向設置。
bdo 定義文字方向。
big 定義大號文本。
blockquote 定義長的引用。
center 不贊成使用。定義居中文本。
cite 定義引用(citation)。
code 定義電腦代碼文本。
del 定義被刪除文本。
dfn 定義定義項目。
em 定義強調文本。
font 不贊成使用。定義文本的字體、尺寸和顏色
i 定義斜體文本。
ins 定義被插入文本。
kbd 定義鍵盤文本。
mark 定義有記號的文本。
meter 定義預定義範圍內的度量。
pre 定義預格式文本。
progress 定義任何類型的任務的進度。
q 定義短的引用。
rp 定義若瀏覽器不支持 ruby 元素顯示的內容。
rt 定義 ruby 註釋的解釋。
ruby 定義 ruby 註釋。
s 不贊成使用。定義加刪除線的文本。
samp 定義電腦代碼樣本。
small 定義小號文本。
strike 不贊成使用。定義加刪除線文本。
strong 定義語氣更為強烈的強調文本。
sup 定義上標文本。
sub 定義下標文本。
time 定義日期/時間。
tt 定義打字機文本。
u 不贊成使用。定義下劃線文本。
var 定義文本的變數部分。
wbr 定義視頻。

鏈接

標簽 描述
a 定義錨。
link 定義文檔與外部資源的關係。
nav 定義導航鏈接。

音頻/視頻

標簽 描述
audio 定義聲音內容。
source 定義媒介源。
track 定義用在媒體播放器中的文本軌道。
video 定義視頻。

圖像

標簽 描述
img 定義圖像。
map 定義圖像映射。
area 定義圖像地圖內部的區域。
canvas 定義圖形。
figcaption 定義 figure 元素的標題。
figure 定義媒介內容的分組,以及它們的標題。

標簽屬性

通用屬性:

id: 取唯一名稱

class: 給標簽取類名

style: 行內樣式

title: 標題

轉義符

實體字元 編譯後的字元
&lt; 小於號 <
&gt; 大於號 >
&amp; 於號 &
&nbsp; 空格
&copy; 版權
&times; 乘號
&divide; 除號

標簽元素

塊級元素

塊級元素(相當執行了 display:block)

1.獨占一行 寬度和高度是可控的,如沒有設置寬度將預設鋪滿

2.其行內可以包含塊級和行級元素

行級元素

行級元素(相當執行了 display:inline)

1.不會獨占一行,與相鄰的行級元素占同一行

2.寬高是不可控的

3.其行內只有包含行級元素

Emmet語法

2-1. 後代:>

nav>ul>li
<nav>
    <ul>
        <li></li>
    </ul>
</nav>

2-2. 兄弟:+

div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

2-3. 上級:^

div+div>p>span+em^bq
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
div+div>p>span+em^^bq
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

2-4. 分組:()

(1)縮寫↓

div>(header>ul>li*2>a)+footer>p
<div>
    <header>
        <ul>
            <li><a href=""></a><li>
            <li><a href=""></a><li>
        </ul>
    </header>
    </footer>
        <p></p>
    </footer>
</div>

(2)縮寫↓

(div>dl>(dt+dd)*3)+footer>p
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

2-5. 乘法:*

縮寫↓

ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
<ul>

2-6.自增符號:$

1)縮寫↓

ul>li.item$*5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
<ul>

(2)縮寫↓

h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

(3)縮寫↓

ul>li.item$$$*5
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

(4)縮寫↓

ul>li.item$@-*5
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

(5)縮寫↓

ul>li.item$@3*5
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

2-7.ID和類屬性

(1)縮寫↓

#header
<div id="header"></div>

(2)縮寫↓

.title
<div class="title"></div>

(3)縮寫↓

form#search.wide
<form id="search" class="wide"></form>		

(4)縮寫↓

p.class1.class2.class3
<p class="class1 class2 class3"></p>

2-8.自定義屬性

(1)縮寫↓

p[title="Hello world"]
<p title="Hello world"></p>

(2)縮寫↓

td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>

(3)縮寫↓

[a='value1' b="value2"]
<div a="value1" b="value2"></div>

2-9.文本:{}

(1)縮寫↓

a{Click me}
<a href="">Click me</a>

(2)縮寫↓

p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>

2-10.隱式標簽

(1)縮寫↓

.class
<div class="class"></div>

(2)縮寫↓

em>.class
<em><span class="class"></span></em>

(3)縮寫↓

ul>.class
<ul>
    <li class="class"></li>
</ul>

(4)縮寫↓

table>.row>.col
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

HTML標簽語法

3-1. 所有未知的縮寫都會轉換成標簽

縮寫↓

hangge
<hangge></hangge>

3-2.基本html標簽

!
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
   
</body>
</html>
a
<a href=""></a>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
link:css
<link rel="stylesheet" href="style.css" />
link:print
<link rel="stylesheet" href="print.css" media="print" />
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
link:touch
<link rel="apple-touch-icon" href="favicon.png" />
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />
script:src
<script src=""></script>
iframe
<iframe src="" frameborder="0"></iframe>
form
<form action=""></form>
form:get
<form action="" method="get"></form>
inp
<input type="text" name="" id="" />
input:hidden
<input type="hidden" name="" />
input:h 
<input type="hidden" name="" />
input:text, input:t 
<input type="text" name="" id="" />
input:search
<input type="search" name="" id="" />
input:email 
<input type="email" name="" id="" />
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>

CSS屬性

寬高

 height: 310px; 
 width: 65%;

動畫簡寫屬性

animation 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫開始或結束狀態

animation: name duration timing-function delay iteration-count direction fill-mode;

背景 background

    /* 背景圖片 */
background: no-repeat center/100% url("../img/index.png");
	/* 背景顏色 */
  background-color: #ffffff;

浮動 float

float: left;

字體 font

/* 字體顏色 */
  color: #888888;
/* 字體粗細 */
  font-weight: 400;
/* 字體大小 */
  font-size: 14px;
/* 文字居中 */
  text-align: center;
/* 字體行內居中 */
  line-height: 45px;

盒子邊距 margin | padding

/* 外邊距 */
  margin: 60px 0 0 -40px;
/* 居中顯示 */
  margin: 0 auto;
/* 向下10px */
  margin-bottom: 10px;
/* 外邊距 */
  padding: 15px 0 10px 12px;

透明

 opacity: 0.9;

邊框 border

/* 邊框寬度1px 樣式 顏色 */
  border: 1px solid #edeef0;
/* 邊框邊角弧度 */
  border-radius: 5px;
/* 邊框下劃線 */
  border-bottom: 1px solid #edeef0;
/* 樣式 1px */
  border-style: ridge;
  border-width: 1px;

2D動畫

動畫效果

 /* 動畫效果 */
  transition: all 5s;

動畫觸發

:hover {
  /* 放大2倍 */
  /* transform: scale(2, 2); */
  /* 旋轉 */
  transform: rotate(720deg);
  /* 上移 */
  transform: translateY(-3px);
}

3D動畫

3D轉換 translate3d

transform: translate3d(0,100px,100px);

透視 perspective

/* 透視寫在被觀察元素的父盒子上面 */
perspective: 500px;

旋轉 rotate3d

  transform: rotateX(45deg);
  transform: rotateY();
  transform: rotateZ();
  /* 自定義 */
  transform: rotate3d(x,y,z,deg);

3d呈現 transform-style

  /* 讓子元素保持3d立體空間環境 */
transform-style: preserve-3d;

響應式佈局

開發實現

媒體查詢

百分比佈局

rem佈局

視口單位佈局(vw/vh)

設計步驟

設置meta標簽

媒體查詢設置樣式

設置多種視圖寬度

css 樣式簡寫

4-2. 常用樣式簡寫

pos

position:relative;

t

top:;

pos:s

position:static;

pos:a

position:absolute;

pos:r

position:relative;

pos:f

position:fixed;

t

top:;

t:a

right:auto;

c

Bootstrap

container-fluid

.container-fluid 則支持全屏的流式佈局,如下使用:

<div class="container-fluid">
  ...
</div>

自定義適應寬度

<style type="text/css">
			/* 超小屏幕 */
			@media (max-width:575px) {
				.container-fluid{
					width: 100%;
					background-color: #002752;
				}
			}	/* 小屏幕 */
			@media (min-width:576px) and (max-width:767px) {
				.container-fluid{
					background-color: #ff5500;
					width: 540px;
				}
				
			}
			/* 中屏幕 */
			@media (min-width:768px) and (max-width:991px) {
				.container-fluid{
					background-color: #5555ff;
					width: 720px;
				}
			}	/* 大屏幕 */
			@media (min-width:992px) and (max-width:1199px) {
				.container-fluid{
					background-color: #55ff00;
					width: 960px;
				}
			}	/* 中超大屏幕 */
			@media (min-width:1200px) {
				.container-fluid{
					background-color: #aa5500;
					width: 1140px;
				}
			}		
		</style>

響應式 meta 標簽

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

響應式外部容器

它允許在指定的屏幕下定義 100%寬

.container-sm 則只在sm屏幕下顯示100%寬,其它斷點包括.container-md.container-lg.containerxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

分割線

 <div class="dropdown-divider"></div>

基於FlexBox佈局

一個簡明的Bootstrap 4框架(只區分pc與手機並基於FlexBox佈局):

<div class="container">
<div class="row">
<div class="col-sm">

</div>
</div>
</div>

Emment語法:

div.container>div.row>div.col-sm

全柵格定義框架

<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">

</div>

<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">

</div>
</div>
</div>

Emment語法:

div.container>div.row>div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12+div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12

常用的屬性

隱藏

hidden

清除邊界

clearfix

指定屏幕下顯示

visible-xs

center-block

不顯示首碼點

list-unstyled

列偏移:

.offset-md-*

文本對齊

Left aligned text.

Center aligned text.

Right aligned text.

text-capitalize 利用
text-center 居中
text-danger 加紅危險
text-hide 隱藏文字
text-info 信息
text-justify 字體對齊(齊行——
text-left 文字左對齊
text-lowercase 小寫(僅英文)
text-muted 靜音
text-nowrap 不換行
text-primary 原生效果
text-right 文字居右
text-success 成功
text-uppercase 文字大寫(僅英文)
text-warning 警告紅色

文字樣式

柔和灰(text-muted)

、主要藍(text-primary)

、成功綠(text-secondary)

、成功紅(text-success)

、危險紅(text-danger)

、警告黃(text-warning)

、危息綠(text-info)

、黑白對比(text-dark)

背景是樣式

主要藍(bg-primary)

、成功綠(bg-secondary)

、成功紅(bg-success)

、危險紅(bg-danger)

、警告黃(bg-warning)

、危息綠(bg-info)

、黑白對比(bg-dark)

BootstrapVue

安裝

# With npm
npm install vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap

程式入口點註BootstrapVue:

// app.js
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

引入 Bootstrap 和BootstrapVue的css

// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

行列

<b-container class="bv-example-row">
  <b-row cols="1" cols-sm="2" cols-md="4" cols-lg="6">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

關鍵字

<b-row>  <b-col>  <b-container>  <b-form-row>
<b-col sm="auto"> 實例的寬度將自動為25%。

列屬性 sm, md, lg, xl表示在不同斷點處,每行可能使用12個列中要使用的列數。因此,如果在斷點sm處需要三個等寬列, 可以使用<b-col sm="4">。特殊值auto可用於占用行中剩餘的可用列空間。

刪除邊距

通過在<b-row>上設置no-gutters屬性來刪除 <b-row> 的邊距和<b-col>padding

JavaScript

輸入輸出語句

alert(msg) 瀏覽器彈出警示框

console.log(msg) 瀏覽器列印輸出信息

prompt(info) 瀏覽器彈出輸入框

vue

數據對象

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

文本插值

{{ }}

v-once 執行一次性地插值

<span v-once>這個將不會改變: {{ msg }}</span>

v-html

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

指令

v-if

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 送福利啦! 歷經兩個月發展,本人終於回歸前端崗位!裸辭的艱辛已然消逝在這裡特地講我自己這兩個月整理的相關面試題分享給大家,免費獲取哦~ 內容: 基礎題(293題) 進階題(30題) 高級題(91題) 電腦基礎題(14題) 高頻考點(37題) 綜合問題(125題) 大廠面試真題(阿裡、網易等) 個人 ...
  • 幾乎整個互聯網行業都缺前端工程師,不僅在剛起步的創業公司,對上市公司乃至巨頭這個問題也一樣存在。據統計,國外的前端開發人員和後端開發人員比例約1:1,但是在國內比例卻在1:3以下, Web前端開發職位人才缺口巨大。前端工程師的發展之路十分有“錢”景。每天,HR 群都有人在吐槽招不到前端工程師。實話說 ...
  • 在vue.config.js中,設置 module.exports = { publicPath: '/app', devServer: { proxy: { '/test': { target: 'http://localhost:88', ws: true, changeOrigin: true ...
  • 一、return語句 1.註意點:(1)如果函數沒有使用return語句,那麼函數預設的返回值:undefined;(2)如果函數使用return語句,那麼跟在return後面的值,就成了函數的返回值;(3)如果函數使用return語句,但是return後面沒有任何值,那麼函數的返回值也是undef ...
  • 今年一月份毅然裸辭,誰都想不到後面事情的發展變成了這樣!疫情的到來讓本不富裕的我雪上加霜 一直維繫到大概四月初,才開始正式找工作,過程並不簡單!雖然自認為,找一份合適的工作應該不難,可最後往往都拜倒在“合適”這兩個字上! 以下是我在四五月份總共面試的比較知名幾家企業經驗總結,“前赴”以倒,“後繼”加 ...
  • 前提: (1) 相關博文地址: SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇(一):搭建基本環境:https://www.cnblogs.com/l-y-h/p/12930895.html SpringBoot + Vue + ElementUI 實現 ...
  • 大家是怎麼實現斐波那契列數的1,1,2,3,5,8...f(n)=f(n-1) + f(n-2) 方法一: function f(n){ if(n == 1 || n == 0){ return 1; } return f(n-1) + f(n-2); } index.html 再給兩種解法,對比一 ...
  • 在我們使用VUE+Element 處理界面的時候,往往碰到需要利用JS集合處理的各種方法,如Filter、Map、reduce等方法,也可以涉及到一些對象屬性賦值等常規的處理或者遞歸的處理方法,以前對於這些不是很在意,但往往真正使用的時候,需要瞭解清楚,否則很容易腦袋出現短路的情況。本篇隨筆列出一些... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...