Java阶段三Day01
文章目录
- Java阶段三Day01
- Web前端
- HTML
- 标记语言的格式
- 常见文本标签
- 字体相关标签
- 列表标签
- 图片和超链接
- 图片`<img>`标签
- 超链接`<a>`标签
- 表格和表单
- 表格`<table>`标签
- 表单`<form>`标签
- 常用快捷键
网站：客户端（页面展示）、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> | 按钮 |
常用快捷键
| 快捷键 | 介绍 |
|---|---|
| Alt+Insert | 新建文件 |
| Ctrl+D | 复制整行并粘贴到下一行 |
| Shift+回车 | 切换到下一行 |
| Ctrl+Alt+L | 代码格式化 |
| Ctrl+X | 剪切 (可以用做删除) |
| Ctrl+Z | 撤销 |
| Ctrl+Shift+Z | 恢复 |
| Ctrl+Shift+/ | 注释 |
