@zhongjianxin
2017-07-31T22:26:06.000000Z
字数 1331
阅读 1112
HTML + CSS
Trainning
1.HTML介绍
HTML（Hyper Text Markup Language）——顾名思义，它的中文名称叫超文本标记语言，是一种用于创建[网页](https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5)的标准标记语言。
网页浏览器可以读取HTML文件，并将其渲染成可视化网页，这就形成我们看到的网页了，HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
1.出现的原因+作用
2. 什么是标记语言
3. 什么是超文本
2.HTML 标签、元素、属性的理解
3.Document Type Definition
HTML5 Structure
Inquiry Learning
尝试向你的同学解释下列概念：
<header> vs. <head> vs. <h1> 三者的区别？
Advice for Tutor： 向同学们解释下图，使学员脑海中网页结构的画面与HTML元素一一对应起来
1. HTML的元素嵌套规则。
讲解如何使用Chrome开发者工具定位HTML元素，查看HTML元素的嵌套实例。
2. 自闭合元素（self-closing elements）。
例如上面第二个练习题 就只有开标签，没有闭标签。其他常见自闭合标签：<br> <embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>
3. 三种标签元素的区别与特点：
块元素
div,ul,li,dl,dt,dd,p,h1-h6,blockquote
块级元素的特点：
- 总在新行上开始，占据一整行
- 默认情况下，其宽度自动填满其父元素宽度
- 宽度始终是与浏览器宽度一样，与内容无关
- 它可以容纳内联元素和其他块元素
- display属性为block
- 块级元素的垂直相邻外边距margin会合并。
内联元素
a,b,span,img,input,strong,select,label,em,button,textarea
内联元素的特点：
- 和其他元素都在一行上
- 高，行高及外边距和内边距部分可改变
- 宽度只与内容有关
- 行内元素只能容纳文本或者其他行内元素
- display属性为inline
- 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
- 不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。
空元素
br,meta,hr,link,input,img
空元素的特点：
- 没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
2.CSS Box Model
