网页设计基础笔记-11

最新推荐文章于 2023-12-18 12:19:29 发布

不吃肉的小胖

最新推荐文章于 2023-12-18 12:19:29 发布

阅读量434

点赞数

分类专栏： html java基础文章标签： java servlet 前端

本文链接：https://blog.csdn.net/qq_59074037/article/details/125990829

版权

java基础同时被 2 个专栏收录

12 篇文章

订阅专栏

html

4 篇文章

订阅专栏

编程任务：

分析图书信息10个属性

编号、图书名称、作者、价格、出版社、图书分类、页数、库存、销量、版次

创建图书的实体类

public class Book{
    public int bookId;
    public String bookName;
    public String author;
    public double price;
    public String publishHouse;
    public String type;
    public int pageCount;
    public int storeNum;
    public int sellNum;
    public String version;
}

创建3个图书对象，给10个属性赋值

Book b1 = new Book();
b1.bookId = 1;
b1.bookName = "平凡的世界";
b1.author = "路遥";
...

将3个图书存放到数组/ArrayList

ArrayList list = new ArrayList();
list.add(b1);
list.add(b2);
list.add(b3);

一、后端响应数据到前端

1.Java程序从数据库查询到所需的数据存储在实体类对象中

2.Java程序将实体类对象转换成json格式的字符串

3.Java程序将json格式字符串传递到前端

在这里插入图片描述

二、后台项目的运行和访问

music-1.0.0.jar 是一个已经完成的Java程序，只需要运行起来，就可以对它进行请求获得对应的音乐信息

2.1 运行music.jar

从QQ群现在music.jar文件，存储在计算机的指定目录中（E:\）
打开存放music.jar的目录，在地址栏输入cmd回车
在弹出的命令行窗口输入java -jar music-1.0.0.jar

在这里插入图片描述

2.2 浏览器访问music.jar

2.2.1 音乐搜索

http://47.96.11.185:9999/music/search?s=张韶涵

2.2.2 音乐详情

http://47.96.11.185:9999/music/detail?id=25640392

三、网页设计介绍

3.1 什么是网页

网页，就是存储在服务器端、可以通过网络进行访问并传输、通过浏览器可以打开的页面文件

3.2 HTML

HyperText Markup Language 超文本标记语言——语法规范，使用不同的标签在网页中显示不同的视图（文本、图片、声音、视频、按钮、输入框…）

在这里插入图片描述

3.3 网页文件规范

3.3.1 标签

标签是一种特定的语法——是使用<>与特定的单词进行组合从而在网页中显示对应视图的语法

标签语法有两种：
单标签
<tagName/>
双标签: 在前后两部分之间可以包含其他内容，被包含的标签称为子标签
<tagName>
   content
</tagName>

3.3.2 标签属性

在单标签或者双标签的前标签标签名之后，可以添加键值对来设置标签的特性，这些键值对称之为标签的标签属性，=前面的部分称为属性名，=后面""中的内容称为属性值
<tagName key1="v1" key2="v2"/>
<tagName key1="v1" key2="v2"> ... </tagName>

3.3.3 网页文件结构

网页就是一个后缀名为.htm或者.html的文件
在网页文件的第一行通过<!DOCTYPE html>声明当前网页遵守的HTML规范版本（H5）
在网页文件中有一对根标签html
在html标签中有两对子标签：head 和 body
- head标签主要用来定义当前网页属性相关的内容
  - meta 设置网页编码
  - title 设置网页标题
- body标签主要用来定义当前网页显示的内容

网页基本结构示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>第一个网页</title>
	</head>
	<body>
		千锋武汉Java2208
		<input/>
	</body>
</html>

四、前端开发工具

4.1 常见的前端工具

DreamWeaver
subline
webstorm
vs
HBuilder、HBuidlerX

4.2 HBuilderX的使用

下载
解压
运行
使用
- 创建项目
- 创建网页文件
  - 选择创建好的项目—右键—新建—.html文件
  - 输入文件名称即可
- 预览
- 浏览器运行

在这里插入图片描述

五、常用的HTML标签

5.1 显示标签

将文本、图片、声音、视频显示在网页中

文本

<font color="red" size="7" face="华文行楷">从前有座山</font>
<font color="blue" size="5" face="隶书">山里有座庙</font>

<!-- 样式属性：写在style属性值中的键值对 ，多个样式属性用;隔开，样式属性名和属性值用:隔开-->
<label style="color:purple ; font-size:30px ; font-family:楷体 ">庙里有口井</label>

图片

<!-- 
src属性，指定要显示的图片路径（相对路径、网络路径、绝对路径） 
width属性，设置图片的宽度（单位：像素，无需px）
height属性，设置图片的高度，如果宽度和高度同时设置可能会导致图片变形，我们通常只设置一个，另一个等比缩放
alt属性，设置图片不可见时的替换文本
-->
<img src="imgs/img01.png" width="100" height="100"/>
<img src="" width="100" height="100" alt="图片看不见"/>
<img src="https://t7.baidu.com/it/u=737555197,308540855&fm=193&f=GIF" width="100" height="100"/>

声音&视频

<!-- audio调用浏览器内置的音频播放器
controls属性，显示播放器视图
src属性，指定播放的音频源
autoplay属性，设置自动播放
loop属性，设置自动循环播放的次数，-1表示无限循环
-->
<audio controls src="media/麻雀.mp3" loop="-1"></audio>

<!-- video调用浏览器内置的视频播放器
width属性，设置播放器宽度
height属性，设置播放器高度
-->
<video controls="controls" src="media/Java学科宣传片.mp4" width="600" height="400"></video>

5.2 表单标签

表单标签即输入标签

在网页中提供文本输入框、密码输入框、单选按钮、复选框、按钮等，让用户可以在网页中输入数据。

5.2.1 form标签

form标签用来提交输入框中输入的数据

输入框需要放在form标签的里面
当点击form标签里面的提交按钮(type=submit的按钮)时，会将form中输入框的值提交到action属性设置的地址

<form action="https://www.baidu.com/s">
    <input name="wd"/>
    <button type="submit">百度一下</button>
</form>

5.2.2 常用表单标签

文本输入框:<input type="text"/> <br/>
密码输入框:<input type="password"/><br/>
文件选择框:<input type="file"/><br/>
单选按钮:<input type="radio"/><br/>
复选框:<input type="checkbox"/><br/>

普通按钮:<input type="button" value="按钮1"/> <br/> 
提交按钮:<input type="submit" value="登录"/><br/>  <!--用在form标签中，用于提交当前表单-->
图片按钮:<input type="image" src="imgs/btn_get.jpg"/><br/>
重置按钮:<input type="reset" value="取消"/><br/>   <!--用在form标签中，用于取消当前表单中的输入-->

<button type="submit">登录</button><br/>
<button type="button">按钮2</button><br/>
<button type="reset">取消</button><br/>

颜色选择框:<input type="color"/><br/>
日期选择框:<input type="date"/><br/>
数字输入框:<input type="number"/><br/>

下拉菜单：
<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>武汉</option>
</select>
<br/>
文本域:<textarea rows="4" cols="30"></textarea>
<br/>

5.3 布局标签

对网页文件中的标签进行排版

5.3.1 换行

<br/>

5.3.2 段落

<!--段落标签为块级元素，段与段之间有空隙-->
<p></p>

5.3.3 标题

示例代码	效果

5.3.4 水平分割线

<hr/>

5.3.5 列表

<!-- 
ul表示无序列表，li子标签表示列表中的一项
type属性，设置列表项的图标：
disc 默认值，实心小圆图标
circle 空心小圆图标
square 实心矩形图标
-->
<ul type="square">
    <li>西瓜</li>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<!-- ol表示有序列表，li子标签表示列表中的一项
type属性，设置列表项的序号类型：
1  默认值  阿拉伯数字序号
A  ABCD序号
a  abcd序号
I  大罗马数字
i  小罗马数字
-->
<ol type="i">
    <li>西瓜</li>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ol>

<!-- dl表示一个无序号无图标的列表 -->
<dl>
    <!-- dt表示列表标题 -->
    <dt>音乐分类</dt>
    <!-- dd表示列表项 -->
    <dd>古典音乐</dd>
    <dd>流行音乐</dd>
    <dd>摇滚音乐</dd>
    <dd>乡村音乐</dd>
</dl>

5.3.6 表格

<!-- 
table标签用于定义一个表格
border属性，设置表格中单元格边框的宽度 
cellspacing属性，设置表格中单元格之间的空隙（单元格之间默认是有空隙的）
cellpadding属性，设置表格中单元格的内边距（单元格默认内边距为1像素）
width属性，设置表格的总宽度（如果没有单独设置列宽，默认列宽平均分配）
height属性，设置表格的总高度（如果没有设置行高，在每行高度平均分配）
bgcolor属性，设置整个表格区域的背景颜色

tr标签用于定义表格中的行
height属性，用于设置当前行的高度
bgcolor属性，用于设置当前行的背景颜色

td标签用于定义行中的列（单元格）
width属性，用于设置当前列单元格宽度
bgcolor属性，用于设置当前单元格的背景颜色
-->
<table border="1" cellspacing="0" cellpadding="0" width="300" height="300" bgcolor="orange">
    <tr height="100">
        <td width="200" colspan="2">1-1</td>
        <td width="100" rowspan="2">1-3</td>
    </tr>
    <tr height="100" bgcolor="deepskyblue">
        <td rowspan="2">2-1</td>
        <td>2-2</td>
    </tr>
    <tr height="100">
        <td colspan="2">3-2</td>
    </tr>

</table>