首页课程HTML-Spaßkurs简单创建一个博客

简单创建一个博客

目录列表

&

创建一个博客


在整个课程中,我们将帮助你练习并创建你自己的博客项目,你需要积累所学到的知识,并将其应用。继续学习,按照“任务”部分的说明进行操作,最终,完成创建自己的博客页面。

下面就是你要完成的博客页面,点击 “运行实例” 查看代码及其输出。

实例

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

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>我的博客</title>

        <link href="http://www.php.cn/blog.css" rel="stylesheet" type="text/css" />

    </head>   

    <body>

        <!-- header start -->

        <div id="header" class="section">

            <img src="https://http://www.php.cn/avatar.png" alt="头像" class="img-circle" />

            <p>W3Cschool小师妹</p>

        </div>

        <!-- header end -->

         

        <!-- About Me section start -->

        <div class="section">

            <h2><span>关于我</span></h2>

            <p>嘿!我是<strong>小师妹</strong>。编码改变了我的世界。它不仅仅是应用程序。学习代码给了我解决问题的技能和在技术层面与他人沟通的途径。我也可以开发网站,并使用我的编程技术来获得更好的工作。我是在 <strong>W3Cschool</strong> 学到了所有这些,这让我也保持了对学习编程的积极性。加入我这个有益的学习旅程。沿途你会获得乐趣,得到帮助,学习更多知识!</p>

            <p class="quote">"I love coding, I love php!"</p>

        </div>

        <!-- About Me section end -->

 

        <!-- My Schedule section start -->

        <div class="section">

            <h2><span>我的时间表</span></h2>

            <table>

                <tr>

                    <th>Day</th>

                    <th>Mon</th>

                    <th>Tue</th>

                    <th>Wed</th>

                    <th>Thu</th>

                    <th>Fri</th>

                </tr>

                <tr>

                    <td>8:00-8:30</td>

                    <td class="selected">Learn</td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td></td>

                </tr>

                <tr>

                    <td>9:00-10:00</td>

                    <td></td>

                    <td class="selected">Practice</td>

                    <td></td>

                    <td></td>

                    <td></td>

                </tr>

                <tr>

                    <td>10:00-13:30</td>

                    <td></td>

                    <td></td>

                    <td class="selected">Play</td>

                    <td></td>

                    <td></td>

                </tr>

                <tr>

                    <td>15:45-17:00</td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td class="selected">Code</td>

                    <td></td>

                </tr>

                <tr>

                    <td>18:00-18:15</td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td class="selected">Discuss</td>

                </tr>

            </table>

        </div>

        <!-- My Schedule section end -->

                 

        <!-- My Skills section start -->

        <div class="section">

            <h2><span>我的技能</span></h2>

            <ul>

                <li>HTML</li>

                <li>CSS</li>

                <li>JavaScript</li>

            </ul>

        </div>

        <!-- My Skills section end -->

                 

         <!-- Media section start -->

        <div class="section">

            <h2><span>我的媒体</span></h2>

            <iframe height="240" width="320" src="http://www.php.cn/demosource/movie.mp4" allowfullscreen frameborder="0"></iframe>

        </div>

        <!-- Media section end -->

         

        <!-- Contact section start -->

       <div class="section">

            <h2><span>联系我</span></h2>

            <form>

                <input name="name" placeholder="Name" type="text" required /><br/>

                <input name="email" placeholder="Email" type="email" required /><br/>

                <textarea name="message" placeholder="Message" required ></textarea>

                <input type="submit" value="发送" class="submit" />

            </form>

        </div>

        <!-- Contact section end -->

         

        <!-- Follow section start -->

        <div class="section" id="follow">

            <h2><span>关注我</span></h2>

            <div>

                <a href="#">

                    <img alt="qq" src="http://www.php.cn/blog/qq.png" />

                </a>

                <a href="#">

                    <img alt="weixin" src=http://www.php.cn/blog/weixin.png"/>

                </a>

                <a href="#">

                    <img alt="weibo" src="http://www.php.cn/blog/weibo.png" />

                </a>

            </div>

        </div>

        <!-- Follow section end -->

         

        <div class="copyright">

            © 2017 My Blog. All rights reserved.

        </div>

    </body>

</html>


运行实例 »

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

不要害怕页面代码长,当你完成课程时,一切都将非常有意义! 

任务:更改文档标题,将文档标题更改为你自己想要输入的名称。请记住,文档标题位于页面 <head> 中的 <title> 标签内。


将文档的标题添加到 html 页面。

<html> <head> <title>我的博客</ > </head> </html>

1/2