JavaWeb--day1--HTML&CSS-EW帮帮网

(以下内容全部来自上述课程及课件)
在这里插入图片描述

web开发介绍

1. 什么是web？

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

2. Web网站的工作流程

请添加图片描述

3. Web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

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

HTML&CSS

1. 什么是HTML、CSS？

HTML: HyperText Markup Language，超文本标记语言。
请添加图片描述
CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

2. 快速入门

第一步:创建一个名为HTML的文件夹，然后找到课程资料中的 1.jpg 文件放到该目录下，此时HTML文件夹中内容如下：
第二步：创建一个文本文件，然后修改文件名为hello.html,注意文件的后缀是.html,如下图所示：
第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码
首先html有固定的基本结构

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

在这里插入图片描述

第四步：然后选中文件，鼠标右击，选择使用浏览器打开文件，浏览器呈现效果如下:

3. 开发工具

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

注意：需要注意的是，我们作为一名开发者，不应该将软件软装在包含中文名的路径中。

好用的插件：

Chinese（Simplified）Language Pack
Code Spell Checker
HTML CSS Support
JavaScript (ES6) code snippets
Mithril Emmet
Path Intellisense
Vue 3 Snippets
VueHelper
Auto Close Tag
Auto Rename Tag
Beautify
Bracket Pair Colorizer
open in browser
Vetur
IntelliJ lDEA Keybindings

4. 基础标签 & 样式

参考页面：新浪新闻
在这里插入图片描述

4.1 新浪新闻-标题实现

4.1.1 标题排版（HTML）

在这里插入图片描述
请添加图片描述

4.1.2 标签

图片 img

 A. 图片标签: <img>
 
 B. 常见属性: 
		 src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
		 width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
		 height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
		备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩
		放。
		
C. 路径书写方式:
	绝对路径:
		  1. 绝对磁盘路径: 
		C:\Users\Administrator\Desktop\HTML\img\news_logo.png
		<img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
		  2. 绝对网络路径: 
		 https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
		 <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
	相对路径:
		  ./ : 当前目录 , ./ 可以省略的
		  ../: 上一级目录

标题标签 h 系列

A. 标题标签: <h1> - <h6>

	 <h1>111111111111</h1>
	 <h2>111111111111</h2>
	 <h3>111111111111</h3>
	 <h4>111111111111</h4>
	 <h5>111111111111</h5>
	 <h6>111111111111</h6>
	 
 B. 效果 : h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。

水平分页线标签

<hr>

4.1.3 标题样式（CSS）

在这里插入图片描述

内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。
外部样式，html和css实现了完全的分离，企业开发常用方式。

4.1.4 颜色表示

在这里插入图片描述

备注: 要想拾取某一个网页中的颜色，我们可以借助于浏览器的拾色器插件来完成。

CSS选择器

顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求
也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习
最基本的3种。

选择器通用语法如下：

选择器名   {
    css样式名：css样式值;
    css样式名：css样式值;
 }

01. 元素（标签）选择器：

选择器的名字必须是标签的名字
作用：选择器中的样式会作用于所有同名的标签上

元素名称 {
    css样式名:css样式值；
}

例子如下：

 div{
     color: red;
 }

02. id选择器:

选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）

 #id属性值 {
    css样式名:css样式值；
}

例子如下：

 #did {
    color: blue;
 }

03. 类选择器：

选择器的名字前面需要加上 .
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

.class属性值 {
    css样式名:css样式值；
}

例子如下：

 .cls{
     color: green;
 }

4.1.5 发布时间字体颜色

 <!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>[非政治]</title>
    <style>
        h1 {
            color: #4D4F53;
        }
        /* 元素选择器 */
        /* span {
            color: red;
        } */
        
        /* 类选择器 */
        /* .cls {
            color: green;
        } */
        
        /* ID选择器 */
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }
    </style>
</head>
<body>
	<img src="img/news_logo.png"> 新浪政务 > 正文
	<h1>[非政治]</h1>
 	<hr>
 	<span class="cls" id="time">[非政治]</span>  
 	<span class="cls">[非政治]</span>
 	<hr>
 </body>
 </html>

上述我们还使用了一个css的属性 font-size , 用来设置字体的大小。但是需要注意，在设置字体
的大小时，单位px不能省略，否则不生效。

4.1.6 超链接

[非政治]在新浪新闻的标题部分，当我们点击顶部的 “新浪政务”，浏览器将自动在当前窗口访问新浪政务
首页这个资源（http://gov.sina.com.cn/）
[非政治]当我们点击新闻发布时间之后的 “央视网”，浏览器将会自动打开一个新的标签页，然后在新的标
签页中访问央视网中的该新闻资源（https://news.cctv.com/2023/03/02/ARTIUCKFf9k
E9eXgYE46ugx3230302.shtml）

<!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>[非政治]</title>
	 <style>
		 h1 {
		 color: #4D4F53;
		  }
		  
		 #time {
			 color: #968D92;
			 font-size: 13px; /* 设置字体大小 */
			  }
			  
		 a {
			 color: black;
			 text-decoration: none; /* 设置文本为一个标准的文本 , 去除掉超链接 下面默认的下划线 */
			  }
 	  </style>
</head>
<body>
	 <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" 
	target="_self">新浪政务</a>  > 正文
	
	<h1>[非政治]</h1>
	
	 <hr>
	 <span id="time">2023年03月02日 21:50</span>  
	<span> 
	<a 
	href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx323030
	 2.shtml" target="_blank">[非政治]</a>
	 </span>
	 <hr>
	 
</body>
</html>

浏览器打开此页面，我们可以看到最终效果（超链接的字体，以及默认的下划线，通过css样式已经调
整好了）：

4.2 新浪新闻-正文实现

4.2.1 排版

在这里插入图片描述
整个正文部分的排版，主要分为这么四个部分：

视频 (当前这种新闻页面,可能也会存在音频)
文字段落
字体加粗

前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。而
后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。

图片

<!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>[非政治]</title>
    <style>
        h1 {
            color: #4D4F53;
        }
        
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }
        a {
            color: black;
            text-decoration: none; /* 设置文本为一个标准的文本 */
        }
        p {
            text-indent: 35px; /* 设置首行缩进 */
            line-height: 40px; /* 设置行高 */
        }
        #plast {
            text-align: right; /* 对齐方式 */
        }
    </style>
 </head>
 <body>
    <!-- 标题 -->
    <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" 
  target="_self">[非政治]</a>  > 正文
  
    <h1>[非政治]</h1>
    <hr>
    <span id="time">2023年03月02日 21:50</span>
    
    <span><a 
href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx323030
 2.shtml" target="_blank">[非政治]</a></span>
 
 	<hr>
 	<!-- 正文 -->
 	<!-- 视频 -->
 	<video src="video/1.mp4" controls width="950px"></video>
 	
 	<!-- 音频 -->
 	<!-- <audio src="audio/1.mp3" controls></audio> -->
 	
	 <p>
	 <strong>[非政治]</strong>[非政治] 
	</p>
	
	 <p> [非政治]
	</p>
	
 	<img src="img/1.jpg">
 
	 <p> [非政治]
	</p>
	
 	<img src="img/2.jpg">
 	
	 <p> [非政治]
	 </p>
	 
	 <p id="plast">
		[非政治]
	 </p>
 </body>
 </html>

在上述的正文排版实现中，还用到了几个CSS属性：

text-indent: 设置段落的首行缩进
line-height: 设置行高
text-align: 设置对齐方式, 可取值为 left / center / right

在HTML页面中无论输入了多少个空格, 最多只会显示一个。可以使用空格占位符
（&nbsp；）来生成空格，如果需要多个空格，就使用多次占位符。

那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位
符写法即可)，如下：

4.2.2 页面布局

目前，新闻页面的基本排版，我们都已经完成了，但是，大家会看到，无论是标题部分，还是正文部
分，都是铺满了整个浏览器。而我们再来看看新浪新闻的原始页面，我们会看到新闻网页内容都是居
中展示的，左边、右边都是一定的边距的。
在这里插入图片描述
那接下来呢，我们就需要按照这个效果，来完成页面布局。而要想完成这样一个页面布局，我们就需
要介绍一下CSS中的盒子模型。

盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个
矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边
距区域（margin）

CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如：

盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒
子之内的。

请添加图片描述

<!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>盒子模型</title>
    <style>
        div {
            width: 200px;  /* 宽度 */
            height: 200px;  /* 高度 */
            box-sizing: border-box; /* 指定width height为盒子的高宽 */
            background-color: aquamarine; /* 背景色 */
            
            padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边
距都一行, 可以简写: padding: 20px;*/ 
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
            margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距
都一行, 可以简写: margin: 30px; */
        }
    </style>
 </head>
 
 <body>
    
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
A A A A 
    </div>
  </body>
</html>

代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子
各个组成部分(内容、内边距、边框、外边距)：
在这里插入图片描述

我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：

布局实现

在实现新闻页面的布局时，我们需要做两部操作：

第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便
通过css设置内容占用的宽度，比如：65%。
第二步：通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即
可，为：0%。

<!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>[非政治]</title>
    <style>
        h1 {
            color: #4D4F53;
        }
        
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }
        a {
            color: black;
            text-decoration: none; /* 设置文本为一个标准的文本 */
        }
        p {
            text-indent: 35px; /* 设置首行缩进 */
            line-height: 40px; /* 设置行高 */
        }
        #plast {
            text-align: right; /* 对齐方式 */
        }
        #center {
            width: 65%;
            /* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上 右 下 左 */
            margin: 0 auto;
        }
    </style>
 </head>
 <body>
  <div id="center">
        <!-- 标题 -->
        <img src="img/news_logo.png"> <a 
href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文

        <h1>[非政治]</h1>
        
        <hr>
        <span id="time">2023年03月02日 21:50</span>
        <span><a 
href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx323030
 2.shtml" target="_blank">[非政治]</a></span>
        <hr>
        
        <!-- 正文 -->
        <!-- 视频 -->
        <video src="video/1.mp4" controls width="950px"></video>
        
        <!-- 音频 -->
        <!-- <audio src="audio/1.mp3" controls></audio> -->
        
        <p>
        <strong>[非政治]</strong>[非政治] 
        </p>
        
        <p> [非政治]
        </p>
        
        <img src="img/1.jpg">
        
        <p> [非政治]
        </p>
        
  		<img src="img/2.jpg">
  		
		 <p> [非政治]
		</p>
		
 		<p id="plast">
			[非政治]
 		</p>  
	</div>
 </body>
 </html>

浏览器打开此页面，最终效果如下：
在这里插入图片描述

5. 表格标签

场景：在网页中以表格（行、列）形式整齐展示数据，我们在一些管理类的系统中，会看到数据通常都
是以表格的形式呈现出来的，比如：班级表、学生表、课程表、成绩表等等。
请添加图片描述

 <!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>
    
    <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>

打开浏览器，效果如下图所示：
在这里插入图片描述

整合表格使用 table 标签包裹 , 其中的每一行数据都是一个 tr , 每一行中的每一个单元格都是
一个 td , 而如果是表头单元格, 可以使用 th (具有加粗居中展示的效果)。

6. 表单标签

在这里插入图片描述
请添加图片描述

6.1 GET方式提交的表单

<!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>
 </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" value="提交">
    </form>
    
</body>
</html>

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单
的数据在url后面提交到服务端，格式为：?username=Tom&age=12。
在这里插入图片描述

6.2 POST方式提交表单

 <!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>
 </head>
 <body>
    <!-- 
    form表单属性: 
        action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
 		method: 表单的提交方式 .
        get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
        post: 在消息体(请求体)中传递的, 参数大小无限制的.
    -->   
    
    <form action="" method="post">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">
        <input type="submit" value="提交">
    </form>
    
</body>
</html>

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name
属性。否则，无法提交该表单项。
用户名: <input type="text" name="username">

7. 表单项

请添加图片描述

 <!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>
 </head>
 <body>
	 <!-- value: 表单项提交的值 -->
	 <form action="" method="post">
		     姓名: <input type="text" name="name"> <br><br>
		     密码: <input type="password" name="password"> <br><br> 
		     性别: <input type="radio" name="gender" value="1"> 男
		          <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="game"> game </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>
		               <option value="4">博士</option>
		          </select>  <br><br>
		     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
		     <input type="hidden" name="id" value="1">
		        
		     <!-- 表单常见按钮 -->
		     <input type="button" value="按钮">
		     <input type="reset" value="重置"> 
		     <input type="submit" value="提交">   
		     <br>
	 </form>
 </body>
 </html>

通过浏览器打开上述的表单项html文件，最终展示出的表单信息如下：
在这里插入图片描述
而对于input type=“hidden”，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，
是会提交到服务端的。接下来，我们就点击提交按钮，来提交当前表单，看看提交的数据：

8. 文档查阅

文档地址: https://www.w3school.com.cn/index.html

8.1 HTML文档查阅

以video标签为例:
在这里插入图片描述

8.2 CSS文档查阅

以padding属性为例:
在这里插入图片描述

JavaWeb--day1--HTML&CSS

web开发介绍

1. 什么是web？

2. Web网站的工作流程

3. Web标准

HTML&CSS

1. 什么是HTML、CSS？

2. 快速入门

3. 开发工具

4. 基础标签 & 样式

4.1 新浪新闻-标题实现

4.1.1 标题排版（HTML）

4.1.2 标签

4.1.3 标题样式（CSS）

4.1.4 颜色表示

CSS选择器

01. 元素（标签）选择器：

02. id选择器:

03. 类选择器：

4.1.5 发布时间字体颜色

4.1.6 超链接

4.2 新浪新闻-正文实现

4.2.1 排版

4.2.2 页面布局

盒子模型

布局实现

5. 表格标签

6. 表单标签

6.1 GET方式提交的表单

6.2 POST方式提交表单

7. 表单项

8. 文档查阅

8.1 HTML文档查阅

8.2 CSS文档查阅

网站公告

今日签到

热门文章

最新发布