HTML基础标签和框架结构

2023-11-08 00:59
文章标签 基础 html frontend 标签 框架结构

本文主要是介绍HTML基础标签和框架结构，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>

运行结果图

这篇关于HTML基础标签和框架结构的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/367046。

相关文章

Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
C#基础之委托详解(Delegate)

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》：本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托（Multicast Delegates）4. 委托的用途事件处理回调函数LINQ
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2