发表于: 2018-10-29 22:26:08

5 749


今天完成的事情:

这几天已经在了解什么是html什么是元素,然后元素的定义及作用,因为初学有很多看了也不是很清楚,懵懵懂懂,然后今天让自己一个一个步骤来操作了解。

通过这些天的理解然后实际操作了解怎样操作建立一个web网页,然后通过运用HTML让网页更清晰,什么是标题什么是段落什么地方放上内容。让浏览器通过html建立结构发出的指令让网页通过一种有意思,更可读的方式显示页面。

1、怎样创建html文档

第一步:新建一个文件夹命名。
第二部:用电脑打开记事本,然后填上一些你需要的内容并保存,命名为html后缀的文档,并且选择utf-8的编程方式。
第三步:双击打开html文档,这样浏览器就显示一个初步的web网页了。
然后通过专业的编辑器编写这个web网页的代码,让其内容更加规范,简洁。
如下图:给它填上<h1><h2>,<p>这三个元素,让它给服务器发出指令,是服务器认可html的结构,再重新打开的网页就有了标题和子标题和内容整体的规范。
再次通过浏览器打开就是简洁明了如下图:
之前不太理解为什么结束标记前面要有一个“/”,原来是要告诉浏览器还有自己能知道某些特定内容或标题该在哪里结束,起到这样一个标记的作用。
总结:现在知道不管是什么元素都有开始标记和结束标记,这是固定匹配的。
浏览器页面的结构需要成对的标记包围页面的内容。

记住:元素=开始标记+内容+结束标记。

2、怎样使用css样式

一般浏览器都有自己独有默认的显示样式,但是我们要让网页呈现出更有意思的样子就需要运用到css样式。
<style>元素中有一个type类型属性,它能告诉浏览器你在使用什么类型的样式。当然</style>也有结束标记。
有一点很重要,“属性能提供元素的一些额外信息”
现在可以加一些css其他的属性,就像昨天了解的css盒子模型是由4个属性组成的,分别是content内容,padding内边距,margin外边距,border边框。
因为type="text/css">是固定写法不能更改,在<style>元素内容中添加css样式属性,源代码如:
<sytle type="text/css">
body{
          background-color:背景颜色
          margin-left:左边距大小  20%
          margin-right:右边距大小  20%
          border:边框大小  2px
          padding:边距大小 10px
          font-family:字体的类型  宋体
}
这些就是css的样式属性,编辑好后能是网页内容简洁规范,能设计成你想要的网页样子。
实际操作如下图:
显示的效果如下图:
效果很明显,一下子就出来了,感觉很神奇,就编写几个代码,网页的样式又不一样了,很喜欢前端的所见即所得。
在<style>中<body>元素定义为内容。
所以我现在可以理解为html是创建网页的结构,css是创建网页的样式。要想网页设计的更加出色,这两者是密不可分的。
今天看了head first HTML与css这本书第一章看完才算了解了为什么HTML+CSS要一起才能制作设计网页。

明天计划的事情:

接着复习并掌握前面几天学的内容并完成实战操作。

今天学的内容解决了我之前的疑惑,比如html在构建网页中起到整体框架的作用,就好比人的躯干,css就是表现网页的形式,就好比人喜欢穿不同风格的衣服。还有html的标记语言有哪些具体是什么含义,它是由开始标记+内容+结束标记组成的。css也有它自己的语言属性,由四个属性组成了盒子模型。

以上内容是我所学即所得。


返回列表 返回列表
评论

    分享到