0


前端学习Day6 HTML 页面的布局与交互(附综合练习版)

一、结构元素

HTML5可以使用结构元素构建网页布局,使Web设计和开发变得更加容易,并且对数据挖掘服务更加友好。HTML5提供了各种切割和划分页面的手段,允许用户创建的切割组件不仅能用来有逻辑地组织站点页面布局,而且能够赋予网站聚合的能力。

在HTML5中,为了使文档的结构更加清晰明确,使用了文档结构元素构建网页布局。

1、HTML5语义化标签的优点:
1.没有CSS时,也能呈现出内容结构、代码结构
2.方便开发与维护
3.方便搜索引擎识别页面结构,有利于SEO
4.方便其他设备解析
5.有利于合作,遵守W3C(万维网联盟)标准

2、结构元素
元素描述header用于设置页面的页眉nav用于构建导航main呈现<body>或应用的主体部分,在一个文档中不能出现一个以上的<main>标签。目前IE浏览器不支持<main>,其经常被

代替article表示文档、页面、应用程序或网站中一体化的内容aside表示与页面内容相关、有别于主要内容的部分section用于对网站或应用程序中页面中的内容进行分块footer用于设置页面的页脚figure figcaption 和 hgroup用于对页面中的内容进行分组

二、页面交互元素

对于网站应用来说,在用户体验方面表现最为突出的就是客户端与服务器端的交互。HTML5增加了交互体验元素。

1、details元素用于描述文档或文档某个部分的细节。summary元素经常与** details **元素配合使用,作为 **details **元素的第一个子元素,用于为 details定义标题。标题是可见的,当用户单击标题时,会显示或隐藏details中的其他内容。

举个栗子:

<body>
    <details>
        <summary>H5创新学院课程系列</summary>
        <ul>
            <li>前端基础课程</li>
            <li>前端进阶课程</li>
            <li>前端框架课程</li>
        </ul>
    </details>
</body>

运行结果:****折叠和展开的效果图

2、progress元素用于表示一个任务的完成进度。这个进度的全程可以是不确定的,只是表示进度正在进行,但是不清楚还有多少工作量没有完成。
属性值描述value已经完成的工作量max总共有多少工作量
其中,value 和 max 属性的值必须大于0,且 value 的值要小于或等于 max属性的值。

三、块级元素和内联(行内)元素

1、块级元素和内联(行内)元素的概念
块级元素****内联元素
块元累会在页面中独占一行

(自上向下垂直排列)

行内元累不会独占页面中的一行,

只占自身的大小
可以设置width,height属性行内元素设置width,height属性无效一般块级元素可以包含行内元素和其他块级元素一般内联元素包含内联元素不包含块级元素
2、常见的块级元素

div、form、h1~h6、hr、p、table、ul

②无实际意义的块级标签**

**

3、常见的内联(行内)元素

span、a、b、em、i、strong

②内联元素中可以设置宽高的元素:img、input(可以理解为行内块级元素,可以设置宽高)

③无实际意义的内联标签****

四、表单

由于表单内容较多,所以另开了一篇,小伙伴们往前爬楼~

五、综合练习

老规矩:先看效果图自己敲,不懂再看代码

**代码: **

<body>
    <header>
        <h1 align="center">H5创新职业学院</h2>
        <p align="center">欢迎来到:<ins>计算机学院</ins></p>
    </header>
    <hr>
    <nav>
        <ul type="disc">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">学校风采</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </nav>
    <hr >
    <main>
        <article>
            <section>
                <h2>最新文章</h2>           
                <h3>文章标题</h3>
                <p>这里是文章的内容简介<br>可以使用标签<br>进行换行</p>
            </section>
         <br>
         <br>
            <section>
                <img src="./校徽.jfif" alt="这是校徽" width="250" height="250">
                <p>想了解H5创新职业学院:<a href="#">点击这里</a></p>
            </section>
        </article>
    </main>
    <br>
    <aside>
        <h3>侧边栏</h3>
        <p>侧边栏内容,如快速链接、广告等。</p>
        <table border="1" >
            <tr>
                <th>专业</th>               
                <th>链接</th>
            </tr>
            <tr>
                <td>计算机应用技术</td>               
                <td><a href="./专业A.html">专业A详情</a></td>
                </tr>
            <tr>
                <td>数字媒体技术</td>               
                <td><a href="./专业B.html">专业B详情</a></td>
            </tr>
        </table>
    </aside>
    <aside>
        <h3>联系我们</h3>
        <form>
            姓名:<input type="text"><br>
            邮箱:<input type="text"><br>
            <input type="submit" value="提交">
        </form>
    </aside>
    <footer>
        <hr>
        <p>版权所有©️2024H5创新职业学院计算机学院</p>
    </footer> 
</body>
标签: 前端 学习 html

本文转载自: https://blog.csdn.net/As977_/article/details/142881201
版权归原作者 As977_ 所有, 如有侵权,请联系我们删除。

“前端学习Day6 HTML 页面的布局与交互(附综合练习版)”的评论:

还没有评论