HTML基础标签和框架结构

最新推荐文章于 2020-07-31 09:47:26 发布
最新推荐文章于 2020-07-31 09:47:26 发布
阅读量1.7k 收藏 5
点赞数
分类专栏： JavaWeb学习笔记 文章标签： html 框架 导航 标签 JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lylwanan/article/details/38739989
版权

1.HTML中主要的基础标签如下：

注释标签<!-- -->；

段落标签<p></p>；

标题标签<h1></h1>，该标签的参数从h1~h6；

换行标签<br/>或者<br>；

（字体）粗体标签<b></b>；

（字体）斜体标签<i></i>；

下标<sub></sub>；

上标<sup></sup>；

预格式标签<pre></pre>；

地址标签<address></address>；

删除标签<del></del>；

插入标签<ins></ins>；

连接标签<a></a>；

下水平线标签<hr/>；

2.连接标签的语法：<a href=连接地址>名字</a>

例如，要想连接到百度首页：

<a href="http://www.baidu.cn">百度</a>

将图片作为按钮连接到指定路径，其中alt为移动鼠标显示的名字，src为图片的路径：

<a href="http://www.baidu.cn"> <img alt="百度" src="smile.png">
	</a>

在新的浏览器打开连接：

<a href="http://www.baidu.cn" target="_blank">百度
	</a>

跳转到当前页面的指定段落：

</a>
	<a href="#a3">跳转</a>
	<p>
		<a name="a1">段落a1</a>
	</p>
	<p>
		<a name="a1">段落a1</a>
	</p>
	<p>
		<a name="a1">段落a1</a>
	</p>


3.HTML中的框架结构

例1.垂直框架结构，将页面垂直分为三个部分。

目录结构如图：


f1.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	最左边框架
</body>
</html>

f2.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	中间框架
</body>
</html>

f3.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	最右边框架
</body>
</html>

frame.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>框架结构</title>
<!-- 框架结构，frameset不需要写在body里面 -->
</head>
<!-- 垂直结构框架用cols，水平框架用rows -->
<frameset cols="30%,40%,30%">
	<frame src="f1.html">
	<frame src="f2.html">
	<frame src="f3.html">
</frameset>
</html>

运行结果图


 

例2.混合结构框架。

目录结构如图：

f1.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>这是一个导航框架</h1>
</body>
</html>

f2.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>菜单</p>
	<!-- 单击菜单一跳转到menu1.html页面，并将该页面在menu框架里面打开 -->
	<p>
		<a href="menu1.html" target="menu">菜单一</a>
	</p>
	<p>
		<a href="menu2.html" target="menu">菜单二</a>
	</p>
</body>
</html>

f3.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	菜单内容
</body>
</html>

menu1.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	我是菜单一的内容
</body>
</html>

menu2.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	我是菜单二的内容
</body>
</html>

frame.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>混合框架结构</title>
</head>
<!-- 最开始为水平框架 -->
<frameset rows="20%,*">
	<!-- 水平框架里面最开始是一个frame和另一个垂直框架 -->
	<!-- noresize="noresize"属性限制框架大小，设置为固定值 -->
	<frame src="f1.html" noresize="noresize">
	<frameset cols="20%,*">
		<!-- 垂直框架里面有两个frame -->
		<!-- 该框架为菜单，单击内容可以跳转页面 -->
		<frame src="f2.html" noresize="noresize">
		<!-- 将该框架命名为menu -->
		<frame src="f3.html" noresize="noresize" name="menu">
	</frameset>
</frameset>

</body>
</html>

运行结果图

例3.带导航的混合框架结构，单击描点快速进入界面。

目录结构图

f1.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>这是一个导航框架</h1>
</body>
</html>

f2.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>目录</p>
	<!-- 单击菜单跳转到node.html页面的指定节点，并将该页面在menu框架里面打开 -->
	<p>
		<a href="node.html#node1" target="menu">跳转到节点一</a>
	</p>
	<p>
		<a href="node.html#node2" target="menu">跳转到节点二</a>
	</p>
	<p>
		<a href="node.html#node3" target="menu">跳转到节点三</a>
	</p>
	<p>
		<a href="node.html#node4" target="menu">跳转到节点四</a>
	</p>
	<p>
		<a href="node.html#node5" target="menu">跳转到节点五</a>
	</p>
</body>
</html>

f3.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	菜单内容
</body>
</html>

node.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 这里是节点界面 -->
	<p>
		<a name="node1">节点一<br> <br> <br> <br> <br>
			<br> <br> <br> <br> <br> <br> <br>
			<br> <br> </a>
	</p>
	<p>
		<a name="node2">节点二<br> <br> <br> <br> <br>
			<br> <br> <br> <br> <br> <br> <br>
			<br> <br> </a>
	</p>
	<p>
		<a name="node3">节点三<br> <br> <br> <br> <br>
			<br> <br> <br> <br> <br> <br> <br>
			<br> <br> </a>
	</p>
	<p>
		<a name="node4">节点四<br> <br> <br> <br> <br>
			<br> <br> <br> <br> <br> <br> <br>
			<br> <br> </a>
	</p>
	<p>
		<a name="node5">节点五<br> <br> <br> <br> <br>
			<br> <br> <br> <br> <br> <br> <br>
			<br> <br> </a>
	</p>
</body>
</html>

frame.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>混合框架结构</title>
</head>
<!-- 最开始为水平框架 -->
<frameset rows="20%,*">
	<!-- 水平框架里面最开始是一个frame和另一个垂直框架 -->
	<!-- noresize="noresize"属性限制框架大小，设置为固定值 -->
	<frame src="f1.html" noresize="noresize">
	<frameset cols="20%,*">
		<!-- 垂直框架里面有两个frame -->
		<!-- 该框架为菜单，单击内容可以跳转页面 -->
		<frame src="f2.html" noresize="noresize">
		<!-- 将该框架命名为menu -->
		<frame src="f3.html" noresize="noresize" name="menu">
	</frameset>
</frameset>

</body>
</html>

运行结果图

誰將旧詞译成新曲
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单后台框架结构html
05-02
简单后台框架结构html 包括4个html页面和css、js index、top、left和right的html页面
HTML的框架结构
:)一位靓仔偶然路过的博客
10-30 603
HTML的框架结构 你的浏览器不支持HTML的框架分帧！ <!-- HTML框架简述 一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)。也就是将一个浏览器文档窗口
HTML基础标签
司天宏的博客
01-11 863
标题标签 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;/head&
HTML基本标签+表格基础+表单和框架
08-15
HTML（HyperText Markup Language）是构建网页的基础语言，它通过一系列的标签来描述网页的结构和内容。在“HTML基本标签+表格基础+表单和框架”这个主题中，我们将探讨这三个关键概念。 1. HTML基本标签：HTML标签...
html基础知识点以及常用标签
07-24
本文将深入讲解HTML的基础知识点，包括常用标签和属性，对于自学前端的人来说是很好的学习资料。 首先，HTML文档的头部通常包含`<title>`标签，它定义了浏览器标题栏显示的页面标题，如“家用电器排行榜”。`<meta>...
html 框架结构.pdf
08-16
### HTML框架结构详解 #### 10.1 窗口框架简介 ##### 10.1.1 什么是框架 框架（Frames）是一种在HTML网页中常见的布局技术，允许在一个浏览器...以上介绍了HTML框架结构的基础知识及其应用，希望对读者有所帮助。
HTML标签总结，包含HTML4和HTML5
12-31
HTML标签是构建网页的基础，它们定义了网页的结构和内容。在HTML中，有许多不同的标签，每个标签都有其特定的功能和用途。本文总结了HTML4和HTML5中的常用标签，涵盖了基本结构标签、文本标签、图片标签、链接标签、...
HTML基础笔记的整理
03-09
HTML的基本结构由<html>标签包裹，包含和两个主要部分。中定义元信息，如用于设置页面标题，用于指定字符集、描述等。包含实际可见的网页内容。HTML标签通常分为双标签（如）和单标签（如 ），它们之间可以嵌套或...
HTML 基础标签
YILIANZHIAI的博客
07-31 192
第一章 HTML页面与基础标记 html（双） 开始与结束 head（双） 文件头部 title（双） 文件标题 body（双） 文件内容 backgrount="网页背景" a（双） 超链接 href="链接地址" "绝对URL超链接 相对URL超链接" hn 标题标签 pre（双） 预排版标签 p（双） 段落标签 align="对齐属性" "left(左对齐) center(居中) rig...
HTML语言基础：文档结构与标签解析
它通过使用标签来描述网页的结构和内容，使得浏览器能够正确地解析并呈现页面。一个标准的HTML文件通常包含以下结构： 1. `<html>`: 这是HTML文件的根元素，标志着整个HTML文档的开始和结束。 2. `<head>`: 包含在`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值