在我們以往看到的頁(yè)面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我將介紹如何使用純HTML打造屬于自己的實(shí)用效果。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、坡頭ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的坡頭網(wǎng)站制作公司

1.?**折疊手風(fēng)琴**

使用Details和Summary標(biāo)簽可以創(chuàng)建沒(méi)有JavaScript代碼的可折疊手風(fēng)琴。

效果：

?

HTML

<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details>

<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>

CSS

* { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
} details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0;
} summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em;
} details[open] { padding: .5em;
} details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em;
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

瀏覽器支持：

2.?**進(jìn)度條**

該Meter和Progress的元素標(biāo)簽的基礎(chǔ)上，你可以調(diào)整屬性呈現(xiàn)在屏幕上的進(jìn)度條。進(jìn)步有兩個(gè)屬性：max和value校準(zhǔn)進(jìn)度條，而Meter標(biāo)簽提供了更多的定制屬性。

效果：

HTML:

<label for="upload">Upload progress:</label>

<meter id="upload" name="upload"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

<hr/>

<label for="file">File progress:</label>

<progress id="file" max="100" value="70"> 70% </progress>

CSS:

body {
  margin: 50px;
}

label {
    padding-right: 10px;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

瀏覽器支持：

3. 更多輸入類(lèi)型

在定義輸入元素時(shí)，您要知道現(xiàn)代瀏覽器已經(jīng)允許您指定足夠多的輸入類(lèi)型了。除了你應(yīng)該已經(jīng)知道text，email，password，number這些類(lèi)型外，還有下面的這些。

• date?將顯示本機(jī)日期選擇器
• datetime-local 更豐富的日期和時(shí)間選擇器
• month?友好的月份選擇器
• tel會(huì)讓你輸入一個(gè)電話號(hào)碼。在移動(dòng)瀏覽器上打開(kāi)它，彈出的鍵盤(pán)將發(fā)生變化，同樣的email也是如此。
• search?將輸入文本框設(shè)置為友好的搜索樣式。

效果：

HTML:

<label for="date">Enter date:</label>
<input type="date" id="date"/>

<label for="datetime">Enter date & time:</label>
<input type="datetime-local" id="datetime"/>

<label for="month">Enter month:</label>
<input type="month" id="month"/>

<label for="search">Search for:</label>
<input type="search" id="search"/>

<label for="tel">Enter Phone:</label>
<input type="tel" id="tel">

CSS:

input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}

各種新輸入類(lèi)型的MDN文檔非常廣泛且信息量很大。此外，檢查移動(dòng)輸入類(lèi)型以了解用戶在移動(dòng)瀏覽器上時(shí)這些輸入元素的鍵盤(pán)行為。

4. 視頻和音頻

video和audio元素雖然現(xiàn)在已經(jīng)成為HTML規(guī)范的一部分，但是你一樣會(huì)驚訝于你可以使用video標(biāo)簽在屏幕上渲染出一個(gè)體面的視頻播放器。

<video controls>

    <source src="https://addpipe.com/sample_vid/short.mp4" 
            poster="https://addpipe.com/sample_vid/poster.png">

    Sorry, your browser doesn't support embedded videos.
</video
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

視頻標(biāo)記中值得注意的一些屬性包括：

• poster?下載視頻時(shí)要顯示封面的URL
• preload 是否在頁(yè)面加載時(shí)預(yù)加載整個(gè)視頻
• autoplay?視頻是否應(yīng)該在頁(yè)面加載后自動(dòng)播放

瀏覽器支持：

?

5.?**校對(duì)文本**

當(dāng)你想顯示歷史編輯及校對(duì)的情況時(shí)，blockquote，del和ins元素標(biāo)簽可以派上用場(chǎng)了。

示例：

?HTML：

<blockquote>
    There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

CSS：

del {
    text-decoration: line-through;
    background-color: #fbb;
    color: #555;
}

ins {
    text-decoration: none;
    background-color: #d4fcbc;
}

blockquote {
    padding-left: 15px;
    line-height: 30px;
    border-left: 3px solid #d7d7db;
    font-size: 1rem;
    background: #eee;
    width: 200px;
}

6.更統(tǒng)一的引號(hào)

由于中英文引號(hào)的不同，使用<q>標(biāo)記可以讓您很好的解決這個(gè)問(wèn)題，它可使你的內(nèi)容在大多數(shù)瀏覽器上更一致地呈現(xiàn)引號(hào)。

?

?HTML：

Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p>

<hr/>

Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>

CSS：

body {
  margin: 50px;
}

q {
    font-style: italic;
    color: #000000bf;
}

7. 鍵盤(pán)標(biāo)簽

<kbd>標(biāo)簽應(yīng)該是一個(gè)少為人知的冷門(mén)標(biāo)簽，但這個(gè)能使用更好的方式來(lái)說(shuō)明組合鍵的樣式。

?HTML：

<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>

CSS：

body {
  margin: 50px;
}

kbd {
    display: inline-block;
    margin: 0 .1em;
    padding: .1em .6em;
    font-size: 11px;
    line-height: 1.4;
    color: #242729;
    text-shadow: 0 1px 0 #FFF;
    background-color: #e1e3e5;
    border: 1px solid #adb3b9;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
    white-space: nowrap;
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

8.使用HTML共享代碼

使用figcaption pre code``標(biāo)簽，您可以使用純``HTML``和``CSS``呈現(xiàn)出不錯(cuò)的代碼片段。

HTML：

<figure>
  <figcaption>
      Defining a css <code>color</code> property for a class called 'golden'
  </figcaption>

  <pre>
    <code>
      .golden {
        color: golden;
      }
    </code>
  </pre>
</figure>

CSS：

pre {
  background-color: #ffbdbd;
}

這篇文章也只是拋磚引玉，還有更多技巧，大家可以關(guān)注一下。

文章標(biāo)題：web前端入門(mén)到實(shí)戰(zhàn)：純HTML做出幾個(gè)實(shí)用網(wǎng)頁(yè)效果
文章轉(zhuǎn)載：http://www.chinadenli.net/article34/pecipe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、用戶體驗(yàn)、自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)