Java阶段三Day01
文章目录
网站：客户端（页面展示）、Web服务器（业务逻辑）、数据库服务器（数据存储）
Web前端
指使用HTML、CSS和JavaScript等技术，将设计师提供的网页设计图转化为浏览器可以识别并展示的网页界面，俗称做网页
HTML
- HTML是一种标记语言，用于创建网页。叫做超文本标记语言
- HTML由许多元素组成，这些元素可以指定不同的页面内容，如文本、图像、音频、视频等。
- 最新版本是HTML5(2014年)
- 作用：负责搭建页面的结构和准备内容(盖房子毛坯房)
标记语言的格式
<!DOCTYPE html>表示文档类型声明，告诉浏览器这是一个 HTML5 文档<html>和</html>标签表示 HTML 文档的开始和结束<head>和</head>标签之间包含一些元数据，如标题、样式表等信息。(给浏览器看的)<body>和</body>标签之间包含实际的页面内容。(给用户看的)
常见文本标签
- 内容标题
<h1></h1> ~ <h6></h6>：字体加粗, 独占一行, 自带上下的间距 - 段落标签
<p></p>：独占一行, 自带上下间距 - 水平分割线
<hr> - 换行
<br>
字体相关标签
- 加粗
<b></b> - 斜体
<i></i> - 下划线
<u></u> - 删除线
<s></s>
列表标签
- 无序列表
<ul><li></li></ul> - 有序列表
<ol><li></li></ol> - 列表嵌套 有序列表和无序列表，可以任意无限嵌套
图片和超链接
图片<img>标签
src：设置资源路径- 相对路径：访问站内资源时使用
- 资源和页面在同级目录： 直接写图片名
- 资源在页面的上级目录： … / 图片名
- 资源在页面的下级目录： 文件夹名 / 图片名
- 绝对路径：访问站外资源时使用，称为图片盗链，有找不到图片的风险
- 相对路径：访问站内资源时使用
alt：当图片不能加载时显示的文本title：鼠标悬停时显示的文本width/height：设置宽高- 两种赋值方式
- 像素
- 百分比
- 只设置宽度 高度会自动等比例缩放
- 两种赋值方式
超链接<a>标签
- 将用户从一个Web页面或站点带到另一个页面或位置
href：属性指定目标页面的URL(类似图片的src属性)target：指定链接在何处打开，常见的值有_blank(在新窗口中打开) 和_self(在当前窗口中打开)，如果没有设置target属性，则默认在当前窗口中打开链接- 页面内部跳转：在目的地元素里面添加
id属性, 然后在超链接href="#id"，这样就能跳转到指定元素的位置
表格和表单
表格<table>标签
<tr></tr>(table row) 标签定义表格中的行<td></td>(table data)标签定义表格中的单元格（数据）<th></th>(table header)标签定义表头<caption></caption>定义表格名称，加粗并居中- 相关属性：
colspan跨列rowspan跨行
表单<form>标签
<form></form>表单的作用：用来获取用户输入的各种信息提交给服务器
| 标签 | 介绍 |
|---|---|
<input type="text"> | 文本框 |
<input type="password"> | 密码框 |
<input type="radio"> | 单选框 |
<input type="checkbox"> | 多选框 |
<input type="date"> | 日期 |
<input type="file"> | 文件 |
<select><option></option></select> | 下拉框 |
<button></button> | 按钮 |
CSS
- CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于定义HTML、XML等文档中如何呈现页面的样式和布局的标准语言。
- 通过CSS可以控制网页的字体、颜色、大小、间距、背景等各种样式，从而实现对网页内容的精细控制。
- 与HTML相比，CSS具有更高的灵活性和可扩展性，可以将网页的样式和内容分离开来，使得网页结构更加清晰、易于维护和修改。
- 作用：负责美化页面(相当于装修)
CSS引入方式
- 内联：在标签的
style属性中添加样式代码， 不能复用 - 内部： 在
head标签里面添加style标签，在标签体内添加样式代码，可以当前页面复用 不能多页面复用 - 外部： 在单独css文件中添加样式代码，在
html页面中的head标签里面添加link标签 把css引入到html页面中，支持多页面复用
CSS选择器
选择器的作用：用于查找页面中的元素
- 标签名选择器：匹配页面中所有同名标签
- 格式： 标签名 { 样式代码 }
- id选择器： 当需要选择页面中某一个标签时使用
- 格式： #id { 样式代码 }
- 类选择器： 当需要选择页面中多个不相关的元素时,给多个元素添加相同的class值划分为同一类
- 格式： .class{ 样式代码 }
- 分组选择器： 将多个选择器划分为同一组进行统一管理
- 格式：div，#id，.class { 样式代码 }
- 属性选择器：通过元素的属性匹配元素
- 格式：格式：标签名 [ 属性名 = ‘值’ ] { 样式代码 }
- 后代选择器： 通过元素和元素之间的层级关系元素元素,选择的范围更广
- 格式： body div div p { 样式代码 } 匹配的是body里面的div里面的div里面的所有p(包含后代)
- 子元素选择器： 通过元素和元素之间的层级关系元素元素, 选择的范围更精准
- 格式： body>div>div>p { 样式代码 } 匹配的是body里面的div里面的div里面的所有p子元素(不包含后代)
- 伪类选择器： 选择元素的状态 包括： 未访问 / 访问过 / 悬停 / 激活
- 格式： a：link / visited / hover / active { 样式代码 }
常用快捷键
| 快捷键 | 介绍 |
|---|---|
| Alt+Insert | 新建文件 |
| Ctrl+D | 复制整行并粘贴到下一行 |
| Shift+回车 | 切换到下一行 |
| Ctrl+Alt+L | 代码格式化 |
| Ctrl+X | 剪切 (可以用做删除) |
| Ctrl+Z | 撤销 |
| Ctrl+Shift+Z | 恢复 |
| Ctrl+Shift+/ | 注释 |
555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
