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

时间:2022-11-10 23:50:57

做为学习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

--/head

--body[网页内容]

---h1,p 这些都是内容标题 ,段落。

--/body

-/html

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