![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
WJCorrection status：qualified
Teacher's comments：完成的很好，加油。
Collection
Collection
HTML5 文档结构
| 代码 | 描述 |
|---|---|
<!DOCTYPE html> |
通知浏览器这是⼀个 HTML5 ⽂档,应始终写在第⼀⾏ |
<html>...</html> |
根标签,或叫根元素,整个 hmtl ⽂档内容都必须写到这对标签中 |
<html lang="en"> |
通知搜索引擎 html ⽂档使⽤的编写语⾔,如果是中⽂建议改成:<html lang="zh-CN"> |
<head>...</head> |
供浏览器和搜索引擎使⽤,描述字符编码集,视⼝与⻚⾯标题,⽤户并不感兴趣 |
<meta> |
设置⻚⾯元素数据, 所谓元数据, 就是描述某种特定信息的数据 |
<meta charset="UTF-8"> |
通知浏览器 html ⽂档编写语⾔所属的字符编码集,最流⾏的是UTF-8,已成⾏业标准 |
<meta name="viewport" content="..." /> |
下⾯三⾏是对它的解读 |
name="viewport" |
设置视⼝(即可视区屏幕)如何显示这个⻚⾯, 例如是否允许缩放这个⻚⾯ |
initial-scale=1.0 |
设置⻚⾯初始绽放⽐例,1.0表示原样 1:1 显示,不允许有任何绽放 |
<title> |
显示在浏览器标签上的⽂本, 指定当前⻚⾯的标题, 这个标签对 SEO ⾮常重要 |
<body>...</body> |
⻚⾯主体内容,允许或希望⽤户的内容都应该写到这⾥,⽤户也只对这⾥的内容感兴趣 |
| <!— 注释内容 -> | 注释⽤来描述标签功能或⽤途,它的内容不要出现在显示的⽹⻚中, 只会出现在 html 源代码中 |
html 元素的三大通用属性
- id 属性: 由用户保证它在当前页面的唯一性，浏览器并不检查， 应专用于获取唯一元素
- class 属性: 类属性，返回多个具有共同特征的元素集合
- style 属性: 设置某个元素的内联样式
1.什么是元素
(元素有很多的，具体看手册，下面介绍些元素的基本信息)
| 元素类型 | 标签类型 | 语法 | 实例 |
|---|---|---|---|
| ⾮空元素 | 双标签 | <起始标签 属性 1 属性 2 …>元素内容</结束标签> | <p>学习让我变得更强⼤</p> |
| 空元素 | 单标签 | <标签 属性 1 属性 2 …> | <img src="images/girl.jpg" alt="⼥⽣"> |
语义化的布局元素(⼀)
| 序号 | 名称 | 标签 | 描述 |
|---|---|---|---|
| 1 | 标题 | <h1> - <h6> |
通常⽤来划分或标注内容中的⽂本段落 |
| 2 | ⻚眉 | <header> |
⼀般是由导航, logo 等元素组成 |
| 3 | ⻚脚 | <footer> |
⼀般是由友情链接, 联系⽅式, 备案号,版权等信息组成 |
| 4 | 导航 | <nav> |
导航通常是由⼀个或多个链接标签<a>标签组成 |
| 5 | 主体 | <main> |
做为⻚⾯主要内容的容器使⽤,建议⼀个⻚⾯, 只出现⼀次 |
| 6 | ⽂档 | <article> |
本义是⽂档, 实际上可以充当其它内容的容器 |
| 7 | 边栏 | <aside> |
与主体⽆关的信息,例如: ⼴告位, 相关推荐, 阅读排⾏等 |
| 8 | ⽚断 | <section> |
与主体⽆关的信息,例如: ⼴告位, 相关推荐, 阅读排⾏等 |
| 9 | 区块 | <div> |
也叫通⽤容器,本身⽆任何语义, 功能主要是通过它的属性来描述 |
常⽤的语义化⽂本元素(二)
| 序号 | 名称 | 标签 | 描述 |
|---|---|---|---|
| 1 | 段落 | <p> |
段落内容⽂本 |
| 2 | 格式化 | <pre> |
按源代码格式原样输出 |
| 3 | 内联 | <span> |
与<div>类似,⽆语义, 主要⽤作内容的样式钩⼦ |
| 4 | ⽇期时间 | <time> |
仅⽤来描述⽇期或时间的⽂本,没有预置样式 |
| 5 | 下标/上标 | <sub>/<sup> |
编写数字公式或⽂本特殊标记时会⽤到 |
| 6 | 地址 | <address> |
通常⽤在⻚脚<footer>中 |
| 7 | 删除线 | <del> |
替代之前的⽆语义标签<s> |
| 8 | 代码块 | <code> |
通常与代码格式化插件配合,才能⾼亮关键字 |
| 9 | 进度条 | <progress> |
需要与 css, javascript 脚本配合 |
| 10 | 加粗 | <strong> |
替代之前⽆语义的标签<b> |
| 11 | 斜体 | <em> |
替代之前⽆语义的标签<i> |
| 12 | ⾼亮标记 | <mark> |
默认为内容添加⻩⾊背景 |
| 13 | 引⽤ | <q> |
内容加双引号, 与<blockquote>标签同义 |
备注：
属性: 必须写到元素的 “起始标签” 中,由属性名和属性值⼆部分组成
语法: 属性名="属性值",属性名推荐只使⽤⼩写字⺟,属性值推荐加上双引号
案例: <input type="password" maxlength="20" placeholder="⾄少8个字符" required>
养成代码规范是个很重要的习惯哦！
元素还有很多的具体可以看手册：https://www.php.cn/course/27.html
我们来看看元素，类，id 不同级别的样式规则
在 html5 中 ： 元素(标签)选择器优先级小于类选择器, 但是又小于 id 选择器（tag < class < id ）
具体实例:我们给 p 段落分别加 3 个字体颜色样式，元素选择器设置 blue、类选择器设置 red、id 选择器设置 green，看看他们的优先级
>
很明显是绿色，id 选择器等级最高！接下来看看元素选择器和类选择器的优先级，我们直接注释掉 id 选择器的样式即可
>
看是红色，综上所述：元素(标签)选择器优先级小于类选择器, 但是又小于 id 选择器（tag < class < id ）。