DocPortal
目录

Html&CSS补充文档

# html

# ⽹⻚结构

<html> 
 <head></head>
 <body></body>
</html>
1
2
3
4

⽂档声明：告诉浏览器⽹⻚是以html5版本编写的

meta标签：

  • ⾃结束标签
  • 可以提供该⽹⻚相关信息,元数据
  • charset="utf-8"：中⽂的⽹⻚需要⽤到的声明编码，否则会出现乱码
  • name="keywords" content="xx,诗词"：提供⽹⻚的关键字，关键字⽤,隔开
  • name="Description"：描述⽹⻚的信息
<meta name="keywords" content="java,架构师">
<meta name="Description" content="java,架构师">
1
2

空格：

&nbsp;
1

# ⾃结束标签

<meta> 
<link> 
<hr> 
<img> 
<input>
1
2
3
4
5

注释

  • 内容要简介明了

  • 在实际⼯作中，当代码复杂程度⼤时，便于解释说明代码含义

  • 注释暂时⽤不到的代码⽚段

  • 注释不能嵌套，否则⽹⻚中会渲染出 -->

  • 养成在代码中注释的习惯，对⾃⼰，同事都更加容易理解你的代码

# 语义化标签

每个HTML元素都有其具体的含义

  • ⽹⻚标题：title

  • ⽹⻚内容标题：h1~h6

  • 段落：p

  • 强调：strong

  • 头部元素：header

  • 导航元素：nav

  • 主要内容：main

序号 名称 标签 描述
1 标题 <h1> - <h6> 通常⽤来划分或标注内容中的⽂本段落
2 ⻚眉 <header> ⼀般是由导航, logo 等元素组成
3 ⻚脚 <footer> ⼀般是由友情链接, 联系⽅式, 备案号,版权等信息组成
4 导航 <nav> 导航通常是由⼀个或多个链接标签<a>标签组成
5 主体 <main> 做为⻚⾯主要内容的容器使⽤,建议⼀个⻚⾯, 只出现⼀次
6 ⽂档 <article> 本义是⽂档, 实际上可以充当其它内容的容器
7 边栏 <aside> 与主体⽆关的信息,例如: ⼴告位, 相关推荐, 阅读排⾏等
8 ⽚断 <section> 与主体⽆关的信息,例如: ⼴告位, 相关推荐, 阅读排⾏等
9 区块 <div> 也叫通⽤容器,本身⽆任何语义, 功能主要是通过它的属性来描述
序号 名称 标签 描述
1 段落 <p> 段落内容⽂本
2 格式化 <pre> 按源代码格式原样输出
3 内联 <span> 与<div>类似,⽆语义, 主要⽤作内容的样式钩⼦
4 ⽇期时间 <time> 仅⽤来描述⽇期或时间的⽂本,没有预置样式
5 下标/上标 <sub>/<sup> 编写数字公式或⽂本特殊标记时会⽤到
6 地址 <address> 通常⽤在⻚脚<footer>中
7 删除线 <del> 替代之前的⽆语义标签<s>
8 代码块 <code> 通常与代码格式化插件配合,才能⾼亮关键字
9 进度条 <progress> 需要与 css, javascript 脚本配合
10 加粗 <strong> 替代之前⽆语义的标签<b>
11 斜体 <em> 替代之前⽆语义的标签<i>
12 ⾼亮标记 <mark> 默认为内容添加⻩⾊背景
13 引⽤ <q> 内容加双引号, 与<blockquote>标签同义

为什么需要语义化

  • 代码结构：在⻚⾯没有css的情况下，也能够呈现出很好的内容结构

  • 有利于SEO: 标签确定关键字的权重，因此可以增加搜索相关权重，使⽹站在搜索结果中排名靠前

# 阶核⼼标签

# a标签
跳转：<a href="xxx">链接⽂本</a>
锚点：<a href="#xxx"></a>
1
2

target属性

  • brank：打开新的浏览器标签
 <a href="https://www.baidu.com" target="brank">打开百度</a>
1
# 图像img标签

常⽤属性

  • src：图⽚路径

  • alt：图⽚加载失败或加载时显示的⽂字

  • title：悬浮在图⽚上⾯显示的⽂字

图⽚的来源

  • 本地图⽚：稳定

  • 线上图⽚：图⽚容易丢失

  • Base64图⽚

    • 优点：⼩图⽚占⽤内存⼩，不请求服务器，降低服务器资源与访问
    • 缺点：⼤图⽚增⼤了数据库服务器的压⼒

点击图⽚跳转：通过嵌套a标签

<a href="http://www.softbabet.com.cn/ynblog/"><img src="http://www.softbabet.com.cn/ynblog/themes/img/logo.png"></a>
1
# 表格table标签

在HTML中怎么表示

  • table：HTML 表格
  • tr：元素定义表格⾏
  • th：数据中的表头单元格
  • td：表示单元格

table元素⾥常⽤的属性

  • border(边框)
  • cellspacing(规定单元格之间的空⽩)
  • cellpadding(规定单元边沿与其内容之间的空⽩)
  • colspan(⽤于合并列)
  • rowspan(⽤于合并⾏)
# 列表ul、ol标签

有序列表

<ol>
  <li></li>
</ol>
1
2
3

⽆序列表

<ul>
 <li></li>
</ul>
1
2
3

定义列表

dl>
 <dt></dt>
 <dd></dd>
</dl>
1
2
3
4
# 表单form标签

使⽤场景需要提交⼀些信息到服务端的时候(前后端联调过程中)

  • 核⼼元素input (核⼼元素)
  • label (提⾼交互体验的)
  • select(下拉框)
  • textarea(⽂本域)
  • button(按钮)
  • form(表单元素，提交每个表单项内容)
# 区块标签和⾏内标签

div元素

  • div 元素是块级元素，它可⽤于组合其他 HTML 元素的容器。

  • div 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折⾏

  • 如果与 CSS ⼀同使⽤，div 元素可⽤于对⼤的内容块设置样式属性。

  • div 元素的另⼀个常⻅的⽤途是⽂档布局

span元素

  • span 元素是⾏内元素，可⽤作⽂本的容器

  • span 元素也没有特定的含义。

  • 当与 CSS ⼀同使⽤时，span 元素可⽤于为部分⽂本设置样式属性。

块级元素：块级元素在浏览器显示时，通常会以新⾏来开始（和结束）

<h1>, <p>, <ul>, <table>,<div>
1

⾏内元素：⾏内元素在显示时通常不会以新⾏开始

<b>, <td>, <a>, <img>,<span>
1

# css

选择器：告诉浏览器要设置样式的html元素

声明块：于设置样式

层叠样式表

Viewport：将⽹⻚的视⼝设置为完美视⼝，开发移动端⻚⾯时⼀定要加上

写法

  • 内部样式表：写在元素的style标签⾥⾯的

  • 内联样式表：写在styles属性⾥⾯的

  • 外部样式表：link标签将css资源引⼊

# 选择器

  1. 元素（标签）选择器:

    • 组合选择器: h1,p{color:red}

  2. 类选择器：

    • 结合标签选择器：h1.class-a{color:red;}
    • 多类选择器: class="clsa clasb"
    • 链接多个类选择器: .clsa .clsab {color:red; background-color:black}

  3. id选择器: #idx{}

  4. 通配符选择器*

  5. 派⽣选择器:

    • 后代选择器: h1 p{color:red;}
    • ⼦元素选择器: div>span{font-size:900}
    • 相邻选择器（兄弟）: h1+p{background-color:pink;}

  6. 特殊的选择器:

    • 伪类选择器: 不改变任何DOM内容。只是插⼊了⼀些修饰类的元素
:first-child {} //第⼀项
:last-child {} //最后⼀项
:nth-child(n) {} //第n项 :nth-child(2n+1){} //奇数项
:nth-child(2n) {} //偶数项
:not() //否定伪类 除了第n项 
a:link {color:#FF0000;} /*未访问的链接*/
a:visited {color:#00FF00;} /*已访问的链接*/
a:hover {color:#FF00FF;} /*⿏标悬浮后的链接*/
a:active {color:#0000FF;} /*已选中的链接*/
1
2
3
4
5
6
7
8
9
  • 伪元素选择器
::first-letter //第⼀个
::first-line //第⼀⾏ 只能⽤于块级元素
::selection //选中
::before //在开始位置
::after //在结束位置
1
2
3
4
5

# 盒⼦模型

内容(content)、内边距(padding)、边框(border)和外边距(margin)

盒子模型

从外到里: margin -> border -> padding

  • 盒⼦的内容(content): 元素的⼤⼩
  • 盒⼦的内边距(padding)
padding-left:10px //左边距10px
padding-top:10px //上边距10px
padding-right:10px //右边距10px
padding-bottom:10px //下边距10%，相对于⽗级元素的width

padding:10px 10px 10px 10% //等同于上⾯四⾏ 百分⽐是对应⽗标签的⼤⼩
padding:5px 10px //上下边距5px、左右边距10px
padding:5px 10px 20px //上边距 左右边距 下边距
padding:10px //上下左右边距10px
1
2
3
4
5
6
7
8
9
  • 盒⼦的边框(border)
border-left:3px solid #000 //左边距10px dotted dashed
border-top:3px solid #000 //上边距10px
border-right:3px solid #000 //右边距10px
border-bottom:3px solid #000 //下边距10%，相对于⽗级元素的width

border:3px solid #000 //等同于上⾯四⾏
1
2
3
4
5
6
  • 盒⼦的外边距(margin)
margin-left:10px //左边距10px
margin-top:10px //上边距10px
margin-right:10px //右边距10px
margin-bottom:10% //下边距10%，相对于⽗级元素的width

margin:10px 10px 10px 10% //等同于上⾯四⾏
margin:5px 10px //上下边距5px、左右边距10px
margin:10px //上下左右边距10px
1
2
3
4
5
6
7
8

盒⼦怪异模型

  • W3C标准的盒⼦模型（标准盒模型 ): boxWidth=contentWidth

  • IE标准的盒⼦模型（怪异盒模型）

box-sizing:border-box //声明
boxWidth=contentWidth+border+padding
1
2

外边距折叠

  • 上下两个兄弟盒⼦的margin都为正取大，都为负取小，⼀正⼀负相加

  • ⽗⼦元素盒⼦的margin（假设没有内边距或边框把外边距分隔开），也会合并；

只有普通⽂档流中块框的垂直外边距才会发⽣外边距合并。⾏内框、浮动框或绝对定位之间的外边距不会合并

解决⽗⼦边距合并：
⽗元素{ 
    overflow:auto; 
}

⽗元素::before{
 display: table;
 content: ""; 

}
1
2
3
4
5
6
7
8
9
10

# 常⽤属性

  • 尺⼨
宽度 width: ⻓度|百分⽐|auto
⾼度 height
边界 margin padding 上右下左|上下左右
1
2
3

布局

浮动：float
定位：position
弹性布局：flex
盒⼦内容超出部分：overflow：hidden | scroll | auto
1
2
3
4

外观，⻛格

background-image
background-repeat
background-size
background-position
background-color
1
2
3
4
5

⽂字属性

字体⼤⼩ font-size
是否加粗 font-weight
是不是斜体 font-style
字体是什么 font-family
1
2
3
4

层叠特性和选择器优先级

⼀个css属性被多次声明的时候，会根据优先级或者声明顺序来计算采⽤哪个样式

优先级是怎么计算

  • 通配符选择器 1： *
  • 标签选择器 2：div/span/p/li
  • 类选择器 3：class
  • id选择器 6：id
  • ⾏内样式 5
  • !important 6（尽量不要在公⽤代码⾥使⽤）

的可继承的属性: ⽂字属性，⽂本缩进、对⻬、⾏⾼

# 布局定位

布局前置知识

正常元素怎么布局

  • 默认，⼀个块级元素的内容宽度就是其⽗元素的100%，他的⾼度和其内容⾼度⼀致

  • ⾏内元素它的宽度和⾼度都是根据内容决定的(⽆法设置⾏内元素的宽⾼)

    • 可设置display属性，定义元素的类型(css3定义布局)

元素之间⼜是如何相互影响的呢

  • 正常的⽂档布局流
    • 每个块级元素会在上个元素下⾯另起⼀⾏
    • ⾏内元素不会另起⼀⾏
# float布局
float: none; //默认值，元素不浮动
float: left; //元素像左浮动
float: right; //元素像右浮动
1
2
3

特点

  • 浮动元素会脱离⽂档流，不再占据⽂档流空间
  • 浮动元素彼此之间是从左往右排列，宽度超过⼀⾏⾃动换⾏
  • 在浮动元素前⾯元素不浮动时，浮动元素⽆法上移
  • 块级元素和⾏内元素浮动之后都变成⾏内块级元素
  • 浮动元素不会盖住⽂字，可以设置⽂字环绕效果

清除浮动

clear:both;
content:'';
display:block;
1
2
3

# CSS新

  1. 通俗易懂的CSS布局display、position、float详解：https://www.cnblogs.com/wl-blog/p/13605894.html

  2. CSS::before和::after伪元素允许您在任何非替换元素之前和之后插入“内容”。

  3. 设置背景图片：background-image:url('paper.gif');

  4. 高级CSS 属性使用: https://blog.csdn.net/weixin_49592546/article/details/108408333

  5. border边框不同定义: 虚线边框（dashed，dotted），实线边框（solid）

举例： border: 2px solid #FFFFFF；

dashed是短竖线，而dotted边框是由点组成的

  1. 验证码按钮：
   button {
            color: #fff;
            width: 100px;
            height: 40px;
            border-radius: 20px;
            border: none;
            outline: none;
            position: absolute;
            top: 160px;
            left: 810px;
            background: linear-gradient(to right,#955afe, #2299ff);
        }
        
 /* <button>获取验证码</button> */
1
2
3
4
5
6
7
8
9
10
11
12
13
14

  1. css的伪类选择器 :is/where/not/has: https://z.yiwuku.com/a/20120.html

  2. 背景颜色渐变：https://blog.csdn.net/Mq_sir/article/details/121053167

  3. 背景图片渐变：

.div2 {
	box-sizing: border-box;
	width: 400px;
	height: 240px;
	font-size: 22px;
	padding-top: 100px;
	overflow: hidden;
	background: no-repeat center top / 100% 100%;
	background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/3.jpg)
}
1
2
3
4
5
6
7
8
9
10

  1. css实现背景模糊效果: https://blog.csdn.net/YoungMan_09/article/details/124001477 / https://www.f773.com/Style/Css/18901.html

  2. CSS绘制常见的40种形状和图形: https://blog.csdn.net/weixin_49075393/article/details/112244318

  3. 前端css工具: https://juejin.cn/post/7117432225385152525 / https://lhammer.cn/You-need-to-know-css/#/zh-cn/text-truncate / https://stylus-lang.com/

  4. 巧用CSS filter: https://juejin.cn/post/7002829486806794276

  5. https://juejin.cn/post/6982363593241002014

上次更新: 2024/07/10, 18:38:04
小兔鲜项目
Vue项目实战：逸刻博客管理平台

← Vue项目实战：逸刻博客管理平台→

Theme by Vdoing | Copyright © 2024-2024 VirtualAgent | Apache 2.0 License