JavaWeb-HTML

甲柒2023-09-20 10:47

JavaWeb

JavaWeb黑马课程

课程特点

  • 前后端分离开发，基于接口交互（接口文档）
  • 前端------基于Vue脚手架，构建工程化的前端项目
  • 后端------基于主流SpringBoot高效学习SSM
  • 参照企业开发模式，需求分析-表结构设计-接口文档-功能实现-测试

Web定义

Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。

网站：全球广域网，也称为万维网(万维网)，能够通过浏览器访问的网站。

Web网站的工作流程

Web标准

  • Web标准也称为网页标准，由一系列的标准组成，大部分由W3C ( World Wide Web Consortium，万维网联盟）负责制定。
  • 三个组成部分：
    HTML：负责网页的结构（页面元素和内容）。
    CSS：负责网页的表现（页面元素的外观、位置等页面样式，如:颜色、大小等）。
    JavaScript：负责网页的行为（交互效果）。

HTML与CSS

HTML

CSS

CSS：（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。

HTML参考手册

HTML参考手册

  • HTML结构标签

    html 复制代码 
    <html>

<head>
    <title>HTML快速入门</title>
</head>

<body>
    <h1>hello HTML</h1>
    <img src="C:\Users\1900\Pictures\笔记图片\001.jpg" />
</body>

</html>

  • 特点

    1.HTML标签不区分大小写

    2.HTML标签属性值单引号都可以

    3.HTML语法松散

VS Code安装使用

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

VS Code插件建议

注意：

作为一名软件开发工程师，建议以后安装所有与开发相关的软件，尽量安装在一个没有中文，不带空格的目录下。

基础标签&样式

新浪新闻-标题

  • 图片标签：

    src：指定图像的url（绝对路径/相对路径）

    width：图像的宽度（像素/相对于父元素的百分比）

    height：图像的高度（像素/相对于父元素的百分比）

    绝对路径：绝对磁盘路径（D:\xxxx）、绝对网络路径（https://xxxx）

    相对路径：从当前文件开始查找。（./：当前目录， . ./：上级目录）

  • 标题标签：<h1> - <h6>

  • 水平线标签：<hr>

  • css引入方式：

    行内样式：写在标签的style属性中（不推荐)

    内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中)

    外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入)

行内样式：

<h1 style="xxx: xxx; xxx: xxx;">小米商城</h1>

内嵌样式：

html 复制代码 
<style>
    h1{
        xxx: xxx;
        xxx: xxx;
    }
</style>

外联样式：

html 复制代码 
h1{
   xxx: xxx;
   xxx: xxx;
}

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

颜色表示形式

颜色属性

color：设置文本内容的颜色

CSS参考文档

https://www.runoob.com/cssref/css-reference.html

CSS菜鸟教程

https://www.runoob.com/css/css-tutorial.html

CSS选择器

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

元素选择器

id选择器

类选择器

<span>标签

  • <span>是一个在开发网页时大量会用到的没有语义的布局标签
  • 特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

CSS选择器

  • 元素选择器：标签名{ ... }
  • id选择器：#id属性值{ ... }
  • 类选择器：.class属性值{ ... }
  • 优先级：id选择器〉类选择器〉元素选择器

CSS属性

  • color：设置文本的颜色
  • font-size：字体大小（注意单位px）

超链接

标签

<a href="..." target="...">小米商城</a>

属性

href：指定资源访问的url

target：指定在任何处打开资源链接

_self：默认值，在当前页面打开

_blank：在空白页打开

CSS属性

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

color：定义文本的颜色

正文排版

视频标签：<video>

  • src：规定视频的url
  • controls：显示播放控件
  • width：播放器的宽度
  • height：播放器的高度

音频标签：<audio>

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

段落标签：<p>

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

CSS样式

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

注意

  • 在HTML中无论输出多少个空格，只会显示一个。可以使用空格占位符：&nbsp;

代码

html 复制代码 
<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    <!-- 方式二：内嵌样式 -->
    <style>
        h2 {
            /* 十六进制表示方法 */
            color: #9cf866;
        }

        h4 {
            /* rgb表示方法 */
            color: rgb(255, 0, 0);
        }

        /* 元素选择器 */
        span {
            /* 将时间设置成灰色 */
            color: gray;
        }

        /* 类选择器 */
        .cls {
            color: cadetblue;
        }

        /* ID选择器，优先级更高 */
        #time {
            color: blue;
            /* font-size设置字体大小 */
            font-size: 14px;
        }

        /* 设置文本为一个标准文本 */
        a {
            color: #000;
            text-decoration: none
        }

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

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

        /* #center {
            width: 65% 
            
        } */
    </style>
    <!-- 方式三：外联样式 -->
    <link rel="stylesheet" href="./css/new.css">
</head>

<body>
    <div>
        <!-- 
        图片标签：<img>
        src：图片资源路径
        width：宽度
        height：高度

        路径书写方式：
            绝对路径：
                1.绝对磁盘路径：E:\java_study\017-HTML-CSS\img\mi_logo.png
                                <img src="E:\java_study\017-HTML-CSS\img\mi_logo.png">
                2.绝对网络路径：https://logo800.cn/uploads/logoxinshang/-38/logo800_16491756490269888.png
                                <img src="https://logo800.cn/uploads/logoxinshang/-38/logo800_16491756490269888.png">        
            相对路径：
                ./ : 当前目录，./ 可与省略的
                ../: 上一级目录
     -->
        <img src="img/mi_logo.png"> 小米>正文

        <!-- 方式一：行内样式 -->
        <h1 style="color: #ee6060;">小米手机屌爆了</h1>
        <h2>小米手机屌爆了</h2>
        <h3>小米手机屌爆了</h3>
        <h4>小米手机屌爆了</h4>
        <h5>小米手机屌爆了</h5>
        <h6>小米手机屌爆了</h6>

        <!-- <hr>水平分割线标签 -->
        <hr>
        <!-- <span>用于对文档中的行内元素进行组合 -->
        <!-- <a href="超链接地址" target="_self">超链接文本</a>   _self指定在当前页面打开  -->
        <span>2023年09月14日 15:20</span> <a href="https://www.mi.com/global/" target="_self">小米商城</a>
        <hr>

        <!-- <hr>水平分割线标签 -->
        <hr>
        <!-- <span>用于对文档中的行内元素进行组合 -->
        <!-- target="_blank"在新的标签页打开超链接 -->
        <span class="cls">2023年09月14日 15:20</span> <a href="https://www.mi.com/global/" target="_blank">小米商城</a>
        <hr>

        <hr>
        <!-- <span>用于对文档中的行内元素进行组合 -->
        <span id="time">2023年09月14日 15:20</span> 小米商城
        <hr>

        <hr>
        <!-- 优先级：元素选择器《类选择器《ID选择器 -->
        <!-- <span>用于对文档中的行内元素进行组合 -->
        <span class="cls" id="time">2023年09月14日 15:20</span>
        <span class="cls">小米商城</span>
        <hr>

        <!-- 正文 -->
        <!-- 视频 controls用来显示播放控件 width指定宽度，一般来说width和height只指定一种-->
        <video src="video/c.mp4" controls="controls" width="400px"></video>
        <!-- 音频 -->
        <audio src="audio/b.mp3" controls="controls"></audio>

        <!-- 文本 -->
        <p>我想起在孤单中运行着的星星</p>

        <p> 黄鹂成双成对，落日慌乱地</p>

        <p> 在愁闷中消隐</p>

        <p> 我想要越过茫茫宇宙</p>

        <p> 到下一个星球去</p>

        <p> 到最后一个星球去</p>

        <p> 我要留下几滴眼泪</p>

        <p> 和一些笑声</p>

        <!-- 使用id选择器 靠右对齐 -->
        <p id="plast"> ------【美】桑德堡</p>

        <p>可以放下心来把你的每一个动作都看看清楚，每一丝风飞叶动，每一缕愤懑和妄想，盼念与惶茫，总之把你的所有心绪都看看明白。</p>
        <!-- <b>加粗文本 -->
        <p id="plast"> ------ 摘自史铁生<b>《想念地坛》</b></p>

        <!-- <strong>强调标签 -->
        <p> <strong>早上是莲花开放最好的时间。</strong>人生亦然，青少年时代是盛开最好的时间，如果在青少年时代，不充满热情、浪漫、理想地盛开，展现美丽、青春与芬芳，到了后半生，一定会老大徒悲伤！</p>

    </div>
</body>

</html>
css 复制代码 
h3 {
    color: #4af3eb;

}
h5{
    color: darkviolet;
}
div{
    width: 65%;
    margin: 0% auto;
}

页面效果

页面布局

盒子

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

CSS盒子模型组成

  • 内容区域（content）
  • 内边距区域（padding）
  • 边框区域（border）
  • 外边距区域（margin）

CSS属性

  • width：设置宽度
  • height：设置高度
  • border：设置边框属性，如1px solid #000
  • padding：内边距
  • margin：外边距
  • 注意：只需设置某一个方位的边框、内边距、外边距，可以在属性后加上 -位置，如：padding-top、padding-left、padding-right

布局标签：

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

标签：<div> <span>

特点：

  • div标签：

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

  • span标签：

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

标签、表单标签

表格标签

场景：

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

标签：

表格标签：

标签 描述
<table> 定义表格
<tr> 定义表格中的行，一个<tr>表示一行
<th> 表示表头单元格，具有加粗居中效果
<td> 表示普通单元格

代码

html 复制代码 
<!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>
    <!-- border表格边框的宽度 cellspacing单元之间的空间 -->
    <table border="1px" cellspacing="3" width="600px">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>
</body>
</html>

表单标签

场景：

在网页中主要负责数据采集功能，如注册、登录等

标签：<form>

表单项：

不同类型的input元素、下拉列表、文本等

标签 描述
<input> 定义表单项，通过type属性控制输入形式
<select> 定义下拉列表
<textarea> 定义文本域

属性：

属性 描述
action 规定当提交表单时向何处发送表单数据，URL
method 规定用于发送表单数据的方式，GET、POST get：表单数据拼接在url后面，?username=root，大小有限制 post：表单数据在请求体中携带，大小没有限制

注意：

表单必须有name属性才可提交

表单标签-表单项

表单项

标签 描述
<input> 表单项，通过type属性控制输入形式
<select> 定义下拉列表，<option>定义列表项
<textarea> 文本域

代码

html 复制代码 
<!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=root&age=22，url长度有限制，是method的默认值
            post：在消息体（请求体）中传递的，参数大小无限制
     -->
    get提交
    <form action="" method="get">
        用户名：<input type="text" name="username">
        年龄：<input type="text" name="age">

        <input type="submit" value="提交">
    </form>
    <br><br>
    post提交
    <form action="" method="post">
        用户名：<input type="text" name="username">
        年龄：<input type="text" name="age">

        <input type="submit" value="提交">
    </form>

    <br><br>
    <form action="#" method="post">
        <input type="hidden" name="id" value="123">



        <label for="username">用户名：</label>
        <input type="text" name="username" id="username"><br><br>

        <label for="password">密 码：</label>
        <input type="password" name="password" id="password"><br><br>

        <!-- 单选name值必须相等 -->
        性别：
        <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
        <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
        <br><br>

        <!-- checkbox复选框 -->
        爱好：
        <input type="checkbox" name="hobby" value="1"> 旅游
        <input type="checkbox" name="hobby" value="2"> 电影
        <input type="checkbox" name="hobby" value="3"> 游戏
        <br><br>
        头像：
        <input type="file"><br><br>

        城市:
        <!-- 下拉列表 -->
        <select name="city">
            <option value="">====请选择====</option>
            <option>北京</option>
            <option value="shanghai">上海</option>
            <option>广州</option>
        </select>
        <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>

        个人描述：
        <textarea cols="20" rows="5" name="desc"></textarea>
        <br>
        <br>
        <!-- 常见按钮 -->
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="一个按钮"><br><br>
    </form>
</body>

</html>

数据提交

相关推荐
刘志辉2 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
星叔25 分钟前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
sky.fly44 分钟前
HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）
前端·css·html
Coisini_甜柚か1 小时前
打字机效果显示
前端·vue3·antv
郑小憨1 小时前
Node.js NPM以及REPL(交互式解释器) 使用介绍（基础介绍 二）
开发语言·前端·javascript·npm·node.js
嚣张农民1 小时前
在 WebSocket 连接中出现错误时，如何处理和捕获错误？
前端·javascript·面试
代码搬运媛1 小时前
前端开发利器：npm 软链接
前端·npm·node.js
周三有雨1 小时前
vue3 + vite 实现版本更新检查（检测到版本更新时提醒用户刷新页面）
前端·vue.js·typescript
敲里个敲敲2 小时前
敲里个敲敲---领导的定制版搜索框
前端
顾言7162 小时前
前端基础面试题·第四篇——Vue（其三）
前端
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05RAG 实践- Ollama+RagFlow 部署本地知识库06Windows10安装PCL1.14.0及点云配准07全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09Coze扣子平台完整体验和实践（附国内和国际版对比）10Unity中PICO实现 隔空取物 和 接触抓取物体