其他分享
首页 > 其他分享> > 前端入门笔记之零散学习

前端入门笔记之零散学习

作者:互联网

最开始我们页面布局用的是table标签,然后演变成div+css布局,直到现在我们进行布局用新增的结构性元素

div+css布局
在这里插入图片描述
新增的结构性元素
在这里插入图片描述

常见的新增结构性元素
在这里插入图片描述
1.header元素:一般用于网页的头部,定义头部的区域块,也可以定义一块内容,所定义的内容是一块独立的。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<header>
    <h1>前端依赖的常见浏览器</h1>
    <a href="http://www.baidu.com">百度</a>
    <nav>
        <ul>
            <li><a href="#">谷歌</a></li>
            <li><a href="#">火狐</a></li>
            <li><a href="#">360</a></li>
        </ul>
    </nav>
</header>
</body>
</html>

2.footer元素:与header元素基本一致,但是footer元素一般定义网页的底部内容

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<footer>
    <ul>
        <li>关于我们</li>
        <li>联系客服</li>
        <li>合作招商</li>
        <li>隐私政策</li>
    </ul>
</footer>
</body>
</html>

3.nav元素:可以用来定义导航栏,目录,超链接等;并不是需要把所有的连接组都放进nav元素中,只需要将主要的,基本的连接组放进nav元素即可

4.Article元素:用于定义一个独立的内容区块:可以是一篇博客,一篇文章或者是独立的插件;可以嵌套使用,也可以表示插件。类似于div元素

例子1:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

<article>
    <header>
        <h1>Article元素</h1>
        <p>欢迎学习Article元素</p>
    </header>
    <footer>
        <p>这是底部</p>
    </footer>
</article>

</body>
</html>

例子2:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

<article>
    <h1>这是一个内嵌页面</h1>
    <object data="#" type="" width="600px" height="600px"></object>
</article>


</body>
</html>

5.section元素:用来定义页面中的内容进行分块;强调分块。一般用于页面中具有明显独立的内容

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

<article>
    <section>
        <h1>第一章:桃园三结义</h1>
        <p>桃园三结义最初是小说《三国演义》里记载的故事,述说当年刘备、关羽和张飞三位仁人志士,为了共同干一番大事业的目标,意气相投,
            言行相依,选在一个桃花盛开的季节、选在一个桃花绚烂的园林,举酒结义,对天盟誓,有苦同受,有难同当,有福同享,共同实现自己人生的美好理想。</p>
    </section>
    <section>
        <h1>第二章:</h1>
        <p>草船借箭是我国古典名著《三国演义》中赤壁之战的一个故事。借箭由周瑜故意提出(限十天造十万支箭),机智的诸葛亮一眼识破是一条害人之计,
            却淡定表示“只需要三天”。后来,有大雾天帮忙,诸葛亮再利用曹操多疑的性格,调了几条草船诱敌,终于借足十万支箭,立下奇功。</p>
    </section>
</article>

</body>
</html>

6 aside元素:1.通常用来设置侧边栏。
2.同时也可以嵌套在article元素内部使用,作为主要内容的附属信息,比如参考资料,名词解释等
3.也可以定义article元素之外的内容,,前提是这些内容与article元素内容相关联

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

<article class="film_review">
    <header>
        <h2>侏罗纪公园</h2>
    </header>

    <section class="main_review">
        <p>Dinos were great!</p>
    </section>

    <section class="user_reviews">

        <article class="user_review">
            <p>Way too scary for me.</p>
            <footer>
                <p>
                    Posted on <time datetime="2021-2-11 19:00">Feb 11</time> by Lisa.
                </p>
            </footer>
        </article>

        <article class="user_review">
            <p>I agree, dinos are my favorite.</p>
            <footer>
                <p>
                    Posted on <time datetime="2021-02-19 19:00">Feb 19</time> by Tom.
                </p>
            </footer>
        </article>

    </section>

    <footer>
        <p>
            Posted on <time datetime="2021-02-15 19:00">Feb 15</time> by Staff.
        </p>
    </footer>


</body>
</html>

7.time元素: 1.表示24小时中的某个时刻或某个日期,,表示时刻允许带时差
2.datetime属性中日期与时间要用”T“文字分隔 使用”z“表示UTC标准时间
3.pubbdate属性是一个可选标签,可以让搜索引擎很方便就识别出文章日期,新闻的发表日期

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

<section>
    <time datetime="2019-4-27">2019-4-27</time>
    <time datetime="2019-4-27T20:00">2019-4-27</time>
    <time datetime="2019-4-27T20:00Z">2019-4-27</time>
    <time datetime="2019-4-27+09:00">2019-4-27</time>
</section>


</body>
</html>

8.progress和meter元素:1.progress元素:是HTML5新增的元素,用来建立一个进度条;通常用来与JavaScript结合使用,来显示任务的进度
2. meter元素:是HTML5新增的元素,用来建立一个度量条,用来表示度量衡的评定;通常与JavaScript结合使用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

<form action="">
    <!--max:规定当前进度条的最大值 ; value属性:设定进度条当前显示的默认值  form:规定进度条所属的一个或多个表单-->
    <p>当前下载进度:</p>
    <progress value="30" max="100">

    </progress>

    <meter value="40" max="100" min="10">

    </meter>
</form>

</body>
</html>

标签:零散,入门,元素,笔记,27,内容,2019,用来,定义
来源: https://www.cnblogs.com/huaxiaoyou/p/15616665.html