前端基础编程

发表于 | 分类于 |

HTML基础编程

要求

任务目的

了解HTML的定义、概念、发展简史;
掌握常用HTML标签的含义、用法;
能够基于设计稿来合理规划HTML文档结构;
理解语义化，合理地使用HTML标签来构建页面;

任务描述

参考示例图，完成一个HTML页面代码编写（不写CSS，不需要关注样式，只关注文档结构);
任务注意事项;
只需要完成HTML代码编写，不需要写CSS;
示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定;
尽可能多地尝试更多的HTML标签;

代码-HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务一：零基础HTML编程</title>
</head>
<body>
    <h1>小可爱博客</h1>
    <ul>
        <a href="https://liuying0111.github.io/2018/09/14/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0-JavaScript/"><li>前端学习-JavaScript</li></a>
        <a href="https://liuying0111.github.io/2018/08/31/CSS%E6%95%99%E7%A8%8B/"><li>前端学习-CSS教程</li></a>
        <a href="https://liuying0111.github.io/2018/08/27/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0-HTML%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B/"><li>前端学习-HTML基础教程</li></a>
        <a href="https://liuying0111.github.io/2018/08/26/Markdown%E8%AF%AD%E6%B3%95%E4%BB%8B%E7%BB%8D/"><li>Markdown语法介绍</li></a>
    </ul>
    <h2>前端学习</h2>
    <h3>JavaScrip学习笔记</h2>
        <p>作者：小可爱 &nbsp&nbsp 发表时间：2018/9/4</p>
        <p><strong>JavaScript</strong>是一种运行在浏览器中的<strong>解释型的编程语言</strong>。在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。随着HTML5在PC和移动端越来越流行，JavaScript变得更加重要了。并且，新兴的Node.js把JavaScript引入到了服务器端，JavaScript已经变成了全能型选手。</p>
        <p>JavaScript的语法和Java语言类似，每个语句以；结束，语句块用{…}。但是，JavaScript并不强制要求在每个语句的结尾加；，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上；详细资料可以参考<a href="http://www.w3school.com.cn/js/index.asp">W3SCHOOL</a><br>
        <img src="1.jpg" width="400" height="400">
        <p>JavaScript的语法和Java语言类似，每个语句以；结束，语句块用{…}。</p>
    <h2>前端学习</h2>
    <h3>CSS基础教程</h3>
        <p>小可爱 &nbsp&nbsp 2018/8/31</p>
        <p><strong>JavaScript</strong>是一种运行在浏览器中的<strong>解释型的编程语言</strong>。在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。随着HTML5在PC和移动端越来越流行，JavaScript变得更加重要了。并且，新兴的Node.js把JavaScript引入到了服务器端，JavaScript已经变成了全能型选手。</p><br>
        <img src="1.jpg" width="400" height="400">
        <ul>
            <li>列表项目1</li>
            <li>列表项目2</li>
            <li>列表项目3</li>
        </ul>
    <h2>图片</h2>
        <ul>
            <li>好看的图片1<br><img src="1.jpg" width="400" height="400"></li>
            <li>好看的图片2<br><img src="1.jpg" width="400" height="400"></li>
            <li>好看的图片3<br><img src="1.jpg" width="400" height="400"></li>
        </ul>
    <h2>前端学习</h2>
    <h3>HTML基础教程</h3>
        <p>小可爱 &nbsp&nbsp 2018/8/25</p>
        <ol>
            <li>排名1</li>
            <li>排名2</li>
            <li>排名3</li>
        </ol>
        <p>下面是一个表格，加上border=1</p>
        <table border="1">
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="http://ife.baidu.com/course/all">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="http://ife.baidu.com/course/all">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="http://ife.baidu.com/course/all">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="http://ife.baidu.com/course/all">操作</a></td>
            </tr>
            <tr>
                <td>总计</td>
                <td colspan="2">1000</td>
            </tr>
         </table>
    <aside>
        <h2>这是一个侧栏</h2>
        <h3>侧栏注册窗口标题</h3>
        <form>
            请输入邮箱地址：<input type="text" name="emailaddress" value="这是一个文本输入框"><br>
            <p>邮箱地址请按要求格式输入</p>
            请输入密码:<input type="text" name="code" value="这是一个文本输入框">
            请重复输入密码：<input type="text" name="code" value="这是一个文本输入框">
            <p>密码请为6-16位英文数字</p>
        </form>
        <form>
            性别：<input type="radio" name="sex" value="male">男
                 <input type="radio" name="sex" value="female">女
            城市：<select>
                     <option>北京</option>
                     <option>上海</option>
                     <option selected="selected">西安</option>
                     <option>内蒙古</option>
                 </select>
            爱好：<input type="checkbox">运动
                  <input type="checkbox">艺术
                  <input type="checkbox">科学
            个人描述：<textarea>请输入你的个人描述</textarea>
            <input type="submit" value="确认提交">
        </form>
    </aside>
    <footer>版权所有&copy;</footer>
</body>
</html>

效果展示

click here