整理h5,css

H5

常用标签:

块元素(独占一行):

​ h1~h6,br,hr,li,dl,dt,dd

行内元素(在一行内显示):

​ img,a,em,strong

链接:4种

​ 图片链接

​ title:光标在图片上面显示文字

​ alt:图片路径不正确时显示的文字

​ 页面链接

​ href:链接跳转的目标路径

​ 锚链接

​ 功能性链接

其他符号:

 空格
>大于
<小于
©版权
&quto;引号

表格与媒体元素:

列表

有序:ol
无序:ul
自定义:<dl><dt><dd></dd></dt></dl>

表格:

​ tr表示一行

​ td表示一列

​ colspan:跨列

​ rowspan:跨行

媒体元素:

视频:

​ 格式:标签

​ 属性:

​ controls播放控件

​ autoplay:自动播放

音频:

​ 格式:标签为

​ 属性和视频一样

页面结构:

6个: header,section,foolter,aside,article,nav

表单form:

提交方式:get,post

​ post相对安全

常见属性:

input中type属性

1. text

2. password

3. checkedbox

4. radio

5. email

6. numble

7. range

8. textarea

9. file enctpe=“mulipart/form-data”

10. select

11. reset

12. button

13. submit

    其他属性:

    1. value

    2. name

    3. action

    4. disable

    5. readonly

    6. placeseach:用户提示

    7. pattem:验证
       #选择器:

基本选择器:

​ 标签选择器,id选择器,类选择器

​ 优先级:id>class>标签

高级选择器:

层次选择器:

​ 后代选择器:E F

​ 子选择器:E>F

​ 兄弟选择器:E+F

​ 通用兄弟选择器:E~F

结构伪类选择器:

​ E:first-child

​ E:last-child

​ E F:nth-child(num)

​ E:first-of-type

​ E:last-of-type

​ E F:nth-of-type(num)

css美化

span标签凸显样式

字体样式:

​ font-family:字体类型,宋体还是楷体等

​ font-size:字体大小

​ font-stype:字体风格,italic倾斜,normal正常

​ font-weight:字体粗细,bold粗,bolder更粗,lighter:更细

​ 简写: font:风格 粗细 大小 字体类型

文本样式:

​ color:颜色

​ text-indent:首行缩进

​ text-align:对齐方式

​ line-height:行高或者行距

​ text-decoration:文本装饰,none,默认值无,underline下划线,overline上划线,

文本阴影:

​ text-shadow: color x-offset y-offset blur-radius(阴影半径)

超链接伪类;

​ a:link{} 未访问样式

​ a:visited{} 访问过后的样子

​ a:hover{} 鼠标移上去的样式

​ a:active{} 鼠标点击未释放的样式

列表样式:

​ list-stlye-type:none无标记符号

​ disc实心

​ circle空圆心

​ square实心正方形

​ decimal数字

背景:

​ background-color:

​ background-image: url(路径)

​ background-repeat平铺:repeat沿xy平铺,no-repeat不平铺,repeat-x,repeat-y

​ 线性渐变:

​ background:linear-gradient(position,color,color…)

盒子:

边框

​ border-color

​ border-width粗细

​ thin:瘦的

​ medium:中等

​ thick:厚的

​ border-style:

​ dotted:点虚线

​ dashed:虚线

​ solid:实线

​ double:双实线

border: 1px dashed red;

​ 粗细 样式 颜色

边距:

​ padding:内边距

​ margin:外边距

圆角边框:

<style type="text/css">
    div{
     width: 100px;
     height: 100px;
     border: 1px solid red;
     /*border-radius: 50%;*/  /*圓形*/
    /*只要是负数就没有弧度了*/
    /*border-radius: 15px  13px 15px 13px;*/  /*四個角都有弧度*/
    /*border-radius: 50px  0px 0px 50px;*/  /*半圆*/
    /*border-radius: 50px  0px 0px 0px;*/  /*扇形*/
    box-shadow: inset 5px 5px 5px blue;
     /*   阴影的方式X: Y   阴影半径 阴影颜色; */
    }
    
    
  </style>

盒子阴影:

​ box-shadow:inset(阴影位置) x-offset y-offset blur-radius(阴影半径) color

box-shadow: inset 5px 5px 5px blue;