Javaweb中的HTML与CSS相关知识

leapzed

已于 2023-04-13 17:09:07 修改

阅读量207

点赞数

分类专栏： JavaWeb 文章标签：前端 html

于 2023-04-13 17:07:58 首次发布

本文链接：https://blog.csdn.net/weixin_56633661/article/details/130109315

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Web

1.Web：全球广域网，也称万维网（www World Wide Web），能够通过浏览器访问的网站。

2.前后端分离开发：

如果是前后端不分离开发（混合开发），那么前端和Java程序都会在后端服务器中，，并且没有了前端服务器：

Web前端开发

1.Web标准：

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

1）HTML：负责网页的结构（页面元素和内容）

2）CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）

3）JavaScript：负责网页的行为（交互效果）

HTML

1.HTML（HyperText Markup Language）超文本标记语言：

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

2.HTML结构标签：

<html>
    <head>
        <title>标题</title>
    </head>
    <body>

    </body>
</html>

3.特点：

HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散（比如最后的</html>没有了右边尖括号也不影响），但在写的时候尽量还是严格按照语法标准

4.图片标签<img>：

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

绝对路径分为绝对磁盘路径和绝对网络路径，前者不用多说，后者就是网页中图片的链接

如果使用绝对网络路径，要保证联网且对应的网址是有这张图片

相对路径：VScode中相对路径与IDEA中相对路径稍微有点不一样，IDEA中的相对路径是从当前项目开始，而VScode中相对路径是从当前文件所在的目录开始

width：图像的宽度（像素/相对于父元素的百分比）
height：图像的高度（像素/相对于父元素的百分比）
一般只指定宽度和高度的其中一个，另一个会进行等比例的缩放

5.HTML常用标签：

标题标签：<h1> - <h6>
水平线标签：<hr>，用于生成一条水平线
无实意的布局标签：<span></span>
无实意的布局标签：<div></div>
超链接标签：<a></a>
视频标签：<video>
音频标签：<audio>
段落标签：<p>
文本加粗标签：<b>/<strong>（strong标签具有强调作用）
换行标签：<br>
表格标签：<table>、<tr>、<td>
表单标签：<form>
表单项：不同类型的input元素(<input>)、下拉列表(<select>)、文本域(<textarea>)等

span标签特点：

一行可以显示多个；

宽度和高度默认由内容撑开；

不可以设置宽高（width、height）

div标签特点：

一行只显示一个（独占一行）；

宽度默认是父元素的宽度，高度默认由内容撑开；

可以设置宽高（width、height）

超链接标签：<a></a>，属性：

href:指定资源访问的url；

target：指定在何处打开资源链接，_self：默认值，在当前页面打开，_blank：在空白页面打开

视频标签：<video>，属性：

src：规定视频的url；

controls：显示播放控件；（一定要写这个属性，否则展示出来的视频只是一张图片，无法操作；直接controls="controls"，或者直接controls，因为如果属性值和属性名相同那就可以省略属性值）

width：播放器的宽度；

height：播放器的高度；

音频标签：<audio>，属性：

src：指定音频的url；

controls：显示播放控件

表格标签：

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

<table>:定义表格整体，可以包裹多个<tr>

属性：

border：规定表格边框的宽度；

width：规定表格的宽度；

cellspacing：规定单元之间的空间。

<tr>：表格的行，可以包裹多个<td>。

<td>：表格单元格（普通），可以包裹内容，如果是表头单元格，可以替换为<th>。

表单标签：<form>

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

属性：

action：规定当提交表单时向何处发送表单数据，URL，如果不指定，默认提交到当前页面

method：规定用于发送表单数据的方式。get、post。

使用get：默认提交方式，在url后面拼接表单数据，比如：.html？username=leap&age=18，但是url长度是有限制的

使用post：表单数据在消息体（请求体）中传递的，参数大小没有限制

表单项标签：

<input>：表单项。通过type属性控制输入形式

<select>：定义下拉列表，<option>定义列表项

<textarea>：文本域

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

6.在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符： 

CSS

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

2.HTML中CSS的三种引入方式：

行内样式：写在标签的style属性中（不推荐）（属性名：属性值;不同的属性之间用分号隔开）

<h1 style="color: red;" >焦点访谈：中国底气 新思想夯实大国粮仓</h1>

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

<style>
h1{
  color: red;
}
</style>

外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入 <link rel="stylesheet" href="文件位置">，link标签也写在head标签中）

<-- news.css -->
h1{
    color: red;
}

<-- 对应的html文件 -->
<link rel="stylesheet" href="css/news.css">

3.颜色的表示形式：

表示方式	表示含义	取值
关键字	预定义的颜色名	red、green、blue...
rgb表示法	红绿蓝三原色，每项取值范围：0~255	rgb(0,0,0)、rgb(255,255,255)、rgb(255，0，0)...
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，缩写#000、#f00、#ccc

4.CSS选择器：用来选取需要设置样式的元素（标签）：

元素选择器
id选择器(id不可重复)
类选择器(类名可重复)
三种选择器同时存在，id选择器的优先级最高，其次是类选择器，最后是元素选择器

// 元素选择器
元素名称{
    color:red;
}
// id选择器
#id属性值{
    color:red;
}
// 类选择器
.class属性值{
    color:red;
}
// 例：
<h1 id="hid" class="cls">hello<h1>
// 元素选择器
h1{
    color:red;
}
// id选择器
#hid{
    color:red;
}
// 类选择器
.cls{
    color:red;
}

5.CSS常用样式：