Java Web开发（Day1）

icharacteristic

已于 2023-04-25 01:01:52 修改

阅读量184

点赞数

分类专栏： JavaWeb 文章标签： java 学习 html 前端

于 2023-04-22 21:44:35 首次发布

本文链接：https://blog.csdn.net/icharacteristic/article/details/130309837

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言

一、认识Web前端

1、HTML（HyperText Markup Language）：超文本标记语言

2、CSS（Cascading Style Sheet）：层叠样式表

前言

此博客主要记录在学习黑马程序员2023版JavaWeb开发课程的一些笔记，方便总结以及复习。

一、认识Web前端

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。

三个组成部分：

HTML：负责网页的结构（页面元素和内容）
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
JavaScript：负责网页的行为（交互效果）

1、HTML（HyperText Markup Language）：超文本标记语言

解释一下这个的名词：

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言

其中HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。同时HTML代码可以直接在浏览器中运行，HTML标签由浏览器解析。

2、CSS（Cascading Style Sheet）：层叠样式表

css主要就是用于控制页面的样式（表现）

二、JavaWeb开发工具

在黑马程序员当中是推荐的VS Code开发工具，但是我自己用的时候还是比较习惯于用IDEA，所以我是在IDEA中进行一个学习的，这个因人而异，都是可以的。

我在这里就贴上黑马程序员写的VS Code安装使用：

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。
VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。
VS Code 提供了非常强大的插件库，大大提高了开发效率。
内容：软件安装、插件安装
官网： https://code.visualstudio.com

三、在新浪新闻上学习基础标签&样式

标题标签

标签：<h1>…</h1>（h1 → h6 重要程度依次降低）
注意：HTML标签都是预定义好的，不能自己随意定义。

水平线标签 <hr>

图片标签 <img src="…" width="…" height="…">

1、新浪新闻-标题

标题排版

<!--文档类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--    字符集为UTF-8-->
    <meta charset="UTF-8">
    <!--    设置浏览器兼容性-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>

    <img src="img/news_logo.png"> 新浪政务 > 正文

    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>

    <hr>
    2023年03月02日 21：50 央视网
    <hr>


</body>
</html>

其中的img标签中各参数：

src：图片资源路径
width：宽度(px，像素; %，相对于父元素的百分比)
height：高度(px，像素; %，相对于父元素的百分比)

路径书写方式主要分为两种：

绝对路径：

1.绝对磁盘路径例如：

E:\Java_files\HTML\quickstart\img\news_logo.png

<img src="E:\Java_files\HTML\quickstart\img\news_logo.png">

一般不建议使用这个，因为浏览器无权限去访问不同根目录下的文件（Not allowed to load local resource）

2.绝对网络路径例如（需要联网）:

https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png

<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">

相对路径：

./：当前目录，./可以省略

<img src="./img/news_logo.png"> <img src="img/news_logo.png">

../：上一级目录

标题样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    <style>
        h1{
            /*color: red;*/
            /*color: rgb(0, 0, 255);*/
            color: #4D4F53;
        }
    </style>

</head>
<body>
    <img src="img/news_logo.png"> 新浪政务 > 正文


    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>

    <hr>
    2023年03月02日 21：50 央视网
    <hr>


</body>
</html>

使用css来控制字符样式，css的引入方式：

方式一：行内样式（放在当下行中，只对该行生效，一般在body内）

<h1 style="color: red">焦点访谈：中国底气 新思想夯实大国粮仓</h1>

方式二：内嵌样式（放在head中）

    <style>
        h1{
            /*color: red;*/
            /*color: rgb(0, 0, 255);*/
            color: #4D4F53;
        }
    </style>

方法三：外联样式：

先在目录下创建一个css文件，然后将需要的样式放在该文件夹中：

h1{
    color: red;
}

然后再在HTML文件中的head里声明link标签引入：

 <link rel="stylesheet" href="./css/news.css">

其中，颜色的表示方式一般有三种：

表示方式	表示含义	取值
关键字	预定义的颜色名	red，green，blue...
rgb表示法	红绿蓝三原色，每项取值范围：0~255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法	#开头，将数字转换为16进制来表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

css选择器：用来选取需要设置样式的元素(标签)

超链接

    <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文

标签： <a href="..." target="...">/* 超链接在原文的内容 */</a>

属性：

href：指定资源访问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开

在超链接的情况下，默认是变成蓝色和加了下划线的，我们可以重新设定他们的样式：

        a{
            color: black;
            text-decoration: none;
        }

text-decoration：规定添加到文本的修饰，none表示定义标准的文本。

2、新浪新闻-正文

正文排版

视频标签：<video>

    <video src="video/1.mp4" controls width="950px"></video>

src：规定视频的url
controls：显示播放控件，如果标签名和controls同名，可以不写
width：播放器的宽度
height：播放器的高度，不写默认按width调整

音频标签：<audio>

<audio src="audio/1.mp3" controls></audio>

src：规定音频的url
controls：显示播放控件

段落标签：<p>

    <p>
        人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
    </p>

换行：<br>

文本加粗标签: <b> / <strong>

css样式：

line-height：设置行高
text-indent：定义第一个行内容的缩进
text-align：规定元素中的文本的水平对齐方式

注意：在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符： 

页面布局

    <div id="center">
        <hr>
        <span id="time">2023年03月02日 21:50</span>   <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
        <hr>
        <p id="plast">
            责任编辑：王树淼 SN242
        </p>
    </div>

规定他们的样式：

    <style>
        
        #time{
            color: #968D92;
            font-size: 15px;
        }

        a{
            color: black;
            text-decoration: none;
        }

        p{
            text-indent: 35px; /* 设置首行缩进 */
            line-height: 35px; /* 设置行高 */
        }

        #plast{
            text-align: right; /*对齐方式*/
        }

        #center{
            width: 65%;
            /*margin: 0 17.5% 0 17.5%;*/
            margin: 0 auto;
        }
    </style>

盒子模型：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

div标签：

一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width、height）

span标签：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高（width、height）

四、表格、表单标签

1、表格标签

在网页中以表格（行、列）形式整齐展示数据

<table> 标签：定义表格整体，可以包裹多个 <tr>

属性：

border：规定表格边框的宽度
width：规定表格的宽度
cellspacing: 规定单元之间的空间。

<tr> 标签：表格的行，一个 <tr> 表示一行，可以包裹多个 <td>

<th> 标签：表示表头单元格，具有加粗居中效果

<td> 标签：表格单元格(普通)，可以包裹内容，如果是表头单元格，可以替换为 <th>

<table border="1px" cellspacing="0"  width="600px">
    <tr>
        <th>序号</th>
        <th>品牌Logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr>
        <td>1</td>
        <td> <img src="img/huawei.jpg" width="100px"> </td>
        <td>华为</td>
        <td>华为技术有限公司</td>
    </tr>
    <tr>
        <td>2</td>
        <td> <img src="img/alibaba.jpg"  width="100px"> </td>
        <td>阿里</td>
        <td>阿里巴巴集团控股有限公司</td>
    </tr>
</table>

2、表单标签

<input> 的type属性：text、password、radio、checkbox、file、date、datetime-local、time、number、hidden、button、submit

<select> 定义下拉列表

<textarea> 定义文本域

<!-- value: 表单项提交的值 -->
<form action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"> 男
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">

     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

Type取值	描述	形式
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮