第一章 HTML
1.1 HTML常见元素
HTML常见元素.png
常见元素
头部常用元素解读
<-- 文档采用的字符集 -->
<meta charset='utf-8>
// 视口宽度
<meta name="viewport" content="width=device-width,
user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
//网站关键字，用于seo
meta name="keywords" content="前端，饥人谷"
//网站描述，用于seo
meta name='description‘ content="饥人谷，最专业的互联网技能教育"
//显示在浏览器标题栏
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合法性验证： https://validator.w3.org
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;
}
Normalize.css: Make browsers render all elements more consistently.
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按钮
- 便于浏览器保存表单
- 第三方库可以整体提取值
- 第三方库可以进行表单验证
