零基础通俗学前端--HTML的结构介绍与详解《一》(p3)

Posted 松果科技资讯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零基础通俗学前端--HTML的结构介绍与详解《一》(p3)相关的知识,希望对你有一定的参考价值。

作者寄语


     在学习编程知识的时候,pigfat有几句话要建议我们的读者,不管以后或者现在你是否从事软件行业或者想以它作为一个兴趣爱好,我都建议童鞋们要多练,多尝试,抱着你自己未来是一个牛逼的网络黑客一样对任何事都好奇的态度,你就能做好任何事,我们现在的前端或者包括我们以后的后端学习都是小菜一碟

【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)


经过前一篇的学习,大家会不会觉得前端简单,也透露着奥妙,是的,就是这样简单,接下来就会一直简单的,快乐的,欢快的学习了

【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)



今天皮革肥将带你深入了解一下标签,并且带你解锁一下新技能。


1、将上一次我们改成.html后缀的文件改回.txt文件,新建一个文件夹,名字随便你取(最好英文),把helloworld.txt文件放入文件中,顺便放一个图片,取一个简单的名字,等一下有用,如图


【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)


然后我们打开helloworld.txt 文件,上一篇我只是简单的介绍了一下标签,没有什么的讲述


【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)

()


有童鞋说,我还是不明白是啥意思,有什么作用,来,今天我给大家通俗的理解一下这些标签,另外介绍一下其他标签。其实我们大可以把这些代码看做一个婴儿,这样你就好理解了


【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)


首先是<!DOCTYPE html> 申明这是一个HTML5文档, 相当于告诉浏览器你是谁家的孩子,吃哪家的饭,谁家罩着我,有点自爆家门的意思
<html>元素是 HTML 页面的根元素,裹着婴儿的毛巾,他包裹了婴儿的头和身体
<head>这个是人的头部, 里面包含了元信息和网页的名字,充当人体的大脑
<body>顾名思义人的主体, 描述了整个网页的主体信息
这就是一个完美的整体了,整个页面的组成就是:

<!doctype html><html>  <head></head>  <boby></boby></html>


是不是破费科特?

【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)


接下来我们来认识一下新标签,也就新元素;


1)首先介绍一下html 页面的标题标签hx


标题(Heading)是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。来我们在之前的helloworld.txt文件上写一下,来看看是什么效果

【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)

(这是在helloworld.txt写的)

【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)

(转换成html的效果,按F12)

有人问我会不会有h7,回答:没有,不信你试试


【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)




2)HTML 段落标签p标签


p标签是代表这是一个段落,通常的语法是

<p>你要写的段落内容</p>

好,我们继续演示,记住前端都是有艺术细菌的人,所以我们写的页面要有艺术气息的


【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)


【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)

就成这样子了

如果你想换行换大一点,就加一个br标签,如果想加一个结尾的横线,就加一个hr标签,(注意br 和hr标签都是单标签,不是成对出现的,一般是以<br/><hr/>的形式出现的

<!DOCTYPE html><html><head><meta charset="utf-8"><title>零基础通俗学前端</title></head><body><h3>错误</h3><p>郑愁予</p><br/><p>我打江南走过</p><p>那等在季节里的容颜如莲花的开落 </p><p>东风不来,三月的柳絮不飞 </p><p>你的心是小小的寂寞的城 </p><p>恰若青石的街道向晚 </p><p>足音不响, 三月的春帷不揭 </p><p>你的心是小小的窗扉紧掩 </p><p>我哒哒的马蹄声是美丽的错误 </p><p>我不是归人,是个过客</p><hr/></body></html>

【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)



3)HTML 链接标签


a标签

<a href="url">链接文本</a>

好,我们继续完善我们诗,我们在作者名字上加一个a标签,让他跳转到他的介绍页面去,如图

【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)

<!DOCTYPE html><html><head><meta charset="utf-8"><title>零基础通俗学前端</title></head><body><h3>错误</h3><a href="https://baike.baidu.com/item/%E9%83%91%E6%84%81%E4%BA%88/720219?fr=aladdin">郑愁予</a><br/><p>我打江南走过</p><p>那等在季节里的容颜如莲花的开落 </p><p>东风不来,三月的柳絮不飞 </p><p>你的心是小小的寂寞的城 </p><p>恰若青石的街道向晚 </p><p>足音不响, 三月的春帷不揭 </p><p>你的心是小小的窗扉紧掩 </p><p>我哒哒的马蹄声是美丽的错误 </p><p>我不是归人,是个过客</p><hr/></body></html>

当我们点击郑愁予的时候你会发现可以跳转链接了,这就是链接a标签


4) 图片标签img标签


接下来我们让我们的诗更加有意境了,我们要给它加一个图片了

 
   


【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)

./表示当前目录下的某个文件或文件夹,视后面跟着的名字而定


【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)

好了,今天就给大家介绍这几个标签,接下来还会将其他标签,是不是发现编程也没有什么难的,按照它设定好的规则,或者说是说明说去做,你会发现你慢慢是一个全能神手了


【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)










涨芝士

国内没有一个浏览器是拥有自主知识产权的》


     虽然我们国家有许多浏览器,如uc浏览器,360浏览器,qq浏览器,百度浏览器,猎豹浏览器等等,但没有一个浏览器是我们自己真正的内核的浏览器.

      世界上四大主流浏览器内核(微软IE浏览器内核Trident、谷歌Chrome浏览器内核Blink、苹果Safari内核Webkit、火狐浏览器内核Gecko)皆为国外所有。

      那么浏览器已进入中国20年,我们为什么一直没有研发成功呢?是因为资金投入的少吗?肯定不是,现在一些行业专家给出了答案。

     首先,自主研发浏览器成本太高,需要消耗的资源、人力成本、资金成本非常的大,很多国内公司根本做不起来,研发一个浏览器的资金成本相当于近半个操作系统的研发费用。举个例子,比如谷歌的浏览器,曾经调动过硅谷1000个高级程序员来研发Chromium的内核,而且研发和维护的时间达到了近10年,而每一个硅谷高级程序员的工资年薪大约在30万美金左右,这样大的人力成本,我们的普通国内企业是承受不了的。

     最核心的内核技术一直掌握在外国人手中,而那些国际巨头公司在技术上一直是技术垄断和技术保密的状态。

      第三自主研发需要的时间周期长,费用无法想像的大,最终还可能并没有我们现在用的开源的效果好,所以很多的国内互联网公司都在采用国外的内核。

       所以真正国产化的浏览器还有很长一段的路要走




1、上题解密

Q:    你知道HTML中的meta标签是做什么用的吗


A:    meta是用来在HTML文档中模拟baiHTTP协议的响应头报文。通常在网页的head标签里面。meta 的属性有两种:name和http- equiv。name属性大多数是用于公司业务上的,主要用于描述网页的内容,以便于搜索引擎机器人查找、分类。这其中最重要的是descriptionkeywords,这些都是留给公司的管理层来决定添加什么的,http- equiv属性更多是说明这个页面是用什么字符集,怎样的机制。

2、课后思考

a标签点击的时候会发现浏览器会另外起一个页面,有没有什么方法可以控制访问的时候在同一个页面呢?(可以百度)


【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)




上一章回顾:


-----END-----

【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)
【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)
微信搜一搜
【零基础通俗学前端】--HTML的结构介绍与详解《一》(p3)
松果科技资讯
觉得有帮助就点亮 一下让更多人看到


以上是关于零基础通俗学前端--HTML的结构介绍与详解《一》(p3)的主要内容,如果未能解决你的问题,请参考以下文章

零基础如何学WEB前端

从零开始学WEB前端——网页的骨架——HTML理论讲解

零基础怎么学web前端

前端就业课 第一阶段HTML5 零基础到实战表格详解

零基础学HTML5和CSS3前端开发第二课

零基础学HTML5和CSS3前端开发第二课