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

学习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。

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值