ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## DIV和SPAN标签简介 我们在之前的练习中发现,HTML标签具有不同的特性。 实际上,我们可以将HTML元素分为两大类:区块元素和内联元素。 ### 内联元素和区块元素 **区块元素** * 总是在新的一行上显示。 * 高度、行高、宽度、内边距、外边距等都是可控制的。 * 高度默认为0,是根据元素内的内容而决定的,宽度是父元素的宽度,但是可以通过css控制它,显示的指定他的宽度和高度,可以利用浮动和定位来将他与其他的块元素也显示在一行上。 * 实例: `<h1>`, `<p>`, `<ul>`, `<table>`。 **常用的区块元素** * address – 地址 * blockquote – 块引用 * dir – 目录列表 * div – 常用块级容易,也是CSS layout的主要标签 * fieldset – form控制组 * form – 交互表单 * h1 – 大标题 * h2 – 副标题 * h3 – 3级标题 * h4 – 4级标题 * h5 – 5级标题 * h6 – 6级标题 * hr – 水平分隔线 * menu – 菜单列表 * ol – 有序表单 * p – 段落 * pre – 格式化文本 * table – 表格 * ul – 无序列表 **内联元素** * 内联元素和其他的元素显示在一行上。 * **上下边距**、高度,宽度都是不可改变的,他的宽度是根据他的显示文本和图像的宽度。 * 实例: `<b>`, `<td>`, `<a>`, `<img>`。 **常用的内联元素** * a – 锚点 * abbr – 缩写 * b – 粗体(不推荐) * big – 大字体 * br – 换行 * cite – 引用 * code – 计算机代码(在引用源码的时候需要) * em – 强调 * i – 斜体 * img – 图片 * input – 输入框 * label – 表格标签 * q – 短引用 * samp – 定义范例计算机代码 * select – 项目选择 * small – 小字体文本 * span – 常用内联容器,定义文本内区块 * strong – 粗体强调 * sub – 下标 * sup – 上标 ### **`<div>`元素** * HTML `<div>`元素是块级元素,它可用于组合其他HTML元素的容器。 * `<div>`元素没有特定的含义。由于它属于块级元素,浏览器会在其前后显示换行。 * 如果与 CSS 一同使用,`<div>`元素可用于对大的内容块设置样式属性。 ![](https://box.kancloud.cn/e65c7a30bdc9dd8c6884128629acca97_475x214.png) ### `<span>`元素 * HTML`<span>`元素是内联元素,可用作文本的容器 * `<span>`元素也没有特定的含义。 * 当与 CSS 一同使用时,`<span>`元素可用于为部分文本设置样式属性。