前端学习笔记03---"HTML介绍"篇的理解

1、块元素和行内元素。块元素会单独占一行或是另一起行,行内元素不会。比如div和span,一个是块元素一个是行内元素。
2、input和img是行内替换元素。基本等于块元素,又叫空元素,只有头没有尾。替换元素表示原标签是个空标签,只有加了某些属性才会出现效果,img加src,input加type等
3、可以通过meta来控制html的字符集编码,有些浏览器会自己修正错误乱码,但最好还是给出来。
4、event.stopPropagation(),停止传播该事件的函数。阻止它被分派到其他 Document 节点。例子:一个listitem的点击事件函数,你点了这个li,照理来说,你点那个li的同时也点了页面(html)一下,如果html也绑了点击事件函数,那么就会在你的li的点击事件结束后,这个点击事件也会触发html的,如果用了这个event.stopPropagation(),那就不会再传播,就不会再触发后续html的点击事件函数。
5、对于每个元素来说,选择什么样的标签不是在于它的样式或者格式符合要求,而是要求它的语义符合要求。比如,你要在页面显示一个较大的文段,你可能会直接想用h2或h1来表示它,但这是不对的;应该明白你要显示的这段话是在网页的什么位置,什么意思,如果这段话只是一个文段,那应该用p来表示,再用css来调节它的样式或者是一些表象元素(没有语义)<strong>。这是个新的理解吧,因为以前做网页就是想着要快,哪个标签看起来符合就用了,没考虑到语义这一点。要使网页具有语义这个观点真的是越想越对,网页不单单是给我们人看的,在将来机器来处理来阅读网页的应该会越来越多,如果每个网页的语义都很规范的话,我觉得人工智能应该会发展得更好一点。
6、关于目录:../表示父级目录;以/为开头的是绝对路径,否则是相对路径;一般当然使用相对路径啦,因为拟端网页有可能是要给别人重构的,或者是重用的,不同项目的绝对路径应该是不同的,但相对路径大多相同(在项目规范讨论一致的状态下)
7、超链接如果是要连接到一些视频或者文件等一些额外的条件的东西的时候,尽量在链接文字上多加描述。比如:
<p><a href="http://www.example.com/large-report.pdf">
  下载销售报告(PDF, 10MB)
</a></p>
8、超链接也可以链接发送邮件,使用href=“mailto:+邮箱”,甚至还可设定发送邮件的收件人、时间等
9、dl原来叫描述列表( description list),之前一直记着是定义列表了,搞清楚好记多了。dt (description term) dd(description description)
10、引用:<blockquote>看起来很明显的一大块;<p>显示出来就是用双引号扩了起来
11、sub和sup表示上下标,就是幂次的那种上标
12、code可以包围代码
 
bootstrap框架与html网页架构的理解:
看完这一部分深入人心的便是那个“选择正确的元素”,使网页具备语义化。而这在html原本的架构中各部分应该用各部分的元素,导航用nav,主文用main等。在其中div是不具备语义的,只有当找不到合适的语义的元素时,才结合css与js使用div,使其具备一定的语义。而bootstrap里面的架构用的时div来编排的,大部分80%的元素都是div来编排,这样可能会说时违背了html设定的语义,但其实bootstrap的只是将原来的每个元素通过css+js将div替代了原来的元素,这样其实也是有语义的,就像换了一种语言一样,不同的解释而已。在这个框架流行的趋势下,如果是这样的话,那机器想要读懂各个网页还是需要根据不同框架来解析,这是不是优点脱离web语义化的道路了呢?或许bootstrap不是这样,有时间我再看看吧。

猜你喜欢

转载自www.cnblogs.com/waverode/p/12680752.html