html5

作者: Sendom | 来源:发表于2018-12-15 10:12 被阅读0次

HTML

前端三大件

  • HTML 结构
  • CSS 样式
  • JavaScript 行为

HTML

常见元素

header 区元素

  • meta:

    <meta charset="utf-8">
    charset:字符集
    utf-8包括中文英文几乎包含所有语言字符集
    
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    viewport: 手机屏幕代表的视图入口有多大。为了适配各种屏幕宽度。
    
  • title

  • style

  • link

  • script

  • base

    <base href="/">
    会出现在一些 router 框架中,他会指定一个基础的路径
    

body 区元素

  • div(万能元素,语义不清楚:层区域容器?)/section/article/aside/header/footer(区域)
  • p(段落)
  • span/em/strong(行内)
  • table/thead/tbody/tr/td(表格)
  • ul(无序)/ol(有序)/li(列表里的 item)/dl(定义的列表)/dt(定义标题)/dd(定义的内容)(列表)
  • a(链接)[href-链接地址,target-在哪里打开链接,默认 self,_blank(新窗口)]
  • from(表单)/input(输入框)/select(下拉框)/textarea(输入区)/button(按钮)
  • img[src-资源,alt-替换资源]
  • table td[colspan,rowspan](表格)
  • from[target-提交给谁,method-get,post,enctype-encodetype]
  • input[type,value,name-name 相同表示一组,同时只能一个被选中,type-submit 只有在表单中(from 标签)才有意义]
  • button[type-button普通按钮,submit-只有出现在表单中才有意义,reset 也只有在表单中]
  • select>option(具体下拉框的选项)[value,selected-option 的属性表示默认选中]
  • label[for-参数是具体标签,例如 id](在用户选择一些东西的时候,只能点击按钮,后面的文字不能点击,这个可以帮忙解决)

理解 HTML

  • 是一份文档
  • 描述文档的结构
  • 有区域-section,aside,footer和大纲
  • 查看一个网站的结构:h5o.github.io
  • 良好的结构可以被人与机器更好的识别

版本

  • html4/4.01基于 sgml,语法随意
  • xhtml 语法要求严格:标签必须小写,属性必须小写,bool 属性必须有值(checked=false),标签必须结束,属性必须带引号
  • html5

h5新增内容

  1. 区块类

    • section
    • article
    • nav
    • aside(不太重要的区块,放置一些广告)
  2. 表单增强

    • input 的 type 新增了一些日期时间等
    • 表单验证,一些正则
    • placeholder,自动聚焦
  3. 语义的新增

    • header/footer 头尾
    • section/article 区域
    • nav
    • aside
    • em(斜体)/strong(粗体)语义强调标签
    • i-icon

元素分类

分类角度很多,从样式,功能

默认样式分类

  • block 块,占据整行,例如 div,p
  • inline 行内,文本居多,span,em,strong,没有规则形状,在显示位置不够时会换行,不能一直表现成一种规则方形区域,设置宽度无效
  • inline-block,select,对内(对在一个行内)可以与其他内联标签在同一行,但是在空间不足时,还是会继续保持规则方形,有自己的长宽

内容分类

  • flow可见元素
  • heading
  • sectioning
  • metadata
  • embedded 嵌入元素:audio,canvas
  • phrasing em,strong
  • interactive 交互元素
  • 参考链接:

嵌套关系

  • 块包含行内
  • 块不一定包含块:p 不能包含 div,section 可以包括 div
  • 行内元素一般不能包括块级元素,a>div
  • h5以前分类是按 inline,与 block 分类,a 包含 div 不合法,但是主流浏览器却都支持,因为现实中点击图片问题跳转到其他链接很多
  • h5合法化, 包含关系通过,content model决定,a 的 content model 是 tranaparent(透明),在计算嵌套合法性的时候相当于不存在

默认样式和定制化

  • 优缺点具在
  • 解决方法 cssreset

疑惑解答

  • doctype:浏览器兼容标准模型渲染,元素合法,width=实际宽度+margin+padding
  • html,xhtml,html5:html 属于 sgml,xhtml 利用 xml严格化的 html,html5属于自己的规范相比 xhtml 宽松
  • html5变化:新的语义化元素,表单增强,新的 api-离线音视频,图形,时事通行,本地储存,设备能力-定位,陀螺仪,新的嵌套规则
  • em 和 i: em 语义化的标签,表强调,i 纯样式的标签,表示斜体
  • 语义化的意义:开发者容易理解,机器(搜索,读屏)容易理解,有助于 seo
  • 自闭和:input,img,br,hr,meta link
  • html 和 dom:html 是死的字符,dom 是 html 解析而来的 dom 树,是有层级结构的。js 操纵的是 dom 树
  • property 和 attribute:attribute 是死的在 html 文档中,不能通过 js 操纵,只能通过间接方法($0.setAttribute('value','3')property 是 dom 树中的,$0是选中元素。
  • from,表单提交,用于浏览器保存表单

相关文章

网友评论

      本文标题:html5

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