HTML5+CSS

HTML

HTML(超文本标记语言)

标签

标签都是成对出现的,如 <html></html>

HTML常用的标签

  • html:前端页面的起始
  • head:头部元素
    • meta:声明
    • title:网页标题
  • body:网页正文(内容)
  • h1~h6:标题,从1—6字体大小越来越小
  • img:图片
  • p:段落
  • a:超链接
  • li:无序列表
  • ul:li的父级元素
  • ol:有序列表
  • dt:自定义列表
  • dd:dt的子元素

以下是不建议使用的标签

  • i:倾斜
  • b:加粗
  • em:倾斜
  • strong:加粗
  • del:删除线

表单

  • input:默认文本框,可选择radio(单选框)、checkbox(复选框)、submit(表单提交)、reset(重置)
    • 普通文本框:<input type="text" value="文本框" />

    • 单选框:<input type="radio" value="男" />

    • 复选框:<input type="checkbox" value="看书" />

    • 表单提交按钮:<input type="submit" value="提交" />

    • 重置按钮:<input type="reset" value="重置" />

  • select:下拉菜单,搭配子标签<option>
  • textarea:文本域,一般使用场景为留言
  • form:表单,有active、method属性,active表示表单提交目标地址,method表示以get/post方法进行提交。

实体

  • 空格:&nbsp;
  • 左尖括号:&lt;
  • 右尖括号:&rt;

div+span

div标签,一般用于网页布局。span标签,局部标签,一般用于给某个元素添加样式

CSS2

一般来说,CSS设置样式属性百分比参考的是父级元素的宽度。
层叠样式表(Cascading Style Sheet)

<p style="font-size: 20px; color: red;">书山有路勤为径</p>
// 2.嵌入式(内嵌式)样式 使用场景: 样式不多
<style>
    div {
        width: 300px;
        height: 300px;
        background-color: orange;
    }
</style>
<div>
    我是一个div
</div>
// 3.index.css 一般项目中使用 推荐使用
div {
        width: 300px;
        height: 300px;
        background-color: orange;
}
<link href="index.css" rel="stylesheet">

css语法

选择器 {
	属性名: 属性值;
}

选择器

  1. 基本选择器

    1. 标签选择器
      div {
      	...
      }
      h2 {
       ....
      }
      
    2. 类选择器(推荐经常使用)
      // 类选择器就是给目标标签添加一个class属性,通过class名字来修改这个元素标签的样式
      // 可以设置多个class名字,设置格式为: class="name1 name2 ..." 以空格分隔
      <style>
       	.con {
      		background-color: red;
      	}
      </style>
      
      <div class="con">
      	这是内容
      </div>
      
    3. id选择器
      // id选择器就是给目标标签添加一个id属性,通过id名字来修改这个元素标签的样式
      // 每个标签/容器是唯一id,不允许出现相同id.
      <style>
      	#con {
      		background-color: red;
       	}
      </style>
      
      <div id="con">
      	这是内容
      </div>
      
    4. 通配符选择器
      // *标识全局所有样式修改,一般我们也不用,都是把所有需要的元素都追加
      * {
      	color: red;
      }
      
      // 推荐使用这种
      div a img li {
      	color: red;
      }
      
  2. 高级选择器

    1. 后代选择器
      <style>
      /*表示ul中所有li的颜色改为绿色*/
      ul li {
      	color: green;
      }
      </style>
      
      <ul>
      	<li>111</li>
      	<li>222</li>
      	<li>333</li>
      	<li>444</li>
      </ul>
      
    2. 交集选择器
      <style>
      /*表示ul中所有li的颜色改为绿色,
      注意千万不能有空格,加了空格就是后代选择器了*/
      // 满足两者情况:既是div 而且class是box
      div.box {
      	color: green;
      }
      </style>
      
      <div class="box">
      	<ul>
      		<li>item</li>
      	</ul>
      </div>
      <div>这是第二个div</div>
      <!--结果item字体颜色为绿色-->
      
    3. 并集选择器
      /*用`,`隔开,表示公用同一个样式*/
      div,p,h1,li {
      	color: yellow
      }
      
  3. css两性:继承性与层叠性
    继承性:css中有一部分属性可以被继承。比如文字和文本的属性color, font-size, font-family, text-*, font-*。即便标签(元素)本身不设置,也能被加载。父元素的宽度可以被继承,但高度不可被继承,当子元素设置height: 100%时,取的是父元素的高度。

    层叠性:

    1. 多种选择器都能定位到目标元素的情况下,样式采用权重最高的,

      id选择器>class选择器>标签选择器

    2. 如果权重一致,以书写顺序有关,采用最后一个样式。

    3. 如果都没有指定到目标元素,则采用描述离目标元素最近的那个样式

    4. 多种选择器都没有直接选择元素,则看谁描述的近,就听谁的,假如描述的一样近,再比较权重,权重谁高听谁的,若权重还是一致,则看顺序,谁最后描述,就听谁的。

  4. !important 提升权重,但无法提升继承权重。用法:color: red !important 在属性后面添加即可。

    <style>
    	.box1 #box2 .box3 p {
    		color: red;
    	}
    	/*这样是有效的*/
    	#box1 .box2 .box3 p {
    		color: blue !important;
    	}
    	/*这样是无效的*/
    	#box1 .box2 {
        	color: skyblue !important;
    	}
    .	box1 .box2 #box3 p {
    		color: green;
    	}
    </style>
    <div id="box1" class="box1">
    	<div id="box2" class="box2">
    		<div id="box3" class="box3">
    			<p>我的颜色到底听谁的</p>
    		</div>
    	</div>
    </div>
    

font-*

font-size:可选属性normal, italic, oblique

区别:normal表示无样式;italic表示假如英文字体本身有倾斜,则显示倾斜样式,若英文字体没有倾斜,则替换成倾斜的字体;oblique表示本身字体是倾斜,与字体本身无关。

text-*

  1. white-space(对文字是否折行、换行):nowrap(不换行)、pre-wrap(换行)
  2. text-decoration(文字修饰):none(去掉下划线),underline(下划线),line-through(中划线),overline(上划线)。
  3. text-indent(文本缩进):设置文本缩进,可以设置 1em 2em 3em .../10px 20px 30px .../10% 20% 30% ...。这里的百分比参考的是自身容器的宽度。

盒模型

遵循原则:上-右-下-左,若少谁就找他的对立面。

建议优先使用width > padding > margin

  1. padding(内边距):可以把容器内容撑开。
  2. border:border: 20px solid #ccc 有三个值分别是:粗细大小,实虚线, 颜色。
  3. border-width:可以单独设置border的值。
  4. border-style:solid(实现) dashed(虚线) dotted(点状线) double(双实线)
  5. border-color:red green blue ...
  6. margin(外边距):撑开与容器之间的距离。

overflow

可选项:hidden(隐藏多余部分), visiable(默认显示), scroll(以滚动条方式显示全部内容), auto(自适应)

margin

  1. 塌陷
    上下两个盒子会发生margin塌陷,margin值小的会叠加在margin值大的元素里面。
    父子盒子也会发生margin塌陷,父子盒子中以较大margin为准。
  2. 居中
    margin: 0 auto让块级元素水平居中 块级元素包括div、p、li、h1~h6等,但对行内元素无效。

块级元素(div, h1~h6, p)

  • 可以设置宽高,设置宽高有效
  • 独占一行
  • 不设置宽度,默认继承父元素100%宽度
  • display:block

内联元素(span, strong, em, i)

  • 不可设置宽高,设置宽高无效
  • 可以与其他内联元素并排显示
  • 宽高由内容撑开
  • display:inline

内联块元素(img, input)

  • 可以设置宽高,设置宽高有效
  • 可以与其他内联元素并排显示
  • 宽高由内容撑开
  • display:inline-block

使用display默认是底部对齐,可使用vertical-align: top;将对齐方式改为顶部对齐。

标准文档流

三种布局之标准流(浮动、定位)

特点:

  • 空白折叠
  • 高矮不齐
  • 内容在盒子内部默认从左往右、从上往下显示,遇到空间不够,自动换行

浮动(float)

三种布局之float(标准流、定位)。可设置left、right、none(一般需要为none就不设置)
元素设置浮动属性会脱离标准流的控制(脱标)。
块级元素设置浮动,具有内联块元素的特征;内联元素设置浮动,设置宽高有效。
浮动找最近的父元素盒子对齐。

  • float: right(left) 浮动最初用于文字环绕效果
  • 脱离标准流,不占位置,会影响标准流。
  • 子盒子浮动,不会压住父盒子的 paddingmargin
  • 浮动元素改变元素的模式。

清除浮动

  1. 给父元素添加一个高度。一般不推荐,我们一般不设置父元素的高度。

  2. clear: both; clear可选值有both, left, right。能够清除浮动造成的影响,但是不能靠儿子撑开父亲的高度。子元素的高度让父元素的margin失效了

  3. 外墙法:两个浮动元素的父元素之间设置一个div,设置方法2再设置高度,可以达到有margin的效果,但是父元素还是不能被子元素撑开。

    /*css样式*/
    .box1, .box2 {
    	width: 800px;
    	margin-bottom: 20px;
    	border: 10px solid red;
    }
    div p {
    	float: left;
    	width: 100px;
    	height: 100px;
    	margin-right: 10px;
    	background-color: yellowgreen;
    }
    .c1 {
    	clear: both;
    }
    .h20 {
    	height: 20px;
    }
    //html代码
    <div class='box1'>
    	<p></p>
    	<p></p>
    	<p></p>
    	<p></p>
    </div>
    <div class="c1 h20"></div>
    <div class="box2">
    	<p></p>
    	<p></p>
    	<p></p>
    	<p></p>
    </div>
    
  4. 内墙法:浮动最后​放一个div,父元素能被子元素撑开,也能实现父元素设置的margin值。

    /*css样式*/
    .box1, .box2 {
    	width: 800px;
    	margin-bottom: 20px;
    	border: 10px solid red;
    }
    
    div p {
    	float: left;
    	width: 100px;
    	height: 100px;
    	margin-right: 10px;
    	background-color: yellowgreen;
    }
    
    .c1 {
    	clear: both;
    }
    //html代码
    <div class='box1'>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="c1"></div>
    </div>
    <div class="box2">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="c1"></div>
    </div>
    
  5. 溢出隐藏(推荐使用):对浮动元素的父元素设置,overflow: hidden;父元素能寻找子元素最高的高度作为自己的高度。

隔行换色

odd:奇数列,从第一行下标为0开始,所以odd第一行为正常效果的第二行

even:偶数列

ul li:nth-child(even) {
    background-color: #0f0;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

a标签

a标签的伪类:link(访问前), visited(访问后), hover(鼠标放上去), active(激活,按住不放时);先后顺序为love hate,简称爱恨原则

<style>
    a: link {
        color: red;
    }
    a: visited {
        color: green;
    }
    a: hover {
        color: blue;
    }
    a: active {
        color: yellow;
    }
</style>

<a href="#">这是一个超链接</a>

a标签文档标记

<div id='box'>
    
</div>

<a href="#box"></a>

透明度

rgba() & opacity

设置背景色透明度的方法有两种,background-color: rgba(255, 0, 0, .5)opacity: 0.5,两者的区别是使用rgba只能修改背景色颜色透明度,不能影响内容,而opacity则会影响整个盒子包括文字内容都会起作用。

background

  • background:background:#ccc url(images/i.png) url表示设置背景图。

  • background-repeat:不设置默认平铺整个盒子,设置no-repeat不平铺整合盒子。

  • background-position:background-position: 水平方向 垂直方向设置盒子定位。默认left,top;还可以精确到px单位,也可以设置百分比,百分比设置的是盒子的宽-图片的宽看成100%。

    /*负数往相反方向移动,正数往相同方向移动*/
    选择器 {
        background-position: center center;
        background-position: 150px 150px;
        background-position: 30% 50%;  
    }
    /*整合起来写 url-图片地址 no-repeat-是否平铺 center top-图片显示位置 #000-颜色*/
    选择器 {
        background: url(images/1.jpg) no-repeat center top #000
    }
    
  • background-attachment:fixed 固定背景图片,不随着滚动而消失

定位

相对定位

position: relative 设置定位方式为相对定位,相对于自己移动,一般用于微调。

/*做导航栏,给选中导航做边框,不移动,边框多宽,就移动几个像素*/
a {
    position: relative;
    top: -3px;
    border 3px solid #ccc;
}

绝对定位

position: absolute 设置定位方式为绝对定位,若父(祖先)元素设置了position: relative,相对于父(祖先)元素移动,否则相对于body移动,绝对定位的元素脱离标准文档流

固定定位

position:fixed 设置定位方式为固定定位,以浏览器窗口为参考。

HTML5新增元素

新增标签

  • header
  • footer
  • nav

新增多媒体

  • audio 音频
    <!--
    属性:
    	src 要播放的音频的url
    	controls	显示播放控件
    	loop	循环播放
    	muted	静音
    MPE\Ogg\Wav
    格式		MIME-type
    MP3		 audio/mpeg
    Ogg		 audio/ogg
    Wav		 audio/wav
    -->
    <audio controls>
    	<source src="多媒体路径" type="audio/ogg">
    </audio>
    
  • video 视频
    <!--
    属性:
    	src 要播放的音频的url
    	controls	显示播放控件
    	loop	循环播放
    	muted	静音
    	height	播放器的高度
    	width	播放器的宽度
    	poster	预览图片
    MPE\Ogg\Wav
    格式		MIME-type
    MP4		 audio/mp3
    Ogg		 audio/ogg
    WebM		 audio/webm
    -->
    <video controls>
    	<source src="多媒体路径" type="audio/ogg">
    </video>
    

新增表单元素

  • <input type="email" name="usere"> 用户邮箱

  • <input type="search"> 搜索框

  • <input type="number" value="10" min="1" max="10" step="1">

  • <input type="range" value="5" min="1" max="10" step="1"> 滑块

  • <input type="color">取色框

  • <input type="submit">表单提交

  • <input type="date">日期选择器

  • <input type="datetime">手动输入一个日期

  • <input type="datetime-local"> 本地时间

  • <input type="month">选择年、月

  • <input type="time">选择小时、分钟

  • <input type="week"> 选择年、周

  • 选项列表

    <input id="myCar" list="cars">
    <datalist id="cars">
    	<option value="WEB"></option>
        <option value="ASD"></option>
    </datalist>
    
  • 自动完成(autocomplete)

    // on-打开 off-关闭
    <input type="text" name="usere" autocomplete="on">
    
  • 自动获取焦点(autofocus)

    用户名:<input type="text">
    密码:<input type="text" autofocus>
    
  • multiple 允许多个值,适用于email、file

  • pattern 正则验证

  • required 必填项

  • placeholder 提示信息

CSS3

选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面

浏览器私有前缀,加前缀是兼容老版本的写法

Gecko内核			CSS前缀为“-moz-”			如火狐浏览器
Webkit内核			CSS前缀为“-webkit-”		如Chrome、Safari
Presto内核			CSS前缀为“-o-”			如Opera(欧朋)
Trident内核			CSS前缀为“-ms-”			如IE

新增属性选择器

				/*表示所有class中包含box的背景色都改成黄色*/
E[attr*="val"]	例:div[class*="box"]{background-color: yellow;}
				/*表示所有class中以box开头的背景色都改成红色*/
E[attr^="val"]	例:div[class^="box"]{background-color: red;}
				/*表示所有class中以box结束的背景色都改成粉色*/
E[attr$="val"]	例:div[class$="box"]{background-color: pink;}

新增结构性伪类选择器

					/*选择父元素下的第一个子元素li*/
E:first-child{}		例:li:first-child{background-color: red;}
					/*选择父元素下的最后一个子元素li*/
E:last-child{}		例:li:last-child{background-color: pink;}
					/*选择父元素下的第n个子元素li n从1开始算*/
E:nth-child(n){}	例:li:nth-child(2){background-color: blue;}
					/*n写even表示偶数行变色,n写odd表示奇数行变色*/
E:nth-child(n){}	例:li:nth-child(even){background-color: blue;}
					/*n取值0 1 2 3  2n>=1*/
E:nth-child(n){}	例:li:nth-child(2n){background-color: blue;}
					/*a*n+b	a表示序数*/
E:nth-child(n){}	例:li:nth-child(3n-2){background-color: blue;}
					/*选择父元素中类型为h2的【正数第n个】子元素*/
					/*even(偶数)	odd(奇数)*/
E:nth-of-type(n){}	例:.wrap h2:nth-of-type(2){background-color:red;}

新增状态伪类选择器

/*input type为text且状态未enabled的元素*/
input[type=text]:enabled{}
input[type=text]:disabled{}
input[type=text]:checked{}

边框属性

/*顺序为左上 右上 右下 左下 若少哪边就去找其对角*/
border-radius: 20px 20px 20px 20px;
/*边框阴影*/
box-shadow: X轴偏移, Y轴偏移, 模糊值, 颜色
box-shadow: X轴偏移, Y轴偏移, 模糊值, 增强值, 颜色
box-shadow: X轴偏移, Y轴偏移, 模糊值, 颜色, inset(内阴影)

背景属性

/*可设置具体像素、百分比、cover(等比放大)、contain*/
background-size(背景图大小): 宽度值, 高度值
/*content-box、padding-box、border-box*/
background-origin(背景图显示区域):
/*裁剪区域:border-box、padding-box、content-box*/
background-clip:

渐变(绘制一个背景图)

/*线性渐变*/
linear-gradient(颜色1, 颜色2);
linear-gradient(left, 颜色1, 颜色2);	// 从左向右渐变
linear-gradient(90deg, 颜色1, 颜色2); // 水平向右90°
/*重复线性渐变 top:方向, 颜色1百分比: 参考盒子从0到颜色1百分比高度 颜色2百分比: 参考盒子从0到颜色2百分比高度渐变颜色*/
repeating-linear-gradient(top, 颜色1 10%, 颜色2 20%)
/*径向渐变*/
radial-gradient(颜色1 百分比, 颜色2 百分比);
radial-gradient(方向1, 方向2, 颜色1 百分比, 颜色2 百分比);
/*参考的是*/
radial-gradient(像素值1, 像素值2, 颜色1 百分比, 颜色2 百分比);

用户界面

/*可选:both(垂直拉伸)、horizontal、vertical*/
resize: 规定是否由用户调整拉伸
// 盒子大小
box-sizing:border-box  // 此时盒子的width值包括左右padding左右border+内容
box-sizing: content-box // 默认值

多列布局

// 设置盒子每列宽度 auto-自适应(默认)
column-width: 200px;				// 栏目宽度
column-rule: 1px solid red; 		 // 栏目边框
column-gap: 28px;					// 栏目间距
column-count: 5;					// 栏目总数 会与width发生冲突

弹性盒子

布局模式

CSS2 盒模型+浮动+定位

CSS3 弹性盒子

display: flex;
display:inline-flex;
// 对父元素设置display: flex; 表示该盒子是弹性盒
// 主轴 flex-direction 设置主轴的方向,
// 
flex-direction: row-reverse;	 此时主轴是水平方向,起点在右
flex-direction: column; 		 此时主轴是垂直方向,起点在上沿
flex-direction: column-reverse;   此时主轴方向是垂直方向,起点在下沿
flex-direction: row;	默认是row 此时主轴是水平方向,起点在左
主轴对齐方式
子元素在主轴中对齐方式
justify-content: flex-start;
// flex-start(起始位置对齐)、flex-end(末端位置对齐)、flex-center(居中对齐)、space-around(分散对齐)、space-between(两端对齐)
侧轴对齐方式
侧轴方向对齐方式(与主轴垂直,主轴若是水平,侧轴就是垂直)
align-items: flex-start;
// flex-start(起始位置对齐)、flex-end(末端位置对齐)、center(居中对齐)、stretch(拉伸,若子项目/子元素没设置高度,拉伸占满父元素)、baseline(基线)
弹性盒项目换行
flex-wrap: nowrap;			// 不换行
flex-wrap: wrap;			// 换行
flex-wrap: wrap-reverse;	 //	换行,起始位置在下
排列次序
flex-wrap: nowrap;			// 不换行
flex-wrap: wrap;			// 换行
flex-wrap: wrap-reverse;	 //	换行,起始位置在下
放大缩小
在容器中,根据容器宽度按比例放大
flex-grow: 0;			// 默认为0
flex-grow: 1;			// 比例放大1倍
flex-grow: 3;			// 比例放大3倍
------------------------------------------------
当子项目宽度比容器大,会按比例缩小
flex-shrink: 1;			// 默认为1
flex-shrink: 2;			// 缩小1倍
2D/3D
transition
transition: width, 2s;		//复合属性
transition-property			// 参与过渡的属性——默认 all 所有
transition-duration			// 过渡持续时间	可以写1s,也可以写1000ms
transition-delay			// 过渡延迟的时间	可以写s秒、ms毫秒
transition-timing-function	 // 时间函数(过渡的动画类型)
	linear		匀速
	ease-in		加速
	ease-out	减速
	ease		缓动
	ease-in-out	先加速后减速
transform(2D动画)

translate 平移

// 水平向右 向下移动20px
transform: translate(20px, 20px);
// 水平向右移动20px
transform: translate(20px);
// 只能水平向右移动20px 若是负数,则向左移动
transform: translateX(20px);
// 只能竖直向下移动20px 若是负数,则向上移动
transform: translateY(20px);
// 绕着Z轴平移20px 若是正数,则向屏幕放大移动
transform: translateZ(20px);

rotate 旋转

// 以自身容器中心点为中心点,顺时针旋转30°
transform: rotate(30deg);
// 以自身容器中心点为中心点,逆时针旋转30°
transform: rotate(-30deg);

scale 放大

// 水平方向放大2倍,竖直方向放大2倍
transform: scale(2, 2);
// 水平方向和竖直方向放大2倍
transform: scale(2);
// 水平方向放大2倍
transform: scaleX(2);
// 竖直方向放大2倍
transform: scaleY(2);

skew 倾斜

// 水平方向倾斜30°, 竖直方向倾斜20°
transform: skew(30deg, 20deg);
// 水平方向, 竖直方向都倾斜20°
transform: skew(20deg);
// 水平方向倾斜30°
transform: skewX(30deg);
// 竖直方向倾斜30°
transform: skewY(30deg);

origin

// 动画结束之后,与原容器的左上角对齐
transform-origin: left top
// 动画结束之后,与原容器的左下角对齐
transform-origin: left bottom
// 动画结束之后,与原容器的右下角对齐
transform-origin: right bottom
// 动画结束之后,与原容器的中心对齐
transform-origin: center
transform(3D)

transform-style(若是正数,则往里转,若是负数,则往外转)

/*让嵌套子元素以3d空间展示*/
transform-style: preserve-3d;
/*让嵌套子元素以2d平面展示, 默认2d*/
transform-style: flat;
/*视距,加给父元素,只对3d变换元素有效,无穷大时接近于none,等于没有效果,通常设置500px~800px 近大远小*/
perspective: 500px;

帧动画

/*规定帧动画必须@keyframes run是自定义名字*/
@keyframes run {
    0%, 100%{left:0;top:0;}
    25%{left:200;top:0;} 
    50%{left:200;top:200;} 
    75%{left:0;top:200;} 
}

@keyframes run {
    from{left:0;top:0;}
    to{left:200;top:0;}
}

E {
    /*动画名称、动画持续时间、动画时间函数*/
    animation: run 5s ease-in-out;
    /*无限循环*/
    animation: run 5s ease-in-out infinite;
    /*逆向运动*/
    animation: run 5s ease-in-out alternate;
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值