html基础知识01
程序员文章站
2022-04-21 11:34:32
...
Ement 常见使用方式
1.!或者是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.爬升（爬上去）
- ^爬升标签
ul>li^div<!-- 父标签 1>子标签^爬升标签 2 -->
<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>
更多请参考Ement 文档
元素四类属性
<!-- 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的自定义字符串再精准 -->