前端复习录01

**我们通常用<strong>替换加粗的<b>,用<em>替换斜体的，<i>;**
**<small>缩小文本,<sub>下标文字向下,<sup>上标文字向上。<pre>原文本输出**

显示计算机或者编程代码的：
**<code>计算机输出，<kbd>键盘输入,<tt>打字机文本，<samp>计算机代码样本,<var>计算机变量。**
**<bdo dir="rtl">文字从右边向左显示。**
**<del>中划线，<ins>下换线**

 - 为搜索引擎定义关键字：<meta name="keywords" content="html,css,js">
 - 每30秒刷新当前页面。<meta http-equiv="refresh" content="30">
 - 定义文字为中文显示:<meta charset="utf-8">

*font-family:显示的文字字体样式*
*text-align:center;文字对齐方式*

**表格的关系：table>tr>td**

## 表单：

 - ```html <form action=" "> <input type="text" name="one"> <input
   type="password" name="mima"> <input type="radio" name="dd"
   value="xuan"> <input type="radio" name="dd" value="cuan"> <input
   type="checkbox" name="xuank" value="xuand"> <input type="submit"
   value="tijiao"> </form>

下拉表单：form>select>option（在这个里面那个标签里面加了selected就会先预选择）** mark标签是显示高亮文字 显示进度程度：(类似于进度条）

<meter value="2" min="0"

```c
   max="10"></meter> <meter value="0.6"></meter> 进度条标签：<progress>
   <progress value="22" max="100"> 文字拼音：
   <ruby>字<rp>(</rp><rt>zi</rt><rp>)</rp></ruby> 插入音频： <audio
   controls><source src="horse.ogg" type="audio/ogg"></audio> 插入视频：
   <video width="320" height="240" controls><source src="movie.mp4"
   type="video/mp4"></video> 点击三角显示文字：
   <details><summary>ddd</summary><p>dd</p></details>

   文本显示框：（可以拉）<textarea rows="10" cols="30"></textarea>
   插入背景图片：background-image:url("") no-repeat(不平铺）;
   text-decoration:overline;//上划线 text-decoration:line-through;//中划线
   text-decoration:underline;//下划线 text-decoration:none；//无线
   text-transform:uppercase;//全部大写 text-transform:lowercase;//全部小写
   text-transform:capitalize;//每个单词开头大写
   text-indent:50px;开头缩进50px，也可以写2em。 letter-spacing:2px;(可以正负，是每个字的字距）
   line-height:70%;行距 文字里面插入图片：vertical-align:text-top;text-bottom;
   text-shadow:2px 2px red;文字阴影 font-family:文字样式，可以用逗号隔开
   font-style:normal;正常字体 font-style:italic;斜体 font-weight:200;文字粗细
   a:link未访问，a:visited已访问，a:hover触摸，a:active被点击的那一刻（顺序不能变）
   设置ul的样式：list-style:square url("");
   表格的横线只有一条线显示，在给th标签设置边框的时候，给table加上border-collapse:collapse;
   表格内容全部上对齐，给td标签加上：vertical-align:top;
   border-style:(none无，dotted虚线，dashed虚线，double双条边框，也可以选择多个成为混合边框）
   border-top-style:dotted;
   隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
   
   visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
   可以通过设置z-index:10;来改变层级关系； ！sticky定位不滚动根据HTML定位，滚动时自动成为顶部。
   position：sticky；top：0； overflow：hidden；超出部分隐藏消失
   clear：both；（清除浮动，表示元素两侧不能出现浮动元素） ：表示伪类：first-child（父级第一个子元素） 以下为伪元素：
   ：first-letter设置文本开头第一个的样式。
   ：before在元素的内容前插入新内容，content：url（）或者直接插入文字“文字”； opacity：设置透明度0~1；
   @media媒体类型的各种不同显示(print打印机，projection幻灯片，screen电脑） 相应式布局：
   css3新增的属性“box-sizing:border-box”改属性的默认值是content-box;设置前面的代码是表示
   子元素不会集成父元素的box的宽高，宽高=内边距+边框+自身宽高。 <meta name="viewport"
   content="width=device-width,initial-scale=1">

插入一句题外话：因为现在的table不如div简洁，想要类似表格的布局可以使用display:table;
table此元素会作为块级表格来显示，表格前后带有换行符=<table>
table-row=<tr>
table-cell=<td>or<th>
@media screen and(max-width:600px){//响应式布局小于600px时改为上下布局
.column{
width"100%'
}

}

！important最高等级，此声明将覆盖任何其他声明
css渐变：background-image:linear-gradient(#fff,#000);从上到下
background-image:linear-gradient(to right,red,yellow);从左到右
background-image:linear-gradient(to bottom right,red, yellow);对角线
bacrground-image:linear-gradient(-90deg,red,yellow);各种角度的渐变
background-image:radial-gradient(red,yellow,green);径向渐变
渐变到透明的效果可以使用rgba（255，0，0，0）最后一个值表示透明度，0为透明不见，1为显示

2D：
transform:translate(50px,100px)平移
transform:rotate(30deg)旋转
transform:scale(2,3)放大缩小
transform:skew(30deg,60deg)倾斜
matrix包括六个参数，包含旋转，缩放，平移，倾斜
以上所有的参数加上大写X或者Y都是转换成3D效果
过渡transition

！！！-ms-之后的代码适用于IE9，-webkit-适用于safari and chrome

css3动画：@keyframes
animation:k 5s;
@keyframes k{
from{width:500px;}
to{width:400px;}
}

把div里面的文字分成多列：column-count:4;
column-gap:40px;列于列的间隙
column-rule-style:ditted;列之间的边框
 

resize:both;值改元素由用户调整其大小。
弹性盒子：把代码都写在父级里面：
display:flex;
justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start左对齐，center居中并列，flex-end右对齐，space-between开头结尾分布，space-around开头结尾空隙
























js!!!!!1      !!!1！
事件属性：
onclick：鼠标点击，ondblclick：双击，onmousedown：按下，onmousemove：移动
onmouseout：移出，onmouseover：悬停，onmouseup：松开
onkeydown按下，onkeypress按下又松开时，onkeyup键盘被松开



用document.write("<h1>dd</h1>");等于在HTML里面写入h1标签
var a=new Date().getHours()//获取·当前的小时，按24制的
var a=new Date().getDay();获取当前星期几，数字表示
var a=Math.random();这个是在说0~1之间的随机取值

案例1：
switch(d){
  case 0:x="11";
  break;
  case 1:x="11";
  break; 
  case 2:x="11";
  break;
}

.innerHTML改变HTML里面的文字
confirm()方法（可输入字符串），会弹出一个带有确定跟取消的提示框，当按下确定时，改方法返回TRUE，反之亦然。
prompt()方法（可输入字符串），会弹出一个语句提示跟对话框，改方法可返回对话框的输入内容（改方法可写入2个字符串用逗号隔开，前面为提示，后面为对话框默认内容）
在HTML里面写入onclick=“”，需要用双引号括起来
案例：带参数的函数
<button onclick='myK("kang","wizard")'></button>
function myK(name,job){
  alert("welcome"+name+",the"+job);
}