html基础知识01

Ement 常见使用方式

!或者是html:5按 tab 键快速生成 html5 模板

<!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 的标签

标签.类名（.类名默认生成带 div 的标签）

div.header

<div class="header"></div>

标签#id 名（#id 名默认生成带 div 的标签）

div#header

<div id="header"></div>

3.生成同级标签（兄弟标签）

标签 1+标签 2

h2+p

<h2></h2>
<p></p>

4.生成后代标签

父标签>子标签

ul>li

<ul>
  <li></li>
</ul>

5.生成父级元素

父标签 1>子标签^父标签 2

ul>li^div

<ul>
  <li></li>
</ul>
<div></div>

6.生成标签的时候同时创建内部的文本

{文本内容}

p{我是段落}

<p>我是段落</p>

7.生成标签时候加入属性

标签名[属性名=“属性值”]

a[href='http://www.baidu.com']{百度}

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

8.重复生成功能

标签名*n（生成 n 个标签）

ul>li*3

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

9.给标签自动添加序号和排序

使用$符添加序号（1、2、3…）

ul>li*4{导航$}

<ul>
  <li>导航1</li>
  <li>导航2</li>
  <li>导航3</li>
  <li>导航4</li>
</ul>

使用@符从哪里开始排序

ul>li*4{导航$@100}

<ul>
  <li>导航100</li>
  <li>导航101</li>
  <li>导航102</li>
  <li>导航103</li>
</ul>

10.使用（）给标签分组

div>(header>ul>li*2)+span

<div>
  <header>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </header>
  <span></span>
</div>

元素四类属性

<!-- 1. 通用属性 class, id, style -->
<div class="top">top</div>
<div id="header">header</div>
<div style="color: red">Hello</div>
<!-- 2. 预置属性 -->
<a href="https://php.cn">php.cn</a>
<img src="" alt="" />
<link rel="stylesheet" href="" />
<!-- 3. 事件属性 on + click-->
<button onclick="alert('提交成功')">确定</button>
<!-- 4. 自定义属性 -->
<div data-email="admin@php.cn">用户信息</div>

布局标签

<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

<!-- html5 语义化的布局标签 -->
<header>header</header>
<main>main</main>
<footer>footer</footer>
<!-- 1. 目前项目90%以上是基于移动端, 不依赖搜索引擎/seo  -->
<!-- 2. 语义化的标签数量是有限的,不如class的自定义字符串再精准 -->

Ement 常见使用方式

元素四类属性

布局标签

更多相关文章

随机推荐