首页 > 编程语言 >黑马JavaWeb-day01

黑马JavaWeb-day01

时间：2024-10-20 20:34:05浏览次数：1  
标签：JavaWeb color 标签 day01 元素 黑马 焦点访谈 选择器 页面

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

web网站的工作流程：
1729396858458.png

网页由哪些部分组成：文字、图片、音频、视频、超链接

我们看到的网页背后的本质：前端代码

前端代码是如何转化成用户眼中的网页？：通过浏览器的解析和渲染转化成用户看到的网页，浏览器中对代码进行解析和渲染的部分，称为浏览器的内核。

由于希望不同浏览器对于同一份前端代码解析、渲染出来相同的效果于是就需要有同一套标准

Web标准：

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

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

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

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

HTML快速入门：

  1. 新建文本文件，并将后缀名改为.html
  2. 编写HTML结构标签
  3. 在<body>中填写内容

1729398388599.png
1729398485905.png

几个html的语法特点：

  1. html中的标签是不区分大小写的<html>和<HtML>是没有区别的，但开发时一般使用小写。
  2. 属性可以使用双引号也可以使用单引号。
  3. HTML的语法结构比较松散。

Vscode前端代码的几个插件
1.
1729398741226.png
2.
image

与开发相关的软件尽量安装在不含空格和中文的路径下

基础标签、样式

图片标签<img>:

  • src:指定图像的url（绝对路径|相对路径）
  • width：图像的宽度（像素/相对于父元素的百分比）
  • height：图像的高度（像素/相对于父元素的百分比）

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

水平线标签：<hr>

vscode 中输入!可以直接生成html的框架
1729410200783.png

新闻标题部分的排版

<!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>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 新浪政务 > 正文
    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>
</html>

1729411016357.png

下面接着处理新闻标题的样式

1729411201148.png

对比可以发现标题的颜色并非纯黑色，而是灰色，如果需要改变标题的颜色需要用CSS样式控制。

CSS的三种引入方式:

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

第一种方式

<!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>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 新浪政务 > 正文
    <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>
</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>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 新浪政务 > 正文
    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>
</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>
    <link rel="stylesheet" href="./news.css">
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 新浪政务 > 正文
    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>
</html>

news.css文件

h1 {
    color: red;
}

颜色的表示：

1729411990607.png

<span>标签：行内标签，span标签没有任何语义

<!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>
        h1 {
            color: rgb(77, 79, 83);
        }
        span {
            color: rgb(150, 141, 146);
        }
    </style>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 新浪政务 > 正文
    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    <span>2023年03月02日 21:50</span> 央视网
    <hr>
</body>
</html>

1729412597619.png

css选择器:用来选取需要设置样式的元素（标签）
1. 元素选择器
2. 标签选择器
3. 类选择器

元素选择器又叫标签选择器

元素名称 {
	color: red;
}

h1 {
	color: red;
}

id选择器：根据标签中所指定的id选择元素

#id属性值 {
	color: red;
}
#hid {
	color: red;
}
<h1 id='hid'> CSS id Selector <\h1>

类选择器：根据标签中所指定的class来选择元素

.class属性值 {
	color: red;
}
.cls {
	color: red;
}
<h1 class='cls'>CSS class Selector</h1>

3种选择器之间存在优先级顺序，id选择器>类选择器>元素选择器
front-size:用来设置字体大小，span标签主要用于组合行内元素

超链接标签|<a>标签:

<a href="..." target="...">央视网</a>

属性：

  • href：指定资源访问的url
  • target：指定在何处打开资源链接
    1. _self：默认值，在当前页面打开
    2. _blank:在空白页面打开

超链接去掉下划线：

a {
	color: #000;
	text-decoration: none;
}

新闻正文排版

视频标签<video>:
属性：

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

音频标签<audio>:
属性

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

段落标签<p>

文本加粗标签<b>|<strong>
1729414413735.png

在html中如果属性名和属性值一样那么属性值可以省略，例如controls

<br>:换行标签

vscode中文字过长换行的快捷键：alt+z

text-align:文本对齐

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

&nbsp空格的占位符

新闻页面的整体布局

盒子模型:

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

  • 盒子模型的组成：

    1. 内容区域:content
    2. 内边距区域：padding
    3. 边框区域：border
    4. 外边距区域：margin,外边距不计算在盒子之内
      1729416116814.png

页面布局标签

<div>和<span>
1729416199593.png

1729416666920.png

内容居中展示

#center {
	width: 65%;
	/* margin: 0% 17.5% 0% 17.5%; 通过外边距让新闻内容居中展示 */
	margin: 0 auto;
}

1729417355753.png

表格标签

1729417633818.png

表单标签

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

标签：<form>

属性：

  1. action:规定当提交表单时向何处发送表单数据、URL
  2. method:规定用于发送表单的方式。GET、POST。

1729419476417.png

表单项

表单项主要有3类：

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

input的type取值

1729427298044.png

标签：JavaWeb,color,标签,day01,元素,黑马,焦点访谈,选择器,页面
From： https://www.cnblogs.com/cxy8/p/18487098

相关文章

  • Mysql高级-day01
    Mysql高级-day01MySQL高级课程简介序号Day01Day02Day03Day041Linux系统安装MySQL体系结构应用优化MySQL常用工具2索引存储引擎查询缓存优化MySQL日志3视图优化SQL步骤内存管理及优化MySQL主从复制4存储过程和函数索引使用MySQL锁问题综......
  • abc_python_day01
    1.编译型VS解释型编译型将代码一次性全部编译成二进制，再执行优点：执行效率高缺点：开发效率低，不可跨平台代表语言：C语言解释型将代码一行一行地编译成二进制，再执行优点：开发效率高，可以跨平台缺点：执行效率低代表语言：python2.变量what:​ 在写代码的过程中，要用到......
  • 【Java系列】基于Javaweb的在线餐饮管理系统设计与实现（源码+文档+部署讲解等）
    文章目录1.前言2.详细视频演示3.程序运行示例图4.文档参考5.技术框架5.1后端采用SpringBoot框架5.2前端框架Vue5.3程序操作流程6.选题推荐7.原创毕设案例8.系统测试8.1系统测试的目的8.2系统功能测试9.代码参考10.为什么选择我？11.获取源码1.前言......
  • Java最全面试题-＞Java基础面试题-＞JavaWeb面试题-＞Cookie/Session面试题
    Cookie/Session下边是我自己整理的面试题，基本已经很全面了，想要的可以私信我，我会不定期去更新思维导图哪里不会点哪里什么是Cookie？HTTPCookie（也叫WebCookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求......
  • JavaWeb基于ssm的校园一卡通密钥管理系统(001)
    获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述具体请看视频演示2、项目开发工具开发工具：Idea或Eclipse数据库：MysqlJar包仓库：Maven前端框架：Vue2后端框架：SSM3、项目图片4、演示视频JavaWeb基于ssm的校园一卡通密钥管理系统(001)......
  • (附论文)JavaWeb基于ssm的爱尚美家家具购物网站系统(002)
    获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述具体请看视频演示2、项目开发工具开发工具：Idea或Eclipse数据库：MysqlJar包仓库：Maven前端框架：JSP后端框架：SSM3、项目图片4、演示视频(附论文)JavaWeb基于ssm的爱尚美家家具购物网站......
  • (附论文)JavaWeb基于ssm的高校毕业设计信息管理系统(054)
    获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述具体请看视频演示2、项目开发工具开发工具：Idea或Eclipse数据库：MysqlJar包仓库：Maven前端框架：Vue2后端框架：SSM3、项目图片4、演示视频(附论文)JavaWeb基于ssm的高校毕业设计信息管理......
  • JavaWeb开发3
    JavaScript一门跨平台、面向对象的脚本语言，用来控制网页行为，能使网页可交互js引入方式内部脚本：将JS代码定义在HTML页面中JavaScript代码必须位于<script></script>在HTML文档中，可以在任意地方，放置任意数量的<script>一般会把脚本置于<body>元素的底部，可以改......
  • DAY01
    DAY01什么是计算机能按照程序运行，自动、高速处理海量数据的现代化智能电子设备；有硬件和软件组成。硬件io设备->输入输出设备图形界面的操作都离不开显卡（计算机之父)冯·诺依曼体系结构：软件：按其功能应分为：系统软件与应用软件系统软件DOS，Windows，Linux，Unix，Mac，Android，iOS......
  • Redis【黑马点评】——2 秒杀
    前言：  秒杀是该项目中非常重要的一个模块，涵盖的知识点以及代码质量非常之高，里面有许多细节值得反复学习观看，能帮助我们获得非常有用的知识。这篇文章除了对该秒杀功能进行了总计，还包括许多细节的分析，如：如何加锁，为什么加这个锁，加在哪里，以及涉及了动态代理等知识，对这个模块......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99