web总体复习第一步--HTML

阅读本文前请先阅读web总复习--html基础

目录

一、html常见元素和理解

(1)html常见元素    

head区元素

body区元素

(2)html理解

二、html的版本

html4/4.01(SGML)

XHTML(xml)

html5

            html5的新的标签

            html5的新增语义

三、html元素的分类

    按照默认样式:

    按照内容分类:

四、html元素的嵌套关系

五、html元素默认样式和定制化

    解决默认样式:

 把默认样式归零: 

 把默认样式变成一样:

六、html面试真题解答

    1.doctype的意义是什么:    

    2.html、xhtml、html5的关系

    3.html5的变化

    4.em和i的区别

    5.语义化的意义是什么

    6.那些元素可以自闭合

    7.html和dom的关系

    8.property和attribute的区别

    9.form的作用有那些


一、html常见元素和理解


(1)html常见元素
    

head区元素

 

  •         <meta charset='utf-8'>设置页面编码字符

!!用于适应移动端的第一步

  •         <meta name='viewport' content='width=device-width,initial-scale=1.0,maxinum-scale=1.0,user-scalable=no'>

                    视口:宽度/长度为整体设备,不允许缩放

  •         <base href="/">

                    以一个路径为所有路径的基础
    

body区元素

 

  1.         a[href,target]
  2.         img[src,alt]
  3.         table td[colspan,rowspan]
  4.         form[target,method,enctype]提交,提交方式[post,get],编码(针对post)[urlincook,formdata]
  5.         input[type,value]
  6.         button[type]
  7.         select>option[value]
  8.         label[for]for(id)在点击选项文字时会选中

(2)html理解

 

  1.     html文档
  2.     描述文档的“结构”
  3.     有区块和大纲

    观看网站大纲工具:http://h5o.github.io/


二、html的版本

 

  1. html4/4.01(SGML)

  2. XHTML(xml)

  3. html5

            html5的新的标签

                        section article nav aside 表单增强 日期、时间、搜索、表单验证、Placeholder自动聚焦        

            html5的新增语义

  1.         header/footer  头/尾
  2.         section/article 区域
  3.         nav 导航
  4.         aside 侧边栏(不重要的内容)
  5.         em/strong 强调(斜体/粗体)
  6.         i icon图标 

    验证html是否符合标准:http://validator.w3.org


三、html元素的分类


    按照默认样式:

  1.         块级block
  2.         内联/行内inline
  3.         inline-block  例如:select

    按照内容分类:

  1.         flow:heading sectioning interactive 等...

        w3c文档:http://www.w3.org/TR/html5/

        元素图:http://www.w3.org/TR/html5/dom.html#phrasing-content
       web总体复习第一步--HTML


四、html元素的嵌套关系

 

  1.     块级元素可以包含行内元素
  2.     块级元素不一定能包含块级元素
  3.     行内元素一般不能包含块级元素 a可以包含div

    为什么a标签可以包含div 仅限于html5中 但注意p包含div是不合法的 但是浏览器会解析 解析为:

web总体复习第一步--HTML


五、html元素默认样式和定制化

 

  1.         ·注意html是有样式的
  2.         ·body:margin 8px;
  3.         ·ul:上下margin 16px;
  4.         ·list-style-position:inside;使Li前的符号包含在li内

    解决默认样式:

 把默认样式归零: 

  1.         css reset
  2.         *{padding:0px;margin:0px;}

 把默认样式变成一样:

  •            normalize.css322


六、html面试真题解答


    1.doctype的意义是什么:<!doctype html>    

  1.         ·让浏览器以标准渲染
  2.         ·让浏览器知道元素的合法性

    2.html、xhtml、html5的关系

 

  1.         ·html属于SGML 
  2.         ·xhtml属于xml,是html进行xml严格化的结果
  3.         ·html5不属于SGML或xml,比Xhtml宽松

    3.html5的变化

 

  1.         ·新的语义元素
  2.         ·表单增强
  3.         ·新的api(离线,音视频,图形,实时通讯,本地存储,设备能力)
  4.         ·分类和嵌套变更  

    4.em和i的区别

 

  1.         ·em是语义化的标签,表强调
  2.         ·i是纯样式的标签,表示斜体
  3.         ·html5中i不推荐使用,一般用作图标

    5.语义化的意义是什么

 

  1.         ·开发者容易理解
  2.         ·机器容易理解结构(搜索、读屏、软件)
  3.         ·有助于seo(搜索)
  4.         ·进一步语义化:semantic microdata  


    6.那些元素可以自闭合

 

  1.          ·表单元素input
  2.          ·图片 img
  3.          ·br hr
  4.          ·meta link

    7.html和dom的关系

  •         html是“死”的,为字符串格式,由浏览器解析后为dom树,js可以维护dom树。

    8.property和attribute的区别

  •         attribute是“死”的<a value="是不变的">,property是“活”的。

    9.form的作用有那些

 

  1.         直接提交表单
  2.         使用submit/reset按钮
  3.         便于浏览器保存表单
  4.         第三方库可以整体提取值
  5.         第三方库可以进行表单验证