企业网站设计专业好吗,做钓鱼网站要具备什么,服务器地址怎么查,wordpress 大学主题目录 1.格式化文本1.1. nbsp1.2.设置水平分割线粗细为51.3.粗细为5且颜色为 #0033ff1.4.对齐方式1.5.两端对齐代码小结 2.段落2.1.块级标记2.2.那些块级标记不能包含其他块级标记#xff0c;哪些可以2.3.hr标签如何设置高度2.4.拼音音标注释ruby标记和rt/rp标记2.5.block… 目录 1.格式化文本1.1. nbsp1.2.设置水平分割线粗细为51.3.粗细为5且颜色为 #0033ff1.4.对齐方式1.5.两端对齐代码小结 2.段落2.1.块级标记2.2.那些块级标记不能包含其他块级标记哪些可以2.3.hr标签如何设置高度2.4.拼音音标注释ruby标记和rt/rp标记2.5.blockquote段落缩进2.6.预格式化pre标记代码小结 3.列表3.1.列表概述3.2.无序列表Unordered List3.3.有序列表Ordered List3.4.列表嵌套Nested Lists3.5.定义列表Definition List代码小结 4.超链接与浮动框架4.1.a标签代码小结4.2.内联框架代码小结 1.格式化文本
1.1. nbsp
在前端代码中nbsp;是一个特殊的 HTML 实体编码它代表着一个不断开的空格non-breaking space。实际上nbsp;是 Non-Breaking Space 字符的字符实体引用。
通常情况下HTML 中的连续空格会被合并成一个空格而使用nbsp;可以插入多个连续的不断开的空格。这对于需要保持连续空格的特殊排版需求非常有用比如在文本对齐、制作表格或生成固定宽度的布局时。
例如如果你想在 HTML 中插入 5 个连续的空格你可以使用以下代码
This is an examplenbsp;nbsp;nbsp;nbsp;nbsp;text.在浏览器渲染时nbsp;会被解析为一个不断开的空格确保这些空格不会被合并成一个。
需要注意的是nbsp;只是一种特殊的字符实体引用并不是 JavaScript 或其他编程语言中的语法元素。它只在 HTML 中有有效的解析规则。
1.2.设置水平分割线粗细为5
要设置水平分割线水平线的粗细为5你可以使用CSS的border属性来实现。下面是一个简单的示例
hr styleborder: 5px solid;在上述示例中我们使用了hr元素创建了一条水平分割线并通过内联样式的方式设置了border属性将边框宽度设置为5像素(5px)边框样式设置为空边框颜色使用默认值。
你也可以通过CSS样式表的方式设置水平分割线的样式。例如
stylehr {border: 5px solid;}
/stylehr上述示例中我们在style标签内设置了hr元素的样式将边框宽度设置为5像素(5px)边框样式设置为空边框颜色使用默认值。然后我们在HTML中使用hr元素来创建水平分割线该分割线将应用定义的样式。
请注意hr元素是用于创建水平分割线的HTML标签你可以根据自己的需要进一步调整样式和布局。
1.3.粗细为5且颜色为 #0033ff
要设置水平分割线的粗细为5并且颜色为#0033ff你可以使用CSS的border属性结合border-color属性来实现。下面是一个示例
hr styleborder: 5px solid #0033ff;在上述示例中我们使用了hr元素创建了一条水平分割线并通过内联样式的方式设置了border属性和border-color属性。border属性将边框宽度设置为5像素(5px)边框样式设置为solid表示实线而border-color属性将边框颜色设置为#0033ff。
同样地你也可以通过CSS样式表的方式设置水平分割线的样式。例如
stylehr {border: 5px solid #0033ff;}
/stylehr在上述例子中我们在style标签内设置了hr元素的样式将边框宽度设置为5像素(5px)边框样式设置为solid实线边框颜色设置为#0033ff。然后我们在HTML中使用hr元素来创建水平分割线该分割线将应用定义的样式。
请注意你可以根据需要进一步调整样式和布局如添加其他属性、修改宽度或调整颜色值。
1.4.对齐方式
在较早的HTML版本中align 属性被用于设置元素的对齐方式。这个属性可以用于各种元素诸如divph1-h6img等以指定其文本或内容应如何相对于其包含元素对齐。align属性通常可以接受如下值
left左对齐。right右对齐。center居中对齐。justify文本对齐两端。
例如在使用img标签时align属性可以用来确定图像在文本中的对齐方式
img srcimage.jpg alt描述性文本 alignright在上述代码中图像将会在页面中右对齐并且文本将围绕它流动。类似地可以将p标签中的文本居中显示
p aligncenter这段文本将居中显示。/p尽管align属性被广泛使用但它不符合HTML的最新标准。在HTML5中建议不再使用align属性而是采用CSS来控制对齐方式。CSS提供了更灵活强大的布局和对齐方式这是通过使用text-align、float、display、position、flexbox等属性来实现的。
例如上述的对齐可以使用CSS实现如下
img srcimage.jpg alt描述性文本 stylefloat: right;p styletext-align: center;这段文本将居中显示。/p使用CSS来实现布局和对齐不仅与最新的Web标准保持一致还能更好地适应响应式设计易于维护且具有更高的灵活性。因此在现代Web开发中应优先使用CSS代替align属性。 justify对齐方式 justify是一个用于对齐文本或内容的CSS属性常用于调整块级元素内部文本或内容的对齐方式。它可以应用于包括段落、标题、列表、表格等在内的块级元素。
justify属性有以下几种可能的取值 justify-content用于在弹性容器内部对齐其子元素。这个属性可以取值为 flex-start子元素在容器的起始位置对齐flex-end子元素在容器的末尾位置对齐center子元素在容器的中间位置对齐space-between在容器内均匀分布子元素两端对齐space-around在容器内均匀分布子元素环绕对齐。 text-align用于对齐元素内部文本的水平位置。这个属性可以取值为 left文本在元素内左对齐right文本在元素内右对齐center文本在元素内居中对齐justify文本在元素内两端对齐并在行末端自动拉伸以填充宽度。
以下是使用justify属性对齐文本的示例
style.container {display: flex;justify-content: center;}.text {text-align: justify;}
/stylediv classcontainerp classtext这是一段文本采用两端对齐方式对齐。/p
/div在上述示例中我们创建了一个包含文本段落的容器并使用display: flex和justify-content: center属性将容器内的文本居中对齐。同时我们给文本段落添加了text-align: justify属性使文本在容器内采用两端对齐方式对齐。
1.5.两端对齐
两端对齐Justify是一种排版方式它通过拉伸或收缩文本中的空格和字符间距来调整每行文本的宽度使得文本在两端对齐。两端对齐通常用于排版正式文档、新闻稿、书籍和杂志等。
在两端对齐时文本中的空格和字符间距将会被自动调整使得每行文本的长度相等。具体来说两端对齐会增加相邻单词之间的空格和字符间距以拉伸较短的文本行的长度或者减少相邻字符之间的空格和字符间距以缩短较长的文本行的长度从而使得每行文本的长度尽可能相等。这样就可以产生整齐的、有节奏感的视觉效果增强文本的可读性和美感。
在计算机排版中两端对齐可通过CSS样式表中的text-align属性设置为justify来实现。例如
stylep {text-align: justify;}
/stylep这是一段文本采用两端对齐方式对齐。/p在这个例子中CSS的text-align属性被设置为justify将文本段落在容器内部两端对齐。
代码小结
!DOCTYPE html
html langenheadmeta charsetutf-8title求知家园/title/headbody textblue bgcolor#99ffffp alignjustify欢迎来到我们的求知家园/phr styleborder: 5px solid #ff3333;//body
/html图片展示
!DOCTYPE html
htmlhead langenmeta charsetutf-8 /titleGoogle搜索/title/headbody background#ffff33p欢迎使用google搜索/pimg alignleft namegoole.png srcimg/google.jpg/hr width100% styleborder: 500px solid #0033ff; /body
/html图片展示
2.段落
2.1.块级标记
在HTML中块级元素Block-level elements是指那些通常用于在页面上创建结构和布局的元素。块级元素默认行为是占据其父元素内的整个可用宽度即它们会始终开始于新的一行并延伸到父元素的右边界通常你不能将其他元素并排放置在它的左右侧除非你改变其布局通过CSS比如设置为浮动或者是弹性盒子布局并且其后也会有一个换行。
常见的块级元素标记有
div 用于定义文档中的分区或节p 用于定义段落h1 到 h6 用于定义六级标题ol 用于定义有序列表ul 用于定义无序列表li 用于定义列表项table 用于定义表格header 用于定义页眉一个容器元素可以包含多个元素footer 用于定义页脚一个容器元素可以包含多个元素section 用于定义文档的一个区域片段article 用于定义可以独立于内容其余部分的完整独立内容块
这些元素大多都用于不同的语义用途有助于创建易于理解且可访问的网页内容。将HTML内容标记为块级元素可以帮助搜索引擎和辅助技术如屏幕阅读器更好地理解页面内容的结构和意义。
2.2.那些块级标记不能包含其他块级标记哪些可以
在HTML中某些块级元素的设计是用来包含其他块级元素的而有些则不是。以下是一些常见的规则和实践
不能包含其他块级元素的块级标记
p段落元素不应包含其他块级元素。例如你无法在一个p内部嵌套另一个p或者是像div这样的块级元素。h1 - h6标题元素通常不包含其他块级元素。li虽然列表项本身是块级元素它通常不能包含其他的块级元素但它可以包含一个完整的列表ul或者ol。
可以包含其他块级元素的块级标记
div被设计为一个通用的容器元素可包含任何其他块级元素。header, footer, section, article这些语义元素都是为了构造文档的不同部分而设计的可以包含其他块级元素包括标题、段落、列表、表格等。ul 和 ol无序和有序列表可以包含多个li元素而li元素本身可以包含另一个ul或ol来创建嵌套列表。table可以包含tr表格行tr又可以包含td表格单元等等但是要符合表格的结构规范。
遵循规范的嵌套对于保持文档结构的一致性和网页可访问性至关重要同时也有助于浏览器正确解析和显示内容。HTML文档的设计和开发应该根据HTML标准规范来组织元素的嵌套层级。在实际使用中确保元素之间的嵌套符合HTML语义和结构规范非常重要。
2.3.hr标签如何设置高度
你可以使用 hr 标签的 size 属性来设置水平线的高度。size 属性用于指定水平线的高度并有以下两个可选的值1 和 2。
size1 表示标准的默认高度通常为2像素。size2 表示较粗的高度通常为3像素或更多。
下面是一个使用 size 属性来设置 hr 标签高度的示例
hr size1hr size2请注意尽管 size 属性可以指定 hr 标签的高度但是具体的高度取决于浏览器和设备的默认样式和设置。因此实际的高度可能会有所不同。如果需要更精确地控制水平线的高度建议使用 CSS 方法如之前的示例所示。
2.4.拼音音标注释ruby标记和rt/rp标记
使用 HTML 的 ruby, rt, 和 rp 标签可以为文字添加发音注释例如汉字拼音、日语假名等。这些标记通常用于注释那些可能不为所有读者所熟悉的文字。
下面是一个简单的例子展示了如何使用这些标签为中文汉字加上拼音注释
ruby汉字 rthàn zì/rtrp(/rprtHànzì/rtrp)/rp
/ruby在这个例子中
ruby 元素包含了需要被注释的文字以及它的拼音注释。rtruby text 元素包容了注释文本它出现在或者在指定的文字之上方。rpruby parentheses 元素是一个注音的括号旨在当浏览器不支持 ruby 元素时显示向那些旧版或不支持 ruby 的浏览器用户显示括号内的注释。也就是说rp 标签是提供降级方案的。
现代浏览器广泛支持这些标签所以通常只需要 ruby 和 rt。而 rp 标签中包含的内容主要作为后备内容供那些不支持 ruby 标签的浏览器使用。
2.5.blockquote段落缩进
blockquote 是 HTML 中用来表示引用文字的一个块级元素。当你想要引用一个大段的文字时比如一段演讲、书中的一段话或引用其他来源的内容你可以使用 blockquote 标签。
这个标签通常会被浏览器默认以缩进的形式呈现以此来区分引用的内容和其他正文内容。你也可以通过 CSS 来自定义 blockquote 的表现形式例如改变缩进量、字体样式、背景色等。
这里有一个 blockquote 的例子
blockquote citehttp://www.worldwildlife.org/who/index.htmlFor 50 years, WWF has been protecting the future of nature.The worlds leading conservation organization,WWF works in 100 countries and is supported by1.2 million members in the United States andclose to 5 million globally.
/blockquote在这个例子中我们看到几个要素
cite 属性可以可选地包含引用来源的 URL这个属性不会在页面上显示但有助于定义引用内容的来源。包含在 blockquote 标签中的文本应是其他来源的字面引用。
要注意的是对于引用较短的内容比如一个短句或短语更适合使用 q 标签而不是 blockquote。而 blockquote 适合在你需要引用一段较长的内容时使用。
2.6.预格式化pre标记
pre 标签用于在 HTML 中定义预格式化的文本。使用 pre 标签包围的文本通常会保留空白字符如空格和换行符而在普通的 HTML 中多个空格或换行通常会被视为一个空格处理。
这意味着 pre 标签非常适合显示程序代码或其他需要按照特定格式呈现的文本因为它可确保文本的格式不会被浏览器规范化而是按照其原有样式进行显示。
以下是一个 pre 标签的例子
pre
if (condition) {console.log(The condition is true!);
} else {console.log(The condition is false!);
}
/pre在上面的例子中
pre 标签内的文本按原样显示包括空格和换行符。这可以很好地显示程序代码或者排列整齐的文本数据。
通常pre 标签中的文本会以等宽monospaced字体显示如 Courier以便所有的字符都具有相同的宽度这使得对齐文本变得更加容易。如果你想自定义 pre 标签的样式你可以使用 CSS 来实现。
代码小结
!DOCTYPE html
html langenheadmeta charsetutf-8title/title/headbodyh1 alignleft这是一级标题/h1h2 aligncenter这是二级标题/h2h3 alignright这是三级标题/h3h4 alignjustify这是四级标题/h4hr styleborder: 5px solid #fff333;/a以下是特殊标记/abr /anbsp;nbsp;空格/aalt;小于号/aacopy;版权/aaamp;号/aagt;大于号/aaquot; 引号/aareg;注册商标/aaxtimes;号/aadivide;号/ahr styleborder: 5px solid #fff333;/p以下是常见的文本修饰标记/pb定义粗体/bbr /i定义斜体/iu定义下划线/udel定义删除线/delsup定义上标/supsub定义下标/substrong定义着重文字与粗体相同/strongem定义加重语气与斜体相同/emsmall变小字号/smallbig变大字号/bighr styleborder: 5px solid #fff333;/sampcode#indelustdio.hint main(){printf(555) }/code/sampabbr定义缩写/abbraddress定义地址/addresscite引用、引证/citeq引用短语/qdfn定义项目/dfnhr styleborder: 5px solid #fff333;/p下面定义字体/pstrong文字样式为黑体颜色#000fff、大小-1~-7/strongfont face黑体 size-1 color#000fff-1字/fontfont face黑体 size-3 color#000fff-3字/fontfont face黑体 size-5 color#000fff-5字/fontfont face黑体 size-7 color#000fff-7字/fontbr /strong文字W样式为宋体/strongfont face宋体 size2 color#000fff2字/fontfont face宋体 size4 color#000fff4字/fontfont face宋体 size6 color#000fff6字/fontbr /strong文字样式为隶书/strongfont face隶书 size1 color#000fff1字/fontfont face隶书 size3 color#000fff3字/fontfont face隶书 size5 color#000fff5字/fontfont face隶书 size7 color#000fff7字/fontbr /hr size5 color#fff333p拼音音标注释ruby标记和rt/rp标记/pruby中rtzhong/rt国rtnbsp;guo/rt/rubyblockquote块级标记向右缩进5个字符位置/blockquotep预格式化标记pre/ppre alignleft//无效这里什么样子html显示什么样字。/pre/body
/html页面展示
3.列表
当然让我们更深入地了解HTML中列表的使用。
3.1.列表概述
HTML中的列表允许开发者在网页上组织条目。列表通常用于呈现一系列关联信息比如菜单项、操作步骤、概念总结等。列表可以帮助用户快速扫描信息并因为其结构化的格式而容易阅读和理解。
3.2.无序列表Unordered List
无序列表使用 ul 元素来创建用来表示一个项目集合项目的顺序不重要。列表中的每个项目使用 li 标签定义。无序列表默认会用项目符号例如圆点来表示列表项但这个符号可以通过CSS更改为其他图案或图像。
ulli牛奶/lili面包/lili黄油/li
/ul3.3.有序列表Ordered List
有序列表使用 ol 元素创建用来展示一个有明确顺序的项目序列。就像无序列表一样它由多个 li 标签定义的列表项组成。有序列表中的项默认用数字来标记这些数字可以是阿拉伯数字、罗马数字或英文字母也可以通过CSS属性自定义。
olli打开浏览器/lili访问网址/lili阅读内容/li
/ol3.4.列表嵌套Nested Lists
列表嵌套是将一个列表放入另一个列表项中的做法无论是无序列表还是有序列表都可以相互嵌套用以创建层次或子步骤。
ulli早餐ulli燕麦粥/lili鸡蛋/li/ul/lili午餐/lili晚餐/li
/ul3.5.定义列表Definition List
定义列表不是用来列举项目而是成对地展示术语和描述。它使用 dl 元素包围整个列表用 dt 定义术语Definition Term用 dd 来提供术语的描述或定义。
dldtHTML/dtdd用来构建网页的标准标记语言。/dddtCSS/dtdd用来描述网页外观和格式的样式表语言。/dd
/dl使用这些列表类型可以创建清晰、组织良好的内容结构对于提升用户体验和可读性都是非常重要的。在实际开发中列表还经常与CSS、JavaScript结合使用以创建动态交互的网页组件如下拉菜单、导航栏、步骤指示器等。
代码小结
!DOCTYPE html
htmlheadmeta charsetutf-8title列表/title/headbodyhr size5 colorblue width100%/p有序和无序列表/pul typedisc默认指定如果下方无序列表没有指定的话。br /li typedisc实心圆形/lili typecircle空心圆形/lili typesquare实心正方形/li/ulol type1 start7ptype可以选择阿拉伯数字罗马字母或者英文字母/ppstar可以选择开始项/pli项目名称/lili typea只影响当前列表项的标记类型后面依然遵循ol type的取值/lili项目名称/lili typeI value5改变当前列表项的值和类型并影响后续的值只改变当前类型/lili项目名称/li/olhr size5 coloryellow/p列表嵌套/pullih4xiangmu/h4/lili开始嵌套olli1开始/lili typedisc嵌套返回ol type1li1/li/ol/li/ol/li/ulhr size5 colorgreen/p定义列表/pdldt项目1/dtdd描述1/dddd描述2/dddd描述3/dddt项目2/dtdd描述1/dddd描述2/dddd描述3/dd/dldldt联系人/dtdd沈杰/dddd电话01020200/ddddEmailxyzsina.com/dddt联系地址/dtdd上海复旦大学软件4半/dddd难/dddd难/dd/dla name书签名123456/a/body
/html页面展示
4.超链接与浮动框架
4.1.a标签
a 标签是 HTML 中的超链接元素可以用来创建指向其他网页、文件、位置或页面的链接。
a 标签还有name和title属性规定锚的名称、指向连接的提示信息。
a 标签必须配合 href 属性使用来指定超链接的目标例如
a hrefhttps://www.google.com/Google首页/a以上代码会创建一个链接指向 Google 的首页。
另外还可以使用 target 属性来指定链接在何处打开。常用的参数包括
_self: 在当前窗口打开链接默认值。_blank: 在新的窗口或新的标签页中打开链接。_parent: 在父级窗口或框架中打开链接。_top: 在整个窗口中打开链接。 framename 在指定的框架或浮动框架内打开连接框架名称可以自定义。
例如以下代码会在新的标签页中打开 Google 的首页
a hrefhttps://www.google.com/ target_blankGoogle首页/a常见的超链接还有锚点链接在当前页面内跳转到指定位置。详细介绍可以查看 HTML 相关的教程。
a标签页面内跳转到指定位置
在 HTML 中当 a 标签的 href 属性的值以 “#” 开头时它表示一个锚点 (anchor)用于页面内跳转而不是跳转到另一个页面。这在创建单页网站或在长页面中快速导航到特定部分时非常有用。#后面通常紧跟着一个 ID该 ID 对应页面上某个元素的 ID。
例如
a href#section1跳转到第一节/a...div idsection1这是页面中的第一节。
/div当用户点击这个链接时浏览器会滚动到页面中 idsection1 的元素处。
如果 href 属性中只包含 # 而没有跟随 ID例如 href#该链接通常用于创建一个回到页面顶部的快捷方式或者在不指定具体动作的情况下触发 JavaScript 事件。不过要注意仅仅在 href 中使用 # 没有指定 ID会导致页面滚动到顶部。
如果 href 属性中包含 # 且没有紧随任何字符或仅跟有 ID但页面上没有对应的元素具有该 ID单击该链接时页面的位置不会发生变化。
在使用 SPASingle Page Application框架如 React, Angular, Vue 等时# 还常见于 hash 路由中即使用 URL 的哈希部分URL 中 # 以及之后的部分来模拟完整的导航历史这样单页应用在客户端导航时无需重新加载页面。
代码小结
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodyh1 id666head1/h1h1超链接/h1div stylewidth: 50px;a name书签标/ah1hello/h1/divh3 name666 stylecolor: blue;超链接 target 属性测试/h3a hrefhttp://baidu.com titlebaidu target_self在当前框架中打开连接/abr /a hrefhttp://baidu.com titlebaidu target_blank在一个全新的空白框架中打开连接/abr /a hrefhttp://baidu.com titlebaidu target_parent在当前框架的上一层打开连接/abr /a hrefhttp://baidu.com titlebaidu target_top在根顶层框架中打开连接/abr /h3 aligncenter stylecolor: aqua;绝对、相对、根/h3a href../123456/temple/index.html target_self相对路径/aa hrefC:/Users/shenyang/Documents/HBuilderProjects/123456/列表.html根路径/aa hrefhttp://baidu.com根路径/ah1超链接的应用/h1h3a hrefch5.ppt1.HTTP下载-文件ch5.ppt/a/h3h3a hrefftp://sjtu.edu.cn2.FTP下载-上海交通大学FTP站点/a/h3h33.图像超链接a hrefhttps://www.baidu.comimg border0 srcimg/google.jpg//a/h3a hrefmailto:someonemicrosoft.com;xyz163.com?ccjlchu163.combcc12345678qq.comsubjectHello%20againbody同学们:你们好发送邮件/ap应该使用 %20 替换单词之间的空格这样浏览器就能正确的显示文本了/ph3创建页面书签链接/h3p定义书签/pa name书签名书签标题/a!-- 同一页面内 --a href#书签标同页书签标题会返回书签标Hello的位置/a!-- 不同页面内 --a href列表.html#书签名异页书签标题/aa href#666尝试跳转到head1/ahr colorred//body /html
4.2.内联框架
内联框架Inline Frame也叫浮动框架在 HTML 中通过 iframe 标签实现可以用来在当前页面内嵌入另一个独立的网页。它常用于插入来自另一个源或同一源的页面内容例如视频、地图或一个完全独立的网页。该标记必须插入在body标记中而不能插入到frameset标记中。
其基本用法如下
iframe srcurl titledescription
/iframe这里的 src 属性指定了要在内联框架中显示的页面的 URL而 title 属性提供了一个描述文本帮助提高网页的可访问性。
例如要在页面中嵌入一个 YouTube 视频可以这样写
iframe width560 height315 srchttps://www.youtube.com/embed/dQw4w9WgXcQ titleYouTube video player frameborder0 allowaccelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture allowfullscreen
/iframe内联框架 iframe 有很多属性可以配置比如 width 和 height 用来设定尺寸frameborder 定义框架周围边框的可见性现在大多使用 CSS 来替代scrolling设置边框滚动条marginwith和marginherght设置边框左右和上下边距allowfullscreen 允许全屏模式而 allow 属性可以用来设置对特定特性的许可例如全屏、画中画或自动播放等。
使用 iframe 的时候也需要注意一些安全性的问题如跨站点脚本攻击XSS或点击劫持。为了缓解这些问题可以使用一些 HTTP 响应标头如 X-Frame-Options以及在 iframe 中适当地应用 sandbox 属性进行限制。
sandbox 属性使你能够为页面内 iframe 中可能会执行的代码设置额外的限制。例如你可以禁止脚本的运行防止同一个页面的其他内容和嵌入内容之间的表单提交或者禁止 iframe 中的内容进行导航到其他页面。
要使用 sandbox 属性请在 iframe 标签中增加它
iframe srcurl sandbox
/iframe你可以在 sandbox 属性中添加值来放松某些限制如允许表单提交或脚本运行等。
代码小结
!DOCTYPE html
html langenheadmeta charsetutf-8title浮动框架/title/headbodyh1浮动框架/h1div id classh3浮动框架应用/h3hr colorred/iframe nameleftiframe srchttp://www.njust.edu.cn width300height300 marginwidth10px/iframenbsp;nbsp;iframe namerightiframe srchttp://www.pku.edu.cn alignrightwidth300 height300 marginwidth10px/iframep!-- 这里使用了a标签的 targetframename形式 --a hrefhttp://www.gov.cn targetleftiframe在左边的浮动框架中显示中央人民政府网站/aa hrefhttp://www.moe.gov.cn targetrightiframe在右边浮动框架内显示教育部网站/a/p/div/body
/html页面展示
