实例
<!DOCTYPE html> <html> <head> <title>文本控制</title> <meta charset="utf-8"> </head> <body> <h1>1</h1> <!-- h1到h6标签是字体是从大到小的 --> <h2>2</h2> <h3>3</h3> <h4>4</h4> <h5>5</h5> <h6>6</h6> <b>b标签</b> <!-- b标签是粗体标签 --> <p>近日，各地上半年经济数据相继出炉，<br>全国31个省区市当中，半年GDP超过万亿的达到16个，比去年同期增加两个，勾勒出中国经济高质量发展的新图景</p> <!-- 段落标签 块级元素--> <br> <strong>新闻</strong> <!-- 粗体元素 --> <i>斜体字</i> <!-- 斜体字 --> <em>定义着重字</em> <!-- 定义着重字 也是斜体字 --> <del>删除字标签</del> <!-- 删除字标签 --> <span>400元</span><del>原价500元</del> <strong>新闻</strong><del>原价500元</del> <pre>预 格式化</pre> <!-- 可以输出页面换行跟空格 只有他可以--> <p style="background: #cccc;width: 100px;height: 100px;">234</p> <!-- p标签是独占一行的 块级元素可以调制高宽 --> <span>400元</span> <!-- 块级元素：div h1~h6 p 特点：独占一行对宽高属性值生效 自带换行符 --> <!-- 行内元素： span strong em del b 可以共存一行并且对宽高设置不生效 --> <!-- 行内块级元素：结合了块级跟行内的特别 如下--> <img src="http://t.cn/RDuW9Zh" style="width: 100px;height: 100;"><span>400元</span> <!-- 行内块级相互转换 如下 --> <!-- display: inline 将块级元素转换成行内元素 --> <!-- display:inline-block 将块级元素转换成行内块级元素 --> <!-- display: block 将行内元素转换成块级元素 --> <div style="width: 100px;height: 100;background: pink; display: inline;">A</div> <div style="width: 100px;height: 100;background: pink; display: inline-block;">B</div> <span style="width: 100px;height: 100px;background: pink;display: block">C</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">D</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">E</span> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
