您的位置：首页 > 娱乐 > 明星 > 弹出快捷菜单一般通过_谷歌推广公司_怎么建立公司网站_网站怎么找

弹出快捷菜单一般通过_谷歌推广公司_怎么建立公司网站_网站怎么找

2025/4/9 5:35:23 来源：https://blog.csdn.net/lango_LG/article/details/147014492  浏览:  次   关键词：弹出快捷菜单一般通过_谷歌推广公司_怎么建立公司网站_网站怎么找
弹出快捷菜单一般通过_谷歌推广公司_怎么建立公司网站_网站怎么找

本系列为笔者学习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>：定义文本域

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

最新新闻

热搜词

软考之进制转换 SampledPositionProperty Excel百万数据如何快速导入？ 近两次C/C++面试题总结（福州新大陆、睿能科技，持续更新） 紐約大學柯朗數學研究所的王虹副教授與合作者證明掛穀猜想 批量删除 txt/html/json/xml/csv 等文本文件空白行

声明：本站所有新闻及新闻图片来源于其他网站，如有侵权，请及时联系我们！

客户服务 | 关于我们 | 版权声明

版权所有：

Copyright 2024 尧图网 All Rights Reserved.QQ:809451989