整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端代碼規范

          、語義化標簽

          1. 列表使用 ul li
          2. 文字使用 p span em cite 等標簽
          3. 標題使用 h1 h2 等標簽
          4. 布局使用 section aside header footer article 等 HTML5 布局標簽

          2、自定義標簽

          使用自閉合標簽的寫法 小寫加下劃線

          <template>
            <my-owner-components />
          </template>

          3、多特性分行寫

          為提高可讀性 組件應用時換行 按照 ref、class、傳入、傳出 順序書寫

          <template>
            <my-components
              ref="myComponents"
              class="home-my-components"
              :data="data"
              @changeHandle="changeHandle"
            />
          </template>

          4、行內使用表達式

          在模版中 簡單情況使用表達式 復雜情況使用計算屬性或函數

          <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>

          5、避免重復

          避免過多重復代碼 果超過三行類似的代碼 配置數據再循環遍歷

          6、代碼嵌套

          根據元素嵌套規范 每個塊狀元素獨立一行 內聯元素可選

          <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>

          7、活用v-if v-show

          v-show 不會改變dom樹 不會導致重新渲染 用于頻繁的切換顯示隱藏
          v-if 會改變dom樹 會導致重新渲染 用于只控制一次顯示隱藏

          8、注釋規范

          <template>
            <!-- 標簽注釋 -->
            <div>
              ...
            </div>
            <!-- 組件注釋 -->
            <my-owner-components />
          </template>

          CSS規范

          1、避免使用

          1. 避免使用標簽選擇器 因為在 Vue 中 特別是在局部組件 使用標簽選擇器效率特別低 損耗性能 建議需要的情況直接定義 class
          2. 非特殊情況下 禁止使用 ID 選擇器定義樣式(有 JS 邏輯的情況除外)
          3. 避免使用important選擇器
          4. 避免大量的嵌套規則 控制在3級之內 對于超過4級的嵌套 考慮重寫或新建子項
          5. 避免使用ID選擇器及全局標簽選擇器防止污染全局樣式

          2、推薦使用

          1. 提取公用樣式進assets文件styles里 按模塊/功能區分
          2. 使用 scoped 關鍵字 約束樣式生效的范圍
          3. 可復用屬性盡量抽離為頁面變量 易于統一維護
          4. 使用混合(mixin)根據功能定義模塊 然后在需要使用的地方通過 @include 調用 避免編碼時重復輸入代碼段

          3、書寫順序

          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;
          }

          4、樣式覆蓋

          組件內部需要覆蓋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>

          5、注釋規范

          / 注釋內容 / 格式注釋 前后空格 嵌套子類需要一個回車分割開

          /* 注釋內容 */
          .class-name {
            width: 20px;
            
             /* 這里需要換行 */
            .class-name-l {
              color: blue
            }
          }

          JS規范

          1、用法規范

          1. 在vue-cli 腳手架使用架自帶的指向 src 開發目錄的 '@' 符號引入文件資源
          2. 使用 template 或計算屬性規避 v-if 和 v-for 用在一起
          3. 統一使用單引號
          4. 堅持單一原則 函數內僅做該函數應該做的 盡量避免通過傳入標記控制不同行為
          5. 優先考慮三目運算符 但不要寫超過3層的三目運算符
          6. 對于無用代碼必須及時刪除 例如:一些調試的 console 語句、無用的棄用功能代碼
          7. 請求數據的方法使用try catch 錯誤捕捉 注意執行回調

          2、組件順序規范

          <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>

          3、注釋規范

          函數/方法注釋必須包含函數說明,有參數和返回值時必須使用注釋標識,它的作者, 依賴關系和兼容性信息。

          1. 單行注釋:雙斜線后應跟空格,且縮進與上下文的代碼保持一致;或在行尾注釋,在行尾依然需要左右空格
          // 注釋
          const userID = 24
          const userID = 12 // 注釋
          1. 多行注釋:一般用于注釋難以理解的、可能存在錯誤的、邏輯強的代碼,且縮進一致
          /*
           * 針對下方代碼的說明
           * 第一行太長寫第二行
           */
          const aa = 1
          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 })
          }
          1. 文件注釋:寫明文件描述
          /**
           * @Description: 文件描述
           * @Author: luochen_ya
           * @Date: 2024-03-13
           */

          命名規范

          1、目錄命名

          按照小駝峰命名 首字母小寫

          1. 項目文件夾:projectName
          2. 樣式文件夾:css / scss
          3. 腳本文件夾:js

          2、圖片命名

          圖片就是img開頭 圖標就是icon開頭

          1. img_功能_模塊_編號
          2. icon_功能_模塊_編號

          3、文件命名

          1. 按照小駝峰命令 英文單詞過長或超出2個以上 可縮略至前四位 列如:comming_soon.png 等
          2. 有復數含義 采用復數命名 列如:minixs styles images icons 等
          3. 靜態資源命名格式為小寫 + 下劃線 列如:icon_arrow.png img_logo.png 等
          4. 組件命名為小駝峰 公用組件加上gd前綴 列如:gdOwnerComponents 等

          4、方法命名

          method 方法命名不同于文件命名,盡量完整英文命名,語義表達需完整清楚

          1. 按照小駝峰命名法 可使用常見動詞約定
          • can: 判斷是否可執行某個動作 函數返回一個布爾值 true可執行 false不可執行
          • has: 判斷是否含有某個值 函數返回一個布爾值 true含有此值 false不含有此值
          • is: 判斷是否為某個值,函數返回一個布爾值 true為某個值 false不為某個值
          • get: 獲取某個值 函數返回一個非布爾值
          • set: 設置某個值 無返回值或者返回是否加載完成的結果
          1. 語義化英文命名 僅組件內部使用方法前加上_(下劃線)區分
          <script>
          export default {
            methods: { // 組件方法定義
              publicbFunction () {} // 公共方法的定義 可以提供外面使用
              _privateFunction () {} // 私有方法 下劃線定義 僅供組件內使用
            }
          }
          </script>
          1. 引入組件:首字母大寫的駝峰法命名
          import MyOwnerComponents from '@/components/MyOwnerComponents'
          1. 變量:使用駝峰式命名 優先使用 let const 避免使用 var
          let userName = 'luochen_ya'
          const userInfo = {
            name: 'luochen_ya',
            age: 24
          }
          1. 常量:字母全部大寫 以下橫線 _ 劃分
          const Constant = {
            // 公用狀態
            COMMON_STATUS_ENABLE = 1, // 啟用
            COMMON_STATUS_DISABLE = 2, // 停用
          }

          5、樣式命名

          class命名以小寫字母開頭 小寫字母、中劃線和數字組成 以下是一些常用到的 class的名字

          1. 包裹層: .xxx-wrap
          2. 列表: .xxx-list
          3. 列表項: .xxx-list-item
          4. 左邊內容: .xxx-left
          5. 中間內容: .xxx-middle
          6. 右邊內容: .xxx-right
          7. 某個頁面:.xxx-page

          6、常用詞

          1. 常用動詞
          • get => 取值
          • set => 給值
          • add => 新增
          • remove => 移除
          • show => 顯示
          • hide => 隱藏
          • view => 查看
          • browse => 瀏覽
          • edit => 修改
          • save => 保存
          • delete => 刪除
          • find => 查詢
          • undo => 撤銷
          • redo => 重做
          • clean => 清除
          • index => 索引
          • observe => 觀察
          • send => 發送
          • receive => 接收
          • refresh => 刷新
          • synchronize => 同步
          1. 常用縮寫
          • object => obj
          • array => arr
          • function => fn
          • message => msg
          • button => btn

          工程結構

          1、目錄構建

          ├── 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                     視圖目錄(所有業務邏輯的頁面)

          2、代碼風格

          可以直接使用eslint 強制統一代碼規范 還能規避一些語法錯誤 或者按照以下自己定義的去配置eslint來使用
          以下是個人習慣 僅供參考

          1. 首行縮進2空格
          2. js代碼去除分號
          3. html代碼超出255字符一行進行換行操作
          4. js代碼統一使用單引號或雙引號

          先,我們來理解一下一個網頁的基本組成

          代碼如下


          一個網頁是有許許多多的標簽對組成的,即開始標簽-結束標簽,都是成對出現(當然我們后面會說的還存在單標簽,表示自閉合標簽,例如:<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時取消提示。


          主站蜘蛛池模板: 色一情一乱一区二区三区啪啪高| 日韩一区二区三区不卡视频| 色一情一乱一伦一区二区三欧美 | 夜精品a一区二区三区| 成人精品视频一区二区三区不卡| 午夜福利一区二区三区在线观看| 国偷自产av一区二区三区| 国产精品高清一区二区三区| 久久久精品人妻一区二区三区四| 国产精品夜色一区二区三区 | 精品一区二区三区波多野结衣| 精品一区二区三区视频| 99精品一区二区三区| 国产一区二区三区在线观看免费| 麻豆精品一区二区综合av| 亚洲永久无码3D动漫一区| 国产剧情国产精品一区| 中日韩一区二区三区| 无码一区二区三区视频| 精品一区二区三区电影| 亚洲日韩一区精品射精| 无码人妻一区二区三区免费n鬼沢| 人妻精品无码一区二区三区 | 日韩一区二区三区在线| 熟妇人妻一区二区三区四区 | 亚洲性日韩精品一区二区三区| 久久综合精品国产一区二区三区| 中文字幕在线精品视频入口一区| 又硬又粗又大一区二区三区视频 | 精品无码综合一区二区三区| 无码精品人妻一区二区三区免费看| 性色AV 一区二区三区| 亚洲第一区视频在线观看| 视频在线一区二区| 免费视频精品一区二区三区| 国产视频一区二区在线播放| 久久久精品人妻一区二区三区| 人妻久久久一区二区三区| 国产对白精品刺激一区二区| 精品无码人妻一区二区三区18 | 伊人色综合一区二区三区影院视频|