Web开发（一）HTML5
写在前面
参考黑马程序员前端Web教程做的笔记，主要是想后面自己搭建网页玩。
这部分是前端HTML5+CSS3+移动web视频教程的HTML5部分。主要涉及到HTML的基础语法。
HTML基础
标签定义
HTML定义
HTML(HyperText Markup Language)，即超文本标记语言。
超文本：链接
标记：标签，带尖括号的文本。
标签语法定义如下，但凡需要包裹内容的就是双标签，只有几个是单标签。
基本骨架
在vscode中按!后配合Enter/Tab可以快速生成
如下所示。
标签的关系
包括父子关系（嵌套关系）、兄弟关系（并列关系）。
如下所示，head和body就是兄弟关系，外面的html和内层head、body属于父子关系。
注释
<!-- 注释内容 -->
标题标签
标题标签同typora自带的六级标题一样。标题标签会自动换行。一般来说h1标签在一个网页只用一次，用来放新闻标签或网页logo。
段落标签
顾名思义，用于写文字的一段。
换行和水平线标签
这两个都是单标签。
换行中，浏览器不会识别代码中的Enter换行。因为不管是一个间隙还是多个间隙，浏览器可以识别为1个空格。如果要多个空格，就得输入
是 HTML 中的一个特殊字符实体（Entity），表示"不换行空格"（Non-Breaking Space）。它有以下几个主要作用：
插入空格：在 HTML 中，多个连续的普通空格会被浏览器解析为一个空格，而
可以强制插入一个空格。保持不换行：它可以防止文本在这个位置换行。
示例结果如下：
<!-- 使用普通空格 -->第一行内容 第二行内容<br><!-- 使用 -->第一行内容 第二行内容<br><!-- 使用多个 可以创建更大的间距 -->第一行内容 第二行内容
文本格式化标签
通常用strong、em、ins、del标签写文本格式化标签（而不是b,i,u,s）。
em：emphasis
ins：insert
del：delete
b：bold，即粗体
i：italic，即斜体
u：underline，即下划线
s：strike-through，指的是穿过文本的删除线。
图像标签
图片的URL存放图片的位置，
vscode自带alt参数，alt是图片的替换文字，当图片显示错误时显示alt的文字。
主要用到alt参数和title参数。
另外还有width和height属性，但它们通常通过CSS得到。如果指定width（height），浏览器会等比例缩放height（width）。
路径指定，友情链接也属于绝对路径的应用。本地一般用相对路径。
超链接标签
点击后跳转到其他页面，为双标签。如下所示，href中写目标网页地址
<a href="">跳转文字描述</a>
用target="_blank"可以选择新窗口打开。
在开发初期，不知道超链接的跳转地址，href属性值写#，来表示空链接，不会跳转。
<a href="#">空链接</a>
音频、视频标签
音频标签
音频在默认情况下不会自动播放。
control用于显示音频控制面板。**在HTML5中，如果属性名和属性值完全一样，那么可以简写为一个单词。**即下两者是等价的。
(1)controls = "controls"
(2)controls
对于loop、autoplay同样可以简写为一个单词。但是即使设置了autoplay属性，仍然无法播放，因为浏览器一般禁用自动播放功能。
视频标签
autoplay需要配合muted属性设置才能生效。否则不会自动播放。
综合案例1——个人简介
整体目标与代码
思路如下，从上到下，先整体后局部。
完整代码：
<!DOCTYPE html>
<html lang="en">
<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><h1><strong>尤雨溪</strong></h1><hr><p>尤雨溪，前端框架<a href="#">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的<a href="#">JavaScript</a>项目，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。</p><img src="cat.gif" alt="一只猫的gif" title="一只猫的gif"><h2>学习经历</h2><p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p><h2>主要成就</h2><p>尤雨溪<strong>大学专业并非是计算机专业</strong> ，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，<ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯。</ins></p><p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 库，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p><h2>社会任职</h2><p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>
</body>
</html>
小tips
一段的文字过长，可以用alt+z快捷键换行，方便观看。
如果要在段落中插入超链接，可以在光标后先打一个空格，这样就可以有vscode的编译提示。
综合案例2——Vue简介
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue简介</title>
</head>
<body><h1>Vue.js</h1><p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p><p>其作者为<a href="./test1_cv.html" target="_blank">尤雨溪</a></p><h2>主要功能</h2><p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p><p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。<video src="./vue.mp4" controls></video></p>
</body>
</html>
HTML进阶语法
列表
一般来说，无序列表用的最多。
无序列表
注意事项
- ul标签中只能包裹li标签，无法包裹如段落p其他标签
- li标签中可以包裹任何内容。
- ul：unorder list
有序列表
ol：ordered list
定义列表
dl：define list
dt：define title
dd：define detail
表格
与Excel表格类似。
tr（table row）
th（table headline）
td（table data）
表格的结构，这儿的thead、tbody是给浏览器看的，目的是代码优化，浏览器更好识别内容。
合并单元格
跨行合并例子
跨列合并例子
不能跨结构标签（thead，tbody，tfoot）合并，即不能合并tbody中的“李四”和tfoot中的“总结”。
表单
定义
input标签
基础
input为单标签
占位文本
用于提示信息。
单选框radio
设置默认选择“checked”，会默认选择对应单选框。
上传多个文件
多选框checkbox
下拉菜单
文本域
默认的col和row不用html设计，而是后面用css设计。
这里应该在前面的方括号后面添加placeholder=“请输入评论”，否则会和用户输入混淆。
label标签
label有两种方法
完整写法代码示例
简易写法示例
按钮button
默认type属性为submit
需要定义form标签，来定义表单区域。
无语义的布局标签
div一般称为大盒子，span称为小盒子。
使用示例，三个红框都是用div标签隔出来的。
字符实体
lt：less than
gt：greater than
中文字符大小的空格字符：
 
综合案例1——体育新闻列表
对应实现代码如下：
<!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><ul><li><img src="./img/1.jpg" alt="主帅安东尼奥回西班牙休假 国青抵达海口进行隔离"><h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3></li><li><img src="./img/2.jpg" alt="梅州主帅：申花有强有力的教练组 球员体能水平高"><h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3></li><li><img src="./img/3.jpg" alt="马德兴:00后球员将首登亚洲舞台 调整心态才务实"><h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3></li></ul>
</body>
</html>
综合案例2——注册信息
完成示例：
这儿的确认密码和密码相同是通过js确认的，现在只需要设计出样式即可。
<!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><h1>注册信息</h1><form action=""><h2>个人信息</h2><label>姓名：</label><input type="text" placeholder="请输入真实姓名"><br><br><label>密码：</label><input type = "password" placeholder="请输入密码"><br><br><label>确认密码：</label><input type = "password" placeholder="请再次输入密码"><br><br><label>性别：</label><label><input type="radio" name="gender">男</label><label><input type="radio" name="gender" checked>女</label><br><br><label>居住城市：</label><select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option selected>武汉</option></select><h2>教育经历</h2><label>最高学历：</label><select><option>本科</option><option selected>硕士</option><option>博士</option><option>大专</option></select><br><br><label>学校名称：</label><input type="text"><br><br><label>所学专业：</label><input type="text"><br><br><label>在校时间：</label><select><option>2015</option><option>2016</option><option>2017</option><option>2018</option></select>--<select><option>2019</option><option>2020</option><option>2021</option><option>2022</option></select><h2>工作经历</h2><label>公司名称：</label><input type="text"><br><br><label>工作描述：</label><br><textarea placeholder="请输入工作描述"></textarea><br><br><label><input type="checkbox">已阅读并同意以下协议:</label><br><ul><li><a href="#">《用户服务协议》</a></li><li><a href="#">《隐私政策》</a></li></ul><br><br><button>免费注册</button><button type="reset">重新填写</button></form></body>
</html>
