头歌网页设计与制作实训答案

我这里已经看不见原题目了，只粘贴了有Begin和End部分的代码，如果题目符合但答案不符合的的，欢迎在评论区找我。如果有帮助，请赞一个。注意看目录里有没有你需要的。

目录

一、HTML——基础

1.初识HTML: 简单的Hello World网页制作

2.HTML结构: 自我简介网页

二、HTML——文本

1.HTML链接: 带超链接的网页

2.HTML标题与段落: 网络文章网页

3.HTML表格: 日常消费账单表格展示

三、HTML——多媒体

1.HTML图片: 带图片的菜谱网页

2.HTML音频: 音乐播放网页

3.HTML视频: 视频播放网页

四、CSS从入门到精通——基础知识 

1.初识CSS: 丰富多彩的网页样式

2.CSS样式引入方式

五、CSS从入门到精通——基础选择器

1.CSS元素选择器

2.CSS类选择器

3.CSSid选择器

六、CSS从入门到精通——背景样式 

1.背景颜色

 2.背景图片

3.背景定位与背景关联

七、CSS入门到精通——表格样式

1.表格边框

2.表格颜色、文字与大小

八、CSS从入门到精通——盒模型

1.透视盒模型: 居中的的盒子页面

2.确定盒模型元素大小

---

一、HTML——基础

1.初识HTML: 简单的Hello World网页制作

  
    
    

    
    

  
    
    
Hello World
    
动手改变世界
  
    

2.HTML结构: 自我简介网页

    

  
    
     
    
    
  
  
    
自我简介

    
简介
    
我是一个大数据专业的学生

    
三个与你最有关的词
    
这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。
    

        
1
        
2
        
1
        
2
        
1/li>
        
2
    

  

二、HTML——文本

1.HTML链接: 带超链接的网页

    
    
    
    

  


    
HTML 入门
    
本页目录
    

        
简介
        
第1关
        
第2关
    

    
简介
    

        HTML(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
        CSS(Cascading Style Sheets，级联样式表单)和
        JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。
    
自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。
    
    
第1关
    
初识HTML：简单的Hello World网页
    
第2关
    
HTML链接：带超链接的网页
    

    
若需帮助，请发送问题到E-Mail。
    
回到顶部

  

2.HTML标题与段落: 网络文章网页

    
    

  


    
HTML
    
超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
        标记语言。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台[1]。
    
    
历史
    
开发过程
    
1980年，物理学家Tim Berners-Lee，
        CERN的一位项目负责人，提出并实现了ENQUIRE系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based
        超文本系统[2]。
    
    
HTML里程碑
    

        
1995年11月24日
        
HTML2.0发布，对应的IETF文档为RFC 1866。
        
1997年1月14日
        
HTML 3.2以
            
                W3C推荐标准的形式发布。 随后的HTML标准都由W3C组织发布。
        
1997年12月18日
        
HTML 4.0发布[3]。
        
2014年10月28日
        
HTML5 发布。
        
2016年11月1日
        
HTML 5.1发布。

    
    
参考文献
        

        
            
Flanagan, David. JavaScript - The definitive guide (6 ed.). p. 1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."
            
Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). 
            
"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.
        
        

  

3.HTML表格: 日常消费账单表格展示

  


    
    
    
    
    



    

        
日常消费账单
        

            
            

                
消费项目
                
一月
                
二月
            
        
        

            
            

                
食品烟酒
                
￥1241.00
                
￥1250.00
            
            

                
衣物
                
￥330.00
                
￥594.00
            
            

                
居住
                
￥2100
                
￥2100
            
            

                
生活用品及服务
                
￥700.00
                
￥650.00
            
            

                
医疗保健
                
￥150.00
                
￥50.00
            
            

                
教育、文化和娱乐
                
￥1030.00
                
￥1250.00
            
            

                
交通和通信
                
￥230.00
                
￥650.00
            
            

                
其他用品和服务
                
￥130.40
                
￥150.00
            
        

            
            

            

                
总计
                
￥5911
                
￥6694
            
            
                
    

  

三、HTML——多媒体

1.HTML图片: 带图片的菜谱网页

    
    


    
带图片的菜谱——酸辣藕带
    
食材：
    
蒜头3瓣、姜一小块、葱2根、藕带250g、红辣椒3个、花椒1大勺、米醋1大勺、盐适量、糖一小撮、香油一小勺。
    
    
步骤：
    

        
蒜头、姜切片。红辣椒用滚刀切条，小葱切葱花。
            


            
        
藕带斜切成段
            


            
        
起油锅，下花椒，待轻微冒烟、香气溢出，捞出花椒。下藕带翻炒，加白米醋和盐，炒1~2分钟。
            


            
        
放糖提鲜，撒香油和葱花，翻匀出锅
            


            
        
完成。
            


    
    

    
转自下厨房-酸辣藕带
    

2.HTML音频: 音乐播放网页

3.HTML视频: 视频播放网页

    
    


    
    
扬帆起航
    
    

    
HTML5 video 播放示例
    
注意：视频控件显示效果在不同浏览器中有些许差别。

四、CSS从入门到精通——基础知识 

1.初识CSS: 丰富多彩的网页样式

  
    
    
    
  
  
    
CSS让网页样式更丰富
    
    
使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。
  

2.CSS样式引入方式

    
    
     
        
    

     

    



    

        
        
        
O Captain! My Captain!

        
            
        
        
O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the steady keel, the vessel grim and daring;
    
        
    
        
© Walt Whitman
            
        
    

五、CSS从入门到精通——基础选择器

1.CSS元素选择器

  
  
  
  
  





  

    
精选
    
时事
    
财政
    
思想
    
生活
  

  

    

      
精选
      
精选新闻1
      
精选新闻2
      
精选新闻3
    
    

      
时事
      
时事新闻1
      
时事新闻2
      
时事新闻3
    
    

      
财政
      
财政新闻1
      
财政新闻2
      
财政新闻3
    
    

      
思想
      
思想新闻1
      
思想新闻2
      
思想新闻3
    
    

      
生活
      
生活新闻1
      
生活新闻2
      
生活新闻3
    
  

  
Copyright (c) News Copyright Holder All Rights Reserved.

2.CSS类选择器

  
  
  
  
  



  

    
精选
    
时事
    
财政
    
思想
    
生活
  
  
  

        
    

      
精选
      
精选新闻1
      
精选新闻2
      
精选新闻3
    
    

      
时事
      
时事新闻1
      
时事新闻2
      
时事新闻3
    
    

      
财政
      
财政新闻1
      
财政新闻2
      
财政新闻3
    
    

      
思想
      
思想新闻1
      
思想新闻2
      
思想新闻3
    
    

      
生活
      
生活新闻1
      
生活新闻2
      
生活新闻3
    
  
  
  
Copyright (c) News Copyright Holder All Rights Reserved.

3.CSSid选择器

  
  
  
  
  



  
  

  
    
精选
    
时事
    
财政
    
思想
    
生活
  

  

    

      
精选
      
精选新闻1
      
精选新闻2
      
精选新闻3
    
    

      
时事
      
时事新闻1
      
时事新闻2
      
时事新闻3
    
    

      
财政
      
财政新闻1
      
财政新闻2
      
财政新闻3
    
    

      
思想
      
思想新闻1
      
思想新闻2
      
思想新闻3
    
    

      
生活
      
生活新闻1
      
生活新闻2
      
生活新闻3
    
  
  
Copyright (c) News Copyright Holder All Rights Reserved.

六、CSS从入门到精通——背景样式 

1.背景颜色

/* ********** BEGIN ********** */
              body {
            background-color:ivory;
        }   


/* ********** END ********** */

h1 {
    font-size: 40px;
    text-align: center;
}

p {
    font-size: 18px;
    color: grey;
    /* ********** BEGIN ********** */
    background-color:lightblue;
    /* ********** END ********** */
}

 
2.背景图片

body {
    /* ********** BEGIN ********** */
    /*设置背景图片*/
    background-image: url(https://www.educoder.net/attachments/download/211106);

    /* ********** END ********** */
}

div {
    width: 90%;
    height: 100%;
    margin: auto;
}

3.背景定位与背景关联

body {
     margin-right: 200px;
     /* ********** BEGIN ********** */
     /*设置背景图片*/
     background: url(https://www.educoder.net/attachments/download/211104) no-repeat fixed right top;;
     /* ********** END ********** */
 }

div {
     width: 90%;
     height: 100%;
     margin: auto;
 }

七、CSS入门到精通——表格样式

1.表格边框

table {
    /* ********** BEGIN ********** */
    border-collapse: collapse;
    border: 2px solid black;
    
    /* ********** END ********** */
}
 
th,
td {
    padding: .5em .75em;
}
 
th {
    /* ********** BEGIN ********** */
    border: 1px solid grey;
    /* ********** END ********** */
}
 
td {
    /* ********** BEGIN ********** */
    border: 1px dotted grey;
    /* ********** END ********** */
}

2.表格颜色、文字与大小

table {
    border-collapse: collapse;
    border: 2px solid black;
}
 
caption {
    /* ********** BEGIN ********** */
 
font-size: 20px;
height: 40px;
 font-weight: bold;
 
 
    /* ********** END ********** */
}
 
th,
td {
    /* ********** BEGIN ********** */
    
    height: 50px;
    width: 100px;
    text-align: center;
    
    /* ********** END ********** */
}
 
th {
    /* ********** BEGIN ********** */
    border: 1px solid white;
    background-color: lightseagreen;
    color: white;
 
    /* ********** END ********** */
}
 
td {
    border: 1px solid grey;
}

八、CSS从入门到精通——盒模型

1.透视盒模型: 居中的的盒子页面

* {
    margin: 0;
    padding: 0;
}

body {
    /* ********** BEGIN ***********/
    padding: 20px;
    /* ********** END *************/
    border: 10px solid lightsalmon;
}

h1 {
    text-align: center;
}

#box2 {
    /* ********** BEGIN ***********/
    width: 350px;
    padding: 25px;
    border: 20px solid yellowgreen;
    margin-bottom: 10px;
    /* ********** END *************/
}

2.确定盒模型元素大小

    
    
    


    
Content box
    

    
Border box