从零开始学前端（一）——零基础HTML编码|新人交流区

lynnlin

中级菜鸟

发帖: 8

黑豆: 71

威望: 71

贡献值: 25

交易币: 0

红豆: 41

只看楼主倒序阅读 0 发表于: 2016-07-28

— 本帖被 coolshark 执行取消置顶操作(2017-10-10) —

本文适合什么样的人？

1、彻底0基础，对于前端毫无头绪的朋友：

网上的教程一大堆，电子资源也有很多种，自己看书，又觉得坚持不下来来，害怕困难，我觉得本文可以给你提供更多的信心和对于自己的督促。

2、有基础，但是对于接下来很迷茫的朋友：

自己看过相关的书籍课程，但是之后该做什么毫无思路和方向，本系列文章会让您对于前端有一个较好的了解，从写任务中，获得自己对于前端学习的体会。

本文不适合人群。

1、伸手党，mark党，贴张图要源代码的，看了帖子之后收藏一发就结束的人。

2、看完之后，去学习，浅尝辄止的人，这样的人，不会思考，教什么学什么。

3、没有毅力学习的人，学着学着就消失了，这样的人是学不好编程的。

本系列将从零开始，通过布置一些实际任务的方式，教导大家如何进行前端学习。想学习前端的朋友一定不要错过。

为什么要通过布置任务的方式？

我发现，很多教程都是分享视频或者书籍，然后就没有了，看得人只是收藏mark。实际上效果并不是很好。很多时候，看书有疑惑，看不懂，动动手，写一个简单的例子，对于理解是很有帮助的，另一方面，当你看完书之后，也需要更多的练习，去巩固知识（让自己明白，你看书只是看了，其实都没学会，哈哈o(*≧▽≦)ツ个人吐槽。）。所以这里采用了一种布置任务学习的办法。

做任务过程中有疑问，都可以在下方回帖。大家交流解答。

楼主也会分阶段分享一些写的较好的内容让大家参考。

任务一：零基础HTML编码

面向人群：

零基础或初学者

难度：

简单

任务目的：

了解HTML的定义、概念、发展简史

掌握常用HTML标签的含义、用法

能够基于设计稿来合理规划HTML文档结构

理解语义化，合理地使用HTML标签来构建页面

任务描述

参考示例图（见附件），完成一个HTML 页面代码编写（不写CSS，不需要关注样式，只关注文档结构）

任务注意事项

只需要完成HTML代码编写，不需要写CSS

示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定

尽可能多地尝试更多的HTML标签

相关的学习资料：

推荐一本书《Head First HTML与 CSS 第2版》，这本书，讲解未必是最好的，但是肯定是最生动，最让你有意愿学下去的，有能力的，请直接看英文原版！

另外请灵活使用搜索工具和网络资源。

可能你可以搜索到很多例子，答案，但是自己的学习，请自己努力写一个页面给自己看看。

lynnlin

中级菜鸟

发帖: 8

黑豆: 71

威望: 71

贡献值: 25

交易币: 0

红豆: 41

只看该作者 2 发表于: 2016-07-29

回 1楼(ndfim) 的帖子

ndfim:表哥说的很对期待表哥更多指点 (2016-07-29 08:47)

你可以自己试试，写一下这个页面，HTML 常用的基础，里面应该都有。
自己动手看看，然后不懂得，可以看看书，自己搜索下答案。

461763946

高级菜鸟

发帖: 243

黑豆: -42

威望: 431

贡献值: 0

交易币: 0

红豆: 0

只看该作者 3 发表于: 2016-07-30

很不错的，html我在学习中0 0！！

lynnlin

中级菜鸟

发帖: 8

黑豆: 71

威望: 71

贡献值: 25

交易币: 0

红豆: 41

只看该作者 4 发表于: 2016-08-01

回 3楼(461763946) 的帖子

461763946:很不错的，html我在学习中0 0！！ (2016-07-30 14:36)

自己试着写写页面把。这个算是很简单的了。基本常用的标签都涉及到了。

lynnlin

中级菜鸟

发帖: 8

黑豆: 71

威望: 71

贡献值: 25

交易币: 0

红豆: 41

只看该作者 5 发表于: 2016-08-05

这里楼主发两个比较好的网页的源代码供大家参考。如果有问题欢迎提出来。

lynnlin

中级菜鸟

发帖: 8

黑豆: 71

威望: 71

贡献值: 25

交易币: 0

红豆: 41

只看该作者 6 发表于: 2016-08-05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>baidu ife stage-task1</title>
</head>
<body>
<header>
       <h1>网站一级标题</h1>
           <nav>
               <ul>
                   <li><a href="#">导航链接一</a></li>
                   <li><a href="#">导航链接二</a></li>
                   <li><a href="#">导航链接三</a></li>
                   <li><a href="#">导航链接四</a></li>
               </ul>
           </nav>
</header>
<article>
       <h2>文章一级标题</h2>
       <h3>文章二级标题</h3>
           <p><span>文章作者</span>
              <span>文章发表时间</span>
           </p>
    <p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
    <br>换行了<br>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        这是一个很长的段落，这是一个很长的段落，<a href="http://bbs.2cto.com/">这是一个链接链接到http://bbs.2cto.com/</a>这是一个
        很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
    </p>
    <img src="fig1.jpg" height="500px">
    <p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        <br>换行了<br>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        这是一个很长的段落，这是一个很长的段落，<a href="http://bbs.2cto.com/">这是一个链接链接到http://bbs.2cto.com/</a>这是一个
        很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
    </p>
</article>
<article>
        <h2>另一篇文章一级标题</h2>
        <h3>文章二级标题</h3>
           <p><span>文章作者</span>
              <span>文章发表时间</span>
           </p>
    <p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        <br>换行了<br>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        这是一个很长的段落，这是一个很长的段落，<a href="http://bbs.2cto.com/">这是一个链接链接到http://bbs.2cto.com/</a>这是一个
        很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
    </p>
    <img src="fig1.jpg" height="500px">
    <ul>
        <li>列表项目一</li>
        <li>列表项目二</li>
        <li>列表项目三</li>
        <li>列表项目四</li>
</article>
<h2>图片</h2>

<figure>
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
    <figcaption>这是一只可爱的猫</figcaption>
    <img src="fig1.jpg" width="350" height="334" />
</figure>

<article>
    <h2>另一篇文章一级标题</h2>
    <h3>文章二级标题</h3>
    <p><span>文章作者</span>
        <span>文章发表时间</span>
    </p>
    <ol>
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
</article>
<p>下面是一个表格</p>
<table border="1">
    <thead>
    <tr><th>名称</th><th>金额</th><th>动作</th></tr>
    </thead>
      <tbody>
        <tr><td>prize1</td><td>100</td><td><a href="#"></a><a href="">操作</a></td></tr>
        <tr><td>prize2</td><td>600</td><td><a href="#"></a><a href="">操作</a></td></tr>
        <tr><td>prize3</td><td>300</td><td><a href="#"></a><a href="">操作</a></td></tr>
        <tr><td>合计</td><td colspan="2">1000</td></tr>
      </tbody>
</table>
    <article>
       <aside>
           <h2>这里以后是个侧栏</h2>
           <h2>侧栏注册窗口标题</h2>
           <form action="" method="post">
               <label>请输入邮箱地址：<input type="text" name="email"></label>
               <br/><span>邮箱地址请按格式输入</span><br/>
               <label>请输入密码：<input type="password" name="pass"></label>
               <label>请再次输入密码：<input type="password" name="pwd"></label>
               <br/><span>密码为6-16位英文数字</span><br/>
               <span>性别：</span>
               <label><input type="radio" name="gender" value="m">男</label>
               <label><input type="radio" name="gender" value="f" checked>女</label>
               <br/>
               <label>城市：
                  <select name="city">
                      <option value="beijing" selected>北京</option>
                      <option value="guangzhou">广州</option>
                  </select>
               </label>
               <br/>
               <span>爱好：</span>
                 <label><input type="checkbox" name="interest" value="sport">运动</label>
                 <label><input type="checkbox" name="interest" value="art">艺术</label>
                 <label><input type="checkbox" name="interest" value="sic">科学</label>
               <br/><label>个人描述：<textarea  placeholder="请用一句话描述自己" rows="5" cols="20"></textarea><br/>
               </label>
               <button type="submit">确认提交</button>
           </form>
       </aside>
    </article>
</table>
</body>
</html>

lynnlin

中级菜鸟

发帖: 8

黑豆: 71

威望: 71

贡献值: 25

交易币: 0

红豆: 41

只看该作者 7 发表于: 2016-08-05

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>任务一</title>
</head>

<body>
    <header>
        <nav>
            <h1>网站一级标题</h1>
            <ul>
                <li><a href="#">导航链接一</a></li>
                <li><a href="#">导航链接二</a></li>
                <li><a href="#">导航链接三</a></li>
                <li><a href="#">导航链接四</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <hgroup>
                <h2>文章一级标题</h2>
                <h3>文章二级标题</h3>
            </hgroup>
            <div>文章作者
                <time>文章发表时间</time>
            </div>
            <div>
                <p>
                    这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。换行了
                    <br /> 这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                    <a href="http://bbs.2cto.com/">这有一个连接链接到http://bbs.2cto.com/</a>，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。
                </p>
                <img src="img/1.jpg" alt="">
                <p>
                    这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://bbs.2cto.com/">这有一个连接链接到http://bbs.2cto.com/</a>，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。
                </p>
            </div>
        </article>
        <article>
            <hgroup>
                <h2>这是另一篇文章的一级标题</h2>
                <h3>文章的二级标题</h3>
            </hgroup>
            <div>文章作者
                <time>文章发表时间</time>
            </div>
            <div>
                <p>
                    这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。
                </p>
                <p>
                    这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://bbs.2cto.com/">这有一个连接链接到http://bbs.2cto.com/</a>，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。
                </p>
                <img src="img/1.jpg" alt="">
                <ul>
                    <li>列表项目一</li>
                    <li>列表项目二</li>
                    <li>列表项目三</li>
                </ul>
            </div>
        </article>
        <article>
            <h2>图片</h2>
            <figure>
                <figcaption>好看的图片</figcaption>
                <img src="img/1.jpg" alt="">
            </figure>
            <figure>
                <figcaption>好看的图片</figcaption>
                <img src="img/1.jpg" alt="">
            </figure>
            <figure>
                <figcaption>好看的图片</figcaption>
                <img src="img/1.jpg" alt="">
            </figure>
            <figure>
                <figcaption>好看的图片</figcaption>
                <img src="img/1.jpg" alt="">
            </figure>
            <figure>
                <figcaption>好看的图片</figcaption>
                <img src="img/1.jpg" alt="">
            </figure>
            <figure>
                <figcaption>好看的图片</figcaption>
                <img src="img/1.jpg" alt="">
            </figure>
            <figure>
                <figcaption>好看的图片</figcaption>
                <img src="img/1.jpg" alt="">
            </figure>
        </article>
        <article>
            <hgroup>
                <h2>最后一篇文章的一级标题</h2>
                <h3>二级标题</h3>
            </hgroup>
            <div>文章作者
                <time>文章发表时间</time>
            </div>
            <div>
                <ol>
                    <li>排名1</li>
                    <li>排名2</li>
                    <li>排名3</li>
                </ol>
                <p>下面是一个表格，给表格加一个borde="1"是好让你看出是一个表格</p>
                <table border="1">
                    <thead>
                        <tr>
                            <th>表头</th>
                            <th>表头</th>
                            <th>表头</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>表内单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#">操作</a></td>
                        </tr>
                        <tr>
                            <td>表内单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#">操作</a></td>
                        </tr>
                        <tr>
                            <td>表内单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#">操作</a></td>
                        </tr>
                        <tr>
                            <td>表内单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#">操作</a></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td><b>总计</b></td>
                            <td colspan="2"><b>1000</b></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </article>
    </main>
    <aside>
        <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
        <form>
            <label for="email">请输入邮箱地址</label>
            <input type="text" value="这是一个文本框" id="email">
            <div>
            邮箱地址请按要求格式输入</div>
            <label for="pas">请输入密码</label>
            <input type="password" value="这是一个文本框" id="pas">
            <label for="rePas">请重复输入密码</label>
            <input type="password" value="这是一个文本框" id="rePas">
            <div>密码请为6-16位数字</div>
            性别
            <input type="radio" name="rdoGender" value="1" id="male">
            <label for="male">男</label>
            <input type="radio" name="rdoGender" value="2" id="female">
            <label for="female">女</label>
            城市
            <select id="selCity">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
            </select>
            爱好
            <input type="checkbox" name="sport" value="sport" id="sport">
            <label for="sport">运动</label>
            <input type="checkbox" name="art" value="art" id="art">
            <label for="art">艺术</label>
            <input type="checkbox" name="science" value="science" id="science">
            <label for="science">科学</label>
            <label for="txtIntro">个人描述</label>
            <textarea name="" id="txtIntro" cols="30" rows="2">这是一个多行输入框，输入您的个人描述</textarea>
            <input type="submit" value="确认提交">
        </form>
    </aside>
    <footer>
        <span>版权所有 FED©</span>
    </footer>
</body>

</html>