美文网首页Web前端之路@IT·互联网程序员
菜鸟上路之前端知识整理笔记(5)

菜鸟上路之前端知识整理笔记(5)

作者: e896e56a6e3f | 来源:发表于2017-03-14 14:44 被阅读98次
菜鸟上路之前端知识整理笔记(5)

一、HTML标签、元素和属性的区别

这虽然是一个小的零碎的知识点,但是刚开始学html的时候会很容易混淆,所以很有必要彻底的分析透彻搞清楚。

(1)“标签”是指<head>、<body><table>

等被尖括号“<”和“>”包起来的对象,绝大部分的标签都是成对出现的。当然还有少部分不是成对出现的,比如<br><hr>等。

(2)“元素”是指:构成HTML文件的基本对象,HTML元素可以说是一个统称而已。

<p>这里是内容</p>这就是一个元素,也就是说元素由一个开始的标签和结束的标签组成,用来包含某些内容;

(3)“属性”是指: 为HTML元素提供各种附加信息的就是HTML属性,它总是以"属性名=属性值"这种名值对的形式出现,而且属性总是在HTML元素的开始标签中进行定义。但还是有很多人还是会不去纠结元素和标签的具体区别,统称为元素。

<body bgcolor="red">中的bgcolor="red"就是标签的属性,它定义了标签应该如何具体配置。

所以总的来讲,html网页是由元素构成的,元素是由标签和标签内容构成的,而属性用来提供与元素相关的附加信息。


二、HTML布局基础知识点

1、使用<div>元素的html布局

div是常用的布局工具,优点就是轻松自如的定位。我们可以把div理解成一个盒子,于是我们接着又想到了“盒子模型”(简单介绍下,详细知识点后面再详解)。

盒子模型又分为两种:ie盒子模型和w3c盒子模型。(一般情况下我们使用标准的w3c盒子模型是为了兼容各个浏览器)

css属性介绍:

Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道

标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能。

Margin:Margin属性用于设置两个元素之间的距离。

Padding:Padding属性用于设置一个元素的边框与其内容的距离。

Clear:使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面的布局会影响到下面。

还有常用的一个技巧就是使用margin:0 auto;控制容器在浏览器中水平居中,一般固定宽度的布局都会用到这个代码。

2、使用html5的网页布局

HTML5 提供的新语义元素定义了网页的不同部分:

header定义文档或节的页眉

nav定义导航链接的容器

section定义文档中的节

article定义独立的自包含文章

aside定义内容之外的内容(比如侧栏)

footer定义文档或节的页脚

details定义额外的细节

summary定义 details 元素的标题

3、使用表格的html布局

<table>元素不是作为布局工具而设计的。

<table>元素的作用是显示表格化的数据。

使用<tabke>元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

总之关于布局,大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。

大多数网站可以使用div或table元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

(今天先聊布局的基本知识,后面会详解布局技巧)
菜鸟上路之前端知识整理笔记(5)

三、计算机基础知识

其实计算机基础是很重要的,很多非计算机专业的同学自学计算机相关知识的时候往往会忽略基础知识的重要性,前端学习入门简单,精通难,也就是说学习曲线会越来越陡峭,尤其是没有接触过编程的同学硬着头皮学完css后发现js才是个巨大的鸿沟,一时难以跨越以至于长时间的原地踏步。所以越到后面对基础知识基础内部原理的深刻理解讲显得尤为重要

1、ip地址: 人们为了通信的方便给每一台计算机都事先分配一个类似我们日常生活中的电话号码一样的标识地址,该标识地址就是IP地址。

2、dns: 每个IP地址都可以有一个主机名,主机名由一个或多个字符串组成,字符串之间用小数点隔开。有了主机名,就不要死记硬背每台IP设备的IP地址,只要记住相对直观有意义的主机名就行了。这就是DNS协议所要完成的功能。

DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。

3、域名解析: 通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析。

是把域名指向网站空间IP,让人们通过注册的域名可以方便地访问到网站一种服务。IP地址是网络上标识站点的数字地址,为了方便记忆,采用域名来代替IP地址标识站点地址。域名解析就是域名到IP地址的转换过程。域名的解析工作由DNS服务器完成。

域名是为了方便记忆而专门建立的一套地址转换系统,要访问一台互联网上的服务器,最终还必须通过IP地址来实现,域名解析就是将域名重新转换为IP地址的过程。一个域名对应一个IP地址,一个IP地址可以对应多个域名;所以多个域名可以同时被解析到一个IP地址。域名解析需要由专门的域名解析服务器(DNS)来完成。

Internet上的计算机是通过IP地址来定位的,给出一个IP地址,就可以找到Internet上的某台主机。而因为IP地址难于记忆,又发明了域名来代替IP地址。但通过域名并不能直接找到要访问的主机,中间要加一个从域名查找IP地址的过程,这个过程就是域名解析。

以上尽可能详细的解释了域名解析,自己搭建博客或者个人网站之后,需要购买空间服务器(300元-400元一年就可以用),然后还要花费三四十元块钱购买域名(这里指没有被注册过的域名)。然后才需要解析域名,有时间一定要自己完整的从头到尾的搭建一次真正意义上的网站,其中有太多太多不理解不懂的知识点还有原理了,总之受益匪浅。

4、http: 超文本传输协议,是我们浏览网页、看在线视频、听在线音乐等必须遵循的规则。正是在这样的规则下,浏览器(万维网客户)才能向万维网服务器发送万维网文档请求,然后服务器会将请求的文档发送回浏览器。在浏览器和服务器之间的请求和响应的交互,必须按照规定的格式和规则,这些格式和规则就构成了超文本传输协议。

HTTP协议永远都是客户端发起请求,服务器回送响应。

这样就限制了使用HTTP协议,无法实现在客户端没有发起请求的时候,服务器将消息推送给客户端。

这里讲的每一个计算机基础知识点,今天能够做的只有简单的解释和初步的理解,如果要深入的去理解每一个知识点难度还事很大的。而且http绝非这样简单到一段话就能让一个菜鸟理解透彻。总之要学习的东西太多太多了,就算事计算机专业的同学也是要经过四年的大学时光才能学习到这些并且理解,所以我们任重而道远。坚持吧(很多鸡汤是讲给自己听的)

公众号:萝卜炖肉 感谢关注!

相关文章

网友评论

    本文标题:菜鸟上路之前端知识整理笔记(5)

    本文链接:https://www.haomeiwen.com/subject/qcchnttx.html