[Java知识库] HTML+CSS基本使用与操作（万字没有，万图快了o(╥﹏╥)o）

文章目录

一、前言
二、HTML介绍
三、CSS介绍
结语

一、前言

二、HTML介绍

1.代码框架理解

2.html标签

3.注释标签

4.标题标签

5.段落标签

1.当我们把一段较长的文本粘贴到HTML中，此时会发现，文字没有自动分段，密密麻麻，非常紧凑。
在这里插入图片描述

2. 此时我们加上p标签的效果
在这里插入图片描述

3. 这里只是起到了分段的作用，但是无法起到每一段缩进两个字的效果，想达到缩进的效果需要用到后面讲到的CSS。

6. 换行标签

7.格式化标签

1). 文字加粗（strong或b）

2).文字倾斜(em或i)

3).文字删除线(del或s)

4).文字下划线(ins或u)

8.图片标签

1).图片标签(img)

2).图片路径(src)

src为必须要有的属性，后面为路径，要加双引号，如果图片与代码在同一个目录，可以像我上面写的形式一样"图片名.图片类型"，如果不在同一个目录中，路径也要随之改变，以HTML文件为基准去找图片的路径。

3).图片加载失败(alt)

4).光标悬停(title)

当光标悬停在图片时，可以显示一段文字，用于注释图片信息
在这里插入图片描述

5)设置图片大小(width与height)

设置图片大小，width=宽度px，height=高度px。
px=像素。
在这里插入图片描述

这里我们可以发现图片有些变形了，为了防止变形，当只设置高度或宽度其中一个属性时，网页会对图片的高度或宽度进行自动调节，达到正确的尺寸。
在这里插入图片描述

9.超链接标签

1).链接标签(a)

网页中显示出一段文字，点击文字，可以跳转标签,第一段为外链接。
在这里插入图片描述

href属性赋值你想跳转的链接，""引起

2).内链接

href不光可以跳转其他网页链接，也可以跳转自己电脑中的相对路径HTML。路径规则与上面所说的图片路径相同

3).空链接

href直赋值一个"#"号时，网站上只会出现一个空链接，链接点开不会有任何反应。
在这里插入图片描述

会发现网址后面多了个#号，但是什么也没干。

4).下载链接

还是对href属性进行修改，放入一个文件路径，当点击链接时，就可以进行下载操作，相对路径规则与前面图片的相对路径相同。

5).网页元素链接

我们可以让链接不是单独的一段文字，而是一张图片，点击图片可以跳转的网站链接，利用嵌套的防止，加入一个img标签来完成。
在这里插入图片描述

6).锚点链接

锚点链接可以快速的定位到目标位置，这里利用到了标签id的方式去定位。
href=“标签ID”。
在这里插入图片描述

点击就会跳转，可以自己尝试一下，这里不方便演示。

10.表格标签

1).表格（table)

2).行(tr)

3). 单元格(td)

4).表头单元格(th)

th表示表头单元格,th也是tr的子标签。
在这里插入图片描述

可以明显看到th标签的内容要比td标签内容更明显，进行了加粗处理。

5).（练习）显示一个铁甲小宝人物表格

11.列表标签

1).无序列表(ul)

ul标签中包含li标签，达到效果，输出的内容不会有序号，而是有一个原点。
在这里插入图片描述

2).有序列表(li)

ul标签中包含li标签，达到效果，输出的内容有序号，从1开始。
在这里插入图片描述

3).自定义列表(dl)

dl标签中包含(dt标签与dd标签）。
dl=总标签。
dt=标题。
dd=标题内容。
在这里插入图片描述

12.表单标签

用于与用户交互的一类标签。
表单分为两个部分：1.表单域。2.表单控件。
表单域=包含表单元素的区域，重点是form标签。
表单控件=输入框，提交按钮等，重点是input标签。

1).form标签，我还没学会，我先不写，欠着。

2).输入控件(input)

input=各种输入控件, 单行文本框, 按钮, 单选框, 复选框。
包含属性（type,name,value,checked,maxlength)。

①.文本框

input属性有很多取值种类，当我们想得到一个单行输入框时，可以这样写。
在这里插入图片描述

②.密码框

④.单选框

name取值相同，才可以达到多选1，不然都可以选择。
在这里插入图片描述

此时我们只可以点击圆圈得到反馈，点击名字不会起作用。请看⑥。

⑤.单选框(默认选择）

当我们将其中一个属性中checkbox取值checkbox时，我们打开网页，网页会默认先学则这个属性。
在这里插入图片描述

⑥.单选框(加大点击范围)

为了更方便用户使用，我们增加一个图片，与可以点击的范围。
在这里插入图片描述

label标签中的for属性取值为你想加大点击范围标签的id，每个标签的id都时独一无二的，中间的内容是你要加大的。

⑦.复选框

⑧.按钮

这里只写一个按钮，说一个按钮就一个按钮，一点作用都没有的按钮。（后面搭配JS会用到）。
在这里插入图片描述

⑨.按纽(加显示文本)

按钮上是可以显示一些文字作为提示，但是现在还是没用的按钮。
在这里插入图片描述

⑩.选择文件

选择电脑上的一个文件。
在这里插入图片描述

选择一个文件后会在后面自动显示文件名.类型。
在这里插入图片描述

3).下拉菜单(select)

下拉菜单select标签，select标签包含option标签，当option中的selected属性=selected时，表示这个标签内容在打开网页时，默认选中了。
在这里插入图片描述

4).多行文本框(textarea)

textarae标签中包含属性有(cols与rows)
cols=文本框宽度。
rows=文本框高度。
在这里插入图片描述

13.无语义标签(div与span)

div 标签, span 标签。
就是两个盒子. 用于网页布局
div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子。
拿前面内容举例。
在这里插入图片描述

三、CSS介绍

css又名：层叠样式表。可以对网页中元素位置的排版进行像素级优化，也就是前面所讲到的CSS为（皮）的原因，让网页变得更美观，

1.基本语法

1).基础

选择器有很多种，先写一个简单的基础选择器，后面会介绍更多。
选择器+{一条或N条声明}。
选择器决定针对谁修改（找谁）。
先声明决定修改什么（干啥）。
声明的属性是键值对.使用 “ ； ” 区分键值对,使用 “ ：” 区分键和值。
CSS 要写到 style 标签中
style 标签可以放到页面任意位置。

①.举例：设置字体颜色

2.CSS的引入方式

1).内部样式

通过style标签，把CSS嵌入到HTML内部。
上面我们举例写的改变文字颜色就是用的内部演示。
在这里插入图片描述

2).行内样式（内联样式）

通过style属性来只当某个标签的样式，只针对某个标签生效。
在这里插入图片描述

3).外部样式

把CSS代码单独放到一个文件里"xxx.css"。
在HTML文件中使用link标签把CSS文件给引入进来。
在这里插入图片描述

rel=“stylesheet” 是指在页面中使用这个外部样式表。
href 属性用于指定 css 文件的路径。路径与HTML图片相对路径规则相同。

4).样式的优缺点对比

3.选择器

CSS种支持的选择器有很多种，这里只介绍其中几种，对不起没学过那么多
/(ㄒoㄒ)/~~

1).基础选择器

①.标签选择器

②.类标签选择器

③.id选择器

和HTML的ID属性相关，由于每个标签中的Id是唯一的，通过ID选择器，也就只能选择一个。
在这里插入图片描述

④.通配符选择器

选择全网页的标签。不分敌我。
不需要被HTML标签调用，通常用来不同浏览器的样式清除。
在这里插入图片描述

2).复合选择器

①.后代选择器

后代选择器，不光能选种子标签，孙子标签…都可以。
也可以将类选择器进行组合，ID选择器也可以。
在这里插入图片描述

②.子选择器

③.并集选择器

④.伪类选择器

4.常用属性

1).字体属性

①.设置字体

②.设置字体大小

③.设置文字粗细

④.设置文字的样式（倾斜）

2).文本属性

①.文字的颜色

有三种设置方法。
第一种：
在这里插入图片描述

第二种：
#ff0000，颜色有无数种，计算机是通过RGB的形式来表示颜色，使用一个颜色8个比特位的方式来表示一个颜色。
在这里插入图片描述

第三种：
当rgb后面加a此时会多出一个透明度的设置（0~1之间）
在这里插入图片描述

②.文本对齐

text-align：方向;
text-align：left;左对齐
text-align：right;右对齐
text-align：center;居中
在这里插入图片描述

③.文本装饰

text-decoration: none;啥也没有（清除）
text-decoration: overline;上划线
text-decoration: underline;下划线
text-decoration: line-through;删除线
在这里插入图片描述

④.文本缩进

控制一个段落的首行，进行缩进。
text-indent:2em;(1em表示一个汉字大小）
在这里插入图片描述

⑤.行高

3).背景属性

①.背景颜色

②.设置背景图

background-image: url(“后端.png”);默认平铺展示
background-repeat: no-repeat;不平铺
background-repeat: repeat;平铺
background-repeat: repeat-x;水平平铺
background-repeat: repeat-y;垂直平铺
在这里插入图片描述

③.设置背景图位置

background-position: center;图片居中
background-position:100px 200px;自定义（横坐标，纵坐标）。
在这里插入图片描述

④.设置背景图片大小

background-size: contain;自适应尺寸
background-size: 300px 300px;自定义尺寸。
在这里插入图片描述

4).设置圆角矩形

HTML里面的元素都是矩形
border-radius: 50px;数值越大弧线越强烈。
在这里插入图片描述

5.CSS中元素的显示模式

在 CSS 中, HTML 的标签的显示模式有很多
我只会（块级元素，行内元素）。
可以使用display属性来设置这个元素的显示模式。
display:block;设置为块级元素。
display:inline;设置为行内元素。
块级元素：

一般都是使用display将行内元素转换为块级元素。
display:none;将元素进行隐藏。

6.盒模型

HTML元素都是一个一个的矩形的盒子。
以下是盒子的组成。
margin=外边框，盒子和盒子之间的距离。
border=盒子的边框。
padding=内边框、
content=内容。
在这里插入图片描述

1).边框

①.基础边框

border属性来进行设置的（其实是一个复合属性）。
border: 5px solid red;

更多的边框样式可以去本本库查询。
上面的形式是统一设置，也可以对边框的上下左右单独设置。
border-left: . . .;
border-right: . . . ;
等…。
在这里插入图片描述

边框会撑大盒子。
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子：
box-sizing：border-box;

②.内边框

padding=设置内容与墙的距离。
常规写法（对4个方向设置）：
padding-top
padding-bottom
padding-left
padding-right
复合写法：
padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示上5px, 右10px, 下20px, 左30px (顺时针）
在这里插入图片描述

③.外边框

margin=控制盒子与盒子之间的距离。
常规写法（对4个方向设置）：
margin-top
margin-bottom
margin-left
margin-right
复合写法：
margin: 5px; 四个方向
margin: 5px 10px; 上下，左右
margin: 5px 10px 20px; 表示上 5px, 左右为 10px, 下为 20px
margin: 5px 10px 20px 30px; 表示上5px, 右10px, 下20px, 左30px (顺时针）
在这里插入图片描述

④.块级元素居中

7.弹性布局

flex任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式
弹性不布局是一个比较现代的布局，在一些老的浏览器上是不管用的。

1).基础概念

被设置为 display:flex 属性的元素, 称为 flex container它的所有子元素立刻称为了该容器的成员, 称为 flex itemflex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

2).常用属性

①.justify-content.

在flex布局中，常用justify-content.属性来设置水平方向的排列模式。
justify-content:center;居中。
justify-content:end;局尾。
justify-content:space-around;平分空间。
justify-content: space-between;紧贴两侧平分空间。
未指定 justify-content 时, 默认按照从左到右的方向布局。
在这里插入图片描述

②.align-items;

控制元素在垂直方向上如何排列，取值与 justify-content 类似。
在这里插入图片描述