Head First HTML and CSS, 2nd edition 学习 chapter 1,2&3

原创 2018年04月17日 17:29:31

学习Web开发的第五天,进展虽然不快但还算顺利。鼓掌.gif!已经学完了前三章,书中要求的练习和代码作业都做了,下面来总结一下主要的知识点,就算是对前三章做一个总复习吧。

Chapter 1 The Language of the Web

创建html文件;

标签<html>, <head>, <title>, <body>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <em>;

元素=开始标签+内容+结束标签;

<style>元素(写在head里),type属性,<style type="text/css">body{}</style>,只用<style>不写属性也同样指的是css;

下面是书中的例子:

<style type="text/css">

    body{

                background-color: #d2b48c;

                margin-left: 20%;

                margin-right: 20%;

                border: 2px dotted black;

                padding: 10px 10px 10px 10px;

                font-family: sans-serif;

    }

</style>

style元素中的样式应用于html中的body内容;

HTML主要用于创建网页的结构,CSS用来制作网页的外观;

位于<!-- -->中的注释会被浏览器忽略。


Chapter 2 Meeting the "HT" in HTML

添加到另一个页面的链接:<a>元素,href属性<a href="example.html">example</a> ,双引号里面是要添加的链接的路径,元素中的内容是要在浏览器显示的文本;

理解属性,比如<style type="text/css">,<a href="example.html">,<img src="sweetpotato.gif">,属性值都在双引号中;

为了让网页有条理性,要把文件和文件夹按某种方式归类整理好;

relative path(相对路径):源文件与被引用文件在同一目录下,或被引用文件在源文件的下一级目录,都比较容易掌握,需要注意的是被引用文件在源文件的上一级目录,需要向上查找,向上一级的话前面加一个"..",即父文件夹的意思,如文中的<a href="../lounge.html">,向上两级的话就加两个"..",即“../..”;

父文件夹和子文件夹。


Chapter 3 Web Page Construction

sketch➡️outline➡️web page;

元素<q>, <blockquote>, <br>, <li>, <ol>, <ul>, <dl>, <dt>, <dd>;

nesting(嵌套);

block element(块元素):<h1>, <h2>, ... , <h6>, <p>, <blockquote>,<li>, <ol>, <ul>;

inline element(内联元素): <q>, <a>(注意<a>也可以包含块元素,所以它既可以是块元素,也可以是内联元素), <em>,<img>;

void element(空元素): <img>, <br>;

<br>是块元素还是内联元素呢?答案是介于二者之间吧,因为它虽然可以换行,但是不能像<p>元素那样把文本分成独立的两块啊;

还有一个,差点忘了,关于&的,如果要在content里用到<或>的话,要分别用&lt;或&gt;表示,copyright符号用&copyright;表示, &(ampersand)本人的话要用&amp;表示,更多的符号代码可以参考http://www.w3schools.com/tags/ref_entities.asp或http://www.unicode.org/charts/,或W3school关于符号实体的中文版网站http://www.w3school.com.cn/tags/html_ref_symbols.html。

个人能总结到的大概就是这些了,有遗漏的话,发现再补充吧。万一以后自己忘了还可以再看看。

Head First HTML and CSS, 2nd Edition

  • 2012年11月14日 11:50
  • 31.22MB
  • 下载

《 Head First Java, 2nd Edition》清晰扫描完整版2nd Edition[pdf]

中文名称: Head First Java, 2nd Edition版本:清晰扫描完整版2nd Edition[pdf]发行时间:2005年地区:美国语言:英语简介:作者: Kathy Sierra ...
  • mynote
  • mynote
  • 2008-01-22 15:56:00
  • 1103

Head First HTML and CSS, Second Edition(官网源代码及资源)

  • 2014年05月27日 14:16
  • 17.57MB
  • 下载

Head First Android Development(2nd.Edition)

  • 2017年09月22日 15:01
  • 50.3MB
  • 下载

Head First Android Development A Brain-Friendly Guide(2nd) 无水印pdf

  • 2017年10月06日 18:09
  • 50.42MB
  • 下载

深入浅出Python(Head First Python, 2nd Edition)-2017年O'reilly最新英文原版

  • 2016年12月07日 21:00
  • 78.11MB
  • 下载

Head First Python: A Brain-Friendly Guide, 2nd Edition [PDF, 2016]

  • 2016年12月02日 00:33
  • 87.1MB
  • 下载

head first html & css 2nd edtion source file

  • 2014年10月20日 09:17
  • 17.68MB
  • 下载

《Head First HTML与CSS(第2版)》中文高清完整PDF版

  • 2014年10月31日 18:45
  • 176.05MB
  • 下载

入门:学习《Head First HTML与CSS》

大三下学期开了一门web前端的课,于是开始学习HTML啦,由《Head First HTML与CSS》带我入门,在此做些学习笔记,巩固知识。 2017/05/16:《Head First HTML与C...
  • weixin_37031213
  • weixin_37031213
  • 2017-05-16 22:41:36
  • 168
收藏助手
不良信息举报
您举报文章:Head First HTML and CSS, 2nd edition 学习 chapter 1,2&amp;3
举报原因:
原因补充:

(最多只允许输入30个字)