本文章主要整理了html入门的基础知识点
图片 <img>
<img src="图片的路径" alt="图片未加载出来时的提示" width="设置图片的宽度" height=“设置图片的高度” title="鼠标放置到图片上时的提示文本">
img { border-radiuds: 3px; opacity=0.4 } ==> <"设置图片的圆角,透明度">
background-repeat: repeat(平铺) | no-repeat(不平铺) | inherit(继承) ;==> 图片是否平铺background-size: 数值 | 百分比 | cover | contain;==> 图片的尺寸background-attachment: fixed;==> 图片是否随页面滚动background-position: center;==> 图片在父容器中的位置(不改变图片的大小)background-origin: padding-box(内边距) | border-box(边框) | content-box(内容);==> 图片相对于什么内容来定位background-clip: border-box(边框) | padding-box(内边距) | content-box(内容); | text(背景只为文字有效)==> 图片修剪到什么位置
mix-blend-mode:==> 描述了元素的内容应该与直系父元素的背景如何混合
multiply==> 正片叠底screen==> 滤色overlay==> 叠加darken==> 变暗lighten==> 变亮color-dodge==> 颜色减淡color-burn==> 颜色加深hard-light==> 强光soft-light==> 柔光difference==> 差值exclusion==> 排除hue==> 色相saturation==> 饱和度color==> 颜色luminosity==> 亮度initial==> 初始inherit==> /继承unset==> 复原
-webkit-filter:图片滤镜,可以使用多个滤镜,之间使用空格隔开
blur(11px)==> 高斯模糊brightness(120%)==> 图片高亮contrast(200%)==> 对比度grayscale(50%)==> 灰度图片hue-rotate(90deg)==> 色相旋转invert(100%)==> 反转输入图片 负片opacity(30%)==> 透明度saturate(800%)==> 饱和度sepia(100%)==> 转换为深褐色drop-shadow(8px 8px 10px red)==> 设置阴影效果
链接 <a></a>
<a href="链接网址" target＝“_blank” >链接名称</a>==> 在新建的窗口中打开链接
<a href = “javascript:添加js代码;”>点击</a>
#==> 本网页刷新 a标签不能嵌套a标签target属性:
_blank==> 在新窗口中打开被链接文档。_self==> 默认。在相同的框架中打开被链接文档。_parent==> 在父框架集中打开被链接文档。_top==> 在整个窗口中打开被链接文档framename==> 在指定的框架中打开被链接文档锚点链接 ==> 也可以使用id
<a name="名称（aaa）| id="bbb">链接终点</a>==> 定义锚点跳转的最终位置
<a href="#名称（aaa | bbb）">链接起点</a>==> 定义点击锚点,点击跳转到锚点一些常用的设置:
text-decoration: none==> 去掉链接的下划线a:link {}==> 原本的颜色 没用a:visited {}==> 访问过后的变化 没用a:hover {color: #888}==> 悬浮的时候字体颜色变化a:active {color: #999}==> 点击时候的变化- 点击链接强制执行一段代码
表格 <table></table>
<tr> </tr>行
<th> </th>表头
<td> </td>列
属性:
<summary> </summary>==> 表格摘要align="center"==> 设置文本的对齐方式bgcolor="red"==> 单元格的背景颜色layout="automtic"==> 列的宽度由单元格内容决定layout="fixed"==> 列的宽度由表格宽度和列宽决定rowspan=""==> 合并行colspan=""==> 合并列cellpadding="0"==> 单元格内容与边界的距离cellspacing="0"==> 单元格与单元格之间的距离<table cellspacing="0" cellpadding="0"> </table>==> 设置单元格之间的距离为0, 这样设置之后边框会重叠样式:
border-collapse: collapse==> 合并边框只显示一个border-spacing: 20px 120px==> 设置单元格之间的距离empty-cells:hide==> 隐藏空白单元格的边框和背景
表单 <form></form>
<fieldset> </fieldset>==> 写在表单的最外面 给包含的内容加上一个边框
<legend>123</legend>==> 在边框上加字
<input type="" name="firstname" value="">==> 根据type的设置来改变表单, name用来区别组, value表示表单的值
<textarea rows="10" cols="30"> </textarea>==> 文本域
<details> <summary open>显示</summary> 完整内容 </details>==> 当点击summary中的内容的时候显示下面的完整内容,open属性的时候默认是打开
text==> 文本输入框password==> 密码输入框button==> 普通按钮 value表示按钮上的文字submiit==> 提交按钮 value表示按钮上的文字reset==> 重置按钮 value表示按钮上的文字radio==> 单选框, 一组中的单选框name都相等checkbox==> 多选框color==> 颜色选择框, value表示颜色的值month==> 月份选择器date==> 日期选择器number: <input type="number" name="quantity" min="1" max="5">==> 选取一个范围内的数字文本框的一些属性
placeholder=""==> 文本提示autocapitalize="off"==> ios字母输入首字母大写autofocus==> 元素添加这个属性后, 页面载入的时候自动获取焦点required==> 必填字段disabled==> 禁用字段max min==> 规定输入的最大和最小值maxlength==> 规定输入最多的字符数input:focus { background-color:yellow; border-color:red;}==> 输入的时候可以改变input的样式caret-color: red;==> 修改输入框的光标颜色-webkit-appearance: none;==> 框框有内阴影修改提示信息的样式
input::-webkit-input-placeholder { color: #c2c6ce; }==> webkit内核的浏览器input:-moz-placeholder { color: #c2c6ce; }==> Firefox版本4-18input::-moz-placeholder { color: #c2c6ce; }==> Firefox版本19+input:-ms-input-placeholder { color: #c2c6ce; }==> IE浏览器
下拉列表 <select></select>
<option value="one">one</option>==> 每一项
<optgroup label="math"> <option> </option> </optgroup>==> 每一组
Selected==> 写在每一项中, 表示默认选中这一项, 所有的都是默认选中第一项
<input list="browsers">|<datalist id="browsers"> <option> </option> </datalist>==> 表示上面的输入框链接到下面ID相同的下来菜单中, 自带模糊筛选
select option { direction: rtl; }==> 下拉列表右对齐
列表 <ul></ul>
无序列表
<ul type=""> <li> </li> </ul>
disc圆圈circle空心圆square方框有序列表
<ol type=""> <li> </li> </ol>
type的值可以是1aAiI
reversed==> 倒序
start=""==> 前面的序号从第几位开始
list-style:==> 三个属性的简写
list-style-type: none==> 不使用标点list-style-position: inside outside==> 标记点的位置list-style-image: url();==> 使用图片作为标记点
边框 border & outline
border
border: 1px solid #eee==> 简写属性: 宽度 样式 颜色
当三个属性分开写的时候, 每个属性可以有四个值, 两个和一个
border-widthborder-style:dashed虚线solid实线dotted点虚线double双层线border-color
border-radius: 2px;==> 设置圆角为像素, 当是50%的时候就是圆, 可以设置四个值对应四个角
border-bottom-right-radius: 2em==> 设置右下角的圆角, 可以单独设置其中的一个圆角
border-radius: 100px 100px 0 0;==> 半圆, 设置大小为框高的两倍
border-radius: 100px 0 0==> 扇形, 设置其中一个角的大小为宽高相等
border-radius: 100px 0==> 叶子, 设置对角大小和宽高相等
设置一个盒子的宽高为0, border值为一个较大的数值, 每个边框设置不同的颜色, 会成为四个三角形, 可以设置其他三个的颜色为透明, 就会是三角形了, 同时设置圆角会好看
outline
outline: 1px solid #eee==> 简写属性: 宽度 样式 颜色
他和border的区别就是: border会占用实际的位置, 而outline不会.
阴影 box-shadow
box-shadow: 0 2px 12px #eee inser==> 设置盒子的阴影: 右偏移距离,左偏移距离,模糊度. inset是内阴影
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28)
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5)==> 好看的盒子投影
text-shadow: 0 1px 2px #999;==> 字体投影
内容修剪 overflow
overflow:visible==> 默认值。内容不会被修剪，会呈现在元素框之外
overflow:scroll==> 旁边显示滚动条
overflow:hidden==> 只显示盒子里面的内容不会溢出
overflow:auto;==> 只显垂直的滚动条, 也可以解决子元素的溢出
滚动条 scrollbar
-webkit-overflow-scrolling: touch; ==> 可以在手机端滚动的时候变得平滑
::-webkit-scrollbar {}==> 设置滚动条整体的宽度, 高度, 背景. 直接设置就行
::-webkit-scrollbar-track {}==> 设置滚动条轨道圆角，背景，内阴影
::-webkit-scrollbar-thumb {}==> 定义滑块的样式圆角，渐变
::-webkit-scrollbar-button {}==> 定义两端的按钮
#box::-webkit-scrollbar { display: none; }==> 隐藏滚动条
元素对齐 vertical-align
使元素和行中的元素堆齐
baseline==> 默认, 对齐在基线上super==> 垂直对齐文本的上标™️sub==> 垂直对齐文本的下标top==> 把元素的顶端与行中最高元素的顶端对齐text-top==> 把元素的顶端与父元素字体的顶端对齐text-top==> 把元素的顶端与父元素字体的顶端对齐bottom==> 把元素的顶端与行中最低元素的顶端对齐text-bottom==> 把元素的顶端与父元素字体的底端对齐middle==> 把元素放置在父元素的中部
定位 position
relative==> 相对定位, 相对于自身进行定位absolute==> 绝对定位, 相对于设置了定位的父元素进行定位fixed==> 固定定位, 相对于浏览器进行定位, 不随页面的滚动而发生变化sticky==> 粘性定位, 当滚动到一定位置的时候就会变成固定定位
display
none==> 此元素不会显示block==> 此元素变为块级元素inline==> 此元素变为行内元素inline-block==> 变为行内块级元素list-iten==> 此元素变为列表显示run-ni==> 根据上下文作为块级或者行内显示-webkit-flex-webkit-lihine-flex==> 此元素变为弹性布局inline-grid==> 此元素变为网格布局tabletable-cell==> 表格
元素隐藏
display: none==> 元素会完全隐藏, 不会占用空间
visibility: hidden==> 元素会不显示, 但是仍会占用之前的空间
背景渐变
线性渐变 linear
background: repeating-linear-gradient(to right, red 50%, yellow 50%)==> 先指定渐变的方向, 然后添加颜色, 之间用逗号隔开, 可以添加多个颜色, 也可以在每个颜色后面添加占比, repeating的意思是重复渐变
径向渐变 ==>> 垃圾TMD
background: radial-gradient(形状, 大小, 开始颜色, 终止颜色)
ellipse(椭圆, 默认)circle(圆形)closest-side：最近边 farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角
字体
font-style: italic | oblique ;==> 字体的样式, 斜体 | 倾斜font-family: "";==> 字体font-weght: 500==> 字体的粗细font-size: 12px;==> 字体大小color: #5a6a7a;==> 字体颜色text-indent: 2em==> 首行锁进line-height: 12px;==> 行间距, 和父元素高度一样时垂直居中text-align: left | center | right==> 文本水平对齐方式letter-spacing: 12px;==> 字母间的距离、word-spacing: 12px;==> 单词间的距离
white-space==> 文本的换行操作
normal;==> 文本会换行, 连续空格合并, 换行会保留nowrap;==> 文本禁止换行, 连续空格和换行会合并pre;==> 文本禁止换行, 连续空格和换行会保留pre-wrap;==> 文本会换行, 连续空格和换行会保留pre-line;==> 文本会换行, 连续空格合并, 换行会保留
font-variant==> 设置文本的大小写
font-variant:small-caps;==> 字体变成小型的大写字体capitalize==> 首字母大写uppercase==> 全部大写lowercase==> 全部小写
text-decoration==> 文本的线条
none==> 不限时下划线overline==> 线条在上满line-through==> 线条在中间underline==> 线条在下面
文本格式化
<b> 定义粗体文本</b>
<em>定义着重字</em>
<i>定义斜体字</i>
<small>定义小号字</samll>
<strong>定义加重语气</strong>
<sub>定义下标</sub>
<sup>定义上标</sup>
<del>啊</del>删除文字效果
<ins>啊</ins>下划线文字效果
<pre>文本内容</pre> ——保留文字的空格和换行
cursor==> 文本光标发生变化
auto==> 文本crosshair==> 十字架default==> 箭头pointer==> 小手
动画
在网页中横轴的右边为正, 垂直轴的下为正, 360deg=360度
transform:==> 变化
translate ()==> 两个参数, 从当前的位置进行移动, 负数的方向相反
translate (50px, 50px)==> 右下方移动translateX ()==> 横向向右移动, 负数相反translateY ()==> 垂直向下移动, 负数相反
rotate ()==> 一个参数, 给定度数顺时针旋转, 负数为逆时针
rotate (90deg)==> 顺时针旋转90度rotateX ()==> 围绕X轴旋转, 向上翻转, 负数相反rotateY ()==> 围绕Y轴旋转, 向右翻转, 负数相反
scale()==> 两个参数, 相对于之前元素的宽度和高度增大(正数)或者缩小(负数)
scale(-1, 1)==> 水平翻转scale()1, -1==> 垂直翻转
skew==> 两个参数, X轴和Y轴的倾斜度, 第二个参数为空默认为0, 负数表示方向相反
skewX ()==> 向X轴倾斜skewY ()==> 向Y轴倾斜
transition: all 0.5s linear 0;==> 动画的过渡, 要变化的元素 变化时间, 运动速度方式, 几米后开始
transition-property:;==> 要过渡的属性
transition-duration:;==> 过渡的时间
transition-timing-function:;==> 过渡的时间曲线
ease==> 默认, 慢快慢linear==> 相同的速度ease-in==> 慢速开始ease-out==> 慢速结束ease-in-out==> 慢速开始和结束
transition-delay:;==> 过渡几秒后开始
@keyframes name {}==> 创建一个动画
from{color: red} to{color: yellow}==> 创建一个颜色动画
0%{} 25%{} 50%{} 100%{}==> 分成阶段来创建, 可以加入变化transform
animation==> 动画运转
animation: name 1s linear 2s infinite alternate running forwards;==> 动画的简写
时间, 时长, 运动快慢, 几秒开始, 播放次数, 反向循环, 开始暂停, 最后一帧
- name, 要使用动画的名字
animation-duration: time;==> 规定动画的时长animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out;==> 规定时间曲线animation-delay: time;==> 动画几秒后开始播放, 负值的时候直接从一秒后的动画开始播放animation-iteration-count: number | infinite;==> 播放的次数, 几次或者无限次animation-direction: alternate;==> 轮流反向播放animation-play-state: running | paused;==> 动画播放和暂停animation-fill-mode: none(没变化) | forwards(最后) | backwards(开始) | both;==> 动画播放之后保留的状态
弹性盒子
任何一个容器都可以指定为Flex布局{display:-webkit-flex} 行内元素也可以指定为Flex布局 {display:lihine-flex}设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。只要给一个容器设置了弹性属性，其中的子元素就算是弹性子元素
容器横向的为主轴：main start -- main axis -- main end
容器垂直方向为交叉轴：cross start -- cross axis -- cross end
项目占据的主轴空间为：main size; 占据的交叉轴空间为：cross size;
容器的属性
flex-direction==> 决定主轴的方向，也就是内部元素的排列方式
row==> 水平从左到右 (默认)row-reverse==> 水平从右到左column==> 垂直从上往下column-reverse==> 垂直从下往上
flex-wrap==> 当内部元素在主轴上排列不下的时候是否换行和换行方式
nowarp自动缩小项目，不换行 (默认)wrap换行，第一行在上方warp-reverse换行，第一行在下方flex-flow:row wrapflex-direction和flex-warp的简写
justify-content==> 决定内部元素在主轴上的对齐方式
flex-start左对齐 (默认)flex-end右对齐center居中对齐space-between两端对齐space-around均匀分布
align-items==> 决定项目在交叉轴上如何对齐
flex-start在交叉轴的起点对齐flex-end在交叉轴的终点对齐center在交叉轴的中点对齐baseline在项目的第一行文字的基线对齐strech如果项目没有设置高度将沾满整个容器的高度 (默认)
align-content==> 定义多根轴线(主轴)的对齐方式，如果只有一条则不起作用
flex-start与交叉轴的起点对齐flex-end与交叉轴的重点对齐center与交叉轴的中点对齐space-between与交叉轴的两端对齐 轴线之间均匀分布space-around每根轴线两侧的间隔都相等stretch轴线占满整个交叉轴 (默认)
项目的属性
order==> 定义项目的排列顺序，数值越小，排列越靠前 默认为0
flex-grow==> 定义项目的放大比例 默认为0 存在剩余空间也不放大, 如果所有项目的属性都为1，则他们将等分剩余的空间, 如果一个项目的属性为2，其他的项目为1，前者占据空间比其他多一倍
flex-shrink==> 定义项目的缩小比例 默认为1 空间不足时项目缩小, 如果所有的项目属性为1，空间不足时，等比例缩小, 如果一个项目属性为0，其他项目都为1，空间不足时，前者不缩小，其余的缩小, 负数值无效
flex-basis==> 定义分配多余空间之前，项目占据的主轴空间, 可以设置大小，空间将固定.它的默认值为auto，即项目的本来大小。
flex flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self==> 允许单个项目与其他项目有不一样的对齐方式
默认为auto继承父元素的align-items属性，没有父元素等同于 stretchflex-start在交叉轴的起点对齐flex-end在交叉轴的终点对齐center在交叉轴的中点对齐baseline在项目的第一行文字的基线对齐strech如果项目没有设置高度将沾满整个容器的高度
网格盒子
任何一个元素都可以设置成网格盒子，display: grid; 也可以设置成行内盒子 display: inline-grid注意，设为网格布局以后，容器的float、display: inline-block、display: table-cell、vertical-align和column等设置都将失效。
容器属性：
grid-template-columns; 10px 10px 10px 10px; ----设置容器的列宽
grid-template-rows; 10px 10px ; ---- 设置容器的行宽
除了使用绝对单位，还可以使用百分比。当网格很多的时候，可以使用repeat( )方法来改写
grid-template-columns: repeat( 2，100px ); 意思就是重复两次100px
grid-template-columns: repeat( 2 , 10px 120px )； 意思是可以重复一组
grid-template-columns: repeat( auto-fill, 100px )； —— 设置列宽度之后，重复几个没有说明，会根据页面的宽度自动填充
grid-template-columns:1fr 1fr ；会平分宽度 可以和绝对长度一起使用
grid-template-columns:1fr 1fr minimal( 100px 200px )；第三列的宽度最小为100px，当空间足够时可以变大，但是最大为200px；
grid-template-columns:100px auto 200px ；auto会根据浏览器的自己决定宽度
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; 指定网格线的名称，一个网格线可以有多个名称[a b]
grid-row-gap: 20px; ---设置行与行之间的间隔
grid-column-gap: 20px; —设置列与列之间的间隔
grid-gap : 行间隔 列间隔； 如果省略了第二个值，则认为是间隔一样
最新的标准已经去掉了前缀grid
grid-template-areas: ‘ a b c ‘; 给区域命名
grid-auto-flow: ; row--先行后列 column--先列后行
网格子元素的默认排列顺序是先行后列；
row dense; column dense;
justify-items： 设置单元格内容的水平位置
align-items: 设置单元格内容的垂直位置
place-items: 两个属性的缩写 ·
start：对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部剧中
stretch：拉伸，沾满整个宽度
justify-content： 设置单元格内容的水平位置
align-content: 设置单元格内容的垂直位置
place-content: 两个属性的缩写 ·省略第二个值之后会默认等于第一个值
start：对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部剧中
stretch：拉伸，沾满整个宽度
space-around： 每个项目两边的间隔相等
space-between；项目与项目的间隔相等，与容器边框没有间隔
space-evenly： 项目与项目，项目与容器边框的间隔相等
grid-auto-columns 和 grid-auto-rows 用来自动创建多余网格的列宽和行高
grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。
项目属性
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
grid-area属性指定项目放在哪一个区域。
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。
place-self属性是align-self属性和justify-self属性的合并简写形式。
选择器
*==> 通配符
元素选择器
类选择器.class
ID选择器#id
伪类选择器
:link==> 未访问的样式, L-V-H-A:visited==> 访问后的样式:hover==> 鼠标悬浮的样式:active==> 按下和松开时的样式:focus==> 获取焦点的样式::before{content:"";}::after{content:"";}==> 每个元素都有:first-child:last-child==> 一组中第一个和最后一个元素:nth-child(an+b)==> 一组中的这个元素进行排序, an为每次相加的数, b为初使的位置:nth-last-child(an+b)==> 从后面开始, an为每次相加的数, b为初使的位置, 为具体的数字的时候就是哪个:nth-child(even)nth-child(odd)==> 奇数, 偶数选择器:nth-child(-n+3)==> 匹配前三个:nth-last-child(-n+3)==> 匹配最后三个:enabled:disabled==> 被激活, 被禁用的元素关系选择器
div.name==> 为name的div.a,.b,.c==> 三个都选div p==> div中的pdiv > p==> div中的pdiv + p==> 选取和这个div同为一个父元素的接下来的元素div ~ p==> div的后续兄弟!
434_1.png
23
