Head first HTML&CSS ---[学习笔记第一章]

来源：互联网发布：淘宝卖家快递合作价格编辑：程序博客网时间：2024/06/03 01:29

做为学习html入门的第一本书，我准备学完每一章节之后都来做一个简单的小笔记。记录一些学习过的知识点。

现附上资源：https://pan.baidu.com/s/1o7JzoRw 里面也有书籍源码。如果资源失效了的话，请单独联系我。如果我还有一定会给你的。

第一章节简单的认识下html css 了解他们都可以做什么。

首先对html 做了一个通俗易懂的解释，再也不是什么超文本之类的。就是一种放到服务器上去的资源，当别人索要的时候，服务器发送给对方，

对方通过浏览器来解析这个资源。并且展示给用户看。我的理解就是我去了某视频网站，点了一个电影，之后他就给我播放这个影视作品的资源。

html 就是那个影视资源。暂且对零基础的人来说，就现有这么个概念。这肯定是有利于理解的。

之后学习了一些简单的标签。 <html>内容</html>

html书写的格式大概都这个德性。<标签名称>内容</标签名称> 多个“／” 代表了闭合证明这个标签包裹到这里结束。这个标签的功能也只影响到这里结束。

之后是css ，是另一种语言了，他是和html 搭配着用。来使这个网页看起来更炫酷。对比来说 html 使负责组织结构，css 使用来添加样式。

做个比喻，一般的工艺品，都是先做个没什么颜色的模子，然后再单独上色，弄一些图案。

相对映射的就是模子是html， css 就是后续的上色。

下面附上第一张的练习。

<html><head><title>福叔第一个html</title><style type="text/css">body{background-color: #d2b48c;margin-top: 30%;margin-bottom: 30%;margin-left: 20%;margin-right: 20%;border: 2px dotted black;padding: 10px 10px 10px 10px;font-family: sans-serif;}</style></head><body><h1>Welcome</h1><p>这是我的第一个<em>html</em></p><h1>EnD</h1><p>欢迎下次再来</p></body></html>

直接拷贝到一个记事本当中，名称改成xxx.html 就可以用浏览器打开了。非常简单。

我们来看下这个结构 , 首先有个<html> 包裹着全部

其次一级分成了两个部分。<head> <body> 前者网页信息，后者是浏览器需要显示的内容。

再下一个级别，就是响应的一些影响属性。暂且不说了，也可以看到 css 也在其中<style> 标签包裹的那些就是没有这个的话我们的页面是很low的，

有兴趣的话可以删除下保存文件刷新页面看看对比。

下面给出一个层级结构。用于方便看。第一章节所学就这么多。也可能很多地方都说错啦。误导了新人的话，－－我也不管。

－html［包裹全部］

－－head［网页信息］

－－－title［标题］

－－－/title

－－－style［css样式］

－－－/style