HTML4——框架与布局（基础）

最新推荐文章于 2025-02-12 08:29:30 发布

苦岩

最新推荐文章于 2025-02-12 08:29:30 发布

阅读量1.9k

点赞数

分类专栏： java web前端文章标签： html

本文链接：https://blog.csdn.net/coy_done/article/details/104311340

版权

java 同时被 2 个专栏收录

39 篇文章

订阅专栏

web前端

6 篇文章

订阅专栏

本文详细介绍了HTML4及HTML5中关于框架与布局的相关内容，包括iframe、table布局、div元素及其分类和属性，以及HTML5新增的布局标签如header、footer、article、section等，探讨了新布局的优点和语义化对内容呈现的影响。

摘要由CSDN通过智能技术生成

iframe内联框架

iframe为body元素的子元素，必须放在body中使用。可以引入一个外部的页面。

在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索。

主要属性：src；name；id；width；height；frameborder（框架边框），scrolling（滚动条）。

在这里插入图片描述
应用场景：数据传输、共享代码，局部刷新、第三方介入（广告）等。

<!--scrolling="no"取消滚动条-->
<body>
		<iframe src="http://www.baidu.com" width="300" height="300" frameborder="1"></iframe>
		<iframe src="http://www.jd.com" width="300" height="300" frameborder="0"></iframe>
</body>

在这里插入图片描述

table布局

1.table布局是传统的网页布局方式：早期网页由于内容较少，布局简单，都是使用table布局

2.优点:比较简单，容易理解

3.缺点：对于复杂的布局，表格嵌套太多，比较繁琐；后期维护和修改很不方便…

4.table布局思路：用表格把屏幕分成几块–不同的单元格存放不同的内容

div

div（块）：div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，div中还可以嵌套多层div，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

元素的分类

块元素:主要特征是会产生换行效果，自动与其他元素分离成两行；通常可以作为容器在内部添加其他元素。

块元素有：h1~h6;hr;ul;ol;p;table…
内联元素（行内元素）:不会产生换行效果，会和其他元素并列排列；

内联元素有：a，img，span…

div元素是通用的块元素，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面的布局。span是行内元素，只占用自身大小的元素，不会占用一行。

块元素主要用来做页面的布局，内联元素主要用来选中文本设置样式，一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含块元素。

a元素可以包含任意元素，除了它本身。

p元素不可以包含任何其他块元素。

通用属性

通用属性（全局属性）可以用于任何的HTML5元素；通用属性有十几种。

id属性

id属性用于指定元素的识别名称，相当于一个人的身份证，是唯一的，同一个文档中不能有重复的id；一般配合CSS和JavaScript来选择元素。
class属性

class属性用于指定元素的类别名称，可以使用class元素给同一个文档中的多个元素进行归类，CSS就可以通过class个同一类元素设置统一的样式。
style属性

stlyle属性用于给元素设定样式（内联样式或内部样式表）。
title属性

title属性用于显示省略的内容（或补充/提示说明的内容）：当光标移动到元素内容上时显示title里的内容。
dir属性

dir属性用于设定元素标签内容的文字方向。在文本样式的 bdo元素中可以用到。
lang属性

lang属性用于指定语言，比如中文还是英文：zh-cn/en;除了在html标签中设置，它还可以在特定元素中使用，改变该元素使用的语言。

其他通用元素还有：

accesskey:元素快捷键
tabindex：元素移动顺序
draggable：元素拖动
contenteditable:元素是否允许编辑
hidden:隐藏元素
spellchcheck：元素检查
contextmenu:元素快捷菜单
data-yourvalue：自定义属性

meta 元素

添加一些辅助信息，可以用于浏览器的SEO，搜索引擎优化。

meta 是个单标签，它没有结束标签；meta元素也可以成为空元素。

meta元素为head元素的子元素，且只能放在head标签中使用。

meta元素重要用来附加文档的额外信息，除了使用我们熟悉的 charset="utf-8"声明字符编码外，它还有几个常用的功能

通过name与content属性为文件加入作者(author)描述信息（description）关键词(kewords)编码工具（generator）等信息

通过属性http-equiv将指定的信息以HTTP表头信息的方式送到客户端。

		<!--使用meta标签还可以设置网页的关键字-->
		<meta name="keywords" content="HTML5,前端,java" />
		<!--还可以用来指定网页的描述
		搜索引擎在检索网页时，会同时检索页面中的关键词和描述，但是这两个值不会影响到页面在搜索引擎中的排名-->
		<meta name="description" content="发布h5、js等前端相关的信息" />
		<!--使用meta标签可以用来做请求的重定向
			<meta http-equiv="refresh" content="秒数;url=目标路径"/>
		-->
		<!--5秒后跳转到百度-->
		<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>

link元素

<!--京东网站的dns 和 icon-->
<!--域名解析-->
<link rel="dns-prefetch" href="//static.360buyimg.com"/>
<link rel="dns-prefetch" href="//misc.360buyimg.com"/>
<link rel="dns-prefetch" href="//img10.360buyimg.com"/>
<link rel="dns-prefetch" href="//img11.360buyimg.com"/>
<link rel="dns-prefetch" href="//img12.360buyimg.com"/>
<link rel="dns-prefetch" href="//img13.360buyimg.com"/>
<link rel="dns-prefetch" href="//img14.360buyimg.com"/>
<link rel="dns-prefetch" href="//img20.360buyimg.com"/>
<link rel="dns-prefetch" href="//img30.360buyimg.com"/>
<link rel="dns-prefetch" href="//d.3.cn"/>
<link rel="dns-prefetch" href="//d.jd.com"/>
<!--标题的图标-->
<link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon"/>
<!--还可以导入外部样式表-->

新增的布局标签(h5)

新增的布局标签可以概括为两类：用于控制页面主体内容的标签，可以划分为主体结构标签；非主体结构标签，用来放置辅助主体内容的信息。

HTML 5新的语义化标签
header :页眉
footer :页脚
main ;主体
hgroup ;标题组合
nav :导航

注: header、 footer、 main在一个网页中只能出现一次。

article :独立的内容
aside :辅助信息的内容
section :区域
figure :描述图像或视频
figcaption :描述图像或视频的标题部分
datalist :选项列表
details / summary :文档细节/文档标题
progress / meter :定义进度条/定义度量范围
time:定义日期或时间
mark :带有记号的文本