HTML/CSS学习记录(5)
2017-07-11 16:56
513 查看
HTML <div> 和 <span>
可以通过 <div> 和 <span> 将 HTML 元素组合起来。HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。例子:<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。&l;div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器。<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
HTML 类
对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式,或者为不同的类设置不同的样式。
例如:
<html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital city of England.</p> </div> </body> </html>
分类块级元素
HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类:
<html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital city of England. </p> </div> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="cities"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </body> </html>
分类行内元素
HTML <span> 元素是行内元素,能够用作文本的容器。设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。
例如:
<html> <head> <style> span.red { color:red; } </style> </head> <body> <h1>我的一个<span class="red">重要的</span>标题</h1> </body> </html>
“重要的”会以红色字体显示。
HTML布局
网站常常以多列显示内容.使用 <div> 元素的 HTML 布局
注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。实例:(这个例子使用了四个 <div> 元素来创建多列布局)
<html> <head> <style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> </div> <div id="section"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer"> Welcome to London! </div> </body> </html>
使用HTML5的网站布局
HTML5 提供的新语义元素定义了网页的不同部分:HTML5 语义元素
元素 | 说明 |
---|---|
header | 定义文档或节的页眉 |
nav | 定义导航链接的容器 |
section | 定义文档中的节 |
article | 定义独立的自包含文章 |
aside | 定义内容之外的内容(如侧栏) |
footer | 定义文档或节的页脚 |
details | 定义额外的细节 |
summary | 定义details元素的标题 |
使用表格的HTML布局
注释:<table> 元素不是作为布局工具而设计的。<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式。
相关文章推荐
- 学习记录--使用 F12 开发人员工具调试 HTML 和 CSS
- 黑马程序员_学习记录20:HTML,JavaScript,CSS小结
- HTML/CSS学习记录(6)
- 前端学习记录一---html_css 校验网址
- HTML/CSS学习记录(1)
- HTML+CSS基础课程/1-4单学习记录
- HTML/CSS学习记录(3)
- html+css的学习记录
- 学习html&css&JavaScript记录
- HTML/CSS学习记录(4)
- HTML/CSS学习记录(2)
- [HeadFrist-HTMLCSS学习笔记][认识HTML中的“HT”]
- [HeadFirst-HTMLCSS学习笔记][第六章严格的HTML]
- [HeadFirst-HTMLCSS学习笔记][第十三章表格]
- html css学习
- 前端学习笔记--HTML/CSS--网页布局
- HTML+CSS+div学习——第一课
- css基础---->学习html(一)
- 2015/04/30CSS学习记录 CSS文本&字体
- python之 前端HTML/CSS基础知识学习笔记