HTML5 + CSS3 页面结构学习笔记(五)

简介: HTML5 + CSS3 页面结构学习笔记(五)

页面结构学习


页面结构分析


页面结构分析


常用元素列表


元素名 描述
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web网页中的一块独立区域
article 独立的文章内容
aside 相关内容或应用
nav 导航类辅助内容


页面演示示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe内联框架


iframe内联框架 (实现简单的页面嵌套)

<iframe src="path" name="mainFrame"></iframe>
path:引用网页地址
mainFrame:框架标识名

多个iFrame嵌套使用实现页面的切换

</iframe>
<iframe src="" name="hello" frameborder="0"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10"
        scrolling="no" border="0"
        frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

演示示例


6bac31351b4c4d0f874f68fe95884db6.png

相关文章
|
9天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
80 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
73 7
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
47 6
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
51 5
|
2月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
26 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
2月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
69 0
|
前端开发
页面打印 css
CSS打印分页 page-break-before : auto | always | avoid | left | right | null   参数:  auto :  假如需要在对象之前插入页分割符always :  始终在对象之前插入页分割符avoid :  避免在对象前面插入页分割符left :  在对象前面插入页分割符直到它到达一个空白的左页边right :  在对象前面插入页分割符直到它到达一个空白的右页边null :  空值。
658 0
|
5月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)