网硕互联帮助中心参考课程:
【黑马程序员 JavaWeb开发教程】
[https://www.bilibili.com/video/BV1m84y1w7Tb]
@ZZHow(ZZHow1024)
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 标签都是预定义好的。例如：使用 展示超链接，使用 展示图片， 展示视频。
- HTML 代码直接在浏览器中运行，HTML 标签由浏览器解析。
-
CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。
-
总结 1
-
HTML 结构标签
<html>
<head>
<title>标题</title>
</head>
<body></body>
</html> -
特点
- HTML 标签不区分大小写。
- HTML 标签属性值单双引号都可以。
- HTML 语法松散。
-
总结 2
- 标题标签
- 标签：
https://blog.csdn.net/weixin_40483399/article/details/…
（h1 ——— h6 重要程度依次降低）。
- 注意：HTML 标签都是预定义好的，不能自己随意定义。
- 标签：
- 水平线标签
- 图片标签
- 绝对路径：绝对磁盘路径(D:/xxx)、绝对网络路径(https://xxx)。
- 相对路径：从当前文件开始查找(./：当前目录，https://blog.csdn.net/weixin_40483399/article/details/…/：上级目录)。
-
总结 3
- CSS 引入方式
- 行内样式：
- 内嵌样式：
- 外联样式：xxx.css
- 行内样式：
- 颜色表示
- 关键字：red、greenhttps://blog.csdn.net/weixin_40483399/article/details/…
- RGB 表示法：rgb(255, 0, 9)、rgb(134, 100, 89)
- 十六进制：#ff0000、#cccccc、#ccc
- 颜色属性
- color：设置文本内容的颜色
-
总结 4
- 标签
- ＜span> 是一个在开发网页时大量会用到的没有语义的布局标签。
- 特点：一行可以显示多个（组合行内元素），宽度和高度默认由内容撑开。
- CSS 选择器 • 元素选择器：标签名{⋯} • id 选择器：#id 属性值{⋯} • 类选择器：.class 属性值{https://blog.csdn.net/weixin_40483399/article/details/…} • 优先级：id 选择器 > 类选择器 > 元素选择器 CSS 属性 • color：设置文本的颜色 • font-size：字体大小（注意：记得加 px）
-
总结 5
-
超链接
- 标签：
- 属性：
- href：指定资源访问的 URL。
- target：指定在何处打开资源链接。
- _self：默认值，在当前页面打开。
- _blank：在空白页面打开。
-
CSS 属性
- text-decoration：规定添加到文本的修饰，none 表示定义标准的文本。
- color：定义文本的颜色。
-
总结 5
-
音频、视频标签
-
换行、段落标签
换行： 段落：
-
文本加粗标签
-
CSS 样式
line-height：设置行高 text-indent： 定义第一个行内容的缩进 text-align：规定元素中的文本的水平对齐方式
-
注意 在 HTML 中无论输入多少个空格，只会显示一个。可以使用空格占位符  。
-
总结 6：
-
CSS 盒子模型 组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。
CSS盒子模型
-
CSS 属性 width：设置宽度。 height： 设置高度。 border：设置边框的属性，如：1px solid #000; padding：内边距。 margin：外边距。 注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如：padding-top、padding-left、padding-righthttps://blog.csdn.net/weixin_40483399/article/details/…
-
总结 7：
- 表格标签
-
总结 8：
- 表单
- 表单标签：
- 表单属性：
- action： 表单数据提交的 URL 地址。
- method：表单提交方式。
- get： 表单数据拼接在 URL 后面，?username=java，大小有限制。
- post：表单数据在请求体中携带，大小没有限制。
- 注意：表单项必须有 name 属性才可以提交。
-
总结 9：
- 表单项标签
- 的 type 属性：text、password、radio、checkbox、 file、date、datetime-local、time、number、hidden、button、submit。
- ：定义下拉列表。
- ：定义文体域。
：定义表格。 ：定义表格中的行，一个 表示一行
| ：表示普通单元格。 |
评论前必须登录！
注册