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小时内与您取得联系。

整合营销服务商