HTML开发入门学习笔记分享

HTML开发入门学习笔记分享
  从今天起,我将为大家梳理一下HTML、CSS、JavaScript的基础知识。
 
  如果你对Web前端开发并不了解,那么这个系列文章能够让你掌握Web前端开发的基础知识,再结合练习,就可以正式入门Web前端开发啦。
 
  如果你已是一个Web前端开发人员,那么这个系列文章能够成为你工作中的好助手,你能够在文章中查询你要用到的知识点。
 
  如果你在阅读过程中遇到困难,或我的描述有不详尽和有错误,请指出,万分感谢。
 
  1.网页中常见的图片格式有哪些?
 
  2.这些不同图片格式各自有什么特点
 
  1.html代码:
 
  2.CSS代码:
 
  1.什么是HTML5
 
  HTLM5 = HTML(结构 ) + CSS(样式) + JavaScript(行为)
 
  2.HTML基本代码模板
 
  3.HTML标签规则
 
  4.<!doctype html>
 
  5.0版本开始,只需此方式简化编写,之前版本需要定义很多内容
 
  5.Html标签
 
  6.Head标签
 
  7.Body标签
 
  1.head标签的定义
 
  2.元信息Meta标签:
 
  3.link标签
 
  4.title标签
 
  5.style标签
 
  1.具体模块开发的流程
 
  2.标签的语义性以及基本选用
 
  以下引自百度百科
 
  为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要。所谓标签语义化,就是指标签的含义。
 
  HTML为我们提供了相当丰富的标签,每个标签都有它各自的含义。
 
  我认为在设计时,除了遵循HTML语法以外,应该充分利用并遵守各标签的“语义”。
 
  如标题文字应该包含在h1-h6中,大段的文字内容应该由p标签进行分段而不是br标签,列表项应该放在ul或ol或dl中,表格形式的数据应该仍然用table布局。
 
  为什么要这样做?
 
  一个很有说服力的原因是,保证在用户去掉CSS显示的情况下,网页能够尽量有效的将内容的结构层次显示出来。
 
  如果全部用div,当去掉CSS之后,整个网页就失去了层次,只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。
 
  3.块元素
 
  4.行元素
 
  5.第三类元素
 
  6.块元素和行元素的区别
 
  7.嵌套规则
 
  8.table布局与DIV+CSS布局的区别(比较方向:语义性[搜索引擎方向];代码量——加载速度——用户体验[用户体验方向];灵活性、可维护性[开发者方向])
 
  9.其他布局方式:960栅格、圣杯、双飞翼、瀑布流(蘑菇街)、WIN8-Grid(网格)、自适应(移动端)、弹性布局、响应式布局(移动端)

推荐阅读