JavaWeb 课堂笔记 —— 01 HTML-EW帮帮网

本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）》，章节分布参考视频教程，为同样学习JavaWeb系列课程的同学们提供参考。

01 学习路线

在这里插入图片描述

前端：基于 Vue 脚手架
后端：基于 SpringBoot
前后端分离开发，基于接口文档交互
需求分析 - 表结构设计 - 接口文档 - 功能实现 - 测试

02 学习目标

掌握数据库表的设计、操作
掌握主流的前后端分离开发模式
掌握 Web 开发、接口开发
掌握文件存储、登录认证解决方案

03 什么是Web？

Web 又称万维网（www World Wide Web），即全球广域网，是能够通过浏览器访问的网站

① Web 网站工作流程

在这里插入图片描述

② Web 开发课程安排

前端：HTML、CSS、JavaScript、Vue、Element、Nginx

后端：Maven、SpringBoot Web、MySQL、SpringBoot Mybatis

③ Web 网页由文字、图片、音频、视频、超链接等组成，本质是前端代码，其通过浏览器核心（解析 + 渲染）转化成用户看到的页面

④ Web 标准由W3C（World Wide Web Consortium）制定，含三部分：

HTML：负责网页的内容

CSS：负责网页的设计

JavaScript：负责网页的交互

04 什么是HTML、CSS？

HTML(HyperText Markup Language)：超文本标记语言

超文本：超越文本的限制

标记语言：标签构成的语言

CSS(Cascading Style Sheet)：层叠样式表

注：HyperText / ˈhaɪpərtekst / 超文本、Cascading / kæˈskeɪdɪŋ / 层叠

05 HTML快速入门

新建 .html 文本文件
编写 HTML 结构标签
填写 <body> 内容

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

注：html不关心大小写，不区分单引号双引号，语法结构松散

06 新浪新闻

① 标题排版

图片标签：<img>

src：指定图像的 url（绝对磁盘路径 / 绝对网络路径 / 相对磁盘路径）
width：指定图像的宽度 (px像素 / 相对于父元素的百分比)
height：指定图像的高度 (px像素 / 相对于父元素的百分比)

标题标签：<h1> - <h6>，重要程度递减

水平线标签：<hr>

<!-- 文档类型为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>
</head>
<body>
    <!-- 
    绝对路径：
        绝对磁盘路径：E:\JAVA\0315\news_logo.png
        绝对网络路径：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png 
    相对路径：
        ./ ：当前目录，可以省略 ./news_logo.png
        ../：上级目录，不能省略
    -->
    <img src="./news_logo.png"> 入口 > 正文

    <h1>一二三四五六七八九十</h1>

    <hr>
    2023年03月02日 21:50 张三
    <hr>
</body>
</html>

注：! + Enter 生成 HTML 框架，Ctrl + Shift + / 生成注释，img + Enter 生成图片框架，Ctrl + S 保存文件，右键 + Open In Default Browser 或者 Alt + B 在默认浏览器中打开，Ctrl + Y 删除注释。

default 默认的、browser / ˈbraʊzər / 浏览器

② 标题样式

Ⅰ CSS 引入方法

行内样式：style属性
内嵌样式⭐：style标签
外联样式：link 标签引入 .css 文件

Ⅱ 颜色表示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一二三四五</title>

    <!-- 内嵌样式 -->
    <style>
        h1{
            /* color: brown; */
            /* color: rgb(255, 0, 0); */
            color: #4d4f53;
        }
    </style> 
   

    <!-- 外联样式 -->
    <!-- <link rel="stylesheet" href="./CSS/news.css"> -->
</head>
<body>
    <img src="./news_logo.png"> 入口 > 正文

    <!-- 行内样式 -->
    <!-- <h1 style="color: brown;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->

    <h1>一二三四五六七八九十</h1>

    <hr>
    2023年03月02日 21:50 张三
    <hr>
</body>
</html>

Ⅲ CSS 选择器

在这里插入图片描述

优先级：id > 类 > 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一二三四五</title>

    <style>
        h1{
            color: #4d4f53;
        }

        /* 元素选择器 */
        /* span{
            color: #968d92;
        } */

        /* 类选择器
        .cls{
            color: #968d92;
        } */

        /* id选择器 */
        #time{
            color: #968d92;
            font-size: 13px; /* 字体大小 */
        }

    </style> 
   
</head>
<body>
    <img src="./news_logo.png"> 入口 > 正文

    <h1>一二三四五六七八九十</h1>

    <hr>
    <span id="time" class="cls">2023年03月02日 21:50</span> <span>张三</span>
    <hr>
</body>
</html>

③ 超链接

超链接标签：<a herf="..." target="...">张三</a>

href：指定资源访问 url
target：指定资源链接打开位置，其中_self在当前页面打开，_blank在空白页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一二三四五</title>

    <style>
        h1{
            color: #4d4f53;
        }

        #time{
            color: #968d92;
            font-size: 13px; 
        }

        a{
            color: black; /* 默认蓝色 -> 黑色 */
            text-decoration: none; /* 标准文本 */
        }

    </style> 
   
</head>
<body>
    <img src="./news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">入口</a> > 正文

    <h1>一二三四五六七八九十</h1>

    <hr>
    <span id="time" class="cls">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">张三</a></span>
    <hr>
</body>
</html>

④ 正文排版

视频标签：video

src：指定视频访问url
controls：指定播放控件
width：宽度
height：高度

音频标签：audio

src：指定音频访问url
controls：指定播放控件

段落标签：<p>

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

注：indent / ɪnˈdent / 缩进、align / əˈlaɪn / 调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一二三四五</title>

    <style>
        h1 {
            color: #4d4f53;
        }

        #time {
            color: #968d92;
            font-size: 13px; 
        }

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

        p {
            text-indent: 35px; /* 首行缩进 */
            line-height: 45px; /* 行间距 */
        }

        #editor {
            text-align: right;
        }

    </style> 
   
</head>
<body>
    <img src="./news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">入口</a> > 正文

    <h1>一二三四五六七八九十</h1>

    <hr>
    <span id="time" class="cls">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">张三</a></span>
    <hr>

    <!-- 正文 -->
    <!-- 视频 -->
    <!-- <video src="xxx" controls width="900px"></video> -->

    <!-- 音频 -->
    <!-- <audio src="xxx" controls></audio> -->

    <p>
    <b>消息</b> 
    </p>

    <p>
    人勤春来早，春耕农事忙。
    </p>

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

    <p>
    春眠不觉晓，处处闻啼鸟。    
    </p>

    <p id="editor">
        责任编辑：大树 SN242
    </p>
</body>
</html>

⑤ 页面布局

盒子：页面中所有的元素，都可以看做是一个盒子，将页面中的元素包含在一个矩形区域内，包括内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

注：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上位置，如：padding-top、padding-left、padding-right...

在这里插入图片描述

布局标签：<div> <span>

<div> 一行只显示一个，宽度默认父元素，高度默认内容撑开，可改宽高
<span> 一行可显示多个，宽高默认内容撑开，不改宽高

前端代码：

在这里插入图片描述

网页效果：

在这里插入图片描述

注：margin 外边距不算在盒子之内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一二三四五</title>

    <style>
        h1 {
            color: #4d4f53;
        }

        #time {
            color: #968d92;
            font-size: 13px; 
        }

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

        p {
            text-indent: 35px; /* 首行缩进 */
            line-height: 45px; /* 行间距 */
        }

        #editor {
            text-align: right;
        }

        #center {
            width: 65%;
            /* margin: 0% 17.5% 0% 17.5%; 外边距，上 右 下 左*/
            margin: 0 auto;
        }

    </style> 
   
</head>
<body>
    <div id="center">
    <img src="./news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">入口</a> > 正文

    <h1>一二三四五六七八九十</h1>

    <hr>
    <span id="time" class="cls">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">张三</a></span>
    <hr>

    <!-- 正文 -->
    <!-- 视频 -->
    <!-- <video src="xxx" controls width="900px"></video> -->

    <!-- 音频 -->
    <!-- <audio src="xxx" controls></audio> -->

    <p>
    <b>消息</b>
    </p>

    <p>
    人勤春来早，春耕农事忙。
    </p>

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

    <p>
    春眠不觉晓，处处闻啼鸟。   
    </p>

    <p id="editor">
        责任编辑：大树 SN242
    </p>
    </div>
</body>
</html>

07 表格、表单标签

① 表格标签

表格在网页中以行和列形式展示数据

在这里插入图片描述

② 表单标签

表单在网页中负责注册、登录等采集数据

在这里插入图片描述

Ⅰ 标签：<form>

属性

action：规定提交表单时向何处发送表单数据（url）
method：规定发送表单数据方式（get、post）

<body>
    <form action="" method="get">
    	用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">
        
        <input type="submit" name="提交">
    </form>
</body>

get 提交方式：当前页面，url拼接

在这里插入图片描述

post 提交方式：网络请求，消息体中传递

在这里插入图片描述

Ⅱ 表单项

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

在这里插入图片描述

JavaWeb 课堂笔记 —— 01 HTML

01 学习路线

02 学习目标

03 什么是Web？

04 什么是HTML、CSS？

05 HTML快速入门

06 新浪新闻

① 标题排版

② 标题样式

③ 超链接

④ 正文排版

⑤ 页面布局

07 表格、表单标签

① 表格标签

② 表单标签

网站公告

今日签到

热门文章

最新发布