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