![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：非常棒, 特别是手写, 很认真
Collection
Collection
[toc]
| 序号 | 内容 | 描述 |
|---|---|---|
| 1 | 文本内容 | 用户看到的网页文本，例如新闻、电话等 |
| 2 | 其它文件的引用 | 如图片、视频、音频、css、样式表、js脚本等 |
| 3 | 标记 | 对文本以及引用文件的正确描述 |
| 术语 | 描述 |
|---|---|
| 超文本 | 是指包含有超链接的文本 |
| 标记 | 就是用来描述内容的固定标签 |
| 语言 | html并不是编程语言，只是书写html文档的工具 |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>html5页面结构</title></head><body><!-- 页面主体内容 --><h2>大名科技欢迎您</h2></body></html>
| 代码 | 解析 |
|---|---|
<!DOCTYPE html> |
通知浏览器这是一个html5文档，应该写在第一行 |
<html>...</html> |
根标签，或者叫做根元素，整个html文档内容都必须写到这对标签中 |
<html lang="en"> |
通知搜索引擎html文档使用的编写语言，如果是中文建议改成<html lang="zh-CN"> |
<head>...</head> |
供浏览器和搜索引擎使用，描述字符编码集，视口与页面标题，用户并不感兴趣 |
<meta> |
设置页面元素数据，所谓元数据，就是描述某种特定信息的数据 |
<meta charset="UTF-8"> |
通知浏览器html文档编写语言所属的字符编码集，现在最流行的是UTF-8,已成行业标准 |
<meta name="viewport"> content="..." |
下面三行是对它的解读 |
name="viewport" |
设置视口（即可视区屏幕）如何显示这个页面，例如是否允许缩放这个页面 |
width=device-width |
页面宽度应该与显示设备的宽度匹配，类似还有device-height表示设备的屏幕高度 |
initial-scale=1.0 |
设置页面初始绽放比例，1.0表示原样1：1显示，不允许有任何绽放 |
<title> |
显示在浏览器标签上的文本，指定当前页面的标题，这个标签对SEO非常重要 |
<body>...</body> |
页面主体内容，允许或希望用户的内容都写到这里，用户也只对这里的内容感兴趣 |
<!--注释内容--> |
注释用来描述标签功能或用途，它的内容不要出现在显示的网页中，只会出现在html源码中 |
<h2>大名科技欢迎您</h2> |
浏览器渲染这个html文档时，最终只会呈现这个标题内容与效果，并不显示标签<h2> |
编写html文档的标签字符不区分大小写，但是推荐全部使用小写字母
| 元素 | 标签 | 语法 | 描述 | |
|---|---|---|---|---|
| 非空元素 | 双标签 | <p>学习让我变得强大</p> |
<起始标签>元素内容</结束标签> |
|
| 空元素 | 单标签 | `<img src="0101.jpg" alt=""> | <link>` | <标签> |
空元素也有使用双标签描述的，如
<script>|<video>|<br>...
属性名="属性值",属性名推荐只使用小写字母，属性值推荐加上双引号<input type="password" maxlenght="20" placeholder="至少8个字符" required>| 序号 | 值类型 | 描述 |
|---|---|---|
| 1 | 字符串 | <p class="active">...</p> |
| 2 | 预定义值 | <input type="text"> |
| 3 | 指定格式 | <a href="https://php.cn">...</a> |
| 4 | 数值 | <table width="200">...</table> |
| 5 | 布尔值 | <input type="emai" requied> |
布尔属性的值是可选的，只要元素中出现该属性，表示它取真值
| 序号 | 属性名 | 描述 | 举例 |
|---|---|---|---|
| 1 | id |
元素的唯一标识 | <div id="daming">...</div> |
| 2 | class |
给元素添加类样式 | <div class=""box>...</div> |
| 3 | style |
设置当前元素样式 | <div style="...">...</div> |
这几个属性，几乎可以添加到任何元素上
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>元素的标签，属性和值，正确的嵌套关系</title></head><body><!-- 元素之间应该保持正确的嵌套 --><form action=""><div><!-- for属性的值与输入框里的id属性值一致时可聚焦到输入框 --><label for="email">邮箱：</label><!-- 元素值：预定义值，指定值，布尔值，数值 --><input type="email" name="email" id="email" maxlength="100" required /></div><div><!-- for属性的值与输入框里的id属性值一致时可聚焦到输入框 --><label for="password">密码：</label><inputtype="password"name="password"id="password"placeholder="至少8位"required/></div><div><input type="button" name="button" value="提交" /></div></form></body></html>
<,>,&等字符具有特殊意义，需要转义后才允许加到html文档& + 字符实体名称 + ；，如：<,使用：<表示Unicode极大的缓解了特殊字符的问题，推荐将文档编码设置为utf-8<head><meta charset="UTF-8"></head>| 序号 | 字符 | 描述 | 转义字符 | 实体编号 |
|---|---|---|---|---|
| 1 | '' |
空格 | nbsp |
|
| 2 | < |
小于 | < |
``< |
| 3 | > |
大于 | > |
> |
| 4 | & |
&符号 |
amp |
& |
| 5 | " |
双引号 | " |
" |
| 6 | © |
版权 | © |
© |
| 7 | ® |
已注册符号 | ® |
® |
| 8 | x |
乘号 | × |
× |
| 9 | ÷ |
除号 | ÷ |
÷ |
charpter1/demo1.html.html,不要用.htm-,而不是下划线_分割多个单词http://模式/主机名/路径/文件名| 序号 | 字符 | 描述 | 举例 |
|---|---|---|---|
| 1 | 模式 | 也称“协议”，浏览器如何访问这个文件 | http,https,ftp,mailto… |
| 2 | 主机名 | 使用“域名”或“ip”表示 | https://www.php.cn/,或者`` |
| 3 | 路径 | 使用哟个或者多个正斜线分割的字符串 | public/ |
| 4 | 文件名 | 最后一个路径的后面，带有扩展名的文档 | about.html |
如果是以路径分隔符
/结尾，则启用默认文件名，如index.html
| 序号 | 使用场景 | 举例 |
|---|---|---|
| 1 | 被引用目标与当前位置无关 | http://php.cn/courses/123.html |
| 2 | 引用其他服务器上的文件 | https://www.php.net/manual/zh/ |
|序号|使用场景|举例|
|1|引用同一目录下文件|直接写文件名，如demo2.html|
|2|引用子目录下文件|目标文件钱带上子目录名，使用目录分隔符/连接，如chapter2/demo2.html|
|3|引用上层目录文件|文件名前加二个点，同样使用目录分隔符/连接，允许逐级向上查询，如../../demo2.html|
|4|根路径/|为防止过多层级的向上递归查询，可以从当前服务器根目录开始查询，如/admin/books/chapter2/|
访问同一个网站文件，应该始终坚持使用相对URL地址
|序号|优点|描述|
|1|更直观|对于一篇文章<article>标签，显然要比使用<div class="article">更加直观|
|2|SEO优化|搜索引擎更加喜欢你的网页，有利于SEO，提升关键词=优化与排名|
|3|代码更少|提高加载速度，也方便代码维护与样式控制|
|4|无障碍支持|例如梳理受损使用的屏幕阅读器，语义化就非常重要了|
<form>标签中<label>与<input>的属性值一致时，可实现输入光标的聚焦功能<div>来写代码的习惯来说，还真是一大新世界
