HTML+CSS基础
HTML与CSS介绍
每一个网页是一个.html文件,一个网站是由若干.html文件。
- HTML:超文本标记语言,它用标记标签来描述网页
- CSS:层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
- JavaScript:与用户的交互行为
HTML基础
基础知识
- 标签的属性:修饰标签,设置标签的功能
<标签 属性1="值1" 属性2="值2">
- 注释:
<!-- 注释内容 -->
,VScode中快捷键:Ctrl + /;shift + Alt + a - HTML的初始代码:每一个HTML文件都要有的代码,VScode中快捷键为!+Tab键
<!DOCTYPE html> <!--文档声明:HTML文件-->
<html lang="en"> <!--HTML的最外层标签,en表示英文网站,zh-CN表示中文网站-->
<head>
<meta charset="UTF-8"> <!--元信息:辅助信息,使网页不乱码-->
<title>Document</title> <!--网页标题-->
</head>
<body>
<!--网页内容-->
</body>
</html>
- HTML语义化:根据网页结构选择合适的标签
常用标签
标题与段落
<h1></h1>~<h6></h6> <!--标题标签,h1标题在一个.html中只能出现一次-->
<p></p> <!--段落标签-->
<div></div> <!--区域划分块-->
<span></span> <!--修饰文字,内联-->
文本修饰标签
<strong></strong>,<b></b> <!--加粗-->
<em></em>,<i></i> <!--斜体-->
<sub></sub> <!--下标-->
<sup></sup> <!--上标-->
<del></del> <!--删除文本,加删除线-->
<ins></ins>,<u></u> <!--插入文本,加下划线-->
图片标签及属性
<img src="" alt="" title="" width="" height="">
<!--src:图片地址
alt:图片加载失败时的提示信息
title:鼠标移过去时的提示信息
width、height:图片大小
-->
路径与特殊字符
- 相对路径与绝对路径
相对路径会有一个参照文件:相对所处文件(参照文件)的地址访问其他文件;绝对路径要完整地写出文件的地址 - 特殊字符
<!--空格-->
< <!--小于号-->
> <!--大于号-->
跳转链接与跳转锚点
- 跳转链接
<a href="网址">标题</a> <!--超链接(当前页面跳转)-->
<a href="网址" target="_blank">标题</a> <!--超链接(新页面跳转)-->
<base target="_blank"> <!--写在head中,可以改变链接的默认行为-->
- 跳转锚点
<a herf="#名称"></a>
<p id="名称"></p>或<a name="名称"></a>
列表标签
列表可以嵌套(定义列表也可以)
<ul type="">
<li>列表的行</li>
</ul> <!--无序列表-->
<!--type的值 disc:实心圆(默认);circle:空心圆;square:实心方块-->
<ol>
<li>列表的行</li>
</ol> <!--有序列表-->
<!--type的值 1:数字类型(默认);a/A:字母类型;i/I:罗马数字类型-->
<!--定义列表-->
<dl></dl>,<dt></lt>,<dd></dd>:定义列表及标题,并做出描述和解释
表格标签
tr * m>td * n,再按Tab键可以创建m行n列的表格
<table border="" cellpadding="" cellspcing="" >
<caption></caption> <!--表格标题-->
<tr> <!--表格中的行-->
<td></td> <!--表格中的单元格-->
</tr>
<tr>
<th></th> <!--表头-->
</tr>
</table>
<!--属性解释:border表格边框;cellpadding单元格空间;
cellspcing单元格间隙-->
<td colspan="m"></td> <!--列的合并(某一行占据m个单元格)-->
<td rowspan="m"></td> <!--行的合并(某一列占据m个单元格)-->
<!--align(左右对齐方式):left、center、right-->
<!--valign(上下对齐方式):top、middle、bottom-->
<!--表格的语义化标签-->
<thead></thead> <!--页眉-->
<tbody></tbody> 主体
<tfooter></tfooter> <!--页脚-->
表单标签
<form action="网址"></form> <!--表单最外层容器-->
<!--action:提交按钮的提交地址-->
<input type=""> <!--标签用于用户信息,type属性决定具体控件-->
<!--type:text,password(placeholder:提示效果),
checkbox:复选框(checked默认选中,disabled不允许选),
radio:单选框(可通过name配成一组),file:上传文件,
submit:提交,reset:重置,-->
<textarea cols="" rows=""></textarea> <!--多行文本框-->
<select size="" multiple> <!--size:显示个数,multiple:多选-->
<option selected disabled></option> <!--checked默认选中,disabled不允许选-->
</select> <!--下拉菜单-->
<lable></lable> <!--使表单可选范围变大-->
CSS基础语法
格式:选择器{属性1:值1;属性2:值2;属性3:值3;}
<style>选择器{属性1:值1;属性2:值2;属性3:值3;}</style>
/*属性:width宽,height高,background_color背景颜色*/
CSS样式
/*内联样式*/
<div style="属性1:值1;属性2:值2;属性3:值3;"></div>
/*内部样式:写到head中,代码可复用*/
<style>选择器{属性1:值1;属性2:值2;属性3:值3;}</style>
/*外部样式:引入一个CSS文件名name.CSS,通过link标签引入,写到head中*/
外部文件:选择器{属性1:值1;属性2:值2;属性3:值3;}
<link rel="指定资源跟页面的关系" href="外部文件地址">
CSS中的颜色表示和背景样式
- 颜色表示法
- 单词表示法:英文单词
- 十六进制表示法:#000000~#ffffff
- rgb三原色表示法:rgb(0,0,0)~rgb(255,255,255)
- 背景样式
- background-color:背景色
- background-image:背景图 url(值为路径)
- background-repeat:平铺方式
repeat-x:x轴平铺,repeat-y:y轴平铺,no-repeat:都不平铺 - background-position:背景位置
x,y:数字(px,%)或单词(left,center,right,top,center,bottom) - background-attachment:背景图随滚动条移动方式
scroll(默认的,背景图按照当前元素进行偏移)
fixed(背景位置按照浏览器进行偏移)
CSS边框样式
- border-style:边框样式
solid:实线,dashed:虚线,dotted:点线,可针对某一条边单独设置,格式为:border-right/left/top/bottom-style - border-width:边框大小
- border-right-style
- border-color:边框颜色,transparent表示透明
CSS文字样式
- font-family:字体类型(英文:只支持英文、中文)
- 衬线体与非衬线体:衬线体有棱角
- 设置多字体的方式:电脑里的字体备选方案
- 引号添加:字体类型中出现空格时要加引号
- 字体大小:默认16px,也可以用单词表示法,一般设置为偶数,以实现字体对其
- font-weight:字体粗细
- bold加粗,normal正常,数字:1 ~ 5100正常,6 ~ 9100加粗
- font-style:字体样式
- italic表示斜体
- color:字体颜色
CSS段落样式
- text-decoration:文本装饰
- 下划线:underline、上划线:overline、删除线:line-through,不添加任何装饰:none
- 添加多个文本修饰用空格隔开
- text-transform:英文段落大小写
- lowercase:小写、uppercase:大写、capitalize:首字母大写
- text-indent:文本缩进
- 首行缩进:em单位,一个em与一个字体大小相同
- text-align:文本对齐方式:left、right、center、justify(两端点对其)
- line-height:定义行高
- 默认行高根据字体大小变化
- 取值:数字(px)、scale(比例值,与文字大小成比例)
- letter-spacing:字体间距
- word-spacing:英文单词间距
- 英文或数字不自动折行问题
- word-break:break-all;强烈的折行
- word-wrap:break-word;不强烈的折行,会产生一些空白区域
CSS复合样式
- 单一样式与复合样式(一般不混用。若混写,先写复合再写单一)
一个CSS属性只控制一种样式,叫做单一样式
一个CSS属性控制多种属性,叫做复合样式 - 复合写法通过空格方式实现,复合写法有的不需要关心顺序,例如background、border;有的需要关心顺序,例如font。
- background:red url() repeat 0 0;
- border:2px black solid;
- font:weight style size/height line- family(最少要有两个值:size family)
CSS选择器
- ID选择器:#elem{} id=“elem”
- ID在一个页面中只能出现一次;
- 命名规范:标识符;
- 命名方式:驼峰式写法、下划线写法、短线写法。
- CLASS选择器:.class{elem} class=“elem”
- class选择器可复用
- 可以添加多个class样式:class=“style1 style2 style3”
- 有多个样式时,样式优先级根据CSS决定,而不是class属性中的顺序
- 标签+类的写法:标签.elem
- 标签选择器(TAG选择器)使用场景
- 去掉某些标签的默认样式
- 复杂的选择器 ,如层次选择器
- 群组选择器:通过逗号方式隔开,给不同选择器添加统一的CSS样式,实现代码复用(div,p,.elem……{})
- 通配选择器:给所有标签添加样式,一般用来去掉标签的默认样式(*{})
- 层次选择器
- 后代:M N { }
- 父子:M>N { }
- 兄弟:M~N { } 当前M下的所有兄弟N标签
- 相邻:M+N { } 当前M下的相邻N标签
- 属性选择器
- M[属性/属性=名称] { }:=完全匹配,*=部分匹配,^=起始匹配,$=结束匹配,[ ][ ][ ]组合匹配
- 伪类选择器 M:伪类{}
- :link 访问前的样式(只能添加给a标签)
- :visited 访问后的样式(只能添加给a标签)
- :hover 鼠标移入时的样式(可以添加给所有标签)
- :active 鼠标按下时的样式(可以添加给所有标签)
- 一般网站只做a{ } a:hover{ }
- :after、:before 通过伪类的方式给元素添加一段文本内容,content
- :checked、:disabled、:focus(光标) 表单操作
- 结构性伪类选择器:nth-of-type()、nth-child()角标从1开始,n表示从0到无穷大;first/last-of-type、only-of-type
CSS继承
- 文字相关的样式可以被继承,布局相关的样式不能被继承:子标签的文字样式可以继承父标签的文字样式,若要继承父标签的布局样式,可以在子标签中使用inherit值实现
CSS优先级
- 相同样式优先级:后面的优先级高
- 内部样式与外部样式:优先级相同,若设置了相同样式,则后写的引入方式优先级高
- 单一样式优先级:style行间>id>class>tag>*>继承(前四个权重:1000,100,10,1)
- !important:提升样式优先级,非规范方式,不建议使用。(不能针对继承的优先级进行提升)
- 标签+类>单类
- 群组优先级:群组选择器与单一选择器优先级相同,靠后写的优先级高
- 层次优先级
- 权重比较:将所有层级权重相加
- 约分比较:将权重相同的约掉
CSS中的盒子模型
- 组成:content,padding,border,margin
content:内容区域,width和height;
padding:内边距(内填充)只写一个值(上下左右),写两个值(上下),写四个值(上右下左),单一样式padding-left/top/right/bottom只能写一个值;
margin:与padding是一样的
PS:背景色填充到margin以内区域;文字在content区域添加;padding不能为负数,margin可以为负 - box-sizing:盒尺寸,可以改变盒子模型的展示形态。
默认值:content-box:width和height作用到content上
border-box:width和height可以作用到content、padding、border上
使用场景:不用再计算一些值;解决一些百分比问题; - 盒子模型的一些问题
- margin叠加问题:上下margin同时存在时,会取上下值中较大的作为叠加的值
- 解决方案:只给一个元素添加边距
- margin传递问题:出现在嵌套的结构中,只是针对margin-top的问题
- 解决方案:给父容器加边框;margin换成padding
- 扩展
- margin左右自适应可以设置(margin:auto),上下不可以
- width和height不设置时,会自动计算容器大小
标签分类
按类型
- block:div、p、ul、li、h1
特性:独占一行;支持所有样式;不写宽时,跟父元素宽相同;所占区域时一个矩形 - inline:span、a、em、strong、img
特性:挨在一起的;有些样式不支持,例如宽高;不写宽时,宽由内容决定;所占区域不一定是矩形;内联标签之间会有空隙,由换行引起 - inline-block:input、select
特性:挨在一起,支持宽高;既有块的特性,又有内联的特性 - 可通过浏览器查看类型;布局一般用块标签,修饰文本用内联标签
按内容分类
- flow:流内容
- metadata:元数据
- sectioning:分区
- heading:标题
- phrasing:措辞
- embedded:嵌的
- interactive:互动的
按显示
- 替换元素: 浏览器根据元素的标签和属性,来决定元素的具体显示内容。(有部分自己的特性,有时可以改变大小)
- 非替换元素:将内容直接告诉浏览器,将其显示出来。
显示框类型
- display:block、inline、inline-block、none 可以修改
- display:none与visibility:hidden
display:none不占空间的隐藏,visibility:hidden占空间的隐藏
标签嵌套规范
- ul,li;dl,dt,dd;table,tr,td;
- 块标签可以嵌套内联标签
- 块标签不一定能嵌套块标签:p不能嵌套div
- 内联标签不可以嵌套块标签:a能嵌套div(给区域加链接)
溢出隐藏
- overflow:visible(默认)
- overflow:hidden(容器中的内容溢出时会隐藏溢出的部分)
- overflow:scroll(显示滚动条)
- overflow:auto(溢出时显示滚动条)
- x轴和y轴:overflow-x、overflow-y针对两个轴分别设置
透明度与手势
- opacity:0(透明)~1(不透明)占空间、所有子内容也会透明
- rgba(……,a):0(透明)~1(不透明)让指定样式透明而不影响其他样式
- cursor:手势(default是箭头)
- 自定义实现手势:准备图片.cur、.ico格式,cursor:url(图片存储路径),auto
最大、最小宽高
- min-width、min-height:大于等于
- max-width、max-height:小于等于
- %:换算时,以父容器的大小进行换算
- 容器适应屏幕的高度:
容器加height:100%;body:100%;html:100%;
CSS默认样式
- 没有默认样式:div、span
- 有默认样式:通过浏览器调试工具查看
body-> margin:8px
h1-> margin:上下 21.440px
a-> text-decoration:underline - 去除默认样式:简单的css reset
*{margin:0;padding:0;} /*所有容器的margin和padding均设为0*/
body,p,h1,ul{margin:0;padding:0;}
ul{list-style:none;}/*去掉列表默认的实心圆点*/
a{text-decoration:none;color:#666;}/*去掉链接的下划线并设置颜色*/
img{display:block;}/*将图像*/
- 图片与容器底部有一些空隙:内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐的。
解决方案:
img{display:block;}/*将图像转成块*/
img{vertical-align:bottom}/*底线对齐*/
float浮动
- 脱离文档流,沿着父容器靠左或靠右进行排列,取值left、right、none
- 注意点:只会影响后面的元素;内容默认提升半层;默认宽度根据内容决定;换行排列;主要是给块元素添加,但也可以给内联添加
- 清除浮动
- 上下排列:clear属性清除浮动,left、right、both
- 嵌套排列:
固定宽高:不适合做自适应的效果;
父元素浮动:父容器浮动会影响后面的元素;
overflow:hidden(BFC规范)如果有子元素想溢出,那么会受到影响;
display:inline-block(BFC规范),父容器会影响到后面的元素;
设置空标签:会多添加一个标签;<div></div>
after伪类:空标签的加强版(clear属性只会操作块标签,对内联标签不起作用)
.clear:after{ content:''; display:block; clear:both; }
CSS定位
- position:取值可为relative、absolute、fixed、sticky、static(默认)
- relative:如果没有定位偏移量,对元素本身没有任何影响;不是元素脱离文档流;不影响其它元素布局;left、top、right、bottom是相对于当前元素进行偏移的
- absolute:使元素完全脱离文档流;使内联元素支持宽高;使块元素默认宽根据内容决定;如果祖先元素有定位相对于该祖先元素发生偏移,否则相对于整个文档发生偏移