HTML+CSS基础只是

[TOC]

一、HTML核心元素

html5元素周期表

https://www.xuanfengge.com/funny/html5/element/

文本元素

  1. h

h1~h6:表示一级标题到六级标题

  1. P

段落
Lorem 乱数假文,生成一行随机的字符。后面可以加参数数字表示生成字数

  1. span【无语义】

没有语义,只用来设置样式
span不会换行,因为它是块级元素,h和p是行级元素
但html5中以及舍弃了这种叫法。

  1. pre

预格式化文本元素(在pre元素中出现的空格不会进行空白折叠,一般用来进行有格式代码的显示)
空白折叠:在源代码中的连续空白字符(空格、制表、换行),在页面显示的时候会被折叠成一个空格。

  1. HTML实体

实体字符
通常在页面上显示一些特殊符号

  1. &单词;
  2. &#数字;
  • 小于符号
    < <
  • 大于符号
    >
  • 空格
     
  • &符号
    &

图片元素

img元素

src属性:source
alt属性:当图片资源失效时,将使用该属性的文字替代图片
target属性:在新窗口中打开

 <img src="https://www.baidu.com/img/pcindex_small.jpg" alt="图片错误"> 

和a元素连用

<a href="https://www.baidu.com" target="_blank">  <img src="https://www.baidu.com/img/pcindex_small.png" alt="图片错误">
       </a>

和map元素连用

map:地图
map的子元素:area(区域里可用)

 <a href="https://www.baidu.com" target="_blank">        
            <img usemap="#solarMap" src="https://www.baidu.com/img/pcindex_small.png" alt="图片错误">
        </a>
 <map name="solarMap">
    <area shape="circle" coords="109,71,25" href="https://qq.com" target="_blank">
 </map>

和figure元素(语义化元素)

指代、定义,通常把图片、图片标题、描述包裹起来
子元素:figcaption

多媒体元素

video视频
audio音频

video

controls:控制控件的显示,取值只能为controls
某些属性,只有两种状态: 1.不写 2.取值为属性名,这种属性叫做布尔属性

布尔属性,在HTML5中,可以不用书写属性值
autoplay:布尔属性,自动播放。
muted:布尔属性,静音播放。
loop:布尔属性,循环播放

   <video controls autoplay muted loop src="/testVedio.mp4" style="width: 1500px;"></video>

audio

  • 和video一致
 <audio src="/花海.mp3" controls autoplay loop></audio>

兼容性

1.旧版本的浏览器不支持这两个元素
2.不同的浏览器支持的音视频格式可能不一致
mp4、webm

<video controls autoplay muted loop style="width: 500px;">
       <source src="media/open.mp4" >
       <source src= " media/open.webm">
       <p>
       对不起,你的浏览器不支持video元素,请点击这里下载最新版本的
       </p>
</video>

列表元素

有序列表

ol: ordered list(有序列表元素)
li: list item(列表里的每一项)

   <ol type="A">
       <li>c</li>
       <li>z</li>
       <li>m</li>
    </ol>

无序列表

把ol改成ul
ul: unordered list

<ul type="A">
       <li>c</li>
       <li>z</li>
       <li>m</li> 
</ul>

无序列表常用于制作菜单或新闻列表。

定义列表

通常用于些术语的定义
dl: definition list
dt: definition title
dd: definition description

<dl>
    <dt> 姓名:</dt>
    <dd>czm</dd>
</dl>

容器元素

div元素

没有语义

语义化容器元素

header:通常用于表示页头,也可以用于表示文章的头部
footer:通常用于表示页脚,也可以用于表示文章的尾部
article:通常用于表示整篇文章
section:
通常用于表示文章的章节

元素包含关系

以前:块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外
元素的包含关系由元素的内容类别决定。
例如,查看h1元素中是否可以包含p元素

总结:

  1. 容器元素中可以包含任何元素
  2. a元素中几乎可以包含任何元素
  3. 某些元素有固定的子元素(u1>li, ol>li, dl>dt+dd)
  4. 标题元素和段落元素不能相互嵌套,并且不能包含容器元素

二、CSS样式

  h1{
            color: blue;
            font-size: 126px;
            text-align: center;
        }

CSS规则=选择器+声明块

选择器

选择器:选中元素

  1. ID选择器:选中的是对应id值的元素(id是唯一值)

在声明块中需要使用#+id名进行选择

 #test{
            color: blue;
        }
  1. 元素选择器

直接使用元素选择

h1{
     color: blue;
}
  1. 类选择器(class可以不唯一)

使用类选择器的时候需要使用.类名使用声明块

 .red{
            color: aquamarine;
        }

声明块

出现在大括号中
声明块中包含很多声明(属性) ,每个声明(属性)表达了某方面的样式。

样式表

1.内部样式表

书写在sty1e元素中

2.内联样式表,元素样式表

直接书写在元素的sty1e属性中

3.外部样式表 [ 推荐]

将样式书写到独立的css文件中。
1).外部样式可以解决多页面样式重复的问题
2).有利于浏览器缓存,从而提高页面响应速度
3).有利于代码分离(HTML和CSS) ,更容易阅读和维护

常见样式声明

  1. color
    元素内部的文字颜色

预设值:定义好的单词

三原色,色值 RGB:光学三原色(红、绿、蓝),每个颜色可以使用0- 255之间的数字来表达,色值。

color: rgb(0,255,0)

hex
(16进制)表示法:
红绿蓝

淘宝红: #ff4400, #f40
黑色: #000000, #000
白色: f#fffff, #fff
红: #ff0000,
#f00
绿: #00Off00, #Of0
蓝: #0000ff, #00f
紫: #fOf
青: #0ff
黄: #ff0
灰:#cc

  1. background- color

元素背景颜色

  1. font-size

元素内部文字的尺寸大小

  1. px:
    像素,绝对单位,简单的理解为文字的高度占多少个像素
  2. em:相对单位,相对于父元素的字体大小

每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html)
则使用基准字号。

user agent, UA, 用户代理(浏览器)

  1. font-weight

strong、em元素。默认加粗

文字粗细程度,可以取值数字,可以取值为预设值

  1. font -family

文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体,以匹配不同环境

sans-serif,非衬线字体

  1. font-style
    字体样式,通常用它设置斜体

i元素,em元素,默认样式,是倾斜字体;实际使用中,通常用它表示一个图标(icon)

  1. text- decoration
    文本修饰,给文本加线。

a元素
del元素:错误的内容
s元素:过期的内容

<p>
你好我是<s>czm</s>  
</p>
  1. text- indent

首行文本缩进

  1. line- height

每行文本的高度,该值越大,每行文本的距离越大。

设置行高为容器的高度,可以让单行文本垂直居中
行高可以设置为纯数字,表示相对于当前元素的字体大小

  1. width
    宽度
  2. height
    高度
  3. letter- space
    文字间隙
  4. text-align
    I
    元素内部文字的水平排列方式

选择器

选择器:帮助你精准的选中想要的元素

简单选择器

ID选择器

元素选择器

类选择器

通配符选择器

*,选中所有元素

*,{
  color: red;  
}

属性选择器

根据属性名和属性值选中元素

<body>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.sougou.com">搜狗</a>
    <a href="https://www.douyu.com">斗鱼</a>
  
</body>
/*选中所有具有href属性的元素 */
[href $="sougou.com"]{
    color: blue;
}
[href]{
    color: red;
}

伪类选择器

选中某些元素的某种状态(按顺序去书写)

  1. link: 超链接未访问时的状态
  1. visited:超链接访问过后的状态
  2. hover:鼠标悬停状态
  3. active:激活状态,鼠标按下状态
/* a:hover{
    color: yellow;
} */
a:active{
    color: #8c8c8c;
}

伪元素选择器

生成并选中某个元素内部的第一个子元素或最后一个子元素

<body>
    <p>我写的书<span>伟大</span></p>
  
</body>
span::before{
    content:"《";
    color: red;
}
span::after{
    content:"》";
    color: red;
}

选择器的组合

  1. 并且
  2. 后代元素- 空格
  3. 子元素 - >
  4. 相邻兄弟元素- +
  5. 兄弟元素- ~
 <div class="abc">
            <p>Lorem.</p>
            <p class="bcd">Sequi?</p>
            <p>Quasi.</p>
        </div>
        <div class="bcd">
            <p>Lorem.</p>
            <p class="bcd">Sequi?</p>
            <p>Quasi.</p>
        </div>
.abc .bcd{
    color: red;
}

选择器的并列

多个选择器,用逗号分隔
语法糖

层叠

声明冲突:同一个样式,多次应用到同一个元素

层叠:解决声明冲突的过程,浏览器自动处理(权重计算)

1. 比较重要性

重要性从高到底
作者样式表:开发者书写的样式

1)作者样式表中的!important样式(权重最高,尽量不用!important)

2)作者样式表中的普通样式

3)浏览器默认样式表中的样式

2. 比较特殊性

看选择器
总体规则: 选择器选中的范围越窄,越特殊
具体规则: 通过选择器,计算出一个4位数 (xxxx)

  1. 千位:如果是内联样式,记1,否则记0
  2. 百位:等于选择器中所有id选择器的数量
  3. 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
  4. 个位:等于选择器中所有元素选择器、伪元素选择器的数量
<style>
a{
color: red;
text-decoration: none;
font-style: italic;
}
#test{
    color:#ccc;
}
.selected{
color:#fff;
red;background-color:
}

</style>
<body>
  <a href="">Lorem.</a>
  <a href="" >Illo!</a>
  <a href="" id="test" class="selected" style="color: red;">Esse?</a>
  <a href="">Explicabo?</a>
  <a href="">Molestias.</a>
</body>

3. 比较源次序

代码书写靠后的胜出

应用

  1. 重置样式表
    书写一些作者样式,覆盖浏览器的默认样式
    重置样式表->浏览器的默认样式常见的重置样式表: normalize.css、reset.css、meyer.css

  2. link > visited > hover > active

继承

子元素会继承父元素的某些CSS属性
通常,跟文字内容相关的属性都能被继承

属性值的计算过程

一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
在这里插入图片描述
!
渲染每个元素的前提条件,该元素的所有CSS属性必须有值,这个计算过程就叫属性值的计算程

在这里插入图片描述
![

1.确定声明值: 参考样式表中没有冲突的声明,作为CSS属性值

2.层叠冲突: 对样式表有冲突的声明使用层叠规则,确定CSS属性值

3.使用继承:对仍然没有值的属性,若可以继承,则继承父元素的值

4.使用默认值:对仍然没有值的属性,使用默认值

特殊的两个CSS取值

  • inherit:手动(强制)继承,将父素的值取出应用到该元素
  • initial:初始值,将该属性设置为默认值

盒模型

box:盒子,每个元素在页面中都会生成一个矩形区域 (盒子)
盒子类型:

  1. 行盒,display等于inline的元素
  2. 块盒,display等于block的元素

行盒在页面中不换行、块盒独占一行

display默认值为inline
浏览器默认样式表设置的块盒: 容器元素、h1~h6、p
常见的行盒: span、a、img、video、audio

盒子的组成部分

无论是行盒、还是块盒,都由下面几个部分组成,从内到外分别是

  1. 内容content 、width、height,设置的是盒子内容的宽高
    内容部分通常叫做整个盒子的:内容盒 content-box

  2. 填充(内边距) padding盒子边框到盒子内容的距离
    padding-left.padding-right、padding-top、padding-bottom

    padding简写属性:padding:上右下左

    padding(1px,1px,1px,1px)
    

    填充区+内容区 : 填充盒padding-box

  3. 边框 border

    边框 =边框样式 + 边宽度 + 边颜色
    边框样式: border-style边框宽度: border-width边框颜色: border-color
    边框+填充区+内容区 :边框盒border-box

  4. 外边距 margin

    边框到其他盒子的距离 margin-top、margin-left、margin-right、margin-bottom
    速写属性margin

盒模型应用

改变宽高范围

默认情况下,width 和 height 设置的是内容盒宽高

页面重构师:将psd文件 (设计稿)制作为静态页面衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒

  1. 精确计算
  2. CSS3: box-sizing

改变背景覆盖范围

默认情况下,背景覆盖边框盒
可以通过background-clip进行修改

溢出处理

overflow,控制内容溢出边框盒后的处理方式

断词规则

word-break,会影响文字在什么位置被截断换行
norma1: 普通。CJK字符 (文字位置截断),非CJK字符 (单词位置截断
break-a11:截断所有。所有字符都在文字处截断
keep-a11: 保持所有。所有文字都在单词之间截断

空白处理

white-space: nowrap:对于溢出的字符进行省略号的填写。

行盒的盒模型

常见的行盒:包含具体内容的元素
span、strong、em、i、img、video、audio

显著特点

盒子沿着内容沿伸

行盒不能设置宽高

调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整

内边距(填充区)
水平方向有效,垂直方向仅会影响背景,不会实际占据空间

边框
水平方向有效,垂直方向不会实际占据空间。

外边距
水平方向有效,垂直方向不会实际占据空间。

行块盒

display: inline-block 的盒子

  1. 不独占一行
  2. 盒模型中所有尺寸都有效

空白折叠

空白折叠,发生在行盒 (行块盒)内部 或 行盒(行块盒)之间

可替换元素 和 非可替换元素

大部分元素,页面上显示的结果,取决于元素内容,称为非可替换元素

少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素
可替换元素: img、video、audio
绝大部分可替换元素均为行盒。

常规流

盒模型:规定单个盒子的规则

视觉格式化模型 (布局规则) :页面中的多个盒子排列规则

视觉格式化模型,大体上将页面中盒子的排列分为三种方式

  1. 常规流
  2. 浮动
  3. 定位

常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素,默认情况下,都属于常规流布局

总体规则: 块盒独占一行,行盒水平依次排列

包含块 (containing block) : 每个盒子都有它的包含块,包含块决定了盒子的排列区域

绝大部分情况下:盒子的包含块,为其父元素的内容盒

块盒

  1. 每个块盒的总宽度,必须刚好等于包含块的宽度
  2. 宽度的默认值是auto
  3. margin的取值也可以是auto,默认值o
  4. auto: 将剩余空间吸收掉
  5. width吸收能力强于margin
  6. 若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收在常规流中,块盒在其包含快中居中,可以定宽、然后左右margin设置为auto。

每个块盒垂直方向上的auto值

  1. height :auto, 适应内容的高度
  2. margin:auto, 表示0

百分比取值

  1. padding、宽、margin可以取值为百分比
  2. 以上的所有百分比相对于包含块的宽度

高度的百分比

  1. 包含块的高度是否取决于子元素的高度,设置百分比无效
  2. 包含块的高度不取决于子元素的高度,百分比相对于父元素高度

上下外边距的合并

  1. 两个常规流块盒,上下外边距相邻,会进行合并。
  2. 两个外边距取最大值。

浮动

应用场景

  1. 文字环绕
  2. 横向排列

浮动的基本特点

修改float属性值为

left: 左浮动,元素靠上靠左

right: 右浮动,元素靠上靠右

默认值为none

  1. 当一个元素浮动后,元素必定为块盒(更改display属性为block)
  2. 浮动元素的包含块,和常规流一样,为父元素的内容盒

盒子尺寸

  1. 宽度为auto时,适应内容宽度

  2. 高度为auto时,与常规流一致,适应内容的高度

  3. margin为auto,为0.3 .

  4. 边框、内边距、百分比设置与常规流一样4.

盒子排列

  1. 左浮动的盒子靠上靠左排列
  2. 右浮动的盒子考上靠右排列
  3. 浮动盒子在包含块中排列时,会避开常规流块盒
  4. 常规流块盒在排列时,无视浮动盒子
  5. 行盒在排列时会避开浮动盒子
  6. 外边距合并不会发生

**如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字 **

高度坍塌

  • 高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子
  • 清除浮动,涉及css属性: clear
  • 默认值: none
  • left:清除左浮动该元素必须出现在前面所有左浮动盒子的下方
  • right:清除右浮动该元素必须出现在前面所有右浮动盒子的下方该元素必须出现在前面所有浮动盒子的下方
  • both:清除左右浮动,
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值