前端開發 HTML標簽 HTML文檔結構 head <head> <!-- 漢字編碼 --> <meta charset="UTF-8"> <!-- 設置一個網站的搜索關鍵字 --> <meta name="Keywords" content=""/> <!-- 網站描述內容 --> <meta n ...
前端開發
HTML標簽
HTML文檔結構
head
<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: 標題
轉義符
實體字元 | 編譯後的字元 |
---|---|
< |
小於號 < |
> |
大於號 > |
& |
於號 & |
|
空格 |
© |
版權 |
× |
乘號 |
÷ |
除號 |
標簽元素
塊級元素
塊級元素(相當執行了 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