HTML元素及属性

最新推荐文章于 2024-08-05 16:12:38 发布

JoshXz

最新推荐文章于 2024-08-05 16:12:38 发布

阅读量624

点赞数

分类专栏： HTML元素及属性文章标签： HTML

本文链接：https://blog.csdn.net/JoshXz/article/details/99705946

版权

HTML元素及属性专栏收录该内容

1 篇文章 0 订阅

订阅专栏

background属性

rgb：设置背景颜色

rgba：(r：红色+g：绿色+b：蓝色+a：透明度) 设置背景颜色的透明度

color：设置背景颜色

image：设置背景图片地址

repeat：设置背景图片如何重复平铺

position：设置背景图片的位置

attachment：设置背景图片是固定还是随着页面滚动条滚动

position属性--定位

static：默认值（加不加都可以）

relative：相对定位（元素可以在当前位置左右，上下移动而周围的元素位置保持不变）

left（表示偏移后左边离原来位置左边的距离，正值表示向右移，负值表示向左移）

right（右）

top（上）

bottom（下）

属性可以为百分数，该百分数对应的基数就是该元素父元素的宽和高值

absolute：绝对定位 relative>static

left（表示移动元素左边框距离父元素左边框的距离

right

top

bottom

fixed：相对于浏览器窗口定位

相对于当前浏览器可视窗口固定，就相当于与很多网页左右两边的广告一样，不管你如何滚动鼠标的滑轮，它都在那个位置

margin属性--外边距

外边距：一个参数：设置4个外边距

二个参数：上外边距和下外边距、左外边距和右外边距

三个参数：上外边距、左右外边距、下外边距

四个参数：上、右、下、左外边距

margin：auto （加auto表示居中；如果是20，auto表示上下间距为20，水平居中）

padding属性--内边距

内边距：一个参数：设置4个外边距

二个参数：上外边距和下外边距、左外边距和右外边距

三个参数：上外边距、左右外边距、下外边距

四个参数：上、右、下、左外边距

box-shadow属性--阴影

给出2、3、4个数字值的情况下：

给出2个值，这2个值将被浏览器解释为X轴上的偏移量<offset-x>和Y轴上的偏移量<offset=y>

如果给出第3个值，这第三个值将被解释为模糊<blur-radius>值越大模糊程度越大

如果给出第4个值，这第4个值将被解释为扩展半径的大小<spread-radius>去正值时，阴影扩大，取负值时，阴影缩小

color：阴影的颜色

inster：默认为外边框。使用之后阴影在边框内

box-sizing属性

content-box:

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

border-box:

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的 width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

border-bottom属性

border-bottom：设置对象底部边框的特性

float属性--浮动

none：默认属性，元素不浮动，并会显示在其文本中出现的位置

left：元素向左浮动，表示向父元素的左侧靠紧

right：元素向右浮动，表示向父元素的右侧靠紧

!important

提升优先级

border属性--设置边框

border:solid 1px 实线边框

border:dotted 1px 点划线边框

border:dashed 1px 虚线边框

border:double 1px 双线边框

border:none/border:hidden 都是定义无边框，但是对于表来说，hidden用于解决边框冲突（意思就是隐藏）

border:0 将border属性设成0，虽然边框不见了，但是游览器依然会对border-width和border-color进行渲染，会占用浏览器的资源；但是border:none浏览器就不会做出渲染动作

letter-spacing

给元素添加间距

:hover

表示当鼠标移动到XXX元素上的时候，样式会发生变化

cursor

使用自定义图像作为光标类型

例如：pointer(小手)

auto(I)

default(箭头)

crosshair(十字交叉)

move(移动)

wait(转圈)

display属性

none 隐藏该元素

block 显示为块级元素

inline 显示为行内元素

inline-block 显示为行内块级元素

text-decoration属性

none:默认值，利用该属性值可以去掉下划线、删除线、顶划线的样式

underline：下划线，在文字下方添加下划线

line-through：删除线

overline：顶划线，在文字上方添加顶划线

outline属性

位于边框的外围，起到突出元素的作用

none：默认，定义无轮廓

dotted：定义点状的轮廓

dashed：定义虚线轮廓

solid：定义实现轮廓

double：定义双线轮廓；双线的宽度等同于outline-width的值

groove：定义3D凹槽轮廓；此效果取决于outline-color值

ridge：定义3D凸槽轮廓；此效果取决于outline-color值

inset：定义3D凹边轮廓；此效果取决于outline-color值

outset：定义3D凸边轮廓；此效果取决于outline-color值

inherit：规定应该从父元素继承轮廓样式的设置。

list-style属性

list-style-type属性，用来定义列表所使用的项目符号类型

list-style-position属性，设置列表项目符号的位置及列表的对齐方式

list-style-image 浏览器提供的列表项目符号，不能满足所有人的需要，并且可选择的范围有限

font-weight

设置字体的粗细值

默认为normal

lighter为细体

normal为正常粗体

bold为粗体

bolder为特粗体

from

<form> 元素用于生成输入表单，该元素不会生成可视化部分，它除了通用属性id、style、class外，还可以指定onclick事件，除此之外，还有以下几个属性：

Action ：指定当单击表单内的确认按钮时，该表单被提交到那个地址。该属性既可以指定一个绝对地址，也可以指定一个相对地址，该属性必填，非常重要！

method：指定提交表单时发送何种请求，该属性有get和post两种值，通常建议发送post请求，该属性必填。表单默认以get方式提交请求。Get请求和post请求的区别如下：

GET请求方式：直接在浏览器地址栏中输入访问地址所发送的请求，或提交表单发送请求时，该表单对应的form元素没有设置method属性，或设置了method属性为get，这几种都是get方式的请求。Get方式的请求会将请求参数的名和值转换为字符串，并附加在原url之后，因此可以在地址栏中看到请求参数的名和值。且get请求传送的数据量较小。

Post方式的请求：这种方式通常使用提交表单的方式来发送，并且不要设置form的method属性为post。Post方式传送的数据量较大，通常认为post请求参数的大小不受限制，但往往取决于服务器的限制，post请求传输的数据量总比get传输的数据量大，而且post方式发送的请求参数以及对应的值放在HTML HEADER中传输，用户不能在地址栏中看到请求的参数值，安全性相对较高。

name:指定表单的唯一名称，建议该属性值与id属性值保持一致。

Target：该属性有4个属性值，指定使用哪种方式打开目标url。self,black,parent，_top分别指定使用自身，一个新的页面，顶级框架，父框架来加载form请求。