使用自閉合標簽的寫法 小寫加下劃線
<template>
<my-owner-components />
</template>
為提高可讀性 組件應用時換行 按照 ref、class、傳入、傳出 順序書寫
<template>
<my-components
ref="myComponents"
class="home-my-components"
:data="data"
@changeHandle="changeHandle"
/>
</template>
在模版中 簡單情況使用表達式 復雜情況使用計算屬性或函數
<template>
<!-- 簡單情況 -->
<div v-show="data.type === 1">
...
</div>
<!-- 復雜情況 -->
<div v-show="getTypeShow(data)">
...
</div>
</template>
<script>
export default {
methods: {
/**
* ***顯示判斷
* @param data **
*/
getTypeShow(data) {
return data.type === 1 && ...
}
}
}
</script>
避免過多重復代碼 果超過三行類似的代碼 配置數據再循環遍歷
根據元素嵌套規范 每個塊狀元素獨立一行 內聯元素可選
<template>
<!-- 情況1 -->
<div>
<h1></h1>
<p></p>
<p><span></span><span></span></p>
</div>
<!-- 情況2 -->
<div>
<h1></h1>
<p></p>
<p>
<span></span>
<span></span>
</p>
</div>
</template>
v-show 不會改變dom樹 不會導致重新渲染 用于頻繁的切換顯示隱藏
v-if 會改變dom樹 會導致重新渲染 用于只控制一次顯示隱藏
<template>
<!-- 標簽注釋 -->
<div>
...
</div>
<!-- 組件注釋 -->
<my-owner-components />
</template>
CSS 屬性書寫順序 先決定定位寬高顯示大小 再做局部細節修飾
定位屬性(或顯示屬性 display) => 寬高屬性 => 邊距屬性(margin padding) => 背景 顏色 字體等修飾屬性的定義 這樣定義為了更好的可讀性 讓別人只要看一眼就能在腦海中浮現最終顯示的效果
.class-name {
position: fixed;
top: 100px;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
margin: 10px;
padding: 10px;
background-color: red;
border-radius: 2px;
font-size: 14px;
color: #000;
line-height: 1.42;
}
組件內部需要覆蓋UI框架樣式 必須在最外層組件加類名
<template>
<div class="input-container">
<el-input class="name-input"></el-input>
</div>
</template>
<style lang="scss">
.input-container {
.name-input {
.el-input__inner {
font-size: 16px;
}
}
}
</style>
以 / 注釋內容 / 格式注釋 前后空格 嵌套子類需要一個回車分割開
/* 注釋內容 */
.class-name {
width: 20px;
/* 這里需要換行 */
.class-name-l {
color: blue
}
}
<script>
export default {
name: 'ExampleName', // 這個名字推薦:大寫字母開頭駝峰法命名
props: {}, // Props 定義
components: {}, // 組件定義
directives: {}, // 指令定義
mixins: [], // 混入 Mixin 定義。
data () { // Data 定義。
return {
dataProps: '' // Data 屬性的每一個變量都需要在后面寫注釋說明用途,就像這樣
}
},
computed: {}, // 計算屬性定義。
watch: {}, // 屬性變化監聽器。
created () {}, // 生命鉤子函數,按照他們調用的順序。
mounted () {}, // 掛載到元素。
activated () {}, // 使用 keep-alive 包裹的組件激活觸發的鉤子函數。
deactivated () {}, // 使用 keep-alive 包裹的組件離開時觸發的鉤子函數
methods: { // 組件方法定義。
publicbFunction () {} // 公共方法的定義,可以提供外面使用
_privateFunction () {} // 私有方法,下劃線定義,僅供組件內使用。多單詞,注意與系統名字沖突!
}
}
</script>
函數/方法注釋必須包含函數說明,有參數和返回值時必須使用注釋標識,它的作者, 依賴關系和兼容性信息。
// 注釋
const userID = 24
const userID = 12 // 注釋
/*
* 針對下方代碼的說明
* 第一行太長寫第二行
*/
const aa = 1
/**
* @Description 加入購物車
* @Author luochen_ya
* @Date 2024-03-13
* @param {Number} goodId 商品id
* @param {Array<Number>} specs sku規格
* @param {Number} amount 數量
* @param {String} remarks 備注
* @returns <Promise> 購物車信息
*/
apiProductAddCard = (goodId, specs, amount, remarks) => {
return axios.post('***', { goodId, specs, amount, remarks })
}
/**
* @Description: 文件描述
* @Author: luochen_ya
* @Date: 2024-03-13
*/
按照小駝峰命名 首字母小寫
圖片就是img開頭 圖標就是icon開頭
method 方法命名不同于文件命名,盡量完整英文命名,語義表達需完整清楚
<script>
export default {
methods: { // 組件方法定義
publicbFunction () {} // 公共方法的定義 可以提供外面使用
_privateFunction () {} // 私有方法 下劃線定義 僅供組件內使用
}
}
</script>
import MyOwnerComponents from '@/components/MyOwnerComponents'
let userName = 'luochen_ya'
const userInfo = {
name: 'luochen_ya',
age: 24
}
const Constant = {
// 公用狀態
COMMON_STATUS_ENABLE = 1, // 啟用
COMMON_STATUS_DISABLE = 2, // 停用
}
class命名以小寫字母開頭 小寫字母、中劃線和數字組成 以下是一些常用到的 class的名字
├── api 所有api接口
├── assets 靜態資源
│ ├── fonts 全局公用字體
│ ├── icons 全局公用圖標
│ ├── images 全局公用圖片
│ └── styles 全局公用樣式
├── components 公用組件
│ ├── base 基礎組件
│ └── business 業務組件
├── constants 常量 統一管理
├── locales 多語言管理
├── plugins 插件 統一管理
├── router 路由 統一管理
│ └── index.js
├── store vuex 統一管理
│ ├── modules
│ ├── getters.js
│ └── index.js
├── utils 工具函數 統一管理
├── views 視圖目錄(所有業務邏輯的頁面)
可以直接使用eslint 強制統一代碼規范 還能規避一些語法錯誤 或者按照以下自己定義的去配置eslint來使用
以下是個人習慣 僅供參考
先,我們來理解一下一個網頁的基本組成
代碼如下
一個網頁是有許許多多的標簽對組成的,即開始標簽-結束標簽,都是成對出現(當然我們后面會說的還存在單標簽,表示自閉合標簽,例如:<br />)
對上述的標簽先來解釋一下
html------------超文本標記語言,瀏覽器識別的語言,主要負責頁面的內容和結構
head------------標簽用于定義文檔的頭部,它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
body------------元素定義文檔的主體。body 元素包含文檔的所有內容(比如文本、超鏈接、圖像、表格和列表等等。)
HTML常用基礎標簽用法及實例
1. <!--注釋-->
2. <!--DOCTYPE 聲明文檔類型-->
3. <!--a--><a href="http://www.baidu.com/">百度一下</a></br><!--超鏈接標簽-->
4. <!--address--><address> 標簽定義文檔或文章的作者/擁有者的聯系信息。
如果 <address> 元素位于 <body> 元素內,則它表示文檔聯系信息。
如果 <address> 元素位于 <article> 元素內,則它表示文章的聯系信息.-->
</address>
5. <!--5.article <article> 標簽規定獨立的自包含內容。-->
<article>
<h1>百度</h1>
<p>全球最大的中文搜索引擎、致力于讓網民更便捷地獲取信息,找到所求。</p>
</article>
6. <!--6.aside <aside> 標簽定義其所處內容之外的內容。-->
<p>123123</p>
<aside>
<h1>文本之外的內容</h1>
<p>我也是文本之外的內容</p>
</aside>
7.<!-- audio video-- <audio> 標簽定義聲音,比如音樂或其他音頻流。
<audio src="/i/horse.ogg" controls="controls>
</audio>
8.<!--b 文本加粗-->
<p>普通文本--<b>粗體文本</b></p>
9.<!--big -->
<big>大號字體</big><br>
10.<!-- body body 主體內容-->
11.<!-- br 給文本換行-->
12.<!--button <bubtton> 標簽定義一個按鈕。-->
<button type="button">點擊領取</button>
13.<!--center 對其所包括的文本進行水平居中。-->
14.<!--dl dd dt <dd> 在定義列表中定義條目的定義部分。-->
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
15.<!--del ins <del>定義文檔中已被刪除的文本。 <ins> 標簽定義已經被插入文檔中的文本。-->
<p>你叫<del>張3</del><ins>文字</ins>嗎?</p>
16.<!--div p h1-h6 div是塊標簽 p是段落標簽 h1-h6是標題標簽根據h后面數值調整大小-->
17.<!--em span i strong <em>把文本定義為強調的內容。<span> 標簽被用來組合文檔中的行內元素。
<i> 標簽顯示斜體文本效果。<strong>把文本定義為語氣更強的強調的內容。
-->
<em>強調文本內容</em>
<p><span>組合文檔中的行內元素</span>你好啊</p>
<i>斜體文本</i><br>
<stong>內容重要</strong>
18.<!--footer nav <footer> 標簽定義文檔或節的頁腳。<nav> 標簽定義導航鏈接的部分.-->
<footer>
<p>聯系郵箱:<a >href="1758539486@qq.com">1758539486@qq.com</a></p>
</footer>
<nav>
<a href="http://www.baidu.com">百度</a>|
<a href="http://www.douyu.com">斗魚</a>
</nav>
19.<!-iframe iframe 元素會創建包含另外一個文檔的內聯框架(即行內框架)-->
20.<!--hr html-- <hr>文本分割線 <html>根文件-->
21.<!--img input label-- img 元素向網頁中嵌入一幅圖像。
<input>--表單標簽(一共八種類型) 如下所示:
<input type="radio" name=""value="單選"/>
<input type="checkbox" name=""value="選擇"/>
<input type="submit" name=""value="提交"/>
<input type="button" name=""value="按鈕"/>
<input type="password" name=""value="密碼"/>
<input type="text" name=""value="文本"/>
<input type="reset" name=""value="清空"/>
<input type="hidden" name=""value="隱藏"/>
<label> 標簽為 input 元素定義標注(標記)。
-->
<img src="img/Advertisement_03-3.jpg" alt="" /><br>
<label for="男">男</label>
<input type="radio" name="sex" id="男">
<input type="submit" name="提交" >
22.<!--ol ul li <ol>有序列表 <ul>無序列表 <li>列表項目-->
23.<!--link script <link>標簽最常見的用途是鏈接樣式表。<script> 標簽用于定義客戶端腳本,比如 JavaScript。-->
24.<!--select option <select> 元素可創建單選或多選菜單。<select> 元素中的 <option> 標簽用于定義列表中的可用選項。-->
<select name="">
<option value="">請選擇</option>
<option value="">選項一</option>
<option value="">選項二</option>
<option value="">選項三</option>
<option value="">選項四</option>
</select>
25.<!--textarea <textarea> 標簽定義多行的文本輸入控件。-->
<textarea></textarea>
resize禁止拉伸文本框
outline取消文本框選中的顏色
Text-indent:2em首行縮進兩個字符
希望閱讀本篇文章以后大家有所收獲,幫助大家HTML5+CSS3從入門到精通 。
、Html的基本結構:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title></title>
</head>
<body>
網頁的文本、圖片等信息;
</body>
</html>
二、Head部分:用于表示網頁的元數據即描述網頁的基本信息
其常用標簽及屬性有:
1、title標簽:瀏覽器標簽頁顯示的標題
2、meta標簽:其常用屬性
①charset:設置文檔的字符集編碼格式。HTML5中設置字符集編碼:<meta charset="UTF-8">
常見的字符集編碼格式:
a.GB-2312:國標碼,簡體中文
b.GBK:擴展的國標碼
c.UTF-8:萬國碼 Unicode 常用
②http-equiv屬性:將我們的信息寫給瀏覽器看,讓瀏覽器按照這里面的要求執行,可選屬性值:Content-Type(文檔類型) refresh(網頁定時刷新) set-cookie(設置瀏覽器cookie緩存) 需要配合content屬性使用。(http-equiv屬性只是表明需要設置哪一部分,具體的設置內容,放到content屬性中)
③name屬性:使用方法同“http-equiv”。將我們的信息寫給搜索引擎看
常用且需要掌握的屬性值:author(作者) keywords(網頁關鍵字) description(網頁描述) 這兩個屬性設置,網頁必不可少。
3、link標簽:鏈接網頁圖標(title前的小logo),其常用屬性有:
①rel屬性:聲明鏈接文件的類型,此處選icon
②type屬性:可以省略
③href屬性:表示圖片的路徑地址
三、body部分:網頁的文本、圖片等信息
標簽的分類:
塊級標簽:顯示為塊,前后隔一行(自動換行)
行級標簽:按行從左往右逐一顯示。
1、 常見的塊級標簽:
①<h1></h1>......<h6><h6>:標題標簽,自動加粗,h1最大,h6最小。
②<hr/>:水平線標簽,添加一條水平線。
③<p></p>:段落標簽,
④<br/>:換行標簽,
⑤<blockquote/></blockquote>:引用標簽,cite屬性,表明引用的來源,一般引用網址
瀏覽器默認首行縮進。
⑥<pre></pre>:預格式標簽,用于重載代碼。瀏覽器默認顯示樣式:1、顯示為等寬字體。 2、代碼中的換行、
空格等元素能在瀏覽器中顯示。
【補充】html 文件中空格的表示:
2、 基于布局的塊級標簽
列表:無序列表、有序列表、定義列表
①有序列表:<ol></ol> 列表項:<li></li>
②無序列表:<ul></ul> 列表項:<li></li>
③定義列表(實現圖文混排):<dl></dl>
列表標題:<dt>一般只有一項</dt>
列表描述項:<dd>可以有很多項</dd>
3、組合標簽:<figure></figure>用于顯示圖片及圖片標題
他有兩個子標簽:<img />圖片
<figcaption></figcaption>圖片的標題
例如:<figure>
<img src="img/EZ.jpg" height="20%" width="20%" alt="探險家"/>
<figcaption>探險家 伊澤瑞爾</figcaption>
</figure>
4、分區標簽:<div></div>
5、常見的行級標簽
<1>span(文本):無實際意義,用于包裹某部分文字,修改特定樣式,例如:
這是<span style="color: red;font-size: 36px;">span</span>中的文字
img(圖片):其常用屬性:①src:表示引用圖片的地址。
路徑地址的寫法:相對路徑:以當前文件為最準,去尋找圖片地址
a、與文件處于同一層的圖片,直接寫圖片名
b、圖片在當前文件下一層:文件名/圖片名
c、圖片在當前文件上一層:../圖片名
絕對路徑:file:///盤符:/文件夾/圖片名,但 是嚴禁使用
圖片網址:網絡上的圖片鏈接,但是一般不用
②height和width:圖片的高度和寬度。可以用CSS樣式代替
③title:圖片標。當鼠標指上之后顯示的文字
④alt:當圖片無法顯示的時候,顯示的文字
<2>em(傾斜強調)
<3>strong(加粗強調)
<4>b(加粗)
<5>i(傾斜)
Strong、em、b、i的區別
1、Strong、em都表示強調,Strong為粗體,em為斜體,而Strong的強調 程度逗比em高
2、Strong和b都能加粗,em和i都能傾斜,,但是Strong和em多了一層強調的語義 。H5要求標簽盡可能實現語義化。
<6>q(短引用)
<7>small/big(縮小/放大字體):small和big分別是縮小和擴大字體,都可以多層嵌套直至上限或下限
<8>a(超鏈接)
1、href:超鏈接的路徑,可以是網絡鏈接,也可以是本地文件。
2、target:跳轉頁面打開的位置。_self自身頁面,_blank新頁面。
3、title:鼠標指在超鏈接上顯示的名稱。
4、Rel(被鏈接是當前的前/后一篇):指定被鏈接文檔與當前文檔的關系,搜索引擎 會利用該屬性 獲取更多的有關鏈接的信息:
rel="prev"被鏈接文檔是當前文檔的前一篇文 檔,
rel="next"被鏈接文檔是當前文檔的后一篇文檔,
rel="icon"被鏈接文檔是當前文檔的圖標
rel="stylesheet"被鏈接文檔是當前文檔的樣式表
5、Rev(當前是被鏈接的前/后一篇)
錨鏈接:
①本頁面錨鏈接:a、設置錨點:<a name="top"></a>
b、跳轉錨點:#name名
①頁面間錨鏈接:a、在即將跳轉頁面的指定位置設置錨點
b、跳轉錨點:頁面地址.html#name名
<a href="02_常見的塊級標簽.html#Hbuilder">頁面間錨鏈接</a><br/>
功能性鏈接: mailto用于給指定郵箱發送郵件
file:///e:/aaa.png打開本地文件
tencent://message/?uin=1315618220 給指定QQ發送息
<9>s標簽,有誤文本:刪除線
<s>這是S標簽中的文字</s><br />
<10>cite標簽:瀏覽器顯示為傾斜,常用于書、畫作、作品的引用
<cite>這是cite中的文本</cite><br />
<11>code:計算機代碼,不保留代碼格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向,屬性:dir="ltr"表示從左往右,dir="rtl"表示從右往左
<bdo dir="rtl">1234567</bdo><br />
kbd:表示需要用戶用鍵盤輸入的內容,瀏覽器顯示為等寬字體
請輸入“<kbd>Esc</kbd>”推遲系統<br />
<13>sup:上標文本,sub:下標文本
x<sub>6</sub><br />
? ? 空格
? ? 空格 <br />
<14>u:下劃線
<u>這是下劃線</u><br />
mark:高亮或標記文本,瀏覽器顯示為黃色背景
<mark>mark</mark><br />
6、表格:表格的行:tr,每行中的列:td,表格的表頭:th
表格的常用屬性:
表格行列屬性:[tr和td的屬性]:
1、width/heigh:單元格的寬高
2、bgcolor:單元格的背景顏色
3、align:left center right 單元格中的文字水平對齊方式
4、valign:top center bottom 單元格中的文字垂直對其方式
5、nowrap:單元格中文字不換行
【注意】當表格屬性與行列屬性沖突時,行列屬性優先級高
7、表單(form)
【兩個重要屬性】:action-表單提交的服務器地址 method-表單提交數據的方法(get/post)
get/post區別:
1>get使用URL傳參:http://服務器地址?name1=value1&name2=value2
(?表示傳遞參數,?后面采用name=value的形式傳遞,多個參數之間用&連接) ① URL傳參不安全,所有信息可在地址欄看到,并且別人可以很容易url注入,來 攻擊自己的數據庫。
② URL傳參數據量有限,只能傳遞少量數據。
2>post:使用http請求傳遞數據。URL地址看不到數據信息,安全且傳遞信息量沒有限制
綜上所述:大部分使用post傳參,但是get傳參比Post快
【input標簽及屬性】
①type:input輸入框的類型,可選值有:
②name:input輸入框的別名,必填,因為傳參的時候采用name=value的形式傳遞。
③value:input輸入框的默認值
④placeholder:提示內容,當輸入框有value時,提示內容消失。
【input特殊屬性值】
① checked="checked"默認選中
② disabled="disabled"設置控制不能使用,按鈕上不能點擊,輸入框上不能修改,而且如果
輸入框時disabled,則輸入框信息不傳遞到后臺
③hidden=“hidden”隱藏。等同于<input type="hidden" name="username"value="1234" />
等同于配合disabled或根據其他需要,使用隱藏域傳遞信息.
【input-type屬性詳解】
①text:文本輸入框
②password:密碼輸入框,內容不對外顯示
③radio:單選按鈕
checkbox:復選按鈕
a、單選按鈕,name和value屬性需同時存在,提交時,提交的是value中的屬性值
例如:<input type="radio" name="sex" value="男"/>提交顯示為"sex=男"
b、radio憑借name屬性區分是否為同一組,name相同為同組,且只能選擇一個
c、checked="checked"默認選中,(radio只可以選一個,checkbox可以選多個)
④submit:提交按鈕,提交表單數據
⑤reset:重置按鈕,重置為默認狀態
⑥file:文件上傳按鈕
⑦image:圖片提交按鈕,功能同submit,可以提交數據
⑧button:普通按鈕,沒什么軟用
⑨其他常用屬性值:見下圖
【select標簽】下拉選擇標簽
寫法:
<select name="=city">
<option>青島</option>
<option>煙臺</option>
<option>北京</option>
<option>紐約</option>
<option>羅馬</option>
</select>
常用屬性
①name屬性:寫在select里,所有選項只有一個name
②multiple屬性:multiple="multiple"設置select為多選,一般不用
③option常用屬性:value=""屬性,當option沒有value屬性時,往后臺傳遞的是<option></option>中間的文字,
當有value屬性時,傳遞的是value的屬性值。
title=""屬性,鼠標之上后現實的文字
select="select"默認屬性值
④optgroup屬性: 用于option屬性分組,用lable屬性表示分組名。
<optgroup label="中國">
<option>青島</option>
<option>煙臺</option>
<option>北京</option>
</optgroup>
【textarea】:文本域,其常用屬性 :
①設置寬度高度 style="width: 150px;height: 200px;
②readonly="readonly":只讀模式,不允許修改編輯
③style="resize: none;"設置為寬度高度不允許修改
④style="overflow:;"設置文字超出區域時,如何處置,常用屬性值有:
hidden 超出區域的文字,隱藏無法顯示
scroll 無論文字多少,均顯示滾動
auto 自動,根據文字多少自動決定是否會顯示為滾動條
【fieldset 、legend】表單的邊框與標題
<fieldset> //邊框
<legend> //標題
</legend>
</fieldset>
如果想讓標題嵌入到邊框中,需將標題標簽寫到邊框標簽里面
一個表單可以有多組標題加邊框組合
【h5智能表單】
1、H5新增input的form屬性,用于指定特form表單的id,實現input無需放在form標簽之中,即可通過表單進行提交
<form id=foo>
……
</form>
<input type="text" name="" form="foo">
2、 input元素的新增屬性:
Autocomplete:自動完成功能,記錄用戶之前輸入的內容,并在用戶下次輸入時提示用戶輸入
》》》屬性值:on/off
》》》可以再form表單使用,對整個表單的所有控件進行自動完成的開關也可以在input上使用,
對特定輸入框進行修改
》》》絕大部分瀏覽器默認開啟
Autofocus:自動獲得焦點,autofocus="autofocus"只能獲得一個焦點
Form:所屬表單,通過id確認屬于哪個表單
Required:必填,required="required",設置必填,否則停止提交
Pattern:使用正則表達式驗證input的模式
Placeholder:提示,當有value時取消提示。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。