html前端基础知识 - php学习

首页 > 博客列表 > html前端基础知识

博主信息

博文 7

粉丝 0

访问量 6199

专题推荐

更多>

html 基础知识，运用 Ement 语法生成 html 代码

使用！+ TAB 或者 html:5 + TAB

<!DOCTYPE html>
<html lang="zh-CN">
  <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>

Ement 语法符	标签属性	生成效果
.	class=””	`<div class=""></div>`
#	id=””	`<div id=""></div>`
div.>h2	>符， div 下增加 h2 标签	`<div class=""><h2></h2></div>`
.title{}	{}符，生成文本内容	`<div class="title">感谢老师</div>`
div>p>a	>符，生成父子层级关系的标签	`<div><p><a href=""></a></p><div>`
div+p+a	+符，生成兄弟层级关系的标签	`<div></div><p></p><a href=""></a>`
div>p^	^符，p 的上级 div 同级标签	`<div><p></p></div><a href=""></a>`
.card>ul>li*3>a	*符，重复 3 次 li 标签
.card>(ul>li*3>a)+p	()为分组符
.card>ul>li>a{内容$}	$符为顺序号标识符
.card>ul>li>a{内容$@n}	$@n 为指定从几开始排序	如 n 为 100 即从 100 开始排
.card>ul>li>a{内容$@-n}	$@-n 为指定从几开始例序排	如-100 即从 100 开始例排
a[href=””]{php 中文网}	[]为属性符	比较少用到此类方法，只需知道即可

. 生成的标签效果，默认标签是 div

<div class=""></div>

p.title 生成带 class 属性名 title 的 p 标签

<p class="title"></p>

div# 生成的标签效果

<div id=""></div>

使用{}符快速生成带文本内空的标签
实例代码:.title{感谢老师}

<div class="title">感谢老师</div>

使用父子层级符号>生成多级标签
实例代码 div>p>a

<div>
  <p><a href=""></a></p>
</div>

使用兄弟层级符号+生成多级标签
实例代码 div+p+a

<div></div>
<p></p>
<a href=""></a>

使用^上级层级关系生成上级的同级标签
实例代码 div>p^a

<div>
  <p></p>
</div>
<a href=""></a>

多层级分组符（）
实例代码:.card>h2{购物车}+(ul>li*3>a{商品列表})+p{总计:3 件}

<div class="card">
  <h2>购物车</h2>
  <ul>
    <li><a href="">商品列表</a></li>
    <li><a href="">商品列表</a></li>
    <li><a href="">商品列表</a></li>
  </ul>
  <p>总计:3件</p>
</div>

序列号符 $ 此符号为文本内容序号符
实列代码:.card>ul>li*8>a{商品列表$}

<div class="card">
  <ul>
    <li><a href="">商品列表1</a></li>
    <li><a href="">商品列表2</a></li>
    <li><a href="">商品列表3</a></li>
    <li><a href="">商品列表4</a></li>
    <li><a href="">商品列表5</a></li>
    <li><a href="">商品列表6</a></li>
    <li><a href="">商品列表7</a></li>
    <li><a href="">商品列表8</a></li>
  </ul>
</div>

序号符号$@n，其中 n 代表需要指定从几开始的数字
实例代码:.card>ul>li*8>a{商品列表$@10}

<ul>
    <li><a href="">商品列表10</a></li>
    <li><a href="">商品列表11</a></li>
    <li><a href="">商品列表12</a></li>
    <li><a href="">商品列表13</a></li>
    <li><a href="">商品列表14</a></li>
    <li><a href="">商品列表15</a></li>
    <li><a href="">商品列表16</a></li>
    <li><a href="">商品列表17</a></li>
  </ul>
</div>

序号倒序排符号$@-n,其中-n 代表需要从几开始倒排
实例代码:.card>ul>li*8>a{商品列表$@-10}

<div class="card">
  <ul>
    <li><a href="">商品列表17</a></li>
    <li><a href="">商品列表16</a></li>
    <li><a href="">商品列表15</a></li>
    <li><a href="">商品列表14</a></li>
    <li><a href="">商品列表13</a></li>
    <li><a href="">商品列表12</a></li>
    <li><a href="">商品列表11</a></li>
    <li><a href="">商品列表10</a></li>
  </ul>
</div>

属性符号[]
实例代码:a[href=””]{php 中文网}

<a href="">php中文网</a>

元素的属性

1 常规属性：class、id、style

<div class="header">感谢老师</div>
<div id="header">php.cn</div>
<div style="background-color: brown">感谢php中文网</div>

2 预置属性:href、src、alt…不可修改的

<a href="">超连接</a>
<img src="" alt="这是一张图片" />
<link rel="stylesheet" href="" />

3 事件属性:前缀以 on 开头+事件如 onclick

<button onclick="alert('提交成功')">确定</button>
<div>
  <input type="text" oninput="this.nextElementSibling.textContent=this.value" />
  <p>实时显示数字</p>
</div>

4 自定义属性:以 date-开头+自定义名称如 date-email、date-username…可自行设置名称

<div data-email="123@qq.com">邮箱信息</div>
<button
  onclick="this.nextElementSibling.textContent=this.previousElementSibling.dataset.email"
>
  获取邮箱
</button>
<p>显示用户邮箱</p>

div+class 优势

通用 pc 和移动端，开发更方便！
目前主流大多数以移动端为主，如小程序、app 等

<!-- 经典方式 -->
<div id="header">页头</div>
<div id="main">内容</div>
<div id="footer">页尾</div>
<!-- 尽量不要使用id，实现代码复用性 -->
<div class="header">页头</div>
<div class="main">内容</div>
<div class="footer">页尾</div>
<!-- html5语义化布局标签 -->
<header>页头</header>
<main>内容</main>
<footer>页尾</footer>

语义化标签缺点

语义化标签有限，不能满足开发者，不如 class 实用

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

函数返回值和回调函数

2022-01-22 18:12:51