Blogger Information
Blog 4
fans 0
comment 0
visits 5830
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
学号:572616 -12月19日前端学习总结-基础练习
Rayc
Original
621 people have browsed it

1.网页的基本组成部份 

網頁是由不同的標簽和元素組成, 

实例 1. 布局标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局标签</title>
</head>
<body
<!--页眉-->
<header>
<!--    导航-->
    <nav>
        <a href="">Home</a>
        <a href="">About</a>
        <a href="">Connect</a>
        <a href="">Blog</a>
    </nav>
</header>

<!--主体-->
<main>
<!--    内容容器-->
    <article>
        <header>
            <h1>文章标题</h1>
            <p>文章段落1</p>
            <p>文章段落2</p>
        </header>

        <section>
            <h2>标题2</h2>
            <p>文章段落1</p>
            <p>文章段落2</p>
        </section>

        <footer>
            <section>分页条</section>
        </footer>
    </article>

    <aside>
        <ul>
            <li>推荐信息1</li>
            <li>推荐信息2</li>
            <li>推荐信息3</li>
            <li>推荐信息4</li>
            <li>推荐信息5</li>
        </ul>
    </aside>

    <aside>
        <section>
            <h3>广告位招商</h3>
        </section>
    </aside>

    <section>
        <span>标签1</span>
        <span>标签2</span>
        <span>标签3</span>
    </section>
</main>

<!--页脚-->
<footer>
<!--    友情链接,适合div-->
    <div class="link">
        <a href="">链接1</a>
        <a href="">链接4</a>
        <a href="">链接3</a>
    </div>
</footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例 2. 图像元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像元素</title>
</head>
<body>
<!--    显示图片-->
<img src="images/1.jpg" alt="狗与猫">

<!--设置大小, 会自动等比缩放-->
<img src="images/1.jpg" alt="狗与猫" width="300">
<!--图片无法显示时-->
<img src="images/11.jpg" alt="狗与猫" width="300">

<!--png背景透明的好处-->
<style>body {background-color:lightblue;}</style>
<img src="images/2.jpg" alt="" width="200">
<img src="images/3.png" alt="" width="200">
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例 3. 链接元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接元素</title>
</head>
<body>
<!--href属性说明-->
<!--默认在当前窗口打开href指定的页面, href属性值会显示在浏览器状态栏-->
<a href="https://www.php.cn">php中文网</a>

<!--如果不是一个浏览器可解析的文档, 则会自动下载,不会打开,例如 zip 压缩包-->
<a href="demo1.zip">下载文档</a>

<!--href支持发电子邮件-->
<a href="mailto: 498668472@qq.com">发邮件</a>

<!--href支持拨打电话-->
<a href="tel: 189****4567">致电客服</a>

<!--------------------------------------------------------->

<!--target属性说明-->

<!--默认在当前窗口打开href指定的页面-->
<a href="https://www.php.cn">php中文网</a>
<!--等价于-->
<a href="https://www.php.cn" target="_self">php中文网</a>

<!--在新的窗口中打开-->
<a href="https://www.php.cn" target="_blank">php中文网</a>

<!--父页面,顶层页面-->
<!--因为当前页面没有父窗口,所以仍在当前窗口中打开-->
<a href="https://www.php.cn" target="_parent">php中文网</a>

<!--跳转到锚点元素所在位置-->
<a href="#hello" target="_parent">锚点</a>

<!--需要加上高度, 才能直观的看到效果, 注意url地址最后会有#hello-->
<h1 id="hello" style="height: 1000px">Hello PHP中文网</h1>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


实例4. 列表元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表元素</title>
</head>
<body>

<!--无序列表,最重要的使用场景, 就是与链接标签配合,来生成导航-->
<ul>
    <li><a href="">首页</a></li>
    <li><a href="">正在秒杀</a></li>
    <li><a href="">Plus专享</a></li>
</ul>

<!--hr: 水平分隔线-->
<hr>
<!--有序列表-->
<h2>商品分类</h2>
<ol start="1" type="A">
    <li><a href="">电脑 / 办公</a></li>
    <li><a href="">男 / 女 / 童</a></li>
    <li><a href="">男/ 女 / 童</a></li>
    <li><a href="">食品 / 生鲜 / 特产</a></li>
    <li><a href="">图书 / 文娱 / 教育</a></li>
    <li><a href="">母婴 / 玩具 / 乐器</a></li>
</ol>
<!--有序列表, 完全可以通过对无序列表的项目符号CSS自定义来实现,所以并不常用-->

<hr>

<!--自定义列表: 常用在页脚或导航中-->
<h2>联系我们</h2>
<dl>
    <dt>电话:</dt>
    <dd>
        <a href="tel:0551-6388**66">0551-6388**66</a>
    </dd>
    <dt>邮箱:</dt>
    <dd>
        <a href="mailto:admin@php.cn">admin@php.cn</a>
    </dd>
    <dt>地址:</dt>
    <dd>
        <address>中国.合肥.政务新区</address>
    </dd>
</dl>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例5 内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--HTML内联框架元素 (<iframe>)-->
<!--将另一个HTML页面嵌入到当前页面中,而不是窗口中打开另一个网页, 类似画中画-->

<!--在当前页面加载一张地图,以百度地图为例, 工具->分享, 把URL值赋值给src-->
<iframe src="https://j.map.baidu.com/ef/_6" frameborder="0" width="500" height="400"></iframe>

<!--内联框架中的内容不会被当作当前页面内容, 当然也不会被搜索引擎抓取, 会对SEO有影响-->
<!--所以, 不适合写前端数据展示页面, 但非常适合写管理后面页面-->
<!--下面写一个后台小案例-->

<hr>

<ul style="float: left;margin-right: 15px;">
    <li><a href="demo6.html" target="content">商品列表</a></li>
    <li><a href="demo7.html" target="content">添加用户</a></li>
    <li><a href="demo1.html" target="content">系统设置</a></li>
</ul>

<!--srcdoc代替src, 可以在属性值中直接写html代码, 实现后台首页的功能-->
<!--name属性非常重要, 它是链接到该框架页面的入口-->
<iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="530" height="450"></iframe>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


2 . 手抄代码



3. 學習總結

HTML标签,用法有很多, 要全部零活运用有困难,记下常用标签和用法就好了. 虽然这样说,但HTML代码是写和各种系统源码必需要知道和零活运用的.所以要多看别人的代码和自己编写代码. HTML代码不断更新,互联网上有很多资料可以参考. 可以多些去浏览和动手去写.


Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:看来你还是没有学会用markdown来写博客 , 抽空尽快掌握它
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post