前端代码笔记

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：, 加粗 单元格 ； ,链接； ,图片链接

易忘属性代码

table标签

cellspacing单元格之间的距离（外边框）

cellpadding 单元格和内容之间的距离（内边框）

边框宽度，单位px

对齐方式

• • target属性有四个属性

  • <target="_blank">新建窗口打开超链接

快捷键

• ctrl+enter 换行
• alt+shift+↓ 复制行代码

HTML代码

相对路径路径

• ./当前路径
• …/上一层路径

字符实体(常用)

• &nbsp；空格
• &gt； 大于号＞
• &lt；小于好＜

table的属性

cellspacing单元格之间的距离（外边框）

cellpadding 单元格和内容之间的距离（内边框）

其他属性:border 边框宽度；align对其方式；

• tr的属性 ；td的属性

  valign 设置一行中单元格垂直对其方式，有三种方式：top；middle；bottom

• th：存放列标题数据（默认粗字体,居中）

• caption:设置表格的标题，必须放在

  内

• 表格头部：thead

  表格主题：tbody

  表格底部：tfoot

下拉菜单标签

select下拉按钮 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HfyDM2y9-1608869899989)(HTML 内联元素.assets/1606201399717.png)]

option表示下拉项[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OBcpS3rQ-1608869899993)(HTML 内联元素.assets/1606201940538.png)]

form标签和input标签

form标签

• fieldset产生表单框

• legend[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x0Pc6jOi-1608869899995)(HTML 内联元素.assets/1606207682851.png)]代码[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fpe2iVjx-1608869899997)(HTML 内联元素.assets/1606207724393.png)]

• label为了提高用户体验[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bQv9IC1m-1608869899998)(HTML 内联元素.assets/1606215129579.png)]

当点击账号或者密码时光标跳到输入框

input输入框有以下类型

• text：文本输入框
• password：密码输入框
• submit：提交表单按钮
• reset：重置
• radio；单选框按钮
• checkbox；复选框按钮
• file；上传文件组件

注意事项

1. 默认带有文字的按钮可以通过value属性修改
2. 单选框按钮成为真正单选的设置方法：吧单选按钮的设置同一个name
3. 设置单选框和复选框默认被选择状态的属性：checked=“checked”

文本域标签textarea

• textarea表示文本域标签，作用是输入大段文本

css

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GDJ16u6t-1608869900000)(HTML 内联元素.assets/1606306892728.png)]

块级标签

div;p;h;ol;ul;li; >dt,dd table>td

行内标签

span,img,strong,input,a,textarea

内外间距

内边距：padding

外边距：margin

边框属性border

边框类型： solid 实线 dashed虚线 dotted点线

选择器

类选择器 class=“内容” .内容

id选择器 id=“内容” #内容

在css中不能用数字作为命名

• 后代选择器 用空格表示后代关系 例：ol li{}
• 并集选择器 用逗号隔开表示共同选中，作用是一起选中书写样式；例：h1,p,div{}

background属性

background：背景颜色 背景图 平铺方式 水平位置 垂直位置 固定

例：background:" pink url() not-repeat left top fixed"

平铺方式：no-repeat 不平铺；repeat-x 横向平铺；repeat-y纵向平铺

背景图定位坐标的书写方式：

1.方向特殊值：水平位置：left center right 垂直位置：top center bottom

2.具体像素值：例如100px 100px 可以是负值

背景图固定模式设置为fixed，背景图固定于屏幕;

注意事项：应用背景图的标签左上角是坐标原点（0，0）

background-repeat:背景平铺方式

background-position：背景定位

浮动

float表示浮动属性 他的值：left right；（没有center）作用是实现盒子的左对齐或者右对齐

注意事项“网页布局中，最稳定的排列方式就是块级标签上下垂直排布

超链接伪类

这是一种状态，并不是默认的样式，而是出触发的一种样式

a：link 表示超链接默认样式

a：visited 超链接访问过之后的样式

a：hover 鼠标移上去的样式

a：active 鼠标点击的样式

注意事项：实际项目中只写a和a：hover的样式

*{} 清空

margin：0 padding：0 border：0 list-style:none

显示模式display

文本缩进和字词间距

text-indent 文本缩进 单位em（一个字的尺寸）

letter-spacing 字间距

word-spacing 词间距{空格间距} how are you

溢出隐藏

overflow：hidden 必须设置宽高溢出的隐藏

overflow：auto 出现滚动条

盒子模型

给一个固定尺寸的盒子添加padding会增加盒子的尺寸，可以通过改变盒子的宽高减去padding的尺寸保证尺寸不变

浮动流和标准流和定位

脱离标准流时，元素display变更为行内块

position定位也会

相对定位：position：relative 未脱离标准流

绝对定位：position：absolute 脱离标准流

固定定位：positiong：fixed 脱离

使用浮动流后元素变成块级元素

z-index图层

z-index：1 数字越大 图层越优先

visibility

visibility: hidden 隐藏元素, 依然占据空间

display:none 隐藏元素，不占据空间

colspan=“2”

横向合并2个单元格td

rwospan=“2”

纵向合并2个单元格td