常用元素及属性值
先和同学了解下,一部分常用的元素,区别以及属性,常用在哪里。
标签是由左右尖括号抱起来的,由开始标签开始,再由结束标签结束,里面内容则是元素,比如:<div></div> <p></p> 还有一些特殊的,称为“空元素”,它没有结束标签,它的结束标签就是在开始标签后面结束,比如:<img src="图片地址" alt="提示" />
那么我们就先来了解,元素,它分为两种:
块级元素、行级元素
块级元素,它是一个块,不设置它的任何属性,默认情况下,它的宽是占据所局位置的整行。就来举 div 这个例子,它是块级元素,我们写 一个代码:<div style="">我是div,我是块级元素,我会跨行</div> 这句代码里,夹在标签内的是内容,而在元素 div 后面跟着的 style 是样式,后面css的学习中,我们会深入学习css样式,而这里的 style后面跟着的 background-color 意思为 背景颜色, red 红色,就是说,这个div的背景颜色是红色,内容则是 “我是div,我是块级元素,我会跨行”,大家可以测试一下它会是什么样子呈现在网页上。
那么行级元素呢, <span style="color:#fff;">我是span,我是行级元素,不会跨行,宽度只有内容那么大。</span>在style里,它的背景颜色,我们设置的是16进制的模式,也是颜色哦,color是颜色,值:#ffffff==#fff 意思为白色,注意写法,6个相同的f,是可以简略成3个f,大小写都一样。那么同学们也可以将这段代码放在网页上检测一下,会是什么效果。
我们来列举一下,在制作网站,网页时,常用到的元素:
块级元素:
divdiv模块
p段落,和div有一些区别,而且在它里面不能再嵌套块级元素,会显示语法错误
h1(2、3、4、5、6) 1代表最大,6最小,一般用于标题
table表格
form 表单
form 表单
ul非排序列表,里面还需使用到 li
ol排序列表,里面还需使用到 li
hr水平线
行级元素:
a超链接,一般做跳转页面
span
i 斜体
b 粗体
label 表格标签,字体加粗
img 图片
当然还有更多元素咯,这里就距离一下在网站中,可以经常使用的,可以不需要清楚所有,但要了解。
在上面演示一小段代码里:
<div style="">我是div,我是块级元素,我会跨行</div>
我们就简单的说一下, div 是元素 style是样式,background-color 则是属性, red 是值, 所谓 “键值对” 指的就是这里的 background-color 和 red
在举个例子: <img src="1.jpg" alt="找不到图片,我来提示" />
这里的src则是它的属性,1.jpg图片名 则是它的值(若不在同一目录,则要去寻找它的位置,比如:../1.jpg 就是到上一级目录查找)
入门的同学,请仔细看一下,最好是写一遍,加深印象。