java综合开发-前后端分离-01前端html，css
java综合开发-前后端分离-01前端html，css[*][ 任务列表 ]
[*]1.阶段目标
[*]2.网页基础知识
[*]3.html和css
[*]4.html的常用标签
[*]4.1. 标题标签：h1-h6
[*]4.2. 图片标签：img
[*]4.3. 水平分割线标签：hr
[*]4.4. css的三种引入方式：
[*]4.5. 颜色的三种表示形式：
[*]4.6. css的三种选择器：
[*]4.7. 无语义的标签：span
[*]4.8. 超链接：a
[*]4.9. 视频标签：video
[*]4.10. 音频标签：audio
[*]4.11. 段落标签：p
[*]4.12. 空格： ；
[*]5.页面布局
[*]5.1. 盒子模型
[*]5.2. 布局标签：div，span
[*]5.3. 表格标签：table
[*]5.4. 表单标签：form
[*]5.5. 表单项标签：Input，select，textarea
[*]5.6. 多区域选中标签：label
[*]6.补充知识
1.阶段目标
[*]学习路线：
[*]学习目标：
具备一定的Java基础；
掌握数据库表的设计和操作能力，基础的优化能力；
掌握主流的前后端分离的开发模式；
掌握文本开发核心知识，接口开发能力；
掌握文本开发的解决方案。
[*]web：全球广域网，万维网（www world wide web），能够通过浏览器访问的网站。
[*]web应用的基础架构（web架构的重要组成部分）：
浏览器；
前端服务器（前端程序）；
后端服务器（Java程序）；
数据库服务器。
2.网页基础知识
[*]网页的组成部分：
文字，图片，音频，视频，超链接……
[*]网页背后的本质是什么？
前端代码。
[*]前端代码如何转换为用户看到的网页的？
通过浏览器转化（解析和渲染）；
浏览器中对代码进行解析渲染的部分称为浏览器内核。
[*]web标准：由w3c（world wide web Consortium，万维网联盟）负责制定；
[*]网页的三个组成部分：
HTML：负责网页的结构（页面元素和内容）；
CSS：负责网页的表现（外观，位置，颜色，大小）；
JavaScript（简称js）：负责网页的行为（交互效果）。
3.html和css
[*]HTML（HyperText Markup Language）：超文本标记语言。
超文本：超越了文本的限制，比普通文本更强大；
标记语言：由标签构成的语言，标签都是预定义好的。
[*]HTML快速入门：
① 创建文本文件，后缀名改为.html；
② 编写HTML结构标签；
③ 在中填写内容。
[*]HTML的特点：
html标签不区分大小写；
html标签一般写在之中，而且一般成对出现；
html标签属性值单双引号都可以；
html语法松散。
<html>
<head>
<title>HTML快速入门</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
[*]css（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（外观，位置，颜色，大小）。
[*]css三种引入方式：
[*]行内样式：写在style属性中（不推荐）
[*]内嵌样式：写在style标签中（可以写在页面任何位置，通常约定写在head标签中）
[*]外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）
4.html的常用标签
1. 标题标签：h1 - h6
（大 - 小）
2. 图片标签：img
[*]属性值：
[*]src：图片资源路径；
[*]width：宽度（px，像素；%，相对于父元素的百分比）；
[*]height：高度（px，像素；%，相对于父元素的百分比）；
[*]为了等比例缩放，通常在高度和宽度中只会选择一个进行设置。
[*]路径的书写方式：
[*]绝对路径：
[*]绝对磁盘路径：https://www.cnblogs.com/E:\work\Javaweb\HTML\img\news_logo.png
https://www.cnblogs.com/E:workJavawebHTMLimgnews_logo.png
[*]绝对网络路径：https://i2.sinaimg.cn/……/news_logo.png
[*]相对路径：（推荐使用相对路径）
[*]./当前目录，其中./可以省略的
[*]../ 上一级目录，../不可省略
3. 水平分割线标签：hr
作用：画出一条水平分割线。
4. css的三种引入方式：
[*]方式一：行内样式：写在style属性中（不推荐）
焦点访谈：中国底气 新思想夯实大国粮仓
[*]方式二：内嵌样式：写在style标签中（可以写在页面任何位置，通常约定写在head标签中）
<head>
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
[*]方式三：外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入，也是通常约定写在head标签中）
h1{
color: aqua;
}
5. 颜色的三种表示形式：
[*]关键字：预定义颜色名，red，green……
[*]rgb表示法：每项取值0-255
[*]十六进制表示法：#开头，将数字转换成十六进制表示。其中两位是一样的可以简写。例如：#000000 ==> #000 ，#cccccc ==> #ccc
6. css的三种选择器：
作用：用来选取需要设置样式的元素（标签）
作用的优先级：id选择器 > 类选择器 > 元素选择器
[*]id选择器：一个页面中，id是唯一的
[*]类选择器：一个页面中，class是可以重复的。
[*]元素选择器：例如h1，h2……
7. 无语义的标签：span
作用：组合行内元素，一行可以展示多个span标签
8. 超链接：a
[*]属性值：
[*]href：指定资源访问的url
[*]target：制定在何处打开资源链接
[*]_self：默认值，在当前页面打开
[*]_blank：在空白页面打开
[*]去掉超链接中的下划线，和颜色定义成黑色：
[*]text-decoration：文本装饰
[*]color：定义文本颜色（black）
9. 视频标签：video
属性值：
[*]src：视屏的url
[*]controls：显示视频播放控件
[*]width：播放器的宽度
[*]height：播放器的高度
注：controls标准写法是：controls=“controls”，但在html中，如果标签的属性名和属性值一样，可以省略不写，只要一个controls
10. 音频标签：audio
属性值：
[*]src：音频的url
[*]controls：显示播放控件
11. 段落标签：p
[*]文本加粗标签：b 或者 strong
strong标签有强调的意思，不强调可以用b标签。
[*]文本对齐样式：text-align：center，left，right
12. 空格： ；
在html中，无论输入多少个空格，只会显示一个。可以使用空格占位符： ；。
5.页面布局
1. 盒子模型
盒子：页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行布局。
[*]盒子模型组成：
内容区域（content）；
内边距区域（padding）；
边框区域（border）；
外边距区域（margin）。
其中，外边距区域margin不包含在盒子里面。
2. 布局标签：div，span
[*]div标签：
一行只显示一个（独占一行）；
宽度默认是父元素的宽度，高度默认由内容撑开；
可以设置宽高（width，height）
[*]span标签：
一行可以显示多个；
宽度和高度默认由内容撑开；
不可以设置宽和高。
3. 表格标签：table
[*]场景：在网页中以表格（行、列）形式整齐地展示数据，如班级表。
[*]table：表格整体，可以包裹多个tr，
[*]border：规定表格边框的宽度，
[*]width：规定表格的宽度，
[*]cellspacing：规定单元之间的空间。
[*]tr：表格的行，可以包含多个td
[*]td：表格单元格，可以包裹内容，如果是表头单元格，可以替换成th（加粗，居中）
4. 表单标签：form
[*]场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
[*]表单标签内含多个表单项标签：Input，select，textarea
[*]Input：定义表单项，通过type属性控制输入形式；
[*]select：定义下拉列表；
[*]textarea：定义文本域。
[*]属性：
[*]action：规定当提交表单时向何处发送表单数据，url；
[*]method：规定用于发送表单数据的方式。get，post。
[*]get：在url后面拼接表单数据，比如：？username=Tom&age=12，url长度有限制。get是method提交方式的默认值
[*]post：在消息体（请求体）中传递的，参数大小无限制。
查看post内容：f12-> network -> 点击提交 -> payload
[*]name：表单项必须有name属性才可以提交
[*]value：表单项提交的值
<html>
<head>
<title>表单标签</title>
</head>
<body>
<form action="" method="post">
姓名：<input type="text" name="name"> <br>
密码：<input type="password" name="password"><br>
性别：<label><input type="radio" name="gender" value="1">男</label>
<label><input type="radio" name="gender" value="2">女</label><br>
<input type="submit" value="提交"><br>
</form>
</body>
</html>5. 表单项标签：Input，select，textarea
Input定义表单项标签，通过type属性控制输入形式。
[*]text：默认值，定义单行的输入字段；
[*]password：定义密码字段；
[*]radio：定义单选框；
[*]checkbox：定义复选框；
[*]file：定义文件上传按钮；
[*]date/time/datetime-local：定义日期/时间/日期时间；
[*]number：定义数字输入框；
[*]email：定义邮件输入框；
[*]hidden：定义隐藏域；
[*]submit/reset/button：定义提交按钮/重置按钮/可点击按钮；
[*]select：定义下拉列表，
[*]option定义列表项；
[*]textarea：文本域，
[*]cols：一行可以输入多少字符，
[*]rows：默认多少行；
6. 多区域选中标签：label
label标签所包裹的任何区域都可以被选中。
6.补充知识
[*]前端开发官方文档：https://www.w3school.com.cn/
[*]前端开发工具：vscode
[*]开发注意事项：
修改完了要记得保存；
alt+B打开浏览器运行代码。
[*]浏览器打开前端代码：
在浏览器右键：检查（打开开发者工具）；
或者f12。
[*]字体大小调整的属性：font-size，记得加上px
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 感谢发布原创作品，程序园因你更精彩 东西不错很实用谢谢分享 不错，里面软件多更新就更好了 懂技术并乐意极积无私分享的人越来越少。珍惜 yyds。多谢分享 谢谢分享，试用一下
页:
[1]