html5第一章初始h5,第一章 HTML

第一章 HTML

1.1 HTML常见元素

HTML常见元素.png

常见元素

头部常用元素解读

//显示在浏览器标题栏

title

//标题栏的小图标

favicon.ico

拓展

body部分常用元素重要属性

HTML重要属性.png

拓展

enctype，当我们使用post请求时，需要设置enctype，它默认为application/x-www-from-urlencoded，但是当type='file'时，必须使用multipart/from-data

post提交时如何设置 enctype

表格的name和value

当type为text或password时：

name：为文本框命名，以备后台程序ASP 、PHP使用。

value：为文本输入框设置默认值。(一般起到提示作用)

当type为radio或者checkbox时

value：提交数据到服务器的值(后台程序PHP使用)

name：为控件命名，以备后台程序 ASP、PHP 使用

checked：当设置 checked="checked" 时，该选项被默认选中

1.2 如何理解HTML

HTML文档

描述文档的结构’

有区块和大纲

html5有一套将html文档转化为大纲的算法，语义化的最终目的就是为了实现表现正确的大纲，以被机器读取。

demo:

html结构.png

上面的HTML文档会生成如下大纲

大纲.png

工具：http://h5o.github.io/,借助这个工具我们可以查看网页的结构。

腾讯新闻outline.png

1.3 HTML版本

HTML4/4.01(SGML)

XHTML(XML)

HTML5

HTML各版本要求.png

HTML新增内容

新区块标签

- section

- article

- nav

- aside

表单增强

- 日期，时间、搜索

- 表单验证

- placeholder自动聚集

新增语义标签

- header/footer

- section/article

> section比较零碎

article一篇博客的标题，内容，评论，相对完整的区块

- nav 导航

- aside

- em/strong 强调

- i icon

1.4 元素的分类

HTML分类.png

按默认样式分

块级 block

行内 inline

inline-block、

按内容分

1.5 HTML元素嵌套关系

HTML嵌套关系.png

a可以包含div

p不可以包含div

为什么可以支持a>div写法

a标签为什么可以嵌套块元素.png

在html4.0时，这种写法也是错误的，不过在h5标准中，a标签为透明元素，解析为文档模型时，会忽略透明元素。

1.6 HTML默认样式和reset

默认样式的意义

类似markdown使页面具有格式，方便阅读

reset

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

1.7 面试题

1.doctype的意义是什么

- 让浏览器以标准模式渲染

> 例如：ie浏览器的盒子模型与标准模式不同

- 让浏览器知道元素的合法性

2.HTML XHTML HTML5的关系

- HTML属于SGML

- XHTML属于XML,，是HTML进行XML严格化的结果。

- HTML5不属于SGML或XML，比XHTML宽松

3.HTML5有什么变化

- 新的语义化元素

- 表单增强

- 新的API(离线、音视频、图像、实时通信、本地存储、设备能力)

- 分类和嵌套规则变更

ｉ和 em的区别

i仅仅是纯样式，em表强调

5.语义化的意义是什么？

- 开发者容易理解

- 机器容易理解结构(搜索、读屏软件)

- 有助于seo

6.那些元素可以自闭合

- 表单元素input

- 图片 img

- br hr

- meta link

7.HTML和DOM的关系

- HTML时死的

- DOM由HTML解析而来

8.property和attribute

- property是活的，会改变页面的内容

- attribute是死的，用JS设置后页面不改变

9.form的作用有那些

- 直接提交表单

- 使用submit/reset按钮

- 便于浏览器保存表单

- 第三方库可以整体提取值

- 第三方库可以进行表单验证