HTML学习总结-1

作者: 饥人谷_缪维颖 | 来源:发表于2015-11-20 11:41 被阅读453次

    HTML的学习标准


          很多网页通篇都是<div>,这类网页语义化很差。学习HTML要做到除了会使用标签、属性,还要知道什么时候用什么样的标签,并尽可能的写出语义化的页面。

          最开始的时候肯定做不到这些,很多标签一般都是用过之后才能够真正有印象。所以开始上手的时候,可以先找一个网站上已有的简单页面,然后自己用尽可能多的并且合适的标签把它重新写出来。

          写语义化页面的好处:越原生的标签加载速度越快,减少css的使用可加快网页加载速度。

    块级元素与内联元素


    块级元素

    特征:根据文档内容平铺屏幕,创建的块级元素从新行开始,相邻块级元素会在不同行显示。块级元素的width=屏幕宽,height=内容自适应。

    举例:<div>,<p>,<h1>标签

    区别:<p>比<div>多"margin=16px 0px;"的默认样式

    相似:<p>和<h1>很相似,<h1>非常像是字体加粗,上下边距增宽后的<p>标签;但<p>通常用于大段文字,而<h1>用于标题。

    小贴士:如何查看标签的默认样式?

           打开chrom浏览器,command+option+i快捷键调用调试器,调试器中的style样式和盒模型可配合查看标签默认样式。

    内联元素

    特征:内容撑开元素,创建的内联元素会在同一行按从左至右的顺序展开,不单独占一行。内联元素的width=内容自适应,height=内容自适应。

    举例:<span>标签

    小贴士:块级元素和内联元素在加入css样式后可改变这种差异。当块级元素加入display:inline属性后,若干个块级元素可在同一行显示;同样的,当内联元素加入display:block属性后,每次新创建的内联元素也可实现从新行开始的特征。

    双标签与单标签


    双标签

    特征:含开始标签和结束标签,标签内部可嵌套内容

    举例:<div></div>;<span></span>

    说明:h5的大部分标签都是双标签

    单标签

    特征:在开始标签内直接结束,不再有单独的结束标签,标签内无嵌套内容

    举例:<img/><br/>

    心得


          虽然第一节课由于网络或者硬件设备的不给力上得有点断断续续,但也学到了很多东西~课下再重新总结一下笔记感觉有了更系统的收获~第一次写技术博客,希望自己再接再厉能够坚持到底~!

    相关文章

      网友评论

        本文标题:HTML学习总结-1

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