Java Web——web前端开发入门

你是个什么橙

已于 2023-09-14 15:23:55 修改

阅读量2.1k

点赞数 13

文章标签： java 前端开发语言

于 2023-09-12 17:47:41 首次发布

本文链接：https://blog.csdn.net/Cupid_kl/article/details/132729631

版权

Web标准：三部分组成

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

1. HTML 超文本标记语言 & CSS 层叠样式表

超文本： 超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言： 由标签构成的语言
① HTML标签都是预定义好的。例如使用 <a>展示超链接，使用<img>展示图片，<video>展示视频。
② HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS： 用于控制页面的样式

1.1 快速入门

步骤：
① 新建文本文件，后缀名改为 .html
② 编写HTML结构标签
③ 在<body>中填写内容

<html>
	<head>
		<title>HTML 快速入门</title>
	</head>
	<body>
		<h1>Hello HTML</h1>
		<img src = "1.jpg"/>
	</body>
</html>

特点：
① HTML标签不区分大小写
② HTML标签属性值单双引号都可以
③ HTML语法松散

2.2 基础标签&样式

举例：制作如下图的新浪新闻标题标题
在这里插入图片描述

2.2.1 标题排版

图片标签：<img>
src：指定图片的url（绝对路径/相对路径）
width：图像的宽度（px 像素/% 相对于父元素的百分比）
height：图像的高度（像素/相对于父元素的百分比）
标题标签：<h1> - <h6>
水平线标签：<hr>

<!DOCTYPE html> <!-- 文档类型为HTML -->
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 字符集为UTF-8 -->
    <!-- 设置浏览器的兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9月福利，狂欢攻略来啦！</title>
</head>
<body>
    <img src ="./img/news_logo.png" /> 新浪娱乐 >正文
    <h1>9月福利，狂欢攻略来啦！</h1> 
    <hr>
    2023年03月02日 21:50 娱乐网
    <hr>
</body>
</html>

2.2.2 标题样式

例子中标题字体为灰黑色，而我们排版出来的颜色为黑色，要用CSS样式来控制。

CSS引入方式：

行内样式：写在标签的style属性中（不推荐）
内嵌样式：写在style标签中（可以写在页面如何位置，但通常约定写在head标签中
外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

颜色表示方式：
关键字：red，green…
rgb表示：rgb(255,0,0)、rgb(138,188,24)
十六进制：#ff0000、#cccccc
用颜色提取器来抓颜色（e.g. LIVE COLOR PICKER）#4D4F53

CSS选择器：用来选取需要设置样式的元素（标签）

元素（标签）选择器：
选择器的名字是标签的名字
作用：选择器中的样式会作用于所有同名的标签上
id选择器：
选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id标签上，而且有且只有一个标签（id是唯一的）
类选择器：
选择器的名字前面需要加上 .
作用：选择器中的样式会作用域所有class的属性值和该名字一样的标签上，可以是多个。

优先级：元素<类<id (作用范围越小，优先级越大)

在这里插入图片描述

添加超链接：
给 “新浪娱乐”和“娱乐网”加上超链接。
标签：<a>
属性：href指定资源访问的url
target指定在何处打开资源链接（_self默认值，在当前页面打开；_blank在空白页面打开）
在这里插入图片描述

2.2.3 正文排版

HTML标签：

视频标签：<video>
src：规定视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度
音频标签：<audio>
src：规定音频的url
controls：显示播放控件
段落标签：<p>
文本加粗标签：<b> / <strong>
换行：<br>
在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符&nbsp
CSS样式：
line-height：设置行高
text-indent：定义第一个行内容的缩进
text-align：规定元素中的文本水平对齐方式

2.2.4 页面布局

目前，新闻页面的基本排版已经完成了，但是，无论是标题部分，还是正文部分，都是铺满了整个浏览器。新浪新闻的原始页面，网页内容都是居中展示的，左边、右边都是一定的边距的。要想完成这样一个页面布局，就需要CSS中的盒子模型。
盒子模型：
盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
在这里插入图片描述
布局标签：实际开发网页中，会大量频繁使用<div>和<span>这两个没有语义的布局标签。
<div>标签：

一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width，height)
<span>标签：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高（width，height)
布局实现：
第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：65%。
第二步：通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即可，为：0%。

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9月福利，狂欢攻略来啦！</title>
    <!-- 2.内嵌样式 -->
    <style>
        h1{
            color: #4D4F53;  
        }
        .cls{
            color: #968d92 ;
        }
        a{
            color: black;
            text-decoration: none;  /* 设置文本为一个标准的文本，去掉下划线 */
        }
        p{
            text-indent: 35px;  /* 设置段落的格式 首行缩进 */
            line-height: 40px;  /* 设置段落的格式 设置行高 */
        }
       #lastp{
            text-align: right;  /* 设置对齐方式 右对齐 */
        } 
        
        #center{
            width: 65%;
            /* margin: 0% 17.5% 0% 17.5%;    外边距 上右下左 */
            margin: 0 auto;
        }

    </style>

    <!-- 3.外联样式 -->
    <!-- <link rel="stylesheet" href="css/news.css"> -->

</head>
<body>
    <div id="center">
        <img src ="./img/news_logo.png" /> <a href="http://gov.sina.com.cn/" target="_self">新浪娱乐</a> >正文
        <!-- 1.行内样式 -->
        <!-- <h1 style = "color: #4D4F53;">9月福利，狂欢攻略来啦！</h1> -->
        <h1>9月福利，狂欢攻略来啦！</h1> 
        <hr>
        <span class="cls">2023年03月02日</span> 21:50 <a href="https://www.cctv.com/" target="_blank">娱乐网</a>
        <hr>
        <!-- 正文 -->
        <!-- 视频 -->
        <video src="video/1.mp4" controls = "controls" width = "950px"></video>
        <!-- 音频 -->
        <audio src="audio/1.mp3" controls = "controls"></audio>
        <p>
            <b>我爱秘籍</b>小编今天给广大玩家带来了娱乐福利红包游戏大全，娱乐福利旗下拥有海量红包游戏，
            这些游戏都是真实靠谱的，玩法丰富，玩家在游戏中只需按照规则简单操作即可获得红包奖励，真实可以兑换哦，
            包括《咔咔拼拼乐》、《开心餐厅》以及《体重保卫战》等等，这里还会持续更新，喜欢的小伙伴快来下载吧！
        </p>
        <p>
            爱生活、会生活的人，已经开始在淘宝上搞定中秋国庆假期的吃喝玩乐。
            从9月13日起，淘宝数字生活节将带来各种低至0.1元的吃喝玩乐福利，包含酒店、景点门票、影音会员、吃喝玩乐服务等，
            让消费者超值省钱玩转国庆。
        </p>
        <img src="img/1.jpg" >
        <p>
            例如0.1元就能买到的超级券包，里面包含国庆出行20元酒店优惠、10元度假产品优惠、5元火车票优惠，还有宅家必备的爱奇艺、
            芒果TV、优酷视频等会员卡折扣优惠等等，绝对超值！此外，还有到手仅需0.1元的吃喝权益大礼包、6元电影票买票优惠，
            以及各类单车、打车优惠。国庆出游必打卡的经典门票也一应俱全，上海迪士尼、北京环球影城、三亚亚特兰蒂斯套餐门票，
            都有官方补贴超值特惠价！
        </p>
        <img src="img/2.jpg">
        <p>
            临近中秋、国庆双节，无论是走亲访友送礼，还是添置换季新衣，淘宝都为你准备了各种新品好物。
            在生活季期间，淘宝好价节、超级品类日、秋季家装节、服饰秋冬新风尚、国庆狂欢季、中秋团圆季等各种活动不断，绝对是入手的最好时机。
        </p>

        <p id="lastp">责任编辑：xx</p>
        
    </div>
</body>
</html>

2.3 表格标签

在网页中以表格（行、列）形式整齐展示数据。
<table>：定义表格
<tr>：定义表格中的行，一个<tr>表示一行
<th>：表示表头单元格，具有加粗居中的效果
<td>：表示普通单元格

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

<!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>HTML-表格</title>
    <style>
        td {
            text-align: center; /* 单元格内容居中展示 */
        }
    </style>
</head>
<body>
    /* border设置边框，cellspacing边框空隙为0，width表格宽度 */
    <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>

</body>
</html>

在这里插入图片描述

2.4 表单标签

2.4.1 描述

在网页中主要负责数据采集功能，如注册、登录等数据采集。
标签：<form>
表单项：不同类型的input元素、下拉列表、文本域等。

<input>：定义表单项，通过type属性控制输入形式
<select>：定义下拉列表，<option>定义列表项
<textarea>：定义文本域
属性：
action：规定当提交表单时向何处发送表单数据，URL。
method：规定用于发送表单数据的方式，GET，POST。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表单</title>
</head>
<body>
    <!-- form表单
    action：表单提交的url，往何处提交数据，如果不指定则提交到当前页面
    method：表单提交方式
        get：默认值，在url后面拼接表单数据，比如?username=TOM&age=12，url长度有限制
        post：在消息体（请求体）中传递的，参数大小无限制
    -->
    <form action="" method="get">
        用户名：<input type="text" name="username">
        年龄：<input type="text" name="age">
        <input type="submit" name="提交">
    </form>
</body>
</html>

在这里插入图片描述

表单项必须要由name属性才能提交。

2.4.2 表单项

<input>：
<select>：
<textarea>：

举例：
做出如下的表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单项标签</title>
</head>
<body>
    <form action="" method="post">
        姓名：<input type="text" name="name"><br><br>
        密码：<input type="password" name="password"> <br><br>
        性别：<label><input type="radio" name="gender" value="1" >男</label>
            <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="sport">sport</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>
        </select> <br><br>
        描述：<textarea name="description" id="" cols="30" rows="10"></textarea> <br>
        <input type="hidden" name="id" value="1">
        <br><br>
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>
</body>
</html>

得到：
在这里插入图片描述