# 2.4 动手 - 修改更多HTML

![](http://wy.codingirlsclub.com/blog/2017-06-11-213738.jpg)

1. 把导航栏的英文换成中文，并添加一列「报名 Girls Coding Day」，链接到 <https://girlscodingday.org/> （**考察知识点**：考察学员 Lists，参考 [HTML 列表](http://www.w3school.com.cn/html/html_lists.asp)）
2. 修改`<header>`元素中的内容 （ **考察知识点**： Text-Based Element , 参考 [HTML 文本格式化](http://www.w3school.com.cn/html/html_formatting.asp)）
   * 修改`<h1>`元素中内容为「Girls Coding Day」
   * 增加`<h3>`标签，其内容为「我也愿意贡献力量帮助更多的女性学习编程」 （**考察知识点**： Headings系列）
   * 在`<span>`标签嵌套一个`<a>`标签（链接为 Bootstrap模板下载地址 [https://startbootstrap.com/template-overviews/clean-blog/）](https://startbootstrap.com/template-overviews/clean-blog/%EF%BC%89) （**考察知识点**： Paragraphs，Opening Links in a New Window， 参考资料 [HTML 链接](http://www.w3school.com.cn/html/html_links.asp) ）
   * 将「博客」二字加粗（**考察知识点**：Bold Text with Strong， 参考资料 [HTML 文本格式化](http://www.w3school.com.cn/html/html_formatting.asp)）
   * 将「制作」二字变成斜体（**考察知识点**：Italicize Text with Emphasis， 参考资料 [HTML 文本格式化](http://www.w3school.com.cn/html/html_formatting.asp)）

     **Inquiry Learning** ：

     1. 什么是块元素？
     2. 什么是内联元素？
     3. Div元素和span元素哪个是块元素？哪个是内联元素？

     **Learning by Reading** ： 阅读 [HTML `<div>` 和 `<span>`](http://www.w3school.com.cn/html/html_blocks.asp) ， 理解块元素和内联元素
   * 去 <https://unsplash.com/> 下载图片到`img`文件夹，修改图片名字，替换掉背景图 （**考察知识点**：Image， 参考资料 [HTML 图像](http://www.w3school.com.cn/html/html_images.asp)）
3. 修改页面最下端`<footer>`元素中的内容如下图所示 ![](http://wy.codingirlsclub.com/blog/2017-07-01-040619.jpg)
   * 修改twitter图标为微信图标
   * facebook图标为微博图标， 如果有微博请链接到自己的微博

     **Advice for tutor**

     * 什么是 Font Awesome （参考：[Font Awesome 中文网](http://www.fontawesome.com.cn/get-started/) ） ？
     * 怎么使用 Font Awesome ?
   * 添加邮箱图标，点击图标可以发送邮件。邮件需要包含主题（subject)和正文(body) (参考： [Mailto Links | CSS-Tricks](https://css-tricks.com/snippets/html/mailto-links/)) (备注：Linking to an Email Address)
   * 修改copyright段落内容