[TOC]
一、HTML核心元素
html5元素周期表
https://www.xuanfengge.com/funny/html5/element/
文本元素
- h
h1~h6:表示一级标题到六级标题
- P
段落
Lorem 乱数假文,生成一行随机的字符。后面可以加参数数字表示生成字数
- span【无语义】
没有语义,只用来设置样式
span不会换行,因为它是块级元素,h和p是行级元素
但html5中以及舍弃了这种叫法。
- pre
预格式化文本元素(在pre元素中出现的空格不会进行空白折叠,一般用来进行有格式代码的显示)
空白折叠:在源代码中的连续空白字符(空格、制表、换行),在页面显示的时候会被折叠成一个空格。
- HTML实体
实体字符
通常在页面上显示一些特殊符号
- &单词;
- &#数字;
- 小于符号
< < - 大于符号
> - 空格
- &符号
&
图片元素
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元素
总结:
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定的子元素(u1>li, ol>li, dl>dt+dd)
- 标题元素和段落元素不能相互嵌套,并且不能包含容器元素
二、CSS样式
h1{
color: blue;
font-size: 126px;
text-align: center;
}
CSS规则=选择器+声明块
选择器
选择器:选中元素
- ID选择器:选中的是对应id值的元素(id是唯一值)
在声明块中需要使用
#+id名进行选择
#test{
color: blue;
}
- 元素选择器
直接使用元素选择
h1{ color: blue; }
- 类选择器(class可以不唯一)
使用类选择器的时候需要使用
.类名使用声明块
.red{
color: aquamarine;
}
声明块
出现在大括号中
声明块中包含很多声明(属性) ,每个声明(属性)表达了某方面的样式。
样式表
1.内部样式表
书写在sty1e元素中
2.内联样式表,元素样式表
直接书写在元素的sty1e属性中
3.外部样式表 [ 推荐]
将样式书写到独立的css文件中。
1).外部样式可以解决多页面样式重复的问题
2).有利于浏览器缓存,从而提高页面响应速度
3).有利于代码分离(HTML和CSS) ,更容易阅读和维护
常见样式声明
- 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
- background- color
元素背景颜色
- font-size
元素内部文字的尺寸大小
- px:
像素,绝对单位,简单的理解为文字的高度占多少个像素- em:相对单位,相对于父元素的字体大小
每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html)
则使用基准字号。user agent, UA, 用户代理(浏览器)
- font-weight
strong、em元素。默认加粗
文字粗细程度,可以取值数字,可以取值为预设值
- font -family
文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体,以匹配不同环境sans-serif,非衬线字体
- font-style
字体样式,通常用它设置斜体
i元素,em元素,默认样式,是倾斜字体;实际使用中,通常用它表示一个图标(icon)
- text- decoration
文本修饰,给文本加线。
a元素
del元素:错误的内容
s元素:过期的内容
<p>
你好我是<s>czm</s>
</p>
- text- indent
首行文本缩进
- line- height
每行文本的高度,该值越大,每行文本的距离越大。
设置行高为容器的高度,可以让单行文本垂直居中
行高可以设置为纯数字,表示相对于当前元素的字体大小
- width
宽度 - height
高度 - letter- space
文字间隙 - 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;
}
伪类选择器
选中某些元素的某种状态(按顺序去书写)
- link: 超链接未访问时的状态
- visited:超链接访问过后的状态
- hover:鼠标悬停状态
- 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;
}
选择器的组合
- 并且
- 后代元素- 空格
- 子元素 - >
- 相邻兄弟元素- +
- 兄弟元素- ~
<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,否则记0
- 百位:等于选择器中所有id选择器的数量
- 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位:等于选择器中所有元素选择器、伪元素选择器的数量
<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. 比较源次序
代码书写靠后的胜出
应用
重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表->浏览器的默认样式常见的重置样式表: normalize.css、reset.css、meyer.csslink > visited > hover > active
继承
子元素会继承父元素的某些CSS属性
通常,跟文字内容相关的属性都能被继承
属性值的计算过程
一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
!
渲染每个元素的前提条件,该元素的所有CSS属性必须有值,这个计算过程就叫属性值的计算程



被折叠的 条评论
为什么被折叠?



