HTML区块
1、HTML可以通过<div>和<span>将元素组合起来
2、大多数HTML元素被定义为块级元素或内联元素
HTML块级元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始
实例: <b>, <td>, <a>, <img>
HTML<div>元素
1、<div>标签可以把文档分割为独立的、不同的部分,使用它可以标记区域,然后可以对其使用样式化等(使用class或id属性)
2、HTML<div>元素是块级元素,它是可用于组合其他HTML元素的容器,常用于组合块级元素,以便通过CSS来对这些元素进行格式化
3、<div>元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行
4、如果与CSS一同使用,<div>元素可用于对大的内容块设置样式属性
5、<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据
注:
1、<div> 元素经常与CSS一起使用,用来布局网页
2、默认情况下,浏览器通常会在<div>元素前后放置一个换行符。然而可以通过使用CSS改变这种情况
3、HTML5中不支持align属性
例1:
注:
上面例子中div为父元素,h、p元素为子元素,如果h、p元素未特意设定样式,则其会继承父元素的样式(CSS继承特性),如果子元素设定了专有样式,则会用自己的样式
例2:
注:
<div>标签对给我的感觉就是:其作用就是将一些标签对整合起来(将一些标签对划到一起,一个装其他元素的容器),然后使这个容器中的元素都显示一定的样式(有自己的专有样式除外)
示例解析
步骤1:先把基本的框架写出来
注:使用上面的写法(使用p标签),可以发现输出结果与预期的不一样,因此不能使用p标签(P标签会换行)
步骤2:修改基本框架
步骤3:对每个标签一次增加div标签并设置属性
步骤4:对整个页面增加div标签并设置属性
例2_1:使用列表实现布局
注:
1、这种写法感觉就是:把整个页面看成一个列表,依次去设置每一行、每一列的数据及其属性
2、虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的:表格不是布局工具
3、使用CSS最大的好处是,如果把CSS代码存放到外部样式表中,那么站点会更易于维护,通过编辑单一的文件,就可以改变所有页面的布局
4、由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)
HTML<span>元素
1、HTML<span>元素是内联(行内)元素,用于对文档中的行内元素进行组合。可用作文本的容器,可以对元素进行分组使它们以不同的样式显示
2、<span>元素也没有特定的含义
3、当与CSS一同使用时,<span>元素可用于为部分文本设置样式属性
注:
1、<span>标签没有固定的格式表现。当对它应用样式时它才会产生视觉上的变化。如果不对<span>应用样式,那么<span>元素中的文本与其他文本不会任何视觉上的差异
2、<span>标签提供了一种将文本的一部分或者文档的一部分独立出来的方式
3、被<span>元素包含的文本,您可以使用CSS对它定义样式,或者使用JavaScript对它进行操作
4、可以为 span 应用id或class属性,这样既可以增加适当的语义,又便于对span应用样式
5、可以对同一个<span>元素应用class或id属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class用于元素组(类似的元素,或者可以理解为某一类元素),而id用于标识单独的唯一的元素
例2:
例3:
HTML框架
1、<iframe>标签规定一个内联框架
2、一个内联框架被用来在当前HTML文档中嵌入另一个文档,通过使用框架,可以在同一个浏览器窗口中显示不止一个页面
iframe语法:
注:
该URL指向不同的网页。将窗口内容显示为URL地址指向页面
Iframe属性:设置高度与宽度
height和width属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是可以指定其按比例显示 (如:"80%")
例4:
Iframe属性:移除边框
frameborder属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框
例5:
iframe:显示目录链接页面
iframe可以显示一个目标链接的页面,目标链接的属性必须使用iframe的属性
例6:
iframe标准属性
属性 | 说明 |
class | 规定元素的类名(classname) |
id | 规定元素的唯一 id |
style | 规定元素的行内样式(inline style) |
title | 规定元素的额外信息(可在工具提示中显示) |
注:
1、可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对不支持 <iframe> 的浏览器
2、提示:使用CSS为<iframe>(包括滚动条)定义样式
3、<iframe>标签主要用于那些多个网页的共有部分,如导航栏、广告栏等
HTML脚本
1、JavaScript是可插入HTML页面的编程代码
2、JavaScript使HTML页面具有更强的动态和交互性
3、JavaScript 插入HTML页面后,可由所有的现代浏览器执行
HTML<script>标签
1、<script>标签用于定义客户端脚本,比如JavaScript
2、<script>元素既可包含脚本语句,也可通过src属性指向外部脚本文件
3、JavaScript最常用于图片操作、表单验证以及内容动态更新
4、假如 <script> 元素内部的代码没有位于某个函数中,那么这些代码会在页面被加载时被立即执行。<frameset>标签之后的脚本会被忽略
注:如果使用 "src" 属性,则<script>元素必须是空的
例7:
JavaScript可以直接在HTMl输出
例8:
JavaScript事件响应
例9:
注:
1、定义一个处理函数后,在按钮标签对中调用这个函数
2、函数通过id属性找到需要操作的标签对,按钮等通过onclik等属性找到需要调用的函数
JavaScript处理 HTML 样式
例10:
HTML<noscript>标签
1、<noscript>标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时
2、<noscript>元素可包含普通HTML页面的body元素中能够找到的所有元素
3、只有在浏览器不支持脚本或者禁用脚本时,才会显示<noscript>元素中的内容
例11:
拓展
元素需要换行时可以使用换行标签(<br>),也可以内嵌在块元素中(<p>),但两者的行与行之间的间距不一致
例12: