html基礎-2

ody

常用標簽

body分為塊級和行內

塊級獨占整行
行內內容有多少就占多少

文本格式化標簽

br 換行

<div>qwer<br/>zxcv</div>

div和span

div 塊級標簽樣式

<div style="background-color: green;">qwer</div>

span 行內標簽樣式

span style="background-color: green;">zxcv</span>

p 段落

<p>hahahahah</p> 
<p>hahahahahaaa</p>

h 標題

h1~h6y依次變小

   <div>默認文字字體</div>
   <h1>再再再再再粗一點</h1>
   <h2>再再再再粗一點</h2>
   <h3>再再再粗一點</h3>
   <h4>再再粗一點</h4>
   <h5>再粗一點</h5>
   <h6>粗一點</h6>

鏈接

a 超鏈接，跳轉到指定的地址

<a href="http://www.baidu.com" title="baidu">百度</a>

錨點，點擊后跳轉到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>野雞平臺</title>
</head>
<body>
<h1>章節</h1>
<a href="#i1" title="第一章">第一章 寂寞的春天</a>
<a href="#i2" title="第二章">第二章 寂寞的夏天</a>
<a href="#i3" title="第三章">第三章 寂寞的秋天</a>
<a href="#i4" title="第四章">第四章 寂寞的冬天</a>
<h1>內容</h1>
<div style="height: 1000px;" id="i1">
   <h3>第一章 寂寞的春天</h3>
   <p>春暖花開,萬物復蘇,又到了交配的季節。</p>
</div>
<div style="height: 1000px;" id="i2">
   <h3>第二章 寂寞的夏天</h3>
   <p>夏天夏天悄悄過去留下小咪咪</p>
</div>
<div style="height: 1000px;" id="i3">
   <h3>第三章 寂寞的秋天</h3>
   <p>今年的秋天真是寂寞呀！！！</p>
</div>
<div style="height: 1000px;" id="i4">
   <h3>第四章 寂寞的冬天</h3>
   <p>下雪</p>
</div>
</body>
</html>

ul ol dl 列表展示

ul 無序列表
ol 有序列表
dl 層級列表
li 列表項目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>野雞平臺</title>
</head>
<body>
    <ul>
        <li>周杰倫</li>
        <li>林俊杰</li>
        <li>王力宏</li>
    </ul>
    <ol>
        <li>鐵錘</li>
        <li>鋼彈</li>
        <li>狗蛋</li>
    </ol>
    <dl>
        <dt>河北省</dt>
        <dd>邯鄲</dd>
        <dd>石家莊</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遙</dd>
    </dl>
</body>
</html>

table 表格

table表格標題
thead表格標題
tr 行標簽
th 列名
tbody表格內容
tr 列標簽
td 列內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <table border="3">   <!--border 選擇表格樣式-->>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>愛好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xxxx</td>
                <td>18</td>
                <td>看書</td>
            </tr>
            <tr>
                <td rowspan="3">aaaa</td>  <!--rowspan 合并單元格-->>
                <td>18</td>
                <td>吃飯</td>
            </tr>
            <tr>
                <td>33</td>>
                <td>heiheihei</td>>
            </tr>>
        </tbody>
    </table>
</body>
</html>

img 圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <!--顯示本地圖片，找不到圖片則顯示alt中的文字-->
    <img src="img/lover.png" alt="美女">
    <!--顯示網絡圖片-->
    <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/t_212313579359018.png" alt="妹子">
</body>
</html>

用戶交互

按鈕標簽

type

buttom: 普通
submit: 提交
reset: 重置

 <button type="button"> 按鈕 </button>

input

text，文本框。
password，密碼框。
radio，單選框（必須設置name屬性相同，否則無法實現）。
checkbox，復選框。
file，文件上傳。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666666</title>
</head>
<body>
    <h3>文本框</h3>
    <input type="text">
    <h3>密碼框</h3>
    <input type="password">
    <h3>單選框</h3>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h3>復選框</h3>
    <input type="checkbox">籃球
    <input type="checkbox">足球
    <input type="checkbox">橄欖球
    <h3>上傳文件</h3>
    <input type="file">
</body>
</html>

select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML學習</title>
</head>
<body>
    <h3>單選</h3>
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <h3>多選</h3>
    <select multiple>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

textarea多行文本框

<!DOCTYPE html>
臥槽，無情呀
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML學習</title>
</head>
<body>
    <textarea>文本內容寫在這里...</textarea>
</body>
</body>
</html>

form表單

用于提交數據到后臺

提交時，只會提交form標簽內部【用戶交互】相關的標簽。
<input type="submit" value="提交"> 用于提交當前所在的表單。
<input type="reset" value="重置"> 用于重置當前標簽中的選項。
form標簽內置屬性action="/xx/" ，表示表單要提交的地址。method="get"，表示表單的提交方式。enctype="multipart/form-data"，如果form內部有文件上傳，必須加上此設置
form內部【用戶交互】相關標簽必須設置name，不然提交數據后后端無法獲取

// 提交表單之后，實際上會將表單中的數據構造成一種特殊的結構，發送給后臺，類似于：
{
    user:用戶輸入的姓名,
  pwd:用戶輸入的密碼,
    ...
}

radio、checkbox、select 除了要設置name屬性以外，還必須設置value屬性，因為這三中標簽在form表單提交時，不會把看到的內容提交到后臺，而是把選擇選項對應的value值提交到后臺。

在發愁怎么在 Vue 中設計一個美觀好用的下拉選擇菜單嗎？想擺脫 UI 框架笨重的依賴嗎？看看 Vue-Select 這個 Vue 組件吧！

Vue.js

簡介

Vue-Select，是 github 上 sagalbot 開源的 Vue 框架 UI 組件，代碼倉庫在 https://github.com/sagalbot/vue-select，目前版本為 3.10.3。Vue-Select 是一個功能豐富、輕量化、易擴展的下拉選擇菜單組件，用于在 Vue 中替代原生的 select 元素。它除了 Vue 以外沒有額外的依賴，大小約 20KB，支持選擇項的過濾和搜索、多選列表、分頁，以及對 Vuex 和 AJAX 的支持等。

安裝

Vue-Select 的安裝可以使用 yarn，也可以使用 npm：

yarn add vue-select
npm install vue-select

安裝完畢后，在 Vue 項目的代碼中導入并注冊組件 vSelect：

import Vue from 'vue'
import vSelect from 'vue-select'

Vue.component('v-select', vSelect)

同時需要導入樣式，樣式文件可以選擇 CSS 或 SCSS：

import 'vue-select/dist/vue-select.css'
@import 'vue-select/src/scss/vue-select.scss'

如果想要在瀏覽器中直接使用，那么可以直接引用CDN：

<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">

示例

最簡單的例子就是使用 options 屬性傳遞選項的值：

<v-select :options="['foo', 'bar', 'baz']"></v-select>

vue-select的options例子

屬性 options 可以接受一個字符串列表，也可以接受對象列表，并使用其中的標簽值作為選項顯示。標簽值的鍵值默認為 label，也可以通過傳遞 label 屬性來改變標簽鍵值：

<v-select label="name" :options="[{name: 'Canada', code: 'CA}]"></v-select>

vue-select是label例子

選擇后得到的值可以使用 v-model 來綁定：

<v-select v-model="selected" />

也可以用 value 屬性和 input 事件來獲取選擇的值，Vue-Select 支持對 Vuex 的綁定：

<v-select :value="$store.myValue" @input="setSelected" />
  
methods: {
    setSelected(value) {
        // 觸發mutation，或分派一個動作
    }
}

Vue-Select 還可使用 mutiple 屬性支持多重選擇列表，已選擇的項以標簽排列顯示：

vue-select的multiple例子

Vue-Select 默認支持搜索功能，在輸入框輸入時會實時過濾列表：

vue-select的搜索例子

Vue-Select 也可以使用 reduce 屬性，截取輸出值的部分屬性，方便對于復雜嵌套的選項列表進行處理：

<v-select :options="options" :reduce="country => country.meta.code" />

采用 SCSS 進行樣式配置，可以修改 SCSS 變量的值方便地修改樣式；
可以使用 no-options 插槽來修改沒有選項時的默認文本；
可以通過 spinner 插槽來修改加載中的圖標和文本；
可以針對子組件進行修改，獲得個性化的標簽和按鈕等；
可以通過 selectable 屬性對選項進行是否有效的限制，或實現對于多選結果的限制；
支持對選項列表添加分頁；支持無限下拉的異步加載；
支持使用 AJAX 對遠程數據進行加載；
……

vue-select選項限制

vue-select分頁

總結

Vue-Select 功能豐富，可以適應多種應用場景；同時無額外依賴，加載速度快，使用方便；默認樣式設計美觀，可定制、可擴展。

Vue-Select 項目代碼清晰，設計合理，代碼量不大，是一個適合學習的 Vue 的 UI 庫項目。目前使用廣泛，社區活躍，是一個值得關注的開源項目。

elect是HTML中的下拉列表標簽，支持單選和多選，但是不支持手動輸入，以下是一些解決方案。

datalist

Datalist是HTML5的原生標簽，用于向input提供下拉和自動提示選項，支持輸入和下拉選擇兩種方式。但是目前IE10及其以下瀏覽器并不支持，并且IE11無法觸發input和change事件，相當于IE系列均無法很好地實現。如果僅支持Chrome或Eletron桌面的應用則可以放心使用。

好處不需要引用額外的JS/CSS文件支持，示例：

<input list="cookies" placeholder="Type of Cookie"/>
<datalist id="cookies">
 <option value="Chocolate Chip"/>
 <option value="Peanut Butter"/>
 <option value="Raisin Oatmeal"/>
</datalist>

在線示例 http://jsfiddle.net/joshpauljohnson/Uv5Wk/

Html+CSS兼容IE實現

有時侯，我們是必須要兼容舊版IE的。而且很多時侯，我們并不需要datalist的自動補全功能，我們可能更希望即使下拉選擇中沒有匹配用戶輸入的內容，所有選項也能夠彈出來。這樣通過純HTML+CSS即可實現，基本原理是使用 input/select 兩個元素，然后 input 覆蓋在 select 上層，寬度并比select窄一點，這樣用戶就能點到select的箭頭彈出下拉框。參考： Stackoverflow

<div class="select-editable">
 <select onchange="this.nextElementSibling.value=this.value">
 <option value=""></option>
 <option value="115x175 mm">115x175 mm</option>
 <option value="120x160 mm">120x160 mm</option>
 <option value="120x287 mm">120x287 mm</option>
 </select>
 <input type="text" name="format" value="" />
</div>

.select-editable {
 position:relative;
 background-color:white;
 border:solid grey 1px;
 width:120px;
 height:18px;
 }
 .select-editable select {
 position:absolute;
 top:0px;
 left:0px;
 font-size:14px;
 border:none;
 width:120px;
 margin:0;
 }
 .select-editable input {
 position:absolute;
 top:0px;
 left:0px;
 width:100px;
 padding:1px;
 font-size:12px;
 border:none;
 }
 .select-editable select:focus, .select-editable input:focus {
 outline:none;
 }

在線示例: http://jsfiddle.net/nwH8A/

JavaScript-autoComplete

這是一個由JavaScript編寫的自動補全插件，不依賴jQuery且僅有5.4kB

項目地址：https://github.com/Pixabay/JavaScript-autoComplete

Bootstrap Magicsuggest

Magicsuggest是一個非常流行的自動補全插件，復用了Bootstrap的CSS樣式，基于Bootstrap框架的可以考慮

https://github.com/nicolasbize/magicsuggest

在線咨詢

上一篇：「例」一個標準完整的Html網頁版面制作「213」
下一篇：HTML文檔的訪問端口DOM (Document Object Model)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商