HTML初学----块、布局
来源:互联网 发布:window10和mac对比 编辑:程序博客网 时间:2024/05/29 05:52
HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
HTML 分组标签
实例:
1、使用<div>元素的网页布局
<!DOCTYPE html><html><head><style type="text/css">div#container{width:500px}div#header {background-color:#99bbbb;}div#menu { background-color:#ffff99; height:200px; width:150px; float:left;}div#content { background-color:#EEEEEE; height:200px; width:350px; float:left;}div#footer { background-color:#99bbbb; clear:both; text-align:center;}h1 {margin-bottom:0;}h2 {margin-bottom:0;font-size:18px;}ul {margin:0;}li {list-style:none;}</style></head><body><div id="container"><div id="header"><h1>Main Title of Web Page</h1></div><div id="menu"><h2>Menu</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></div><div id="content">Content goes here</div><div id="footer">Copyright W3School.com.cn</div></div></body></html>
2、使用<table>元素的网页布局
<!DOCTYPE html><html><body><table width="500" border="0"><tr><td colspan="2" style="background-color:#99bbbb;"><h1>Main Title of Web Page</h1></td></tr><tr valign="top"><td style="background-color:#ffff99;width:100px;text-align:top;"><b>Menu</b><br />HTML<br />CSS<br />JavaScript</td><td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">Content goes here</td></tr><tr><td colspan="2" style="background-color:#99bbbb;text-align:center;">Copyright W3School.com.cn</td></tr></table></body></html>
0 0
- HTML初学----块、布局
- html 块,布局
- HTML列表、块和布局
- 2016.4.4HTML表格,列表,块,布局
- 初学标准布局应该理解HTML标签的语义
- Web前端教程-02.05.HTML列表、块和布局
- HTML5中 HTML列表/块/布局 韩俊强的博客
- html初学
- HTML初学
- 初学HTML
- 初学html
- 初学html
- HTML初学
- 初学HTML
- 初学HTML
- 初学html
- 初学 <html>
- html初学
- Tomcat域名配置
- utlrp.sql和catpatch.sql两个脚本的作用
- 解决IE6下 float:left浮动换行的问题几种方法
- WebView如何在页面内返回时重设title
- 连接Oracle数据库,VS2010中运行正常,发布到IIS上面报错
- HTML初学----块、布局
- 7.PHP内核探索:再次探讨SAPI
- 使用Dom4j解析XML
- LNMP环境下的nginx重写
- 二分--1043 - Triangle Partitioning
- split
- DM重要资源网址
- Ubuntu 14.04 iNode Client找不到库libjpeg和libtiff的解决方法
- sysfs