二、对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
<a href="http://www.baidu.com" target="_self">百度</a>
href,target是a链接中固有的属性值 用prop()方法获取属性值.
<a href="#" id="desc" action="drop">减少</a>
href,id是a链接中固有的属性值 ,但是action是自己添加的属性值,所有如过我想获取action的属性值,用attr().
当然固有属性也可以用attr()来获取
1、元素:
HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。
2、标签:
标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象,绝大部分的
标签都是成对出现的,如<table></talbe>、<form></form>。当然还有少部分
不是成对出现的,如<br>、<hr>等。
标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。
3、属性:
为HTML元素提供各种附加信息的就是HTML属性,它总是以"属性名=属性值"这种名值对的形式出现,而且属性总是在HTML元素的开始标签中进行定义。
<html>
<head><title>标题</title></head>
<body bgcolor="#f00">
<div>hhhhhhhhhh</div>
</body>
</html>在这个示例中,<div>这是示例页面</div>就是HTML元素,其中“hhhhhhhhhh”就是元素的具体内容了。<head><title><body>等就是HTML标签,这是标签构成了HTML元素。 <body bgcolor="#f00">中的bgcolor=#f00"就是标签的属性,它定义了标签应该如何具体配置。
总之,元素和标签的区别也不必太在意,实际工作中我们都直接以标签统称。而属性就很容易明白了, 它就是为HTML标签添加各种附加信息或者配置选就比如说HTML是一个家庭,其中每一个HTML标签都是这个家庭中的成员,他们各有各的工作,例如div、p等;
每一个成员都还有属于他们自己的特征,这个特征的名称(例如:身高,体重,爱好等)就类似于HTML属性width, height,border等;这些特征的具体值(例如:180cm, 50kg, 读书等)就类似HTML属性值100px, 10px,solid #f00。
行高 line-height:数值 | inherit | normal
字间距 letter-spacing: 数值 | inherit | normal
显示 display:
none: 不显示,使用的场景非常多
block: 把内联标签变成块级标签
inline: 把块级标签变成内联标签
inline-block:变为行间块元素
宽度 width: 长度 | 百分比 | auto
高度 height: 长度 | 百分比 | auto
清除 clear: none | left | right | both
外边距 margin: 上 右 下 左
内边距 padding: 上 右 下 左
定位 position: absolute | relative
超出 overflow: visible | hidden | scroll auto
浮动 float: left | right | none在页面布局的时候用的最多
fixed 一般用来写网页顶端的固定导航条,或者两侧的菜单。
absolute与relative 这两者一般配合使用,用于调整div之间的相对位置
opacity 0-1 表示透明度
颜色 color: 数值
大小 font-size: 数值
字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique(偏斜体) italic(斜体) normal(正常)
粗细 font-weight: bold(粗体) lighter(细体) normal(正常)
背景 background: transparent/透视背景*/
颜色 background-color: 数值
图片 background-image: url() | none
重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y
大小写 text-transform: capitalize | uppercase | lowercase | none
修饰 text-decoration: underline(下划线) overline(上划线) line-through(删除线) blink(闪烁)
排列 text-align: justify | left | right | center
缩进 text-indent: 数值 | inherit
阴影 text-shadow:数值
边框样式 border-style: dotted(点线) dashed(虚线) soliddouble(双线) groove(槽线) ridge(脊状) inset(凹陷) outset
边框宽度 border-width:
边框颜色 border-color: top值 right值 bottom值 left值
类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
位置 list-style-position: outside | inside
图像 list-style-image: URL
简写 list-style:目录样式类型 | 目录样式位置 | url
margin-top:10px(上边界)
margin-right:10px(右边界)
margin-bottom:10px(下边界值)
margin-left:10px(左边界值)
margin-inside:
margin-outside:
padding-top:10px/ 上边框留空白 /
padding-right:10px/ 右边框留空白 /
padding-bottom:10px/ 下边框留空白 /
padding-left:10px/ 左边框留空白 /
vertical-align:sub/ 下标字 /
vertical-align:super/ 上标字 /
vertical-align:top/ 垂直向上对齐 /
vertical-align:bottom/ 垂直向下对齐 /
vertical-align:middle/ 垂直居中对齐 /
vertical-align:text-top/ 文字垂直向上对齐 /
vertical-align:text-bottom/ 文字垂直向下对齐 /
a / 所有超链接 /
a:link / 超链接文字格式 /
a:visited / 浏览过的链接文字格式 /
a:active / 按下链接的格式 /
a:hover / 鼠标转到链接 /
光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize
/ 也可以自定义 /
cursor: hand/ 链接手指 /
cursor: crosshair / 十字体 /
cursor: s-resize / 箭头朝下 /
cursor: move / 十字箭头, 朝右/
cursor: help / 加一问号 /
cursor: w-resize / 箭头朝左 /
cursor: n-resize / 箭头朝上 /
cursor: ne-resize / 箭头朝右上 /
cursor: nw-resize / 箭头朝左上 /
cursor: text / 文字型/
cursor: se-resize / 箭头斜右下 /
cursor: sw-resize / 箭头斜左下/
cursor: wait / 漏斗
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)