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 ---[学习笔记第一章]




标签：

相关文章