Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:完成的很好,下次可以在https://www.php.cn/member/courses/work.html中提交作业
{text}
<h3>html是结构化标签语言</h3>
<div class="title">默认标签div</div>
<hr />
[attr]
<!-- [id=app]{app} -->
<div id="app">app</div>
<!-- [class=title]{title} -->
<div class="title">title</div>
<!-- id,class是高频,通用属性,emmet为它定制了"语法糖" -->
<!-- `id => #, class => .` -->
<!-- #app{app1} -->
<div id="app">app1</div>
<!-- .title{title1} -->
<div class="title">title1</div>
<hr />
*
<!-- .container{box}*3 -->
<div class="container">box</div>
<div class="container">box</div>
<div class="container">box</div>
<hr />
>
<!-- ul>li{item}*3 -->
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<hr />
+
<!-- h3{标题}+p{内容} -->
<h3>标题</h3>
<p>内容</p>
<hr />
^
<!-- .box>span{text}^h3{小标题} -->
<div class="box">
<span>text</span>
</div>
<h3>小标题</h3>
<hr />
(...)
<!-- nav>h3{导航}+ul>li*3>a{link} -->
<!-- nav>h3{导航}+(ul>li*3>a{link}) -->
<nav>
<h3>导航</h3>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</nav>
<hr />
$
,$@
重点牢记
<!--默认从1开始基本语法: ul>li{item-$}*3 -->
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
</ul>
<!--自定义起始序号: ul>li{item-$@6}*3 -->
<ul>
<li>item-6</li>
<li>item-7</li>
<li>item-8</li>
</ul>
<!--逆序: ul>li{item-$@-1}*3 -->
<ul>
<li>item-3</li>
<li>item-2</li>
<li>item-1</li>
</ul>
序号 | 类型 | 样式 | 案例 |
---|---|---|---|
1 | 预定义 | 浏览器预置,可重定义 | <div><h1><p> |
2 | 自定义 | 用户自定义 | <lecture><email> |
序号 | 类型 | 名称与值 | 案例 |
---|---|---|---|
1 | 预定义 | 浏览器预置 | <div class="box"> |
2 | 自定义 | 用户自定义 | <div data-user="admin"> |
元素三大通用属性: id
, class
, style
标签
引入,css
,js
,php
树状层级结构
: DOM
模型 (Document Object Model)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
// php
<?php $site = 'php.cn'>
<h1 class="title">Hello, <?=$site> </h1>
// css
<style>
.title {color: red}
</style>
// js
<script src="my.js"></script>
</body>
</html>
<!DOCTYPE>
+ <html>
<head>
+ <body>