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