HTML

首页 > 代码库 > HTML

2024-09-17 17:08:16 221人阅读

`<p>...</p> 段落
zh-CN
<s>...</s>字体中间有条线的字体格式属于行内标签
<h1>...</h1> 标题
<img src="http://www.mamicode.com/文件位置" >插入图 alt图片错误的显示
<img src="http://www.mamicode.com/文件位置" title="要的内容"> 鼠标点上去有个显示文字效果
<a href="http://www.mamicode.com/网址">网站名</a> 链接
h<header></header>代表div标签用
<nav><nav>用于nav导航部分
<ul>
<li>列表名</li>
<li>列表名</li>
<li>列表名</li>无序列
<li>列表名</li>
</ul>
<span></span> 纯净的标签可以直接在一行里行列标签

<ol> type 设置其标题的格式
<li>列表名</li>
<li>列表名</li>
<li>列表名</li> 有序列表
<li>列表名</li>
</ol>
<sub>文字</sub> 下标

<sup>1</sup> 上标

<strong>加粗内容</strong> <b></b> ——加粗——行列加粗
<em>倾斜内容</em> ——变斜——行列
<i></i> 做小标签变斜
{<form action="">提交数据的所有表单总共只有一个form
<input readonly type="text">
<input type="password"> —一个输入框——
password 设置为密码格式的框}
<input style="text" value="http://www.mamicode.com/文字"> 输入框为文本格式里边能输字
<input type="radio" name="radio"> 选择的圆框单选
<input type="text" placeholder="文字内容"> 提示信息的内容
<input type="submit"value=""> 按钮标签提交信息时
<input type="button" value="http://www.mamicode.com/登录"> 按钮
<input type="checkbox">文字多选按钮
<input type="color"> 色块
<input type="number">
<input type="range"> 表示一个下滑的滚动条
required （readonly 只能看不能用）
text 单行输入
button 按钮
textarea 多行输入
checked 表示选中状态
（<select name="" id="" >
<option value="">请输入文字</option> 下拉的框
<option valie="" selected>武汉</option>）
<input type="file"> 浏览的文件选择
outline:none; 点击没有边框
<label> 在表单里可以该样式
}
<div></div> ——容器整个封装——
<stye></stye> ——设置格式——

<dl class="list">
<dt></dt> 自定义列表
<dd></dd>
</dl>
cursor:pointer; 变化为手型

class ——命名——
.创的名字 ——引用那个东西——

{float:right} ——那个总东西放的位置——
{font-size:16xp} ——文字的大小——
{color} ——颜色——
margin-lift:26px ——调间距左间距——外边距
padding 调内边距
font-weight:bold；字体加粗
font-weight:normal 字体正常
font-style 字体的样式为正常
display:inline-block 创建矩形
width 设置宽度
height 设置高度
background-color: 设置颜色
text-decoration：none 文本修饰无
text-align:center 文本居中
text-align:right 文本在右边
line-height 行高
margin-left:auto和 margin-right:auto
margin-top 顶高 bottom 底部
background-img src="" 背景图片
background-position 背景的位置
text-indent:30xp 文本缩进30像素
border 边框 border-color:transparent 边框透明的
solid 实线 dotted 点线 dashed虚线
repeat：no-repeat 不重复
margin
clear:both 在出现之前不浮动
onmouseover="style.color=‘red‘" 设置字体鼠标移动到变红色。
onmouseout="style.color=‘blue‘" 设置字体鼠标移动开的颜色为蓝色
onmouseover="style.background=‘red‘"设置鼠标移动到其背景的颜色为红色
:hover {background-color:blue} 鼠标移动变色。
list-style:none 表示列表没有前面的圆点《用于列表中ul》
<link rel="stylesheet" href="http://www.mamicode.com/应用的文件的位置和名字"> 应用一个格式
应用的格式是css的格式如div{color:#fff;background: #000;width: 50px;line-height: 30px;}
在位置引用时文件在同一个位置就直接输入文件名
../ 路径返回一级
id="" 改名字其名字是唯一的引用用#号来用#+名字
class 可以重复的名字与id不同引用用.+名字
border是组合形式{宽度，颜色，样式}
border-width;border-color;border-style
background:颜色 url(文件地名字) 设置的位置 no-repeat
*{padding:0;margin:0;} 清除默认的内外边距
.list li:hover{}直接设置列表的鼠标点击变化命令

text-decoration:underline; 添加下划线
block 块状标签
inline 行内元素
inline-block 行内块状元素
.clearfix:after{content:‘‘;display:block;clear:both}
  表示空格的意思
border-radius:4px; 表示圆角矩形；
position:absolute; 绝对定位就是要浮出来的动西
position:relative; 相对的的位置
position:fixed; 固定定位是相对于浏览器而言的
border-radius:50%; 圆
background:rgba(0,0,0,0);调其明亮度
img{vertical-align: middle;}设置其图片得边距为0
word-wrap:break-word 英文单词强制换行

overflow:hidden;
white-space:nowrap; 字体超过一行宽度，自动省略
text-overflow:ellipsis

word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2; 字体超出省略第二行开始
-webkit-box-orient:vertical;
overflow:hidden;

z-index:1; 表示定位元素的层级关系；值越大层级越高
opacity:0 隐藏效果不会使其失效；透明度。
border-collapse:collapse; 合并重叠边框
td,th{}群组选择器；
<table cellpadding="0" cellspacing="0" border:1px;清除单元格之间的间距>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td> 表格的结构
</tr>
</tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>
colspan"2" 横向合并
rowspan"2" 纵向合并

大框架display:table;转化为表格
里边的内容居中的单元格用display:table-cell;表示转化为单元格的格式；
vertical-align:middle;上下居中；
first-chlid 第一个选择器 IE 8及以下只支持first-child;
nth-chlid(2) 选择第二个是行列的第几行不是第几个。
last-child 最后一个
可以在child(2n)表示为偶数的形式。（2n+1）为奇数

p:nth-of-type(2) 表示这个元素出现的第几个。
雪碧图，的用法，利用背景图来截取图片
!important 提高优先级让其效果提高。
text-align:justify; 表示英文的文本自动左右居中
<a href="http://www.mamicode.com/#id名字"></a>表示跳转到页面的相应位置
box-shadow:4px 4px 4px 1px #000
表示表示阴影模糊
阴影左右的模度
的上糊半
下劲
box-shadow:inset 2px 2px 3px background:rgba(0,0,0,0.6),2px 2px 3px background:rgba(0,0,0,0.6)
内边模糊度
text-shadow:2px 2px 2px red;字体的外边投影；
{
<audio src="">
<video src="http://www.mamicode.com/文件位置" controls="controls" autoplay> 引用视频为可控的播放
</video>
loop 为自动播放
<source src="http://www.mamicode.com/路径" type="video/mp4"
<source src="http://www.mamicode.com/路径" type="video/ogg"
<source src="http://www.mamicode.com/路径" type="video/webm"

}

filter:alpha(opacity=60); 在IE下显示的透明度

css3 选择器

+号紧跟在后面的一个元素
~表示紧跟后面的所有元素
属性选择器
a[href]{color:red;}
主要是用在表单里边的；用得不多。
data是自定义属性
p:not(.a)所有的p标签除了.a以外的都被选中。
.b:before{content:‘‘;}在b的前面要加的东西
.b:after{content:‘‘;}在b的后面的内容要加的东西
定位时用在其元素的本身，
.b{position:relative;}
.b:before{position:absolute;content:‘‘;}
text-shadow:1px 0px 0px white,-1px 0px 0px white,
0px 1px 0px white,0px -1px 0px white,1px 2px 2px red;
字体描边效果
background:content-box; 可以有两层边框
-webkit-background-size:cover 谷歌支持背景会随文本的大小而裁剪文件自动占满
高宽
-moz-火狐
-ms-IE
-o- opera浏览器的
background:-webkit-linear-gradient(left,red,blue);
background:-o-linear-gradient(left,red,blue); 渐变的效果
background:-moz-linear-gradient(left,red,blue);
background:radial-gradient(white,black)镜像渐变
text-stroke:2px red;描边的效果
transition:width 1s; 动画效果的延迟效果；
box-sizing:border-box;盒子模型计算变为w+m不用考虑padding的变化。
em表示父级大小相关联的。
rem表示跟随html的大小变化
font-size:1em;
@media screen and (min-width:0px) and (max-width:299px){
body{
font-size:12px;
}
}
width:calc(50%-1px);表示计算
font-size:calc(100vw/6.4)
transition-delay:0规定过度效果何时开始
2D
旋转
transform:translate(x,y)表示沿着xy轴方向移动多少像素
transform:scale(x,y)表示为缩放的效果，为x轴和y轴方向的缩放；
transform:rotate(30deg) 表示顺时针旋转30度
transform:skew(x,y) 倾斜转换，一个是x轴一个是y轴方向。
transform:translate() scale();
-webkit-transform:arign(0,0);
transform:perspective(0px);3D旋转时的视距。
max-width:100%; 写在图片里表示当大小大于原图大小时图片不会增大，
小于原图时会占满。

[
animation:xxx 5s （延迟时间)
infinite(次数)
运动的方式(alternate反向)（linear匀速）(ease-in-out低速开始低速结束)
forwards(保留动画结束时的状态)backwards(返回起始的状态)，
@keyframes xxx{
0%{
transform:translate()
}
100%{

}
}
@keyframes xxx{
from{
transform:translate()
}
to{

}
}
]

text-decoration:overline(文本上一条线) line-through(穿过文本的线)blink(定义闪烁的文本);
overflow-x:scroll;
a:active{
点击的效果
}
input:focus{
background:
}
a:line{
color:#fff 未访问时的状态就是开始的状态
}

a:visited{
color:#fff 鼠标点击后再次停留的效果
}
a:active{
鼠标点击下去的效果
}
reverse 反向
css弹性布局
{
display:flex;转化为弹性盒子
父级里边的东西
flex-direction:row;表示一行排列
flex-direction:column;表示在纵向排列
flex-wrap:wrap;表示超出自动换行，不能写宽度。
flex-wrap:nowrap;不换行，自动建宽度。
justify-content:flex-start;表示都在往左排列，整体在左边。
justify-content:flex-end;表示往右对齐相当于text-aligin:right;
justify-content:center;表示整体居中排列在一起。
justify-content:space-around;表示整体分布排列，要分开两边又间距
justify-content:space-between;表示整体分布左右两边没有间距。
align-content:flex-start;表示在y轴方向的上对齐
align-content就是在轴方向的改变，与justify的轴向不同。
align-items:baseline 沿着内容开始顶对齐。
align-content:center;表示多行的居中
align-content属性必须用在多行输入
align-items:center;表示居中效果上下居中；
子级里边的东西
order:1；值越小在前面可以-1
flex-shrink:3;占的比例值越大表示越小。
收缩的算法是shrink里面的值加上总的个数减一。
flex-grow:3 增长比例
算法是根据盒子总宽减去子级的长度之和再分配其成分；
flex-basis:20%;收缩到20%的宽度；
align-self:flex-start; 表示里边的内容居上对齐
align-self:flex-end;表示里边的内容居下对齐
align-self:center;子级里的内容上下居中
align-self:baseline;表示内容自动对齐一个基准线。
align-self: stretch;表示其上的纵向上的自动填充
}
visibility:hidden;表示不可见要占位置
visibility:visible;表示可见
letter-spacing:12px;字体之间的间距
pointer-events:none;表示不能点击的css代码。
filter:alpha(opacity=100) 适应IE而写的透明度变化
cursor:url()鼠标插入图片。
cursor:n-resize;表示的是鼠标移到上面时变为增大的样式。
手机端去除高亮的效果
-webkit-tap-highlight-color:transparent;
-webkit-appearance:none;
-webkit-text-size-adjust:none;
cursor:move;鼠标变为十字架的形状。
cursor:n-resize;鼠标变为一条杠。
-webkit-text-size-adjust: none;手机端的文字格式使其文字大小
可以小于12px的值
/*transform-origin:50% 50% 0; X方向 Y方向 Z方向*/
设置旋转中心。
transform:translateZ(-202px);/*向里移动202px*/

HTML

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > HTML

HTML

看完仍有疑问？有类似问题直接问程序猿