HTML知识积累及实践(六) - pre,混合框架

简介: HTML知识积累及实践(六) - pre,混合框架

html - pre标签

pre 元素可定义预格式化的文本. 被包围在 pre 元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体<pre> 标签的一个常见应用就是用来表示计算机的源代码:

形式:

<pre>

   &lt;html&gt;

     &lt;head&gt;

           &lt;/head&gt;

     &lt;body&gt;

     &lt;body&gt;

   &lt;/html&gt;

</pre>

网上的源代码上传,就用了这个标签,对于各种语言关键词的颜色改变多用了应用的插件,不用插件不会变颜色

如果直接把代码或者处理文字放入html源代码的话,会被浏览器解析出来,比如<会被认为成标签的开始

所以要把所有的<替换成<等,特殊字符必须替换

例如:

以下代码

<body>
<pre>
  <title>HTML国际化标准模板 - TCH</title>  
    <meta name="Keywords" content="关键词,关键词,关键词">
    <meta name="description" content=""> 
</pre>

本身是想把pre中的代码按照预格式处理的方式打出来,但是没有结果,因为<title>这些被解析了

将所有的特殊符号替换之后即可

<body>
<pre>
    &lttitle&gtHTML国际化标准模板 - TCH&lt/title&gt  
    &ltmeta name="Keywords" content="关键词,关键词,关键词"&gt
    &ltmeta name="description" content=""&gt 
</pre>
</body>

这样就不会被浏览器解析了

效果如下:

2018122814580746.png

html - 框架

frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性垂直框架(cols)、水平框架(rows)

形式:

<frameset cols="25%,50%,25%">

 <frame src="frame_a.html">

 <frame src="frame_b.html">

 <frame src="frame_c.html">

</frameset>

frameset 与body的是同级的,body要干掉,不删掉的话看不到效果

横排rows 竖排cols  

*代表剩余的部分

<frameset cols="20%,*,30%">
  <frame src="a.html"></frame>
  <frame src="b.html"></frame>
  <frame src="c.html"></frame>
</frameset>

其中,a.html b.html c.html 只是分别添加了文本内容,便于观察实践结果

效果如下:

2018122814580746.png

框架的第二个分支 - 混合框架

即在框架内还可以嵌套框架

<frameset rows="20%,*,10%">
  <frame src="a.html"></frame>
  <frameset cols="20%,*">
    <frame src="left.html"></frame>
    <frame src="right.html"></frame>
  </frameset>
  <frame src="c.html"></frame>
</frameset>右侧的内容部分

效果如下:

2018122814580746.png

框架的第三个分支 - 导航框架

<frameset rows="15%,*">
  <frame src="top.html"></frame>
  <frameset cols="16%,*">
    <frame src="dh.html"></frame>
    <frame src="content.html" name="content"></frame>
  </frameset>
</frameset>

top.html为首行标题

dh.html为导航块,由一些a标签组成,其target指向变换content.html所在区域

content.html显示导航内容页

效果如下:

2018122814580746.png

2018122814580746.png

框架的第四个分支 - 内链框架

形式:

<iframe src="/i/eg_landscape.jpg"></iframe>

<p>一些老的浏览器不支持 iframe。</p>

<p>如果得不到支持,iframe 是不可见的。</p>

<body>
<h1>HTML标签 - 内链框架</h1>
<iframe src="http://baidu.com" width="1000" height="500"></iframe>
</body>

效果如下:

2018122814580746.png

对于html框架,不利于seo优化,所以现在开发一般不会用框架

百度搜索SEO优化,百度搜索引擎优化指南

我们建议

使用文字而不是flash、图片、js等来显示重要的内容或链接

如果必须使用flash制作网页、建议同时制作一个供搜索引擎收录的文字、并在首页使用文本链接指向文字版

ajax等搜索引擎不能识别的技术,只用在需要用户交互的地方,不把希望搜索引擎“看”到的导航及正文内容放到ajax中

不使用frame和frame框架结构、通过iframe显示的内容可能被百度丢弃

良好收录 : 机器可读,百度通过一个叫做Baiduspider的程序抓取互联网上的网页,经过处理后键入索引中。目前Baiduspider只能读懂文本内容、flash、图片等非文本内容暂时不能处理,无法识别flash、图片、javascript中的内容

互联网的东西是以需求为导向而不是以技术位导向!!!切记!!!


相关文章
|
移动开发 前端开发 JavaScript
HTML 框架高阶用法
HTML框架,或前端框架,如Bootstrap、Vue.js等,显著提升了Web应用开发的速度与用户体验。本文介绍了一些高级技巧,如自定义样式与组件、响应式设计实践、JavaScript功能增强及性能优化策略等,帮助开发者更好地利用这些工具,实现高效开发并提升应用性能与灵活性。
|
2月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
189 19
|
1月前
|
缓存 边缘计算 运维
基于 Cloudflare Workers 构建高性能知识库镜像服务:反向代理与 HTML 动态重写实践
基于Cloudflare Workers构建的边缘计算镜像服务,通过反向代理、HTML动态重写与智能缓存,优化维基百科等知识平台的访问性能。支持路径映射、安全头清理与容错回退,实现免运维、低延迟、高可用的Web加速方案,适用于教育、科研等合规场景。
458 8
|
6月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
185 2
HTML中的<br>、<hr>和<pre>标签使用指南
HTML中的<br>、<hr>和<pre>标签使用指南
1118 2
|
前端开发 搜索推荐 JavaScript
HTML 框架
HTML 框架
244 1
HTML 框架2
iframe标签用于在当前页面中嵌入另一个HTML页面。通过设置frameborder属性为&quot;0&quot;,可以移除iframe边框。iframe的src属性用于指定要嵌入的页面URL。例如,使用`&lt;iframe src=&quot;https://www.runoob.com&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;`可以无边框地显示RUNOOB.COM页面。
HTML 框架1
HTML框架允许在同一个浏览器窗口中同时显示多个页面。`&lt;iframe&gt;`标签用于嵌入其他网页,基本语法为 `&lt;iframe src=&quot;URL&quot;&gt;&lt;/iframe&gt;`。可以通过设置 `height` 和 `width` 属性来调整 iframe 的大小,例如:`&lt;iframe src=&quot;demo_iframe.htm&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/iframe&gt;`。属性值可以是像素或百分比。
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
HTML 框架3
iframe 是一种在网页中嵌入另一个 HTML 页面的技术。通过设置 iframe 的属性,可以显示指定的目标链接页面。例如,可以使用 iframe 嵌入 RUNOOB.COM 网站。HTML 中的 `&lt;iframe&gt;` 标签用于定义内联框架。