常用元素及属性值

先和同学了解下,一部分常用的元素,区别以及属性,常用在哪里。
 
标签是由左右尖括号抱起来的,由开始标签开始,再由结束标签结束,里面内容则是元素,比如:<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 表单
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 就是到上一级目录查找)
入门的同学,请仔细看一下,最好是写一遍,加深印象。
 
 

最新文章

  1. When to close cursors using MySQLdb
  2. centos7最小版本安装nginx+tomcat+java+mysql运行环境
  3. 20145308刘昊阳 《Java程序设计》实验五报告
  4. 制造业如何基于BPM做供应链管理?
  5. python 动态加载module、class、function
  6. mysql import data slow solution---overview information
  7. Java nio 笔记:系统IO、缓冲区、流IO、socket通道
  8. java 开发环境
  9. libcurl编程学习
  10. “WinMount”和“云端”真是相当好用!
  11. 使用GLSL实现更多数量的局部光照 【转】
  12. ajax中的post方法中回调函数不执行的问题
  13. Java 8 lambda初试
  14. laravel数据库查询返回的数据形式
  15. Problem O
  16. Go学习——go+channel实战(转)
  17. 关于HTML5中的sessionStorage和localStorage
  18. gym101657 C
  19. html 之 padding,margin
  20. .NET Core 开发之旅 (1. .NET Core R2安装教程及Hello示例)

热门文章

  1. Mysql中两个select语句的连接
  2. PHP中Smarty的fetch()方法
  3. ftp配置文件详解
  4. Oracle 变量 之 define variable declare 用法及区别
  5. C代码输出日志
  6. Android中图片的三级缓存
  7. Ceph 的用户管理与认证
  8. MySQL 给已存在的数据表 增加字段和注释
  9. Eclipse 4.11 Debug jar包代码时进入空心J
  10. 【学习笔记】使用python将最新的测试报告以附件的形式发到指定邮箱