HTML5快速入门（三）—— 标签综合运用

最新推荐文章于 2016-09-05 01:18:00 发布

黑森林工作室

最新推荐文章于 2016-09-05 01:18:00 发布

阅读量1.3k

点赞数 1

分类专栏：随手笔记 HTML 文章标签： html5 html css html入门 html教程

本文链接：https://blog.csdn.net/yeshaojian/article/details/51729174

版权

本文是HTML5快速入门系列的第三篇，主要介绍如何准备开发环境，包括WebStorm工具的安装和项目文件结构。接着通过分析一个目标网页的结构，讲解如何使用HTML标签进行布局，如div、img等，并预告接下来将使用CSS进行样式装修。

摘要由CSDN通过智能技术生成

前言：

1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友，可以联系我，在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等

另：有很多朋友私聊我说图片不能正常显示的问题，测试后发现简书上可以在windows和mac端完美显示，如果看不到图片麻烦移步简书链接

准备工作

工欲善其事，必先利其器，首先我们需要安装WebStorm这款超超超好用的工具，工具已经帮各位上传到网盘了，画重金搞到的mac最新版呦！windows端的小伙伴麻烦自行百度吧，毕竟资源多webStorm下载地址（已包含安装方法和汉化等方法） —— 密码：awh2
安装完毕后先来简单部署一下项目文件结构：这边就先创建一个imgs文件夹和一个css文件夹就好了

部署工程结构.gif

接下来创建根网页文件（index.html）

创建根网页文件.gif

再创建一个css文件(index.css)

创建css文件.gif

为了演示展示本地图片，我们就将用到的图片以本地的形式保存下来放在imgs内
- 注：图片怎么放进来？只要点击需要放进工程的图片 —— 复制图片 —— 然后选择imgs文件夹 —— 粘贴 —— OK
到这里，准备工作就完毕了

本地图片导入.gif

分析页面

先来看一下我们的目标网页easyicon开发中图标素材搜索神器

网页结构分析.png

从图中可以看出，网页可以分成上、中、下3部分
- 上部：左边一张图片，右边一个登录按钮
- 中部：上边一张图片，下面一个搜索框，搜索框右边一个搜索按钮，再下面有个语音选择按钮
- 尾部：左边一组，右边一组

大概的结构就是上面描述的那样，我们可以把网页的搭建看成是房屋的建设，那么我们需要怎么来做呢？首先我们要分析每个结构用什么标签来做：

上部：我们用div标签包裹住图片和按钮，在分别用div包装图片和按钮

<body>
    <!--头部-->
    <div  class="header">
        <!--左边图片-->
        <div class="header-lefticon">
            <a href="http://www.easyicon.net/" target="_blank">
                <img src="imgs/Snip20160615_2.png" alt="easyicon图片">
        </a>
        </div>
        <!--右边登录-->
        <div class="header-rightlogin">
            <a href="http://www.easyicon.net/vip/?ref=/" target="_blank">登录</a>
        </div>
    </div>
</body>

中部：我们用div标签包裹整个中部内容，再用div分别包裹住图片，搜索框和搜索按钮

<body>
    <!--内容-->
    <div class=

最低0.47元/天解锁文章

黑森林工作室

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录