学习html和css总结1-5天-CSDN博客

本文链接：https://blog.csdn.net/m0_46415549/article/details/130070624

web组成标准

结构（xml/html）

表现（css）

行为（js）

结构和表现标准制作组织w3c(万维网联盟)

行为标准制定组织（ECMA）

html特点

1.html是超文本标记语言，是www万维网的描述性语言

2.我们使用的是第五个版本的html，目前还在更新

站点

1.用来归纳一个网站所有的网页、素材以及他们的联系

2.规划网站的所有内容和代码，整合资源

最少包含一下内容

html文件夹

css文件夹

js文件夹

index.html

images文件夹

注意：index.html作为首页，必须放在最顶层目录，而且文件名称不能更改

站点和文件的命名规则

用英文小写字母开头，由数字、字母、下划线组成，不能包含空格，特殊字符，以及中文

快捷键

打开站点讲需要工作的文件夹拖拽到vscode图标上，快捷打开

或者在vscode里面打开文件夹，均可

在英文下按 shift+1 敲回车生成前端基础架构

取消撤销 Ctrl+y

页面代码默认浏览器运行 alt+b

生成一段文本lorem

标签总结

1.标签要写在<>内，单标签单个出现，双标签成对出现

2.标签第一个单词叫做标签名字

3.属性和属性值用=连接，属性值需要写在" "内,（单双引号均可）

4.如果有多组属性，注意属性之间用空格间隔

5.注意，注释不能在嵌套一个注释

标题只有1~6，每个标题独占一行，有将字体加粗加大的功能

*生成几个

$数字序号

h$*6 直接就出来h1到h6

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

  空格符:特殊字符（不属于标签）

<hr> 强制出现分割线，单标签

<br> 强制换行，单标签

<p>接下来是 <strong>加粗</strong> 环节</p>(在加粗标签中，strong具有强调语气)

<p>接下来是 <i>倾斜</i> 环节</p> （同理，在倾斜标签中em也具有强调语气）

补充标签（不常用，了解即可）

<p><del>也是删除线</del></p>

<p><sup>上标<sup></sup>，常用语平方数，例如5 2</sup>=25 </sup></p>

<p><sub>下标</sub>跟上表同理</p>

列表

<ol type="A" start="27"> //type 类型 start 开始

<li>第一行</li> 支持的属性值只支持属性值位数字，写数字几就是从第几位开始

<li>第二行</li> 1,a,A,i,I

</ol>

<ul>

</ul>

<h5>自定义列表</h5>

<dl>

<dt>自定义列表标题</dt>

<dd>自定义第一行</dd>

<dd>自定义第二行</dd>

<dd>自定义第三行</dd>

</dl>

<h4>img标签</h4>

<p>绝对路径</p>弊端：路径不够灵活，文件发送到其他设备就失效。

<p>相对路径</p>（相对于当前文件夹来说，图片的路径位置

../返回上一层）

alt 图片无法加载时的显示内容

title 鼠标悬停时的提示信息

<h4>超链接的使用</h4>//实现页面跳转,文字图片均可使用

特点：默认不独占一行，自带下划线，访问后自带不同颜色

属性：href 跳转路径地址

相对路径

绝对路径

网络路径(需要带上http://网络协议)

title="跟图片同理，鼠标悬停提示信息

" target="_blank"//新窗口打开

_self(默认自己窗口打开)

<a href="../index.html">点击去首页</a>

一、表单

1.表单的作用：用来收集用户信息

2.表单的组成：

表单框 form（表单控件脱离了表单框，功能就会失效）

提示信息

表单控件

——input

特点：单标签，默认不独占一行，自带大小

属性：

type 类型

text 文本框

password 密码框

submit 提交按钮（提交数据并刷新页面）

reset 重置按钮（清空数据）

name 参数名

value 默认值/默认文本

二、css样式

1.css的概念：css又叫做层叠样式表，简单说就是如何修饰网页信息的显示样式。

层叠性概念：我们的css可以用多个选择器选中同一个标签添加样式，那具体哪个生效，如何生效，是由他的权重决定的，

这个就叫做css的层叠性。

版本：目前遵循的是W3C发布的css3.0版本。

作用：用于修饰xhtml、xml/html。

2.css样式语法结构

结构：选择器{声明;声明;声明;} 声明——属性:属性值;

demo: p{color:red;height:100px;}

总结：

<1>选择器写在{}前边，声明写在{}之内，声明和声明之间用;隔开

<2>声明由属性和属性值组成，属性和属性值之间用:链接

3.css样式

color 字体颜色

height 元素高度（需要带单位，目前我们使用像素单位px）

background-color 背景色

4.三种的样式表的使用

<1>外部样式表

写在html文件之外，创建一个css文件，通过在head里边写link标签引入生效。

引入demo: <link rel="stylesheet" href="../css/style1.css">

<2>内部样式表

写在html文件之内，在head中，写一个style标签，在style标签里边写css样式。

demo:

<style>

color: aqua;

background-color: blueviolet;

}

</style>

<3>内联样式表、行内样式

写在html标签内部，写在html标签属性style中。

demo： <p style="color:red;background-color: aqua;height: 100px;">玛卡巴卡</p>

<4>外部样式表引入方式补充

<style>

@import url(../css/style1.css);

</style>

@import引入和link引入的区别

差别1：本质的差别：link属于HTML标签提供的引入方式，而@import完全是CSS提供的一种方式。

差别2：加载顺序的差别：link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。

所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3：兼容性的差别：@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别：当使用js控制dom去改变样式的时候，只能使用link标签，

因为@import不是dom可以控制的.

5.css生效顺序

权重相同时：

当多个选择器选中同一个标签元素时，如果修饰的是不同属性，那么不会冲突，都生效。

如果修饰到同一属性，后写的覆盖先写的,与样式表为内部外部无关。

权重不同时：权重大的优先生效。

总结：如果属性没有冲突，都能生效。如果属性冲突，权重大的优先生效，权重相同，后写的优先生效。

6.css选择器

<1>标签选择器、类型选择器（直接拿标签名作为选择器）

demo: 标签名{属性:属性值;}

作用：统一某一类标签的样式。

<2>id选择器

demo:

#p1{color:yellow;}

注意：在一个页面中，id名不能重复。id在页面中需具有唯一性。

作用：让某个标签具有唯一性。

<3>class选择器、类选择器

demo:

.aa{color:yellow;}

特点：和id比较像，但是不具有id的唯一性，你可以使用多次，也可以使用一次，无所谓。

作用：将不同的标签，划为一类，统一添加样式。

<4>群组选择器

demo: 选择器1,选择器2,选择器3{color:red;}

作用：给不同的标签，统一添加某种样式。（注意：每个选择器之间用,号隔开）

<5>通配符 *

作用：选中页面中的所有元素，一般用来清除默认间距

demo:

margin:0;

padding:0;

}

注意：以后这个就是我们写页面的起手式。

<6>包含选择器

格式：父选择器1 子选择器2{color:red;}

demo: ul li{color:red;}

7.权重 0000

通配符 0-1

标签选择器 0001

class选择器 0010

id选择器 0100

行内样式 1000

群组各自计算，各算各的

包含里边的选择器权重之和

！important 9999

三、字体属性

1.字体大小 font-size

默认字体大小16px

最小支持12px字体大小

2.字体类型 font-family

特点：Windows默认字体类型为微软雅黑

demo：font-family:"wyk","宋体","楷体";

规律：按照从左往右的顺序依次识别，如果都不识别，显示默认字体

注意：字体名字记得加引号，多种字体之间用,号隔开。

3.字体颜色 color

1）颜色关键词

2）#16进制六位写法 0-9 a-f #ff0000;可简写#f00(每个色域都是重复的值可简写)

3）rgb（0-255,0-255,0-255）三个参数分别代表红绿蓝三个色域的取值。

4.文字加粗 font-weight

取值范围为100-900之间的整百数

100-300为细体 300

400-500为标准 400 normal

600-900为粗体 700 bold

900极粗（视觉和700一样，只是含义更粗）bolder

5.文字倾斜 font-style

normal(默认值) 常规

italic 斜体

* oblique 字体倾斜

6.元素内文本水平对齐方式 text-align

属性值

left

right

center

justify 两端对齐

7.文本行高 line-height

含义：元素内每行文本的高度

特点：

行高和高度设置一样来实现垂直居中作用

8.首行缩进 text-indent

控制标签内第一行缩进，支持负数

9.取消li标签的默认样式

list-style:none;

四、边框 border

1.格式：border:宽度风格颜色

风格

solid 实线

dotted 点划线

double 双线

dashed 虚线

none 取消边框

border-color 边框颜色

五、背景属性

背景色 background-color

背景图片 background-image:url();

特点：

1）背景图按照元素大小显示，元素多大，背景图多大

2）背景图默认平铺

3）同时使用背景图和背景图片时，背景图片在上面

background-repeat 背景图是否平铺

no-repeat 不平铺

repeat 平铺

repeat-x 横向平铺

repeat-y 纵向平铺

background-position:x y; 背景图定位

支持，方向关键字如left，center，bottom

也支持百分比

关键词 cover 等比缩放，容易出现裁剪

contain 等比缩放，容易出现留白

background-attachment 背景图固定

scroll 背景图滚动（默认值）

fixed 背景图固定

当元素设置背景图固定后，背景图的参照物变成了浏览器窗口

background-size的参照物将变为浏览器窗口

背景图复写形式 background

格式：background:背景色(可以省略）背景图(可以省略) 背景图是否平铺背景图位置/背景图大小背景图固定(可以省略);

demo: background:red url() no-repeat center/cover fixed;

六、浮动 float

功能：让元素标签能够横向排列。

属性值：

left 左浮动

right 右浮动

特点：

<1>浮动元素会影响后边的同级未浮动元素，所以建议——要浮动，同级都浮动，要不浮动都别浮动。

<2>浮动元素，在父元素中放不下的时候，会进行换行。

<3>在使用浮动时，记得给父元素规定高度,不然会触发高度塌陷。

<4>不独占一行的标签，写完浮动后也能加宽高了。

七、盒模型

1.概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。

css定义所有的元素都可以拥有像盒子一样的外形和平面空间.

2.盒模型的组成：外边界/外边距(margin)、边框(border)、补白/内填充(padding)、内容区（width和height）。

3.padding 内填充，内间距

说明：用来确认内容或者子元素到达边界之间的距离。

使用：给父元素添加padding，来调整子元素或者内容在他里边的位置。（原理就是向内挤压空间）

（为了保证总体大小不变，需要在父元素上减去对应的padding值。）

单一方向填充

padding-top 上填充

padding-left 左填充

padding-bottom 下填充

padding-right 右填充

padding的多参数应用

详细参考day04的border多参数（顺时针）

4.margin 外边界、外间距

说明：用来确认两个元素之间的距离。

注意事项：

<1>margin上下会重叠，左右会相加。

<2>父元素下边的第一个子元素添加margin-top，这个margin-top会生效到父元素身上。

(1)给父元素添加：overflow:hidden;

(2)不这么写，不给父元素下边的第一个子元素添加margin-top,

改为给父元素添加padding-top解决此问题，但是要记得给父元素总体大小减去这个padding值。

margin控制元素水平居中

(1)给元素添加宽度

(2)给元素书写margin:0 auto;