css视频学习相关(1)

HTML相关元素

HTML其实是一份文档,和你的word其实是一样的,有区块,有大纲

XHTML出现因为html4是不严格的开发语言,所以随便写都可以,大家认为这样是不好的,应该有自己的开发规范,因为当时XML是严格的标记语言,所以基于XML出现了XHTML,要求非常严格,在XHTML5出现之前是比较流行的,可以约束大家的习惯,使代码更可读。但是出现XHTML2.0的时候要求更严格,并且不想前兼容,所以大家又觉得烦了。后来出现了HTML5,这是基于HTML4的,所以很多开发要求又回到原来了。

meta标签

  • charset指定字符集
  • viewport的视口相关设置
    • width = ‘device-width’表示用设备的屏幕大小来显示

      base标签指定基础路径

      lebel标签

  • 使用for属性关联对应的input(例如单选,点击label的文字也可以选中)

HTML5新增大纲元素

  • 大纲区块
    • section(表示一个块,div是没有任何意义的,比如一片博客)
    • article(如果知道的更完整,比如标题、文章,评论,相对于section更加详细)
    • nav
    • aside(表示不太重要的,广告之类)
  • 表单增强
    • 日期、时间、搜索
    • 表单验证
    • placeholder自动聚焦

HTML元素分类

  • block
    • 块级元素,每个都是一行
  • inline
    • 行内元素,与其他元素在一行内,不一定有规则形状,没有自己的高度,宽度
  • inline-block

    • 对外表现为行内元素,对内表现为块级元素
  • HTML嵌套关系

  • 块级元素可以包含行内元素
  • 块级元素不一定能包含块级元素
  • 行内元素一般不能包含块级元素(a就不一般,a可能包含div,主要是看a的父元素类型,如果前面是块级元素就是合法的,否则就是不合法的)

doctype的意义

  • 如果带上doctype那么浏览器就会以标准模式进行渲染
  • 可以让浏览器知道元素的合法性

HTML XHTML HTML5的关系

  • HTML属于SGML
  • XHTML属于XML,是HTML进行XML严格化的结果
  • HTML5不输入SGML和XML,比XHTML宽松

HTML5的变化

  • 新的语义化的标签
  • 表单增强,新的表单元素,表单验证
  • 新的API(离线,音视频,图形,实时通信,本地存储,设备能力[陀螺仪,旋转之类的])
  • 分类和嵌套的变更

em和i有什么区别

  • em是语义化标签,表强调
  • i是纯样式,表斜体
  • HTML5中i基本废弃,不建议使用,一般用来表示图标

htlml5语义化的意义

  • 开发者容易理解
  • 机器易读(搜索,读屏软件)
  • 有助于SEO

HTML和DOM的关系

  • html是死的,只是一些字符串而已
  • DOM是有HTML解析而来,是活的
  • js是维护DOM

property和attribute的区别

  • attribute是死的
  • property是活的
  • property是实时修改的,而attribute的值只是原始的

form的作用

  • 直接提交表单
  • 便于浏览器保存表单
  • 便于第三方库保存表单
  • 第三方库可以进行表单验证

使用h5o查看页面大纲,方便机器阅读