HTML、CSS学习阶段性总结

最新推荐文章于 2024-09-16 23:05:35 发布

清-缘

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量108

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qq_57470899/article/details/125994513

版权

HTML常见标签：

<h1~56> ...</h1~56> 标题标签，其字体1~6依次减小。

<i>...</i> 斜体 <em></em>强调斜体

<b>...<b>加粗 <strong>...</strong>强调加粗

<sub>...</sub> 下标 <sup>...</sup>上标

< del>...</del> 删除线

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标题示例例</title>
</head>
<body>
    <h3>HTML标签实例例--⽂文本标签</h3>
    
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>
    
    <i>i: 斜体标签</i> <br/>
    <em>em: 强调斜体标签</em> <br/>
    <b>b: 加粗标签</b><br/><br/>
    
    <strong>strong: 强调加粗标签</strong><br/>
    <del>del: 删除线</del><br/>
    <u>u: 下划线</u> <br/><br/>
    
    水分子：H<sub>2</sub>O <br/>
    4<sup>2</sup>=16
</body>
</html>

结果：

实体字符：

  空格 ⁢ 小于号 >大于号 © @copy;

常⻅见格式化标签如下：

<br/>换行 <p>...</p> 换段 <hr />⽔水平分割线 <ul>...</ul> ⽆无序列表

<ol>...</ol> 有序列表 <li>...</li>列表项 <dl>...</dl>自定义列表

<dt>...</dt>自定义列表 <dd>...</dd> 自定义列表内容 <div>...</div> 常⽤用于组合块级元素，

<span>...</span> 常⽤用于包含的⽂文本。

图像标签 img

语法：<img src=“" alt=""> 其常见的属性有 arc: 图片及url地址
ait:图片加载失败时的提示信息
width : 图片宽度

heigth：图片高度

超链接标签：
语法：<a href="url"></a>

属性：href:指定链接跳转位置 target：链接打开方式:_blank;新窗口打开 _self:本窗口打开

路径、相对路径绝对路径：你主页上的文件再硬盘中的位置路径相对路径：相对于某个目录的路径

CSS
常见选择器

基础选择器：
元素选择器通过元素的名字去选择对应的元素如：div span p ul
id选择器语法 #id值每一个元素都具备id属性 id值是唯一的
类选择器语法 .类名每一个元素都具备class属性类名是可以重复的
通配符选择器语法： * 选中页面中所有的元素

复合选择器：是由两个或多个基础选择器组成复合选择器分为两种类型：
交集选择器：选择器1选择器2选择器3
被选中的元素需要满足所有的选择器条件，才会被选中

并集选择器：选择器1,选择器2,选择器3
被选中的元素只需要满足其中一个选择器条件，就会被选中

内部样式语法格式： <style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>

行内式语法格式： <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

外部样式语法：<link rel="stylesheet" href="../css/iconfont.css">

css具备三大特性：

层叠性：当有多个相同选择器或者同类型的选择器选中同一个元素，并且为该元素设置同一个样式属性，但是属性值设置的不一样

- 拉架（解决样式冲突问题）

- 会优先使用，靠近元素的选择器所设置的样式

注意：当选择器权重（优先级）不同时，无法通过层叠性解决样式冲突

优先级（权重）：

通配符选择器没有权重权重最低

元素选择器 0,0,0,1

类/伪类 0,0,1,0

id选择器 0,1,0,0

行内样式（style） 1,0,0,0

!important 无限大谨慎使用

注意：选择器最终的优先级是变化，可以进行叠加的！但是只能在最高位的值，不能突破等级！

继承性：css规定一些通用的样式属性，不需要频繁的去写，通过继承性实现即可

注意：不是所有的css属性都能够被后代元素继承

可以被继承的css属性：字体相关、字体颜色、列表相关的、文本相关的等

文档流（常规流）：

网页是一个多层的结构，一层叠着一层的，在整个网页中有个最底层（原始层），最底层就是我们文档流，

默认情况下，所有的元素都是在文档流中遵循其规则进行排列的

基于文档流概念，元素就会有两种状态：

1、元素在文档流中时（默认情况）：

块级元素：

1.独占其父元素的一行

2.可以设置宽高

3.默认高度由内容决定，或者子元素决定

4.默认宽度是其父元素的100%

5.占据页面实际的位置

行内元素：

1.不会独占一行，在一行水平依次排列，直到排不下自动换行

2.不可以设置宽高

3.默认高度和宽度都是由内容决定

4.占据页面实际的位置

2、元素脱离文档流

一旦元素脱离文档流，将不再占据文档流中的位置

脱离文档流后，元素不再有任何的区分，统一视作一致的，没有区分

脱离文档流的元素可以设置宽高，不会独占一行

常见布局小技巧:

将一个元素在父块元素的居中： margin：0 auto；

将行内元素在父元素中水平居中： text-align: center;

将行内元素在父元素中水平垂直居中？line-height: 与父元素高度值一样;

常见的css属性：

设置元素的不透明度 opacity: 0;（ 0-1）

设置元素的阴影 4个值 box-shadow: 0 0 50px red;

元素轮廓使用规则和border一样不会改变盒子的大小只是视觉效果 outline: 1px solid red;

ul { /* 去掉列表前的符号 */ list-style: none; } a{ /* 去掉下划线 */ list-style: none; }

浮动 float：

none 默认值，元素不浮动，正常状态

left 元素向左浮动

right 元素向右浮动

解决高度塌陷

1、给浮动元素的父元素设置具体的高度值（不推荐）

2、给父元素开启一个BFC模式，（BFC：不会影响上下文的局部块）

3、给父元素设置浮动，同样能够开启BFC，防止父元素的高度塌陷

4、通过overflow：hidden；可以开启BFC 该方式也是比较推荐，整体影响最小的一种方式（但此方法还不是最优解）

5、display：table;

最佳

.clearfix::after,

.clearfix::before {

content: '';

clear: both;

display: table;

}

定位（position）：

- 定位是一种更高级的布局手段

- 通过定位可以将元素摆放到页面的任意位置

- 通过css的属性 position 为元素设置定位

position：

- 可选值：

- static 默认值，元素是没有开启定位的，静止的

- relative 为元素开启相对定位

- absolute 为元素开启绝对定位

- fixed 为元素开启固定定位

- sticky 为元元素开启粘滞定位

- 相对定位：元素相对于自身本身的位置！最开始占据文档流的位置来进行定位

- 绝对定位：元素相对于其最近的开启了定位的包含块元素为基准进行定位

- 偏移量：

- 通过css提供的方位属性，对开启定位的元素设置，偏移量

- top left right bottom

- 注意：一般只需要设置两个方位即可对元素进行定位，偏移量也支持负数值

- relative（相对定位）

- 当元素的position属性值设置为relative则为该元素开启了相对定位

- 相对定位的元素具备以下特点：

1、元素开启相对定位后，不设置偏移量元素是不会发生任何的位置变化

2、相对定位是参照元素自身在文档流中的位置进行定位的

3、相对定位会提升元素的层级关系

4、相对定位的元素不会脱离文档流，元素的特性不会被改变，块还是块，行内还是行内

- absolute(绝对定位)：

- 当元素的position属性值设置为absolute，则为该元素开启了绝对定位

- 绝对定位的特点：

1、开启绝对定位后，如果不设置偏移量元素的位置不会发生改变

2、开启绝对定位后，元素会脱离文档流，不再占据页面的实际位置，会影响其他正常元素的布局

3、绝对定位会改变元素的性质，不再区分行，块，行内块的概念

4、绝对定位会提高元素的层级

5、绝对定位的元素是相对于最近的开启了定位的包含块来进行定位的

一般会为子元素设置绝对定位，给他的父元素设置相对定位，（子绝父相）

包含块：正常情况下，包含块指的就是该元素的父元素（祖先元素）

:target 指向的是被锚点跳转的元素

固定定位：fixed

将元素的position属性设置为fixed则开启了元素的固定定位

固定定位也是一种绝对定位，所有固定定位的大部分特点与绝对定位是一样的

注意：唯一不同的是定位的参照基准不一样，并且固定定位的元素不会随着网页的滚动条进行滚动

固定定位是相对于浏览器的视口进行定位的

粘滞定位：sticky

当元素的position属性设置位sticky则开启了粘滞定位：

粘滞定位和相对定位的特点基本一致

注意：不同点是粘滞定位可以在元素到达某个点时将其固定

动画

.box {

width: 100px;

height: 100px;

background-color: #bfc;

/* 设置动画相关的属性 */

animation-name: test;

/* 设置动画播放的时间 */

animation-duration: 2s;

/* 设置动画的延迟时间 */

/* animation-delay: 5s; */

/* 设置动画播放次数可以是任意数值或者 infinite 重复无限次*/

/* animation-iteration-count: infinite; */

/* 设置动画播放时元素的时许函数（运动函数）和过渡属性基本一致*/

animation-timing-function: ease-in;

/* 设置动画的运行方向 */

animation-direction: alternate;

/* 默认值 normal，从from 到 to */

/* reverse 从 to 到 from */

/* 设置动画的暂停和播放 */

animation-play-state: running;

/* 设置动画的填充模式 */

animation-fill-mode: none;

/* none 默认值，动画执行完毕后元素回到原来的位置，元素本身的状态 */

/* forwards 动画执行完毕后停止在结束的状态 */

/* backwards 动画延迟一开始就处于开始状态 */

/* 简写属性 */

animation: name duration timing-function delay iteration-count direction fill-mode;

}

清-缘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫