前端基础学习（一）

最新推荐文章于 2024-08-09 10:42:44 发布

三笠·阿卡曼

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量416

点赞数

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

本文链接：https://blog.csdn.net/cjl_xupt/article/details/121718161

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基础标签学习

img

<p>
    <img src="images/gugong.jpg" alt="故宫角楼" width="300">
  </p>

alt: 如果图片裂开了可以添加一个图片提示之类的东西；

网页支持的图片格式

格式	说明
.bmp	Windows画图软件默认保存的格式，位图
.gif	支持动画（比如表情包）
.jpeg	有损压缩图片，用于照片
.png	便携式网络图像，用于logo、背景图形等，支持透明和半透明
.svg	矢量图片
.webp	最新的压缩算法，非常优秀的图片格式

大纲标签

曾几何时div标签是文档区块分割的唯一手段，为了区分每个div的功能，会借助div的class属性；

HTML5区块标签

区块标签	说明
section	文档的区域，语义比div大
article	文档的核心内容区域，会被搜索引擎主要抓取
aside	文档的非必要相关内容，比如广告等
nav	导航条
header	页头
main	网页核心区域
footer	页脚

H5新增的input种类

type属性值	空间
color	颜色选取控件
data、time	日期、时间选择控件
email	电子邮件输入控件
file	文件选择控件
number	数字输入控件
range	拖拽条
search	搜索框
url	网址输入控件

datalist空间

在这里插入图片描述

表格标签

看好行tr，列td即可，一行就是一个tr，每个单元格就是一个td

CSS学习

CSS3简介

CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言；
而CSS3是CSS的最新版本，增加了大量的样式、动画、3D特效和移动端特性等；

CSS的本质

CSS就是样式的清单，要书写合适的选择器，然后把指定的元素"一条一条罗列"出来；

.spec  {
	color: green;
	font-weight: bold;
	font-style: italic;
}

CSS3的书写位置

内嵌式

内嵌在.html文件中；
在< head>< /head>标签对中，书写style标签对，里面书写css语句；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1{
      color: red;
    }
  </style>
</head>
<body>
  <h1>我是一个主标题</h1>
</body>
</html>

外链式

可以将css单独存为.css文件，然后使用 link 标签引入

<link rel="stylesheet" href="css/cssEg.css">

多个html网页，可以共用一个css样式表文件；

导入式

最不常见的样式表导入方法：

<style>
@import url(css文件路径)
</style>

行内式

样式可以直接通过style属性写在标签身上

<h2 style="color: red;">我是一个二级标题</h2>

行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用；

CSS的选择器

CSS2.1选择器

标签选择器和id选择器

标签选择器也称为元素选择器、类型选择器，它直接使用元素的标签名当作选择器，将选择页面上所有该种标签

span {
	color: red;
}
b {
	color: green;
}

标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅；
标签选择器覆盖面非常大，所以通常用于标签的初始化;

ul {
	list-style: none; //去除无序列表的小圆点
}
a {
	text-decoration: none; //去掉超级链接的下划线
}

id选择器

标签可以有id属性，是这个标签的唯一标识;
css选择器可以使用#前缀，选择指定id的标签；

<p id="para1">我是一个段落</p>

#para1 {
	color: red;
}

class选择器

class属性表示"类名"

<p class="warning">我是段落</p>

类名的命名规范和id的命名规范相同;
使用.前缀选择指定的class标签；

.warning {
	color: red;
}

原子类

在做网页项目前，可以将所有常用的字号、文字颜色、行高、外边距、内边距设置为单独的类;

复合选择器

选择器名称	示例	示例的意义
后代选择器	.box .spec	选择类名为box的标签内部的类名为spec的标签
交集选择器	li .spec	选择既是li标签，也属于spec类的标签
并集选择器	ul ol	选择所有ul和ol的标签

伪类

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态,超级链接拥有四个特殊状态；

伪类	意义
a:link	没有被访问的超级链接
a:visited	已经被访问过的超级链接
a:hover	正在被鼠标悬停的超级链接
a:active	正在被激活的超级链接（按下按键但是还没有松开按键）

伪类的爱恨准则(LOVE HATE)：a标签的伪类书写，要按照爱恨准则的顺序，否则也会有伪类不生效;

CSS3新增选择器

元素关系选择器

名称	示例	意义
子选择器	div>p	div的字标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p元素之后的所有同级span元素

子选择器：当使用>分割两个元素的时候，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系

.box>p {
	xxx
}

相邻兄弟选择器：相邻兄弟选择器+介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中;
- 说白了，a+b就是选择“紧跟着a后面的第一个b”

img+span {
	color: green;
}

通用兄弟选择器：通用兄弟选择器~, a~b选择a元素之后所有同层级b元素;

序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第三个子元素
:nth-of-type(3)	选择同种标签下指定序号的子元素（3）
:nth-last-child(3)	倒数第三个子元素
:nth-last-of-type(3)	倒数第3个某类型子元素

:first-child: :first-child表示选择第一个元素，比如：

.box1 p:first-child {
	color: red;
}

last-child同理；

:nth-child(3)可以选择任意序号的子元素

	.box2 p:nth-child(3) {
		color: green;
	}

属性选择器

举例	意义
img[alt]	选择带有alt属性的img标签
img[alt = ‘故宫’]	选择alt属性是故宫的img标签
img[alt^=‘北京’]	选择alt属性以北京开头的标签
img[alt$=‘夜景’]	选择alt属性以夜景结尾的img标签
img[alt* = ‘美’]	选择alt属性中含有美字的img标签
img[alt~=‘手机拍摄’]	选择alt属性中有空格隔开的手机拍摄字样的img标签
img[alt\| = ‘参赛作品’ ]	选择alt属性中以“参赛作品-”开头的img标签

css3新增伪类

伪类	意义
:empty	选择空标签
:focus	选择当前获得焦点的表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已经勾选的单选按钮或者复选框
:root	选择根标签，即html标签

伪元素

CSS3新增了“伪元素”的特性，表示虚拟动态创建的元素；
伪元素用双冒号表示，IE8可以兼容单冒号；
::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容；

a::before {
	content: "★"
}

::after 创建一个伪元素，其将成为匹配选中的元素最后一个子元素，必须设置content属性表示其中的内容;
::selection CSS伪元素应用于文档中高亮的部分（使用鼠标圈选的部分）;
::first-letter会选中某元素中（必须是块级元素）第一行的字母；
::first-line会选中某元素中（必须是块级元素）第一行全部文字；

层叠性和选择器权重计算

层叠性

层叠性：多个选择器可以同时终于同一个标签，效果叠加；
冲突处理
- id
- id个数 > class个数 > 标签个数
!important提升权重：
如果需要将某个选择器的某条属性提升权重，可以在属性后面写!important

.spec {
	color: blue !important
}

CSS属性

常用文本样式属性

color属性可设置文本内容的前景色：一般使用十六进制表示法；
font-size属性，设置字号，单位为px；em、rem单位；
font-weight属性，设置字体的粗细程度，通常就用normal和bold两个值；

举例	意义
font-weight: normal;	正常粗细，与400等值
font-weight: bold;	加粗，与700等值
font-weight: lighter;	更细，大多数中文字体不支持
font-weight: bolder;	更粗，大多数中文字体不支持

font-style属性设置字体的倾斜：

举例	意义
font-style: normal;	取消倾斜，比如把天生倾斜的i、em标签设置为不倾斜
font-weight: italic;	设置为倾斜字体
font-weight: oblique;	设置为倾斜字体（用常规字体模拟，不常用）

text-decoration属性：用于设置文本的修饰线外观的（下划线、删除线）

举例	意义
text-decoration: none;	取消修饰线
text-decoration: underline;	下划线
text-decoration: line-through;	删除线

font-family属性：用于设置字体

font-family:"微软雅黑"

段落和行相关属性

text-indent属性：定义首行文本内容之前的缩进量, 缩进两个字符应该写作：

text-indent: 2em;

line-height属性用于定义行高
- line-height属性的单位可以是以px为单位的数值
```
line-height: 30px;
```
- line-height属性也可以是没有单位的数值（推荐写法），表示字号的倍数
```
line-height: 1.5;
```
单行文本垂直居中：设置行高==盒子高度，即可实现单行文本垂直居中；
text-align属性：text-align: center; 即可实现文本水平居中;
font合写属性: 作为font-style、font-weight、font-size、line-height和font-family属性的合写

font: 20px/1.5 Arial, "微软雅黑";

继承性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效；

字体属性详解

段落和行相关属性

继承性

三笠·阿卡曼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础学习（一）

基础标签学习img<p> <img src="images/gugong.jpg" alt="故宫角楼" width="300"> </p>alt: 如果图片裂开了可以添加一个图片提示之类的东西；网页支持的图片格式格式说明.bmpWindows画图软件默认保存的格式，位图.gif支持动画（比如表情包）.jpeg有损压缩图片，用于照片.png便携式网络图像，用于logo、背景图形等，支持透明和半透明
复制链接

扫一扫

专栏目录