01 - HTML

1.1 B/S 软件的结构

1.2 前端的开发流程

1.3 网页的组成部分

页面由三个部分内容组成：①内容（结构）；②表现；③行为

内容（结构）：是我们在页面中可以看到的数据，我们称之为内容。一般内容，我们使用 html 技术来展示。
表现：指的是这些内容在页面上的展现形式。比如说 布局、颜色、大小等等。一把按使用 CSS 技术实现。
行为：指的是页面中元素与输入设备交互的响应。一般使用 JavaScript 技术实现。

1.4 HTML 简介

Hyper Text Markup Language（超文本标记语言）简写：HTML

HTML 通过标签来标记要显示的网页中的各个部分。网页本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器，如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

1.5 创建 HTML 文件

1. 创建一个 web 工程（静态的 web 工程）
   
   
   
2. 在工程下创建 html 页面
   
   选择浏览器执行页面
   
   第一个 html 实例：
   
   注：Java 文件是需要先编译，再由 Java 虚拟机跑起来。但 HTML 文件不需要编译，直接由浏览器进行解析执行。

1.6 HTML 文件的书写规范

html的代码注释：<!-- 这是 html 的注释，可以在页面中右键查看源代码中看到 -->

注：在 markdown 编辑器中 HTML 的注释内容会不可见！

1.7 HTML 标签介绍

1. 标签的格式：
   <标签名>封装的数据</标签名>
2. 标签名大小写不敏感。
3. 标签拥有自己的属性。
   • 基本属性：bgcolor=“red”（可以修改简单的样式效果）
   • 事件属性：οnclick=“alert(‘你好！’);”（可以直接设置事件响应后的代码）
4. 标签又分为，单标签和双标签。
   • 单标签格式：<标签名/>（br 换行、hr 水平线）
   • 双标签格式：<标签名>…封装的数据…</标签名>
     

标签的语法：

1. 标签不能嵌套
2. 标签必须正确关闭
3. 属性必须有值，属性值必须加引号
4. 注释不能嵌套
   注意：html 代码不是很严谨。有时候标签不闭合，也不会报错。

1.8 常用标签介绍

1.8.1 font 字体标签

需求1：在网页上显示“我是字体标签”，并改字体为宋体，颜色为红色

1.8.2 特殊字符

需求1：把 <br> 换行标签 变成文本 转换字符显示在页面上。
常用特殊字符表：

其他特殊字符表：

1.8.3 标题标签

标题标签是 h1 到 h6
需求1：演示标题1 到标题6

1.8.4 超链接（*重点）

需求1：普通的超链接

1.8.5 列表标签

①无序列表；②有序列表

需求1：使用无序列表把东北 F4 ：赵四、刘能、小沈阳、宋小宝展示出来

1.8.6 img 标签

img 标签可以在 html 页面上显示图片

需求1：使用 img 标签显示一张美女的照片，并修改宽高，和边框属性

1.8.7 表格标签（*重点）

需求1：做一个 带表头的，三行三列的表格，并显示边框
需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距

1.8.8 跨行跨列表格（*次重点）

需求1：新建一个五行五列的表格，第一行，第一列 的单元格要跨两行，第二行的第一列的单元格要跨两行，第四行第四列的单元格跨两行两列

1.8.9 了解 iframe 的框架标签（内嵌窗口）

iframe 标签可以在一个 html 页面上，打开一个小窗口，去加载一个单独的页面

1.8.10 表单标签

什么是表单？
表单就是 html 页面中，用来收集洪湖信息的所有元素集合。然后把这些信息发送给服务器。

需求1：创建一个个人信息注册的表单界面。包含用户名、密码、确认密码。性别、爱好、国籍。自我评价。重置，提交

注：此实现没有关注 表单的格式 及 提交细节

表单的提交细节：

1.8.11 其他标签

需求1：div、span、p 标签的演示