Web简介

• Web：全球广域网，也称为万维网（www World Wide Web），能够通过浏览器访问的网站。

• Web 网站的工作流程（前后端分离开发）
• 前端服务器 → 前端程序。
• 后端服务器 → Java 程序。
• 数据库服务器。

• Web 网站的开发模式
• 混合开发。
• 前后端分离开发（更流行）。

Web前端简介

• 网页的组成部分
文字、图片、音频、视频、超链接。

• 看到的网页背后的本质
程序员写的前端代码。

• 前端的代码如何转换成用户眼中的网页
通过浏览器转化（解析和渲染）成用户看到的网页。
浏览器中对代码进行解析渲染的部分，称为浏览器内核。

• 不同的浏览器，内核不同，对于相同的前端代码解析的效果会存在差异。

• Web 标准
• Web 标准也称为网页标准，由一系列的标准组成，大部分由 W3C（World Wide Web Consortium，万维网联盟）负责制定。
• 三个组成部分
• HTML：负责网页的结构（页面元素和内容）。
• CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
• Javascript： 负责网页的行为（交互效果）。

HTML、CSS

• HTML（HyperText Markup Language）：超文本标记语言。
• 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
• 标记语言：由标签构成的语言。
• HTML 标签都是预定义好的。例如：使用 <a> 展示超链接，使用 <img> 展示图片，<video> 展示视频。
• HTML 代码直接在浏览器中运行，HTML 标签由浏览器解析。

• CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。

• 总结 1
1. HTML 结构标签
2. 特点
• HTML 标签不区分大小写。
• HTML 标签属性值单双引号都可以。
• HTML 语法松散。

• 总结 2
1. 标题标签
• 标签：<h1>…</h1>（h1 ——— h6 重要程度依次降低）。
• 注意：HTML 标签都是预定义好的，不能自己随意定义。
2. 水平线标签 <hr>
3. 图片标签 <img src="…" width="…" height="…">
• 绝对路径：绝对磁盘路径(D:/xxx)、绝对网络路径(https://xxx)。
• 相对路径：从当前文件开始查找(./：当前目录，../：上级目录)。

• 总结 3
1. CSS 引入方式
• 行内样式：<h1 style="…">
• 内嵌样式：<style>…</style>
• 外联样式：xxx.css <link href="…">
2. 颜色表示
• 关键字：red、green…
• RGB 表示法：rgb(255, 0, 9)、rgb(134, 100, 89)
• 十六进制：#ff0000、#cccccc、#ccc
3. 颜色属性
• color：设置文本内容的颜色

• 总结 4
1. <span> 标签
• ＜span> 是一个在开发网页时大量会用到的没有语义的布局标签。
• 特点：一行可以显示多个（组合行内元素），宽度和高度默认由内容撑开。
2. CSS 选择器 • 元素选择器：标签名{⋯} • id 选择器：#id 属性值{⋯} • 类选择器：.class 属性值{…} • 优先级：id 选择器 > 类选择器 > 元素选择器 CSS 属性 • color：设置文本的颜色 • font-size：字体大小（注意：记得加 px）

• 总结 5
1. 超链接
• 标签：<a>
• 属性：
• href：指定资源访问的 URL。
• target：指定在何处打开资源链接。
• _self：默认值，在当前页面打开。
• _blank：在空白页面打开。
2. CSS 属性
• text-decoration：规定添加到文本的修饰，none 表示定义标准的文本。
• color：定义文本的颜色。

• 总结 5
1. 音频、视频标签
<audio> <video>
2. 换行、段落标签
换行：<br> 段落：<p>
3. 文本加粗标签
<b> <strong>
4. CSS 样式
line-height：设置行高 text-indent： 定义第一个行内容的缩进 text-align：规定元素中的文本的水平对齐方式
5. 注意 在 HTML 中无论输入多少个空格，只会显示一个。可以使用空格占位符 &nbsp。

• 总结 6：
1. CSS 盒子模型 组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。

2. CSS 属性 width：设置宽度。 height： 设置高度。 border：设置边框的属性，如：1px solid #000; padding：内边距。 margin：外边距。 注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如：padding-top、padding-left、padding-right…

• 总结 7：
1. 表格标签 <table>：定义表格。 <tr>：定义表格中的行，一个 <tr> 表示一行 <th>：表示表头单元格，具有加粗居中效果。 <td>：表示普通单元格。

• 总结 8：
1. 表单
• 表单标签：<form>
• 表单属性：
• action： 表单数据提交的 URL 地址。
• method：表单提交方式。
• get： 表单数据拼接在 URL 后面，?username=java，大小有限制。
• post：表单数据在请求体中携带，大小没有限制。
• 注意：表单项必须有 name 属性才可以提交。

• 总结 9：
1. 表单项标签
• <input>的 type 属性：text、password、radio、checkbox、 file、date、datetime-local、time、number、hidden、button、submit。
• <select>：定义下拉列表。
• <textarea>：定义文体域。