成人极品影院,中文字幕亚洲综合久久综合

首頁 > 博客列表 > Emmet常用語法、元素屬性、布局標(biāo)簽

博主信息

博文 6

粉絲 0

評論 1

訪問量 5588

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

一、Emmet常用語法

Emmet官方文檔http://yanxyz.github.io/emmet-docs/
Markdown官方文檔http://markdown.p2hp.com/basic-syntax/

1.快速生成html得穩(wěn)當(dāng)結(jié)構(gòu)通過html:5+tab或！+tab來實(shí)現(xiàn)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

2.常用語法

常用符號	意義
.	代表class
#	代表id
默認(rèn)標(biāo)簽	. 前面什么也不寫，默認(rèn)的標(biāo)簽為div
｛｝	表示要添加的內(nèi)容
>	代表父子層級
+	代表兄弟層級
^	代表上一個層級
*	代表重復(fù)
$	代表序號遞增
@	代表從某個序號遞增
-1	代表倒序

下面依次舉例

    <!-- p.first -->
    <p class="first"></p>
    <!-- p#id -->
    <p id="id"></p>
    <!-- .title  -->
    <div class="title"></div>
    <!-- .title{括號的演示}   -->
    <div class="title">括號的演示</div>
    <!-- p>a>li -->
    <p>
      <a href="">
        <li></li>
      </a>
    </p>
    <!-- p+a+li  -->
    <p></p>
    <a href=""></a>
    <li></li>
    <!-- p>a^li  -->
    <p><a href=""></a></p>
    <li></li>
    <!-- p>td*3  -->
    <p>
      <td></td>
      <td></td>
      <td></td>
    </p>
    <!-- ul.list>li.item*5>a{item$} -->
    <ul class="list">
      <li class="item"><a href="">item1</a></li>
      <li class="item"><a href="">item2</a></li>
      <li class="item"><a href="">item3</a></li>
      <li class="item"><a href="">item4</a></li>
      <li class="item"><a href="">item5</a></li>
    </ul>
    <!-- ul.list>li.item*3>a{item$@2} -->
    <ul class="list">
      <li class="item"><a href="">item2</a></li>
      <li class="item"><a href="">item3</a></li>
      <li class="item"><a href="">item4</a></li>
      <li class="item"><a href="">item5</a></li>
      <li class="item"><a href="">item6</a></li>
    </ul>
    ul.list>li.item*5>a{item$@-1}
    <ul class="list">
      <li class="item"><a href="">item5</a></li>
      <li class="item"><a href="">item4</a></li>
      <li class="item"><a href="">item3</a></li>
      <li class="item"><a href="">item2</a></li>
      <li class="item"><a href="">item1</a></li>
    </ul>

二、實(shí)例演示元素四類屬性

元素屬性分為`通用屬性，預(yù)置屬性，事件屬性，自定義屬性`。

屬性分類	簡介
通用屬性	class，id，style。
預(yù)置屬性	a標(biāo)簽中的href，img標(biāo)簽中的src，link標(biāo)簽的rel屬性，該屬性多出現(xiàn)在引用第三方資源的標(biāo)簽中。
事件屬性	button標(biāo)簽中的onclick，on是前綴，click是事件。
自定義屬性	用于存放用戶數(shù)據(jù)。

四類屬性演示實(shí)例

1.通用屬性

<div class="top">top</div>
<div id="header">header</div>
<div style="color: red">Hello</div>

2.預(yù)置屬性

<a href="https://php.cn">php.cn</a>
<img src="" alt="" />
<link rel="stylesheet" href="" />

3.事件屬性

<button onclick="alert('提交成功')">確定</button>
<div>
   <input type="text" oninput="this.nextElementSibling.textContent = this.value" />
<p>實(shí)時顯示輸入的內(nèi)容</p>
</div>

4.自定義屬性

<div data-email="admin@php.cn">用戶信息</div>
<button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">
      獲取用戶郵箱
</button>
<p>這里顯示用戶郵箱</p`

生動的舉例：
通用: 相當(dāng)于姓名, 性別, 年齡
預(yù)置: 膚色, 血型
事件: 走, 吃, 跑…
自定義: 職業(yè), 愛好…. `

三、實(shí)例演示布局標(biāo)簽,并分析div+class與 html5語義化標(biāo)簽的優(yōu)缺點(diǎn)

    <!-- 經(jīng)典 -->
    <div id="header">header</div>
    <div id="main">main</div>
    <div id="footer">footer</div>
    <!-- 盡量不要用id  -->
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
    <!-- 盡量只用class,實(shí)現(xiàn)樣式復(fù)用 -->
    <!-- html5  -->
    <!-- 語義化的布局標(biāo)簽 -->
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
    <article></article>
    <nav></nav>
    <aside></aside>
    <article class="articl-header">header</article>

html5的語義化標(biāo)簽應(yīng)用不廣泛的原因：
1. 基于移動端的開發(fā)，不依賴于搜索引擎和SEO。
2. 語義化標(biāo)簽數(shù)量有限，不能函告所有的標(biāo)簽，反到不如是用傳統(tǒng)的div+class的方式能更加準(zhǔn)確的表達(dá)開發(fā)者的意圖。

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

前端環(huán)境搭建

2021-12-29 21:51:54

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

一、Emmet常用語法

1.快速生成html得穩(wěn)當(dāng)結(jié)構(gòu)通過html:5+tab或！+tab來實(shí)現(xiàn)。