块级标签元素的特点
1 总是在新行上开始;
2 高度, 行高以及外边距和内边距都可控制;
3 宽度缺省是它的容器的 100%, 除非设定一个宽度.
4 它可以容纳内联元素和其他块元素
内联标签元素的特点
1 和其他元素都在一行上;
2 高, 行高及外边距和内边距不可改变;
3 宽度就是它的文字或图片的宽度, 不可改变
4 内联元素只能容纳文本或者其他内联元素
对行内元素, 需要注意如下
设置宽度 width 无效.
设置高度 height 无效, 可以通过 line-height 来设置.
设置 margin 只有左右 margin 有效, 上下无效.
设置 padding 只有左右 padding 有效, 上下则无效. 注意元素范围是增大了, 但是对元素周围的内容是没影响的.
1, 基本标签
- <hn>
- : n 的取值范围是 1~6; 从大到小. 用来表示标题.
- <p>
- : 段落标签. 包裹的内容被换行. 并且也上下内容之间有一行空白.
- <b>
- <strong>
- : 加粗标签.
- <strike>
- : 为文字加上一条中线.
- <em>
- : 文字变成斜体.
- <sup>
- 和
- < sub>
- : 上角标 和 下角表.
- <br>
- : 换行.
- <hr>
- : 水平线
- <div>
- <span>
示例:
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="refresh" content="2">
- <meta name="keywords" content="前端, html, 网页">
- <title > 这是做的第一个网页 </title>
- </head>
- <body>
- <h1>yusheng_liang</h1>
- <h2>yusheng_liang</h2>
- <h3>yusheng_liang</h3>
- <h4>yusheng_liang</h4>
- <h5>yusheng_liang</h5>
- <h6>yusheng_liang</h6>
- <hr>
- <p > 这是第一个段落 </p>
- <p > 这是第二个段落 </p>
- <hr>
- <b > 文本字体加粗方法一 </b>
- <br>
- <strong > 文本字体加粗方法二 </strong>
- <hr>
- <p > 商品原价:<strike>100</strike > 商品活动价: 50</p>
- <hr>
- <em > 我是一个斜体字标签 </em>
- <hr>
- <p>2<sup>3</sup > 我是一个上角标 </p>
- <p>O<sub>2</sub > 我是一个下角标 </p>
- <hr>
我是一个大于号:<
我是一个小于号:>
我是一个空格:
- </body>
- </HTML>
结果图示:
2, 图形标签 < img>
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height: 图片的高 (宽高两个属性只用一个会自动等比缩放.)
<img src="http.png" height="283px" width="531px" title="模拟 http 请求">
图示:
- <a href="#a">
- 李白
- </a>
- <div id="a" style="background-color: #197991">
- 床前明月光,
- <br>
- 疑是地上霜.
- <br>
- 举头望明月,
- <br>
- 低头思故乡.
- </div>
来源: http://www.bubuko.com/infodetail-3280632.html