本文章主要整理了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-18
• input::-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的值可以是 1 a A i I
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-width
• border-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 ==> 此元素变为网格布局
• table table-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 wrap flex-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属性，没有父元素等同于 stretch
• flex-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中的p
• div > p ==> div中的p
• div + p ==> 选取和这个div同为一个父元素的接下来的元素
• div ~ p ==> div的后续兄弟!

434_1.png
23