1:HTML<div>和<span>
可以通过<div>和<span>将HTML元素组合起来。
1:HTML块元素
大多数THML元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始。
2:HTML内联元素
内联元素在显示时通常不会以新行开始。
3:HTML<div>元素
HTML<div>元素是块级元素,它是可用于组合其他HTML元素的容器。
<div>元素没有特定的含义,如果CSS一同使用,<div>元素可用于对大的内容块设置内容属性。
<div>元素的另一个常见用途是文档布局,使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
4:HTML<span>元素
HTML<span>元素是内联元素,可用作文本的容器。
<span>元素也没有特定的含义。
当与CSS一同使用时,<span>元素可用于为部分文本设置样式属性。
2:HTML类
<head>
<style>
.mode{
background-color:red;
font-size:10px;
color:blue;
}
</style>
<head>
<body>
<div class="mode">
<h4>例子</h4>
<p>这是一个例子!!</p>
</div>
</body>
1:分类块级元素
HTML<div>是块级元素。它能够用作其它HTML元素的容器。设置<div>元素的类,使我们能够为相同的<div>元素是设置相同的类。
<head>
<style>
.mode{
background-color:red;
font-size:10px;
color:blue;
}
</style>
<head>
<body>
<div class="mode">
<h4>例子1</h4>
<p>这是一个例子1!!</p>
</div>
<div class="mode">
<h5>例子2</h5>
<p>这是一个例子2!!</p>
</body>
2:分类行内元素
HTML<span>元素是行内元素,能够用作文本的容器。设置<span>的类,能够为相同的<span>元素设置相同的样式。
<head>
<style>
span.mode{
color:red;
font-size:100px;
}
</style>
<head>
<body>
<h1>这是<span class="mode">一个</span>例子!!!</h1>
</body>
3:HTML响应式Web设计
1:什么是相应式Web设计?
RWD指的是响应式Web设计。
RWD能够以可变尺寸传递网页。
RWD对于平板和移动设备是必需的。
2:使用Bootstrap
Bootstrap是最流行的开发响应式web的HTML,CSS,和JS框架。
Bootstrap帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机。
4:HTML框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
1:框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的坏处:1、开发人员必须同时跟踪更多的HTML文档;2、很难打印整张页面。
框架结构标签<frameset>:1、框架架构标签<frameset>定义如何将窗口分割为框架;2、每个frameset定义了一系列的行或列;3、rows/columns的值规定了每行或每列占据屏幕的面积。
2:框架标签(Frame)
Frame标签定义了放置在每个框架中的HTML文档。
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
注意:<body>标签和<frame>标签不能同时使用。
5:HTML Iframe
Iframe可用于在网页上显示网页。
1:添加Iframe语法
<iframe src="URL"></iframe>
2:Iframe-设置高度和宽度
height和width属性用于规定Iframe的高度和宽度。属性值得默认单位是像素,但也可以用百分比来设定。
<iframe src="URL" height="200px" width="200px"></iframe>
3:Iframe-删除边框
frameborder属性规定是否显示Iframe周围的边框。设置属性值为0就可以移除边框。
<iframe src="URL" height="200px" width="200px" frameborder="0"></iframe>
4:使用Iframe作为链接目标
Iframe可作为链接的目标(target)。链接的target属性必须引用Iframe的name属性。
6:HTML背景
1:背景(Background)
<body>拥有两个配置背景的标签。背景可以是颜色或者图像。
2:背景颜色(Bgcolor)
背景颜色属性将背景设置成某种颜色。属性值可以是十六进制数、RGB值或颜色名。
<body bgcolor="red">
<p>这是一个例子!!!</p>
</body>
3:背景(Background)
背景属性将背景设置为图像。属性值为图像的URL。如果图像小于浏览器窗口,那么将在整个浏览器窗口进行复制。
<body background="URL">
<p>这是一个例子!!!</p>
</body>
4:注意
背景颜色(Bgcolor)、背景(background)和文本(text)属性在最新的HTML标准中已经废弃,应该使用层叠样式表(CSS)来定义HTML元素布局和显示属性。