元素的必知属性
<!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>元素的必知属性</title>
</head>
<body>
<!-- ? 1. 通用属性: id, class, style -->
<div id="top" class="header" style="color: red">Content</div>
<!-- ? style (控制当前元素的样式) style="color: red" -->
<hr />
<!-- ? 2. 预置属性: w3c,浏览器可以自动识别的,并内置了样式 -->
<a href="" target=""></a>
<img src="" alt="" />
<!-- ? 标签不同,属性不同,开发者预置好的,拿着就可以用了 -->
<hr />
<!-- ? 3. 事件属性: `on+事件名称` onclick,oninput,onkeyup -->
<button onclick="alert('登录成功')">登录</button>
<!-- ! <button ></button> 这叫事件属性 -->
<!-- ! onclick (点击事件) -->
<!-- ! oninput (输入事件) -->
<!-- ! onkeyup (按件抬起事件) -->
<!-- ! "alert('登录成功')" (提示框) -->
<!-- ? Vue3: 双向数据绑定,演示一下底层原理 -->
<input type="text" oninput="getInput(this)" placeholder="请输入" />
<span></span>
<hr />
<!-- ? 4. 自定义属性: `data-自定义属性名称`, 由js的dataset进行处理 -->
<!-- ? data-user-email: 自定义属性, data-: 默认前缀 -->
<div data-user-email="admin@php.cn">邮箱</div>
<button onclick="getEmail(this)">查看邮箱</button>
<span></span>
<script src="static/js//func.js"></script>
</body>
</html>
html常用元素标签:布局类
<!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>布局元素进化史</title>
</head>
<body>
<!-- ? 1. 传统 -->
<!-- ? #header{页眉} 我怎么不可以快速生成下面代码 -->
<div id="header">页眉</div>
<div id="main">主体</div>
<div id="fooer">页脚</div>
<hr />
<!-- ? 2. 优化: class 代替id: id权重太式,样式复用 -->
<!-- ! 选中按住Alt健可以多点编辑 -->
<div class="header">页眉</div>
<div class="main">主体</div>
<div class="fooer">页脚</div>
<hr />
<!-- ? 3. 语义化: 将程序员常用的属性名,标签化 -->
<header>页眉</header>
<main>主体</main>
<footer>页脚</footer>
<hr />
<!-- ? 语义化缺点:标签有限,语义受限,页面结构与文章结果一样吗? -->
<!-- ? 文章结构 -->
<!-- ? 语义化 -->
<article>
<header>文章头部</header>
<main>文章主体</main>
<footer>文章结尾</footer>
</article>
<hr />
<!-- class -->
<div class="article header">文章头部</div>
<div class="article main">文章主体</div>
<div class="article footer">文章结尾</div>
<hr />
<style>
/ 语义化 /
article header {
color: red;;
}
/ class /
.article.header {
color: blue;
}
/ 1. 语义化标签:
优点: 更利于SEO内容识别
缺点: 标签太少,会导致层级过深, 样式控制复杂
2. class属性:
优点: 内容描述更精准,层级更少
缺点: SEO只识别到标签级,识别不到属性级(据说现在可以了?)
备注: 目前90%以上项目是移动端, 不依赖或不在乎SEO
/
/ 实际开发中, 应该用哪种方案呢? 哪种文案 “代码少,层级少” 就用哪种/
</style>
</body>
</html>
图文列表
<!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>图文解决方案</title>
</head>
<body>
<!-- ! 1. 传统 -->
<div class="box">
<img src="static/images/course1.png" alt="" width="200" />
<div class="title">PHP中文网第21期线上培训班</div>
</div>
<hr />
<!-- ! 2. 推荐: figure 创建带标题的内容 -->
<figure>
<img src="static/images/course1.png" alt="" width="200" />
<figcaption>PHP中文网第21期线上培训班</figcaption>
</figure>
<!-- ! figure 与 div 相比, 它多一个margin (外边距40*16) -->
</body>
</html>
html常用标签:图像,链接,列表
<!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>图像,链接, 列表</title>
</head>
<body>
<!-- ? 1. 图像: <img>, `src, alt, width/height->css` -->
<img src="static/images/course1.png" alt="" width="200" />
<hr />
<!-- ? 2. 链接: <a>, `href, target` -->
<!-- ! target 打开本地页面 -->
<!-- ! "_blank" 打开一个新页面 -->
<a href="https://php.cn/" target="_blank">PHP中文网</a>
<hr />
<!-- ? 3. 列表: <ul> <ol> <li>,<dl> <dt> <dd> -->
<!-- 无序 -->
<ul style="background-color: lightcyan">
<!-- ! 增加青色背景样式 style="background-color: lightcyan" -->
<!-- ! ul>li{item%$}*3 快速生成下面代码 -->
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<!-- 有序 -->
<ol style="background-color: lightgreen">
<!-- ! 增加绿色背景样式 style="background-color: lightgreen" -->
<!-- ! ol>li{item%$}*3 快速生成下面代码 -->
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
<!-- 自定义列表: 名词解释 -->
<!-- dl+dt+dd -->
<dl style="background-color: lightblue">
<!-- 1 : 1 -->
<div style="display: flex; place-items: center">
<!-- ! 将两行合并成一行style="display: flex; place-items: center" -->
<dt>Email:</dt>
<dd>498668472@qq.com</dd>
<!-- ! <dd>对dt的解释</dd> -->
</div>
<hr />
<!-- N : 1 -->
<div style="display: flex; place-items: center">
<!-- ! 将两行合并成一行style="display: flex; place-items: center" -->
<dt>Chrome,</dt>
<dt>FireFox:</dt>
<dd>开发者喜欢的主流浏览器</dd>
</div>
</dl>
<hr />
<!-- ! 实战1: 文字导航 `<ul> + <a>`,实体字符: ` ©`-->
<!-- ! .nav 快速生成导航代码 -->
<div class="nav">
<ul class="menu" style="display: flex; list-style: none">
<!-- ! 将三行合并成一行水平排列 style="display: flex; list-style: none" -->
<li><a href="">首页 </a></li>
<li><a href="">教学视频 </a></li>
<li><a href="">社区问答 </a></li>
</ul>
</div>
<hr />
<!-- ! <nav> + <a>: 层级更少, 代码更少,渲染更快 -->
<nav>
<!-- ! *a*3 快速生三个导航 -->
<a href="">首页</a>
<a href="">教学视频</a>
<a href="">社区问答</a>
</nav>
<hr />
<!-- ! 实战2: 图文列表-->
<!-- ? ul+li+a --> <!-- 传统模式 -->
<ul class="courses" style="display: flex; list-style: none; width: 500px; place-content: space-between">
<li class="item" style="display: grid">
<a href=""><img src="static/images/course1.png" alt="" width="150" /></a>
<a href="">第二十一期前端开发</a>
</li>
<li class="item" style="display: grid">
<a href=""><img src="static/images/course2.png" alt="" width="150" /></a>
<a href="">第二十一期_PHP编程</a>
</li>
<li class="item" style="display: grid">
<a href=""><img src="static/images/course3.png" alt="" width="150" /></a>
<a href="">第二十一期综合实战</a>
</li>
</ul>
<hr />
<!-- ? nav + figure + a -->
<nav style="display: flex">
<figure>
<a href=""><img src="static/images/course1.png" alt="" width="150" /></a>
<figcaption><a href="">第二十一期前端开发</a></figcaption>
</figure>
<figure>
<a href=""><img src="static/images/course2.png" alt="" width="150" /></a>
<figcaption><a href="">第二十一期_PHP编程</a></figcaption>
</figure>
<figure>
<a href=""><img src="static/images/course3.png" alt="" width="150" /></a>
<figcaption><a href="">第二十一期综合实战</a></figcaption>
</figure>
</nav>
<!-- ! 层级少,代码少 -->
</body>
</html>
细说表格与常用属性
<!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" />
<link rel="stylesheet" href="static/css/cart.css" />
<title>细说表格</title>
</head>
<body>
<table border="1">
<!-- 标题(可选) -->
<caption>
购物车
</caption>
<!-- 表头 -->
<thead>
<tr>
<th>分类</th>
<th>ID</th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<!-- 表体(必选)浏览器自动生成,一个表格中可以有多个tbody -->
<tbody>
<!-- 先写tr,创建一个新行(单元格的容器) -->
<tr>
<!-- td: 单元格,数据存放的地方 -->
<!-- td,th: 都是单元格,th有预置样式: 加粗和居中 -->
<!-- 前三行的第一列,需要做一个跨行的合并 -->
<!-- 跨行合并 : rowspan, row行 span 合并 -->
<!-- 合并属性 rowspan/colspan,必须写到 td, th中 -->
<td rowspan="3">数码</td>
<th>5010</th>
<td>电脑</td>
<td>9000</td>
<td>2</td>
<td>18000</td>
</tr>
<tr>
<!-- <td>数码</td> -->
<th>5012</th>
<td>手机</td>
<td>5000</td>
<td>4</td>
<td>20000</td>
</tr>
<tr>
<!-- <td>数码</td> -->
<th>5013</th>
<td>相机</td>
<td>15000</td>
<td>2</td>
<td>30000</td>
</tr>
<tr>
<td rowspan="2">服装</td>
<th>3030</th>
<td>男装</td>
<td>500</td>
<td>2</td>
<td>1000</td>
</tr>
<tr>
<!-- <td>服装</td> -->
<th>3031</th>
<td>女装</td>
<td>1000</td>
<td>5</td>
<td>5000</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<!-- 水平方向合并/列合并 : colspan -->
<th colspan="4">总计:</th>
<th>15</th>
<th>74000</th>
</tr>
</tfoot>
</table>
<button>结算</button>
</body>
</html>
细说表单-<fom></fom>标签与属性
<!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>表单: 前后端数据交互的接口</title>
</head>
<body>
<!-- ! 用户注册 -->
<h2 class="title">用户注册</h2>
<!--
* 1. action (默认属性): 服务器上的表单处理脚本,如 login.php <form>标签</form>
* 2. method(第二种属性): 提交方式(有两种 `GET` `POST`)
* 2.1 GET: 默认,数据在URL中,适用于"少量且公开"的数据,如分页,查询参数
* http://127.0.0.1:5500/1017/register.php?username=admin
* http://127.0.0.1:5500/1017/register.php?username=peter+zhu
* 2.2 POST: 数据在请求体中,适合于"大量的或隐私"的数据
* 3. enctype (第三种属性): 编码方式
* 3.1 application/x-www-form-urlencoded: 默认对值对的编码方案
* 3.2 multipart/form-data: 分块,原始数据,适用文件上传
* 4. target: 与<a>相同,_self是默认,_blank新页面
* 5. id: name现在已废弃不推荐,全用id来引用该表单
* 6. onsubmit: 提交时执行的js,拦截提交操作,执行用户自定义提交行为
-->
<form action="register.php" method="POST" enctype="application/x-www-form-urlencoded" target="_blank" id="register">
<input type="text" name="username" />
<input type="password" name="password" />
<button>提交</button> <!-- 提交按纽 -->
</form>
</body>
</html>