自己的学习内容

css3 --2023.05.09 完结
html5 --2023.04.24 完结
html、css --2023.04.21 完结
html、html5、css、css3 --2023.03.23 开始

元素标签

1.标签不必在意显示效果,注重标签含义
2.块级元素独占一行,可内嵌块级元素、行内元素,<p>、<h1>~<h6>、<dt>之间不相互嵌套
3.行内元素占显示内容的大小,可内嵌行内元素

文本常用标签

1.em 强调
2.strong 强调
3.span 无预设显示效果
4.作品
5.同上
6.中间划线/底部划线
7.alert(1)
8.识别内容
9.键盘
10.缩写
11.你是爱心的欢喜( ltr / rtl )
12.变量 let a = 1
13.法律细则
14.产品评论
15.用于字体图标、人物说的话
16.用于标错
17.引用

18.块引用,独占一块

19.地址,独占一块

绝对路径补充

本地绝对路径
网络绝对路径

图片格式介绍

jpg jpeg 损失细节存储,不支持动态图、透明背景
png 无损压缩,不支持动态图
bmp 不进行压缩,保存更多细节,不支持动态图、透明背景 == png+
gif 显示动态图,显示颜色有限
webp 显示网页图片,支持动态图,兼容性不足
base64 显示网页图片,图片本身以编码形式显示

超链接

——属性值

target

_self: 在本标签进行跳转
_blank: 在新标签进行跳转

download

填写下载名或不填

——浏览器支持的文件

jpg gif mp4 pdf
zip 不可以直接打开

——锚点

跳转:href="#(锚点名字)"
回到顶部:href="#"
刷新页面:href=""
命名_1:name="(锚点名字)"
命名_2:id="(锚点名字)" 推荐

——唤醒应用

打电话:href="tel:电话号码"
发邮件:href="mailto:邮件名"
发短信:href="sms:收件人"

列表

注意事项

1. li不建议单独使用
2. 列表ol、ul、li等等可嵌套其他块内元素、行内元素

类型

1. ul li 无序列表
2. ol li 有序序列表
3. dl dt dd 自定义列表dt 为列表头 dd为列表内容

表格

内容

1. table表格 支持属性：border width height cellspacing
2. caption表格标题 支持属性：无
3. thead表格头部 支持属性：height align valign
4. tbody表格主体 支持属性：height align valign
5. tfoot表格脚注 支持属性：height align valign
6. td表格脚注 支持属性：width height align valign rowspan colspan
7. th表格脚注 支持属性：width height align valign rowspan colspan

注意
1.td、th的设置会导致整行或整列的宽高改变

常用小标签

1. br 换行
2. hr 分割,若实现修饰线,后期用css
3. pre 按原代码显示

表单

form 属性
1.action: 填入提交地址
2.target: 新页签的打开方式
3.method: 控制提交方式
4.disable: 用在 input textarea select option 上禁用标签
5.fieldset legend: 创造信息领域,外部出现边框,legend为标题
特别地,使用input输入框需要填入name属性,指定提交数据的名称

iframe框架

属性
1.src 链接地址,单独展示使用
2.width 宽度
3.height 长度
4.frameborder 边框,可选值 0 1
5.name 边框名,配合target使用

字符实体

1.空格 &nbps ;

2.小于 <

3.大于 >

4.和 &

5.引号 "

6.反引号 ´

7.分 ¢

8.镑 £

9.元 ¥

10.欧元 €

11.版权 ©

12.注册商标 ®

13.商标 ™

14.乘号 ×

15.除号 ÷

更多的字符实体参看：
https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

全局属性

1.id 运用在body里,且非<title>标签上
2.class 主要使用在<div>标签上,接收css样式
3.style 主要使用在<div>标签上,编写css样式
4.dir 运用在body里,且非<title>标签上,使用ltr、rtl调整内容的位置
5.title 主要使用在<div>标签上,使用ltr、rtl调整内容的位置
6.lang 主要使用在<div>标签上,标注内容的语言

meta

meta: robot 属性值

1.index 允许搜索爬虫索引

2.noindex 不允许搜索爬虫索引

3.follow 允许搜索爬虫索引,且跟随页面上的链接

4.nofollow 允许搜索爬虫索引,但不跟随页面上的链接

5.all 允许索引与跟随

6.none 不允许索引与跟随

7.noarchive 不缓存页面内容

8.nocache 不缓存页面内容

---

CSS 层叠样式表

标记语言,用于给HTML设置样式

1.行内样式（内联样式）:使用在html标签内,由style属性引出

2.内部样式:推荐使用在head标签内,由标签名引出

3.外部样式:推荐使用,样式写在文件中,由标签引用(写在head里)

样式表优先级

行内元素>内部样式=外部样式

基础

1.通配选择器* 选中所有html元素

2.元素选择器元素标签名 选中某种元素

3.类选择器.类名 根据class的名称,来选中对应元素

对于标签来说,要使用多个类名对应的CSS样式,书写如下：

CSS3的内容 Start

4.id选择器.id名 根据id的名称,来选中对应元素,其余内容同class

5.交集选择器(标签名.类名)|(.类名1.类名2) 标签名只能有一个,类名可有多个

6.并集选择器(标签名 , .类名)|(.类名1 , .类名2) 可用标签名、ID名、类名,无数量限制

7.后代选择器(标签名 后代标签名) 可以使用标签名、ID名、类名,且任意组合,下级标签无数量限制

8.子代选择器(标签名 > 下一级标签名) 可以使用标签名、ID名、类名,且任意组合

9.兄弟选择器[相邻兄弟](标签名 + 标签名)//[通用兄弟](标签名 ~ 标签名) 下一个紧邻的选择器//下面所有的选择器

10.属性选择器(title title= title^= title$= title *=)详见3_css_property.html

11.伪类选择器,内容较多,详见 4_css_pseudo_class portfolio

12.选择器优先级,!important>行内样式>ID选择器>类选择器>元素选择器>通配选择器>继承样式

对于复合的css样式,根据权重确定显示哪种样式 (x,y,z)<=>(ID选择器,类、伪类、属性选择器,元素、伪元素选择器) 样式权重高,则优先显示；权重相同,后者覆盖

CSS3的内容 End

css三大特性

<p>1.层叠性,样式发生冲突(同样的名称,被设置不同的值),会根据一定的规则进行覆盖</p>
<p>2.继承性,元素会自动拥有其父元素、其祖先元素上设置的某些样式,优先获得近处的样式</p>
<p>3.优先性,优先级与权重</p>

颜色

<p>1.像素,精细表达网页内容的单位名称</p>  
<p>2.表达方式</p>  
<p>----(1)官方指定名称_mdn_named_color</p>    
<p>----(2)rgb与<code>rgba(css3)</code>,rgb调整红绿蓝三种光色,a调整透明性[1不透明、0完全透明]</p>    
<p>----(3)hex与hexa,hex调整红绿蓝三种光色,#0bc3e6 每两位代表一种颜色(十六进制),末尾再添加两位代表透明度</p>    
<p>----(4)<code>hsl(css3)</code>与<code>hsla(css3)</code>,hsl代表色相度,饱和度,亮度,hsl(x,y,z) 色相盘、百分比、百分比组成,<u style="color:red">很少使用</u></p>    
<p>----(5)Ui设计师提供的设计稿</p>

字体

<p>1.字体大小,font-size,最小字体与默认字体由浏览器的设置决定</p>
<p>2.字体族,font-family,书写正确的字体名称,可以用逗号隔开多个字体,结尾使用serif||sans-serif(衬线字体||非衬线字体),且不需要加引号</p>
<p>3.字体风格,font-style,主要有normal(默认)、italic(斜体,判别字体斜体是否存在)、oblique(斜体,强制斜体)</p>
<p>4.字体粗细,font-weight,主要有lighter、normal、bold、bolder(少见),可以用数字表示100-400(lighter)、500-600(normal)、700-1000(bold)</p>
<p>5.复合写法,font,(粗细)、(斜体)、大小、字体族</p>

文本

<p>1.文本颜色,名称、rgb、hex:#xxxxxx、hsl</p>
<p>2.文本间距,letter-spacing|word-spacing,单位px,负值缩小间距</p>
<p>3.文本修饰,text-decoration,可选值 underline、overline、none、line-through,可选线 wavy dotted,且线颜色可以自定义</p>
<p>4.文本缩进,text-indent,一个字体大小值为一个缩进单位 </p>
<p>5.文本对齐,text-align,可选值left(默认)、center、right </p>
<p>6.字体详谈,设置字体大小,因字体设计原因,最终呈现的大小可能与实际大小有偏差;字体出现的位置总是偏下一些 </p>
<p>7.文本行高,line-height,可选值px、normal、数值、百分比,设置时要尽量使行高大于字体大小 </p>
<p>8.行高注意事项: </p>
<p>----(1)行高最小值为0,超过该值则设置为normal</p>
<p>----(2)可以继承到后代元素身上,在父类元素身上使用数值写法最佳</p>
<p>----(3)line-height与height的关系,设置了height,则高度为height;没有设置height,则高度为line-height</p>
<p>9.应用场景: </p>
<p>----(1)多行文字控制行间距</p>
<p>----(2)单行文字设置相对垂直居中,由height=line-height实现</p>
<p>10.文本垂直对齐 <u>(对于单行文字)</u> :顶部无需调整,居中设置height=line-height,底部设置居中设置<code>height=line-height*2-(font-size)-动态调整值</code> </p>
<p>11.垂直属性 vertical-align,常用设定值 top middle baseline bottom,middle指的是与父元素上x字母(假设字母)的中心对齐</p>
</blockquote>

css列表属性

属性名	属性描述	属性值
list-style-type	设置列表符号	none(常用) square disc(圆形) decimal(数字) alpha roman
list-style-position	设置标签位置	inside outside(标签在内容外面)
list-style-image	自定义标签	url("图片位置")
list-style	复合语句	type position image

table表格属性

属性名	属性描述	属性值
border-width	设置边框宽度	像素值
border-color	设置边框颜色	颜色值 rgb hex hsl
border-style	设置边框样式	none dashed solid(实线) dotted(点线) double(双实线)
border	复合语句	width color style
table-layout	控制表格列宽	fix(固定) auto
border-style	设置边框样式	none dashed solid(实线) dotted(点线) double(双实线)
border-spacing	控制单元格间距	单位px , 使用时不能合并单元格
border-collapse	合并相邻单元格	separate collapse
empty-cells	消除空单元格	show hide 使用时不能合并单元格,同时设置有单元格间距
caption-side	设置表格表题位置	top hide
border以上的元素(包括border)在其它元素中也可以使用

background背景属性

属性名	属性描述	属性值
background-color	设置背景颜色	默认为 transparent(透明色)
background-image	设置背景图片	url("图片位置")
background-repeat	设置背景图片重复方式	repeat no-repeat repeat-x repeat-y
background-position	设置背景图片的位置	水平与垂直两个参数 默认值为center 垂直方向上居中位置为center 可以用像素点表达
background	复合表达	color image repeat position

cursor鼠标属性

cursor 设置光标样式 pointer(常用)

自定义光标 设置方式: url("光标样式"),pointer

常用长度单位属性

单位名称	单位描述	备注
px	像素单位	无
em	大小单位	元素大小 = em值 * 字体大小(默认为浏览器的值或父元素的值)
rem	大小单位	元素大小 = rem值 * 字体大小(从html元素上开始寻找字体值,直到当前元素)
%	百分比	从祖先元素身上寻找值,最终将 值*百分比 给予属性

显示模式

模式名称	模式描述	备注
block	块级元素	独占一行 宽度撑满父元素 高度由元素大小决定 可以通过css设置宽高
inline	行内元素(内联元素)	宽度、高度由内容撑开 无法通过css设置宽高
inline-block	行内块单位(内联块元素)	内容与行内元素一致 可以通过css设置宽高

显示模式总结

<blockquote style="background:rgba(139,218,139,0.21)">
<h3>块元素</h3>
<p>1.主体结构标签:<html> <body></p>
<p>2.排版标签:<h1>~<h6> <hr> <p> <pre> <div></p>
<p>3.列表标签:<ul> <ol> <li> <dl> <dt> <dd&<g></g>t;</p>
<p>4.表格标签:<table> <thead> <tbody> <tfoot> <tr> <caption&<g></g>t;</p>
<p>5.其他:<form> <option></p>
<h3>行内元素</h3>
<p>1.文本标签:<br> <body></p>
<p>2.其他:<a> <label></p>
<h3>行内块元素</h3>
<p>1.图片:<img></p>
<p>2.单元格:<th> <td></p>
<p>3.表单控件:<input> <textarea> <select> <button></p>
<p>4.框架标签:<iframe></p>
<h3>display属性</h3>
<p>支持类型为 block inline-block inline none</p>
</blockquote>

盒子模型

组成名称	组成描述	备注
content	内容区	放入元素内容
padding	内边距	紧贴内容的补白区
border	边框	盒子的边距
margin	外边距	盒子和外界的距离

1.盒子的大小 = 内容区 + (padding + border) * 2

2.margin只影响盒子的位置

3.背景色会产生在内容区、内边距、边框上,而边框的颜色会覆盖在背景色上

盒子内容

组成名称	组成描述	备注
width	宽度	min-width max-width 二者不与width一起使用
height	高度	min-height max-height 二者不与height一起使用
默认宽度	宽度	不设置宽度,盒子宽度 = 父容器宽度 - margin*2; 内容区宽度 = 盒子宽度 - (padding + border) * 2
padding详述	内边距	有四种属性 padding-left padding-top padding-right padding-bottom 四种设置方式 padding:x(设置四个方向) padding:x y(设置上下、左右) padding:x y z(设置上、左右、下) padding:x y z e(上右、下左)
border border-left border-top border-right border-bottom	边框类型	有三种属性 width color style 也可以单独设置,例如 border-left-color
margin详述	外边框	有四个属性: margin-left margin-top margin-right margin-bottom 注意事项: 1.子元素的margin参考父元素的content进行计算 2.margin的设置值是为边框之外产生空白区域 3.块级元素、行内块元素支持四个方向的margin,行内元素仅支持左右方向的margin 4.margin的值可以设置为auto,若左右方向为auto,则元素居中 5.margin值可以为负
margin塌陷问题	父元素、子元素	首个子元素设置margin-top值或末尾子元素设置margin-bottom值,导致margin值赋予父元素 解决方法: 1.父元素设置padding值 2.父元素设置border值 3.父元素设置css样式,overflow:hidden
margin合并问题	子元素、子元素	子元素之间相对的margin值进行设置,导致呈现的值为最大的margin值 解决方法:只为一个元素设置一个margin值即可
内容溢出问题	内容超过内容区的限定范围	使用 overflow ,可选值 hidden auto visible scroll overflow-x overflow-y 仍在实验中,不推荐使用
隐藏元素的方式	两种方式	display:none 消除元素并清理占位、visibility:hidden(show) 消除元素但不清理占位
行内元素、行内块元素之间的空白问题	元素之间的空格会被设置为一个空白字符	设置父元素的font-size:0;将元素放在同一行(不推荐)
行内块元素的幽灵空白问题	行内块元素秉持基线对齐属性	设置行内块元素vertical-align不为baseline即可;display(不推荐)、父元素font-size方式(不推荐)

1.padding 不能为负值

2.行内元素 不要设置上下边距,会引发显示冲突

3.块级、行内块元素 四个方向可以顺利设置

4.样式继承,继承文字样式,不继承盒子模型样式

5.布局技巧:

(1)行内元素、行内块元素可以在父元素中使用文本属性处理

(2)子元素水平居中,块元素使用margin:0 auto;行内块元素、行内元素使用text-align:center

(3)子元素垂直居中
----块元素使用margin-top:(父元素content-子元素盒子高度)/2 px;
----行内块元素、行内元素,父元素设置line-height:(height)px,每个子元素加上vertical-align:middle
----若想实现绝对垂直居中,父元素设置font-size:0px;

浮动(float)

简介:起初用于文字环绕图片,现在是主流的页面布局方式

特点:

1.脱离文档流

2.浮动后宽高由内容撑开,可以设置

3.不会独占一行,且可以与其他元素共用一行

4.不出现margin合并与塌陷问题

5.不会被当作文本处理,即不出现行内空白问题

浮动后的影响:

1.对兄弟元素来说,会占据后面元素的位置且内容环绕在浮动元素的旁边;之前的兄弟元素不受到影响

2.对父亲元素来说,父亲元素的高度无法撑开,但宽度可以束缚浮动元素

浮动解决方案

序号	内容	缺陷
1	父元素增加高度	局限性大
2	父元素浮动	文字环绕,后续元素被覆盖
3	父元素增加溢出隐藏	后续元素消失
4	新增一个子元素且设置clear:both	编程不优
5	父元素设置伪元素::after{内容为空;块元素;clear:both}	最优

推荐,子元素全浮动或全不浮动

浮动练习结果见chapter4下的5_flex

定位(direction)

相对定位

设置:position:relative

四个属性 left top right bottom

参考点:元素最初出现的位置

特点:

1.不脱离文档流

2.显示层级比普通元素高

3.相对位置不能一起设置

4.可以进行浮动、设置外边距(不推荐)

绝对定位

设置:position:absolute

四个属性 left top right bottom

参考点:包含块的位置,未设置则使用页面的左上角;设置父元素position:relative,则以父元素的左上角为初始点

特点:

1.脱离文档流

2.相对位置不能一起设置

3.绝对定位与浮动不能同时开启,若开启浮动,则浮动无效

4.设置该属性会使元素成为定位元素,内容撑开宽高,且可自由设定

5.能够通过margin调整位置(不推荐)

固定定位

设置:position:fixed

四个属性 left top right bottom

参考点:页面窗口(视口)初始位置

特点:

1.脱离文档流,对后面的兄弟元素、父元素有影响

2.相对位置不能一起设置

3.固定定位与浮动不能同时开启,若开启浮动,则浮动无效

4.设置该属性会使元素成为定位元素,内容撑开宽高,且可自由设定

5.能够通过margin调整位置(不推荐)

粘性定位

设置:position:sticky

四个属性 left top right bottom

参考点:参看最近父元素滚动条,伴随拖动进行粘性移动

特点:

1.不脱离文档流

2.常用top值 = 0

3.未发生粘性移动前,与相对定位相同;发生移动后,与固定定位相同

4.固定定位与浮动可以同时开启(不推荐)

5.能够通过margin调整位置(不推荐)

定位层级

1.定位元素显示层级比普通元素高

2.定位元素位置发生重叠,优先显示前面的元素

3.css可设置显示层级 z-index: (integer),普通元素设置无效,若失效,请检查父元素css属性

定位居中方式	方法	图片
1.铺满父元素宽高(未知宽度)	left,top,right,bottom 设置为0
2.铺满父元素宽高(已知宽度)	left,top,right,bottom 设置为0,margin:auto

(1)对于2,切记需要将父元素进行相对定位,而子元素要进行绝对定位

(2)对于2,存在方法二,可以进行实现,但方法不推荐,具体参看该章节的第4个html文件

(3)子元素需要设置宽高

布局

版心:固定宽度且水平居中的盒子,用于显示页面内容,高度由内容撑开

1.常用布局名词

位置	名称
顶部导航	topbar
页头	head,page-header
导航	nav,navigator,navbar
搜索框	search,search-box
横幅、广告、宣传图	banner
主要内容	content,main
侧边栏	aside,sidebar
页脚	footer,page-footer

2.重置默认样式

方法	操作流程	说明
使用全局选择器	*{ margin:0;padding:0; }	适用于简单布局,做练习
reset.css	选择具体的元素,清空其默认样式	需要自己设置.css样式,样式重置上较为强烈
normalise.css	最新的标准化重置方案	样式重置温和,保留部分有价值的默认样式,新增html5的设置,慎重使用了并集选择器

---