html 基础
1. html 文档结构
- element = tag + attribute
- 元素 = 标签 + 属性
- html 文档 =
<!DOCTYPE>+<html> - html 根元素 =
<head>+<body>
2. html 渲染方式
- 自动修复: 校正语法,缺失元素
- 显示顺序: 书写顺序一致,左->右,上->下,同步/异步
3. html 页面三宝
- element: DOM 元素
- css: 层叠样式表
- JavaScript: 前端脚本
1. html 文档结构
元素,标签,属性
<!-- 内容 --><!-- ? 注释：开始 一个小于号+感叹号+两减号，结束 两个减号+一个小于号 --><!-- 1. 标签: 描述内容类型 --><lecture>朱老师</lecture><!-- ? lecture （讲师）--><!-- ? <lecture>（开始）朱老师</lecture>（结束前+/）--><!-- 2. 属性: 描述内容特征 --><lecture site="php中文网" course="全站开发">朱老师</lecture><!-- ? 属性描述： site="php中文网" course="全站开发" --><!-- 3. 元素 = 标签 + 属性 --><!-- element = tag + attribute -->
1. 标签
| 序号 | 类型 | 样式 | 案例 |
|---|---|---|---|
| 1 | 预定义 | 浏览器预置,可重定义 | <div> <h1> <p> |
| 2 | 自定义 | 用户自定义 | <lecture> <email> |
2. 属性
| 序号 | 类型 | 名称与值 | 案例 |
|---|---|---|---|
| 1 | 预定义 | 浏览器预置 | <div class="box"> |
| 2 | 自定义 | 用户自定义 | <div data-user="admin"> |
元素三大通用属性: id, class, style
<!-- 一定要将这通用属性背出来 -->
3. 元素
- 元素 = 标签 + 属性
- 元素 === 标签
4. 文档
- 文档中的任何内容,必须用
标签引入,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'><!-- ? php 代码就是用标签来引入的 --><h1 >Hello, <?=$site> </h1><!-- ? 这里可以直接打印出来Hello --><h1 class="title">Hello, <?=$site> </h1><!-- ? 这里创建一个类 class="title" -->// css<style>.title {color: red}<!-- ? 这里创建一个样式 {color: red} --></style>// js<script src="my.js"></script></body></html>
html 文档结构，显示方式与元素类型
<!-- 1. 文档类型: html -->
<!DOCTYPE html>
<!-- 2. 根元素: <html> -->
<html lang="zh-CN">
<!-- 3. 根元素html = 头元素head + 主体元素body -->
<head>
<!-- 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. 元素: 链接
2. 标签: <a>
3. 属性: href, target
-->
<a href="https://php.cn" target="_blank">php中文网</a>
<!-- 1. 标签: 双标签, 单标签 -->
<h2>星期五</h2>
<p>今天是周未</p>
<!-- 双标签: 描述文档自己的内容,如文本 -->
<!-- 单标签: 通常是引用外部资源,如图像,css文档 -->
<img src="dog.jpg" alt="" />
<!-- ?图片肯定是外部资源 单标签来表示的 ，但没在结束标记 ，通过一个属性src="dog.jpg" 来表示 -->
<link rel="stylesheet" href="style.css" />
<!-- ?导入一张样式表"stylesheet" 也是和单标签来表示的，但没在结束标记，通过一个属性href="style.css" 资源在哪里或路径来表示 -->
<script src="my.js"></script>
<!-- ? 导入外部的脚本src="my.js"这样的样式表应该是单标签的却用双标签 -->
<video src="dog.mp4" controls></video>
<!-- ? 导入视频src="dog.mp4" controls 这样的样式表应该是单标签的却用双标签 -->
<!-- 这是历史遗留问题, 以后不会修正 -->
<!-- 2. 属性: 预定义,自定义 -->
<!-- 属性写到起始标签中(双标签 ) -->
<!-- 预定义: 字符串,数字,布尔,通常是预定义的,id, class, style, title -->
<!-- 布尔属性(true/false),如required:没有值, 只要写上就是true,不写就是false -->
<!-- 布尔属性，如 required: 没有值 -->
<!-- 布尔属性(true/false), 如 required: 没有值,只要写上就是true,不定就是false -->
<input type="text">
<!-- ? "text"(输入框，单行文本框)，
? "checkbox" (复选框)
? "rakio" (单选框)
? "search" (搜索框)
? "password" (密码框)
? "email" (邮箱) 这些值是预定义是不能乱写的
? type（输入框的类型） -->
<input type="text" size="20" >
<!-- ? size="20"文本框和长度，是一个自定义的值 可以是个数值，可以个整数 -->
<input type="text" size="20" value="admin">
<!-- ? value="admin" 字符串 也是自定义的 -->
<input type="text" size="20" value="admin" required>
<!-- ? required 布尔属性,写required必须写值 -->
<!-- 自定义: 前缀`data-`, 用js中的`dataset`来处理 -->
<div data-name="admin" data-email="admin@qq.com">用户信息</div>
</body>
</html>
页面三宝与 Emmet语法实战
语法修正
<!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. element (元素)-->
<h1>php.cn</h1>
<!-- 2. css (样式表)-->
<style>
h1 {
color: red;
}
</style>
<!-- ? 给元素样式自定义 -->
<!-- 3. js -->
<script>
document.body.style.background = ‘wheat’
</script>
<!-- ? body 背景换成浅黄 -->
<!-- Vue组件的组成部分, SPA单页应用 -->
</body>
</html>
Emmet语法
<!-- !+tab: 快速生成html5源码模板 -->
<!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>Emmet语法</title>
<style>
/ Emmet: 对CSS简化支持 /
.title {
width: 100px;
/ w100 => width: 100px /
/ bgc => background-color; /
background-color: #fff;
/ df = display: flex; /
/ dg = display: grid /
}
</style>
</head>
<body>
<!-- 1. 标签与内容: `{text}` -->
<h3>html是结构化标签语言</h3>
<div class="title">默认标签div</div>
<hr />
<!-- <hr /> (区分也叫分隔符) -->
<!-- ? 2. 属性和语法糖: `[attr]` (关键字) 理解为：快捷方式或简化方式 -->
<!-- ? [id=app]{app} （语法）属性写一对大括号里面跟上内容，瞬间就可以自动生成div标签 -->
<div id="app">app</div>
<!-- [class=title]{title} -->
<div class="title">title</div>
<!-- id,class是高频,通用属性,emmet为它定制了"语法糖" -->
<!-- ? `id => #, class => .` --> <!-- id 用 # 表示, class 用 . 表示 -->
<!-- #app{app1} -->
<div id="app">app1</div>
<!-- ? .title{title1} --> <!-- .前面加一个点就可以快速生成 -->
<div class="title">title1</div>
<hr />
<!-- <hr /> (区分也叫分隔符) -->
<!-- 3. 重复: `*` --> <!-- `*` 乘法的意思 -->
<!-- .container{box}*3 快速生成 -->
<div class="container">box</div>
<div class="container">box</div>
<div class="container">box</div>
<hr />
<!-- <hr /> (区分也叫分隔符) -->
<!-- 4. 父子: `>` 又叫上下级的关系 -->
<!-- ul>li{item}*3 快速生成 -->
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<hr />
<!-- <hr /> (区分也叫分隔符) -->
<!-- 5. 兄弟: `+` -->
<!-- h3{标题}+p{内容} 按tab键自动生成下面内容 -->
<h3>标题</h3>
<p>内容</p>
<hr />
<!-- ? <hr /> (区分也叫分隔符) -->
<!-- ? 6. 父级: `^` （ 6 这上面有一个向上的箭头）-->
<!-- ? .box>span{text}^h3{小标题} (快速生成下面的代码) -->
<div class="box">
<span>text</span>
</div>
<h3>小标题</h3>
<hr />
<!-- ? <hr /> (区分也叫分隔符) -->
<!-- 7. 分组: `(...)` (nav 导航标签) -->
<!-- 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 />
<!-- ? <hr /> (区分也叫分隔符) -->
<!-- 8. 序号: `$`,`$@` -->
<!-- ? 默认从1开始: ul>li{item-$}*3 (快速生成下面代码) -->
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
</ul>
<!-- ? 自定义起始序号: ul>li{item-$@6}*3 +@6 (快速生成下面代码) -->
<ul>
<li>item-6</li>
<li>item-7</li>
<li>item-8</li>
</ul>
<!-- ? 逆序: ul>li{item-$@-1}*3 +@-1 (快速生成下面代码) -->
<ul>
<li>item-3</li>
<li>item-2</li>
<li>item-1</li>
</ul>
</body>
</html>