![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：不同的编辑器, 对md文档的支持程度不同, 只要能显示列表标识, 哪个都可以, 你应该是刚报名的吧 作业非常的认真, 希望坚持下去
Collection
Collection
| 序号 | 详细内容 | 描述 |
|---|---|---|
| 1 | html的文本内容 | 用户看到的网页内容，如：新闻、广告、产品介绍说明等 |
| 2 | 其他文件的引用、插入 | 如：图片、视频、音频、css样式表等 |
| 3 | html 的标记使用 | 主要是对文本及引用文件正确的描述说明 |
| 序号 | 术语 | 描述 |
|---|---|---|
| 1 | 超文本 | 指包含有超链接的文本 |
| 2 | 标记 | 用来描述内容的固定标签 |
| 3 | 语言 | html 并不是编程语言，只是书写 html 文档的工具 |
## 3. 基本的 html 页面### 3.1 html de 结构及源代码```html<!DOCTYPE html><html lang="en"><head><meat charset="UTF-8" /><meat name="viewport" content="width=device-width,initial-scale=1.0" /><title>HTML5网页结构学习</title></head><body><h2>纳职欢迎您...</h2></body></html>
| 序号 | 源代码 | 解析说明 |
|---|---|---|
| 1 | <!DOCTYPE html> |
通知浏览器这是一个 html5 文档，源代码始终放在第一行 |
| 2 | <html>...</html> |
这是根标签，也叫根元素， html 的整个文档内容都必须写在标签内 |
| 3 | <head>...</heaf> |
视口与页面标题，供浏览器或搜索引擎使用，用户并不感兴趣 |
| 4 | <html lang="en" |
通知搜索引擎 html 文档使用的编程语言，也可以换成中文的<html lang="zh-cn"> |
| 5 | <meat> |
这是元数据,描述某种特定信息的数据 |
| 6 | <meat charset="UTF-8" /> |
文档编写语言所属的字符集，现流行UTF-8，已成行业标准 |
| 7 | name="viewprt" |
视口设置，如何显示页面，例如是否允许缩放页面等 |
| 8 | width=device-width |
页面的宽度与显示器的宽度相匹配，类似的device-height表示的是高度 |
| 9 | initial-scale=1.0 |
设置页面初始的比列，1.0表示原样1:1 |
| 10 | <title> |
显示当前文本页面的标题，这个标签对 SEO 非常重要 |
| 11 | <body>...</body> |
页面的主体内容，用户看到的，感兴趣的内容都应该编写在里面 |
| 12 | <!--注释内容-> |
用来描述标签的功能或用途，只会出现在 HTML 源代码中，不会显示在网页页面中 |
| 13 | <h2><h2>纳职欢迎您...</h2> |
最终呈现的标题内容或效果，但是标签<h2>并不会显示 |
编写的 HTML 文档的标签字符不区分大小写字母，为了显示效果，最好是全部使用小写字母|
| 元素的分类 | 标签性质 | 表达语法 | 描述 |
|---|---|---|---|
| 非空元素 | 是双标签，即有开始标签，就要用结束标签 | 例如<p>我爱学习</p> |
<起始标签>元素内容</结束标签> |
| 空元素 | 单标签 | 例如 <img src="..." alt="">,<link> |
<标签> |
空标签也有特殊的，要使用双标签的，例如`<script>/<video><br>….等
属性名=属性值，属性名使用小写字母，属性值要加上双引号：“ ”<input type="password" maxlength="20" placeholder="至少8个字符" required>| 序号 | 值类型 | 描述说明 |
|---|---|---|
| 1 | 字符串 | <p class="active">...</p> |
| 2 | 预定义值 | <input type="text"> |
| 3 | 指定格式 | <a href="https"//www.nazhi.com">...</a> |
| 4 | 数值 | <table width="200"...</table> |
| 5 | 布尔值 | <input type="email" required> |
布尔属性的值是可以选择的，只要元素中出现该属性，表示取“真”值
| 序号 | 属性名 | 描述 | 案例 |
|---|---|---|---|
| 1 | id |
元素的唯一标识 | <div id="wrap">...</div> |
| 2 | class |
给元素添加类样式 | <div class="box">...</div> |
| 3 | style |
设置当前元素的样式 | <div style="...">...</div> |
这三个属性，几乎可以添加在任何的元素上
<!DOCTYPE html><html lang="en"><head><meat charst="UTF-8" ><meat name="viewport" content="width=denice-width,initial-scale=1.0" /></meat><title>元素的标签、属性和值的正确嵌套关系</title></head><body><!-- 元素之间应该保持正确的嵌套关系 --><form action=""><div><label for="email">邮箱：</label><!-- 元素值：预定义值，指定值，布尔值，数值 --><input type="email" name="email" id="emali" maxlength="100" required /></div><div><label for="password">密码：</label><inputtype="password"name="password"id="password"placeholder="至少8位"required /></div><div><button>提交 </button></div></form></body></html>
<，>,&等特殊字符，需要转义后才可以添加到 html 文档& + 字符实体名称 + ；, 如<,使用；<表示unicode极大的缓解了特殊字符的问题，将文档编码设置为utf-8chapter1/demo1.html.html,不能用.htm_分隔多个单词http/https://模式/主机名或域名/文件路径/文件名| 序号 | 名称 | 描述 | 案例 |
|---|---|---|---|
| 1 | 模式 | 也称“协议”，是浏览器如何访问文件 | 如 http,https,ftp,mailto… |
| 2 | 主机名 | 也称“域名”或者“IP” | 如 https://www.nahzi.com/或者http://127.0.0.1/ |
| 3 | 文件路径 | 使用一个或者多个正斜线分割字符串 | 如 public/admin |
| 4 | 文件名 | 最后一个路径后面，带有扩展名的文件 | 如 index.html |
唯一的 URL
大部分情况下使用在本机电脑的文件查找等
| 序号 | 优点 | 描述 |
|---|---|---|
| 1 | 更直观 | 如 <div class="artcle">可以直接用<srticle>`标签 |
| 2 | SEO 优化 | 有利于 SEO 优化，提升关键字优化与网站排名 |
| 3 | 代码少 | 提高加载速度，方便维护与样式控制 |
| 4 | 无障碍支持 | 如视力受损等情况 |
1.通过今天的对 html 基础知识的学习，让我清楚的知道了网页的组成部分、文本下的专业术语及表现形式。
2.了解 html 代码的表现意思，及代码的页面结构，掌握编写源代码细节性、统一性的问题
3.通过对源代码的了解，知道源代码在文本中的关键性作用及用途，以及文本中的层级关系。
4.掌握记住了一些以后经常用到的元素及属性，属性值。
5.知道了平时在进入网站前输入的域名，代表什么
天蓬老师