![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：unqualified
Teacher's comments：手写呢?
Collection
Collection
<!DOCTYPE html>
<!-- 标记这是一个html5文档 -->
<html lang="en">
<!-- 说明这个html文件的主要语言是英文。lang="zh-cn" 为主要语言是中文-->
<head>
<!-- 头部 内容无需用户关注，主要为开发者设计的为浏览器解析需要的标记标签 -->
<meta charset="UTF-8" />
<!-- 设定当前使用的字符集 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 设定可视屏幕宽度 其中device指的是设备宽度，initial-scale=1.0,不允许缩放，按1：1显示，无法自适应，适合pc端 -->
<title>Document</title>
<!-- 当前页面的标题 -->
<script type="text/javascript">
// 运行go函数后，在id=title1的标签中显示内容
function go() {
document.getElementById(“title1”).innerHTML = “能阻挡你的只有自己！”;
}
</script>
</head>
<!-- 头部内容结束标签 -->
<body>
<!-- body标签，页面内容容器 -->
<h2 style="color:green" ondblclick="go()">
<!-- 标签是页面元素，属性是对元素的描述，值是属性的结果 -->
这是4月2日课程的HTML基础知识示例
</h2>
<p id="title1"></p>
<!-- 这里显示js函数运行结果 -->
<form method="get" action="1.php">
<!-- 注意标签的层级关系和嵌套 -->
<p>hello world!</p>
<!-- 非空元素，一般为双标签 -->
<a href="https://www.baidu.com">跳转至百度</a>
name:<input type="text" name="name" />
<!-- 空元素，一般使用单标签，内容来自对外部文件或资源的引用，如音频，视频，图片等 -->
<button type="button">提交</button>
</form>
</body>
<!-- 页面内容结束 -->
</html>
<!-- 文档结束标签 -->
1、HTML的设计思想
1.1 页面中看到的所有内容都是元素；
1.2 元素都在标签之中；
1.3 html是超文本（包含超链接的文本）标记语言；
1.4 html语言中几乎所有元素都具有的三大通用属性：
ID属性+Class属性+style属性
| 元素种类 | 标签特点 |
|---|---|
| 非空元素 | 双标签 |
| 空元素 | 单标签 |
| 属性值类型 | 特点 |
|---|---|
| 预定义 | 只能选择值 |
| 字符串 | 可以自定义 |
| 指定格式 | 固定写法格式，如url值 |
| 数值类型 | 可视为某种指定格式类型 |
| 布尔值 | 除非不写该属性，定义了该属性即默认为真 |
2、HTML的页面结构和布局
元素有默认样式和自定义样式。
自定义样式的优先级高于默认样式。
样式重置：通过重置，实现在所有浏览器中输出的统一
3、HTML的其他相关知识
3.1 网页中的文本/实体字符，可查手册获得。用于html解析输出；
3.2 html语言中大小写不敏感。但通过外部输入提交至数据库中的内容需小心，可能存在大小写敏感问题；
3.3 html中文件名推荐使用连接线，如涉及将标签内容向数据库中提交，需要使用下划线。如name标签、id标签、labe标签等。
3.4 url：互联网统一资源定位符
如：https://www.php.cn/code/33345.html
其中https指web协议，默认端口80
ftp：// 指ftp协议 ，默认端口21
www.php.cn:主机名/域名 是ip地址语意化的表示
/code/33345.html 是访问资源在服务器上的真实位置