首页 > > 网页制作 > css >

HTML基础

2019-08-14 09:46:05来源：博客园阅读 ()

html（超文本标记语言）

html　　很有趣的一个东西，能给他加很多很多特效。用的时候你会爱上它，因为它非常非常好玩！

<></>尖括弧

h1-h6（标题标签）

<p></p>文字段落标签

</br>强制换行，只用于文字、文章换行(单标签)

<hr>分割线（单标签）

<img src="img/wenjianming.jpg"/>图片标签（单标签）

<a href="https：//www.baidu.com"></a>链接标签

<u></u>加下划线

<s></s>加删除线

<i></i>文字倾斜

<b></b>文字加粗

<span></span>用来组合文档中的行内元素(行标签)

<div></div>盒子（这个非常重要）

<ul>有序列表（必须有<li></li>）

<ul>

<ol>无序列表（必须有<li></li>）

</ol>

<dl>定义列表
　　　　<dt></dt>定义列表中的项目
　　　　<dd></dd>定义列表中项目的描述
　　　　<dt></dt>
　　　　<dd></dd>
</dl>

（行标签变块标签
display：block
变完之后叫行内块元素。
display：inline-block;）

行元素和块元素
1.行元素只占它本身
2.继承父级属性
3.不可以设置宽高
1.快标签独占一行
2.继承父级属性
3.可以设置宽高

表格table（定义表格）

<table>表格

　　　　<tr>表格中的行

　　　　　　<td>天地</td>表格行中的单元

　　　　<tr>　　

</table>

水平合并：colspan="1"

垂直合并：rowspan="1"

表单from（定义供用户输入的 HTML 表单）

input　　定义输入控件

lable　　定义 input 元素的标注

<input type="text" >文本框

<input type="radio" name="sex">单选按钮

<input type="checkbox" name="sex">多选按钮

<input type="password" >密码

<input type="button" value="点击">button按钮. value定义按钮的名称（自定义）

<input type="submit">提交按钮

<input type="reset">重置按钮

<input type="file">上传文件

<select>下拉框

　　　　<option>我是下拉框的选项1</option>

</select>

<textarea　　cols="60" rows="20"></textarea>文字区域/留言板

cols控制textarea的宽　　 rows控制textarea的宽高

placeholder　　输入框提示信息

required　　必填项，如果不填写则无法提交

maxlength　　定义最大字符数

action　　提交跳转地址

method　　传输方式

disabled　　是否禁用

method(传输的方法)="" action=""（跳转地址）

readonly　　只读

name　　用于服务器端获取数据

selected　　下拉框被选中

checked="checked"默认选定（可多选）

css层叠样式表

浮动出现问题解决办法：

1.给父级设置宽高

2.clear：both　　清除浮动

Opacity　　透明度0-10

color　　颜色

font　　字体（不推荐使用）

font-color　　字体颜色

font-size　　字体大小

font-family　　字体类型

font-weight　　字体粗细

font-style：italic　　文字倾斜

font-style：normal　　字体正常

line-height　　行高

text-decoration:line-through　　加删除线

text-decoration: overline　　加顶线

text-decoration:underline　　加下划线

text-decoration:none　　删除链接下划线

text-transform : capitalize　　首字大写

text-transform : uppercase　　英文大写

text-transform : lowercase　　英文小写

text-align:right　　文字右对齐

text-align:left　　文字左对齐

text-align:center　　文字居中对齐

text-align:justify　　文字分散对齐

vertical-align属性

vertical-align:top　　垂直向上对齐

vertical-align:bottom　　垂直向下对齐

vertical-align:middle　　垂直居中对齐

vertical-align:text-top　　文字垂直向上对齐

vertical-align:text-bottom　　文字垂直向下对齐

padding　　内边距

margin　　外边距

margin：0 auto　　盒子居中

list-style：none　　去ul中li的黑点

url　　统一资源定位符

text-indent：“10px”　　文字段落首行缩进

word-spacing："10px"　　字母间距

letter-spacing："10px"　　汉字和字母的间距

背景图片

background-color：red　　背景颜色

background:transparent　　透视背景

background-image : url(/image/bg.gif)　　背景图片

background-repeat : repeat　　重复排列-网页默认

background-repeat : no-repeat　　不重复排列

background-repeat : repeat-x　　在x轴重复排列

background-repeat : repeat-y　　在y轴重复排列

background-position 　　背景定位

background-position : 90px(%) 90px(%)　　背景图片x与y轴的位置

background-position : top　　向上对齐

background-position : buttom　　向下对齐

background-position : left　　向左对齐

background-position : right　　向右对齐

background-position : center　　居中对齐

while-space：nowrap　　强制不换行

overflow：hidden　　隐藏多余（恢复隐藏多余visible）

text-overflow：ellipsis　　变...

css引入方式和优先级

外部链接<line href="css/" rel="stylesheet">

行内样式<div style=""></div>

嵌入样式<style></style>

引入样式@impot<style>内@importurl（global.css）

优先级：行内样式>嵌入样式>外部链接>引入样式（由大到小）

【帅】css选择器
1：标签选择器 div{} p{} ul{}
2：类名选择器（用class命名，在样式）.box{} .input_l{}
3：id选择器(标签后面id=“id名称”调用#id名称唯一的，不能重复用一个，id可以是多个，id优先级比类名高。)#
4：通用选择器（ *{} 控制网页全局样式,margin：0;padding:0；）
5：伪类选择（：hover 鼠标经过超链接样式. ：active鼠标点击时的样式）.box:hover{} a:hover{} #id:hover{}
6: 子代选择器两代选择器父和子.box p{} #id span{}
7：后代选择器三代及以上.box p span{}
8：群组选择器多个标签到一起设置
9：交叉选择器两个不同选择结合使用
单冒号(:)用于css3伪类，双冒号（：：）用于css3伪元素。
伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。
但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，
比如：first-line、：first-letter、：before、：after等。
对于css2之前已有的伪元素，比如：before，单冒号和双冒号的写法：：before作用是一样的。
提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

scc3

border：10px solid red　　边框

border-radius：10px 10px 10px 10px　　边框圆角

background：linear-gradient（red，yellow）默认从上往下

background：linear-gradient（red50%，yellow50%）颜色占比

background：linear-gradient（to right red，yellow）左右渐变

background：radial-gradient（red，yellow）径向渐变

text-shadow　　文字阴影

box-shadow　　盒子阴影

box-shadow：apx bpx cpx dpx yellow

apx指的水平靠左或靠右阴影

bpx指控制垂直方向，正数向上，负数向下

cpx模糊程度，越大越模糊

dpx阴影范围

yellow　　黄色（自定义颜色）

定位
1、静态定位（默认）：position：static　　没有定位的情况下
2、相对定位：position：relative　　相对定位占自己原本的位置移动元素会导致覆盖其他元素
3、绝对定位：position：absolute　　不占原来空间，就像原来元素不存在一样，后面不定位的任何元
素都会被挡住，无论行标签还是块标签绝对定位之后都会变成块级框
4、固定定位：position：fixed　　参照边界是浏览器的边界，通常放在左侧或右侧，
无论父级是否有定位都不影响，不占空间默认悬浮上面

z-index：控制空间位置/前后位置值从-9999到9999 0是默认-1是默认下一层，
1是默认的上一层2在1上一层
文档流：html的结构/层级关系
定位：position
如果已经绝对定位的元素无定位的父级（直接在body里，没有父级）参考的边界是浏览器的边界ml/body，
如果有定位的父级，参考边界父级
z-index控制定位的空间位置

相对和绝对区别：
相对
1、相对定位无父级会受到周围元素的影响，比较适合作为父级元素，他定位参照周围元素，
2、如果无父级无周围元素，相对定位参照body
3、相对定位，元素移动后还占原本位置
绝对
1、绝对定位，不受周围元素影响，
2、如果无父级无周围元素，绝对定位参照浏览器窗口
3、绝对定位，元素移动后不占原本位置

2d、3d转换

transition：5s　　过渡，时间越长变换越慢。

2d转换样式
transform
1.位移 translate（x 水平方向，y 垂直方向）
transform: translate(200px,50px)X，Y同时位移
transform: translateX(200px)X，Y必须大写
transform: translateY(50px)
2.旋转 rotate
rotate（3600deg）-deg度数单位-
transform：rotate（3600deg）
transform:translate(200px,100px) rotate(96000deg)位移和旋转效果。

3.缩放scale
scale（2,2）倍数
scale（1,1）不缩放，正常效果。

4.倾斜skew
skewX(30deg)
skewY(60deg)

5.matrix 矩阵。
通过矩阵算法实现以上4个效果。

3d转换transform
透视perspective/破四百可体悟/:500px
透视距离值越大离得越远，幅度越小。值越小离得越近，幅度越大。一般设置300-500左右合适。

perspective-origin: left right top bottom ；透视基点
origin 基点
opacity透明度0-1
transform-style:preserve-3d　　控制子级在3d空间内显示

动画：animation

动画的组成部分：

关键帧@keyframes{

　　　　　　　　　　form{　　}

　　　　　　　　　　to{　　}

　　　　　　　　　}

　　　　　@keyframes{

　　　　　　　　　　　　0%{　　}

　　　　　　　　　　　　50%{　　}

　　　　　　　　　　　　100%{　　}

　　　　　　　　　　　}

动画属性properties/铺肉破踢斯/-决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。

动画时间函数animation-timing-function
(linear匀速、 ease快、 ease-in进入快、 ease-out出去快、 ease-in-out进入出去快中间匀速。

动画延迟animation-delay: 5s（延迟几秒后进行）

动画方向animation-direction
正序normal
倒序reverse
交替播放alternate
反向交替alternate-reverse

迭代次数animation-iteration-count

动画填充模式animation-fill-mode

animation-fill-mode：backwards动画结束后保持第一帧的状态。

animation-fill-mode：forwards动画结束后保持最后帧的状态。
animation-fill-mode：both动画将执行backwards和forwards的状态。

动画播放状态
animation-play-state：paused；动画暂停播放 paused
animation-play-state：running；动画正常播放 running

animation：hezi（自定义动画名）5s（秒数）infinite（循环播放，linear只播放一次）

一.2d和3d有啥区别
答：2d是平面，3d是立体。
2d两个轴x和y轴，transform：translate（x，y）rotate（x，y）scale（x，y）skew（x，y）
3d三个轴xyz，transform：translate3d（x，y，z）rotate3d（x，y，z）scale3d（x，y，z）skew3d（x，y，z）
2d旋转基点transform-origin
3d必须有父级父级上加transform-style：preserve-3d让子元素在3d空间上显示
还加透视perspective：500px
透视基点perspective-origin
3d默认旋转基点是左上角
二.动画和过度有啥区别
答：1. 过度是一段时间动作，需要鼠标触发
动画是一直循环，不需要鼠标，刷新页面就执行
2. 过渡是一个动作到另一个动作变化的过程
动画是可以持续很长时间由很多个关键帧组成，动画可以把每一段过渡组成到一起，动画不需要过渡
三.2d转换有几个属性分别是
四.透视是啥透视基点和旋转基点有什么区别。
答：透视效果是近大远小
透视基点是定到哪个点就以这个为准出透视效果，透视效果决定因素不光是透视基点还有透视距离
旋转基点：旋转时候以哪个点旋转就是旋转基点。
相似之处：都是参照物，都可以设置left，right，top，bottom。像素，百分比

【弹性盒子】
弹性盒子组成
display：flex 或display：inline-flex
弹性盒子是弹性容器（container）和弹性元素（flex itme）组成
弹性盒子内包括一个或多个子元素

弹性盒子换行//
flex-wrap：nowrap默认不换行
flex-wrap：wrap/ 外泼 / 换行
flex-wrap：reverse//反方向
弹性盒子方向flex-direction
flex-direction：column/ 考了木/ 竖着
row横着
column-reverse反着竖着
row-reverse横着反向
同时决定方向和换行flex-flow
flex-flow可以同时设置flex-direction和flex-wrap
flex-flow：row nowrap

内容对齐-水平方向
justify-content：flex-start；靠左
justify-content：flex-end；靠右
justify-content：center；居中
justify-content：space-between；两端对齐中间距离均等。
justify-content：space-around；两端均等，中间平分
内容设置垂直方向的距离align-content
align-content：flex-start；垂直靠上
align-content：flex-end；垂直靠下
align-content: center；居中
align-content: space-between；上下靠边中间距离均等
align-content: space-around；上下留出相等距离，中间距离平均分

设置弹性盒内每一项弹性子元素的位置<垂直方向>弹性项的位置align-items
align-items：flex-start靠上
align-items：center居中
align-items：flex-end靠下
align-items：baseline以基线，与flex-strat很像
align-items：stretch拉伸，每一项item的高度拉伸至父级高度，如果不固定可以通过
min-height/ma
设置弹性元素自身在纵轴（垂直）的位置
align-self：
align-self：flex-start靠上
align-self：center居中
align-self：flex-end靠下
align-self：baseline以基线，与flex-strat很像
align-self：stretch/死拽吃/ 拉伸高度至父级高度两行就是父级高度一半，三行就是三分之一
（stretch前提是他不能有具体的高度）