目录
块属性标签：包含div、p、h1-h6、ul>li、ol-li
1、特点：上下排列，独占一行。
支持设置宽高，如果不设置宽高，宽度自动撑满父容器，高度由内容撑开。
2、div：无意义，一般用来划分区域
p：段落标签
ul-li：无序列表
ol-li：有序列表
h1-h6：标题标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标签</title> <style> /* css样式 */ div{ width: 100px; height: 100px; background-color: aquamarine; } </style> </head> <!-- div用来划分区域 --> <div> <p>第一个p标签</p> <P>第二个p标签</P> </div> <div> <!-- 无序列表 --> <ul> <li></li> <li></li> <li></li> </ul> </div> <div> <!-- 有序列表 --> <ol> <li></li> <li></li> <li></li> </ol> </div> <!-- 行间引入css样式 --> <div style="height: 300px"> <!-- 标题标签 --> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> </div> <body> </body> </html>
代码对应效果
行属性标签：包含span、a
1、特点：左右排列
不支持设置宽高
不支持设置上下的margin和padding
2、span：放置文字
a标签：超链接，用来跳转网页
a标签中href属性：用来放置网页地址（相对地址、网络地址、绝对地址）。
为空，刷新页面。
为#，返回顶部。
为###，没有任何作用
a标签中target属性：_self(默认不打开)，_blank(点击打开新的页面)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标签</title> </head> <body> <span>我是行标签span</span> <!--href 用来放置网页地址（相对、网络、绝对） 可以为空，刷新页面 #返回顶部 ###没有任何作用 --> <a href="" target="">我是a标签</a> <!-- _self(默认) _blank(打开新的页面) --> </body> </html>
代码对应效果
行块属性标签：img
1、特点：左右排列
支持设置宽高
2、img标签：属性：src：用来放置图片的地址（相对地址、网络地址、绝对地址）。
alt：图片加载失败的提示信息。
title：鼠标移入提示信息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标签</title> </head> <body> <!-- src：用来放置图片的地址 alt：图片加载失败提示信息 title：鼠标移入提示信息 --> <img src="img/05.png" alt="图片加载失败" title="鼠标移入"> </body> </html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
