前端html+css笔记

前端

Html:

html标签

1. < strong >加粗 --文本格式化标签

2. < em >倾斜

3. < ins >下划线

4. < del >删除

5. < img src="图片的url" >src用于指定图像的位置名称(属性名+属性值=属性)

• alt 替换文本
• title 提示文本
• width 图片宽度

6. < a href="">链接（段落内空格+

• target="_blank"跳转新窗口

7. < audio >音频

• loop 循环播放
• autoplay 自动播放 （禁用
• controls 显示音频面板

8. < video sec=>视频

• muted 静音播放
• 同（7）

9 . 列表

无序列表：< ul > < li >

有序列表：< ol > < li >

定义列表：< dl > < dt(标题)> < dd(描述)>（一个标题对应多个内容

10. 表格

• < table > < tr(行)> < td(内容)> < th(表头)>
• < thead > < tbody > < tfoot > (表格结构标签-代码优化)
• rowspan' colspan' （合并单元格）[ rowspan ="2" ]

11. 表单（登录，注册，搜索

• < input type="">
• placeholder' （占位文本）
• radio -name -checked'
• file -multiple'
• checkbox -checked'

type属性值	说明
text	文本框，输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

12. 下拉菜单

• < select > < option > -selected'

13. 文本域

• < textarea >

14. < label >

• 增大点击范围[input...id label...for] (*直接label包裹)

15. 按钮

type属性值	说明
submit	提交数据到后台（默认
reset	重置
button	普通

16. < form >表单区域 -action=""

无语义布局标签

17. < div >独占一行

18. < span >不换行

CTRL+/==注释

单标签

1. < hr >水平线
2. < br >换行

字符实体

• 空格 - &nbsp;
• < - &lt;
• > - &gt;

CSS

引入

外部引入< link rel="stylesheet" href="" >
类选择器

一个标签可用多个类名
文字控制属性

（google默认大小16px

属性	效果
font-family	字体(最后 衬线)
text-indent	文本缩进（em）
text-align	水平对其方式-设置在父级
text-decoration	修饰线
font-weight	加粗'数字
font-style	italic倾斜
color	RGBA

• text-decoration line-through'删除线 over...' under...'

选择器

• 通配<标签<类<id<行内<important

• div span
• div > span
• span,div,p
• p.box
• hover:悬停
• 超链接：:hover :link :visited :hover :active

Emment

.box------

bgc------

w500------

背景属性

• background-image url'
• background-repeat no-...' ...-x' ...-y'
• background-position x,y'
• background-size contain/cover
• background-attachment

显示模式

• 块级 block；
• 行内块 inline-block；
• 行内 inline；

结构伪类选择器

E:nth-child(N) N------ 2n ;2n+1...
伪元素选择器

E::before / E::after （content'

盒子模型

• border
• padding top,right,bottom,left/top,left-right,bottom/top-bottom,left-right
• 尺寸 box-sizing:border-box
• margin (0,auto(要有盒子宽度))
• 元素溢出overflow hidden' scroll' auto' 塌陷问题
• 塌陷：父级设置 overflow：hidden/border-top；取消子级margin设置父级padding

浮动

块元素水平 添加后脱离标准流

• 清除浮动 单/双微元素法