第二篇 HTML 常用元素及属性值

时间：2023-07-22 20:57:02 | 来源：网站运营

时间：2023-07-22 20:57:02 来源：网站运营

第二篇 HTML 常用元素及属性值：常用元素及属性值

先和同学了解下，一部分常用的元素，区别以及属性，常用在哪里。

标签是由左右尖括号抱起来的，由开始标签开始，再由结束标签结束，里面内容则是元素，比如：<div></div>
<p></p>
还有一些特殊的，称为“空元素”，它没有结束标签，它的结束标签就是在开始标签后面结束，比如：<img src="图片地址"
alt="提示" />







那么我们就先来了解，元素，它分为两种：

块级元素、行级元素







块级元素，它是一个块，不设置它的任何属性，默认情况下，它的宽是占据所局位置的整行。就来举
div 这个例子，它是块级元素，我们写 一个代码：<div
style="background-color:red;">我是div，我是块级元素，我会跨行</div>
这句代码里，夹在标签内的是内容，而在元素 div 后面跟着的 style 是样式，后面css的学习中，我们会深入学习css样式，而这里的
style后面跟着的 background-color
意思为 背景颜色， red 红色，就是说，这个div的背景颜色是红色，内容则是 “我是div，我是块级元素，我会跨行”，大家可以测试一下它会是什么样子呈现在网页上。







那么行级元素呢， <span style="background-color:#a1a1a1;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="background-color:red;">我是div，我是块级元素，我会跨行</div>

我们就简单的说一下， div 是元素 style是样式，background-color 则是属性， red 是值， 所谓 “键值对” 指的就是这里的 background-color 和 red

在举个例子： <img src="1.jpg" alt="找不到图片，我来提示" />

这里的src则是它的属性，1.jpg图片名 则是它的值（若不在同一目录，则要去寻找它的位置，比如：../1.jpg 就是到上一级目录查找）

入门的同学，请仔细看一下，最好是写一遍，加深印象。