前端学习笔记（一）

关于 HTML5

• HTML5常用标签元素及其作用（只介绍一些稍微值得注意的标签及其属性）

注意：
一般不成对出现的标签
<hr/>表示水平线
<br/>表示换行
空格和回车在代码中都无效

引用：
<q></q>表示引用某句话，中间的文本不需要加引号
<blockquote>表示引用长文本
用<code>标签加入一行代码。若使用多行代码则用<pre>，在你需要在网页中预显示格式时也可以使用它

表格：
<tbody></tbody>：如果不加<thead> <tbody> <tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）另外注意：table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

 <caption>标题文本</caption>
<table summary="表格简介文本">

链接：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

使用mailto在网页中链接Email地址，语法格式为：

<a href="mailto:1339611623@qq.com?subject=主题&body=邮件内容"></a>

如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

表单：

<form   method="传送方式"   action="服务器文件">

action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
method ： 数据传送的方式（get/post）
所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上！）

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

type：当type="text"时，输入框为文本输入框; 当type="password"时, 输入框为密码输入框;当 type="radio" 时，控件为单选框;当 type="checkbox" 时，控件为复选框，同一组的单选按钮，name 取值一定要一致
注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

下拉列表框

<select>      
<option value="看书">看书</option>      
<option value="旅游" selected="selected">旅游</option>
</select>

selected="selected"表示默认被选中
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项

• HTML的版本问题

整个HTML的发展，主要有HTML1.0 2.0 3.0 3.2 4.0 4.01 XHTML(比较严格) HTML5
从视频上来看，主要介绍了HTML4，XHTML，HTML5之间的语法区别。但从根本上看，HTML 5的目标是为了能够创建更简单的Web程序，书写出更简洁的HTML代码。例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新的属性、新的元素等等。

相对于HTML4来说，HTML5的变化有：
新增的元素：
结构元素

section，article，aside，header，hgroup，footer，nav，figure

其它元素

video、audio、embed、mark、progress、meter、
time、ruby、rt、rp、wbr、canvas、command、
details、datagrid、keygen、output、source、menu

新增的input元素的类型

email、url、number、range、Date 、Search

废除的元素：
能使用CSS代替的元素（basefont、big、center、font、s、tt、u）等等 ，不再使用frame框架 ，只有部分浏览器支持的元素 ，其他被废除的元素

新增属性：
表单相关的属性

email，Url  ，number，range，
Date pickers (date, month, week, time, datetime, datetime-local)，
search，color

链接相关的属性
其他属性（略）
全局属性：
contentEditable，designMode，hidden，spellcheck，tabindex

• 元素分类

块级元素block特点：
总在新的一行开始（换行），行高以及顶和底边距离都可控制，如果用户不设置宽度，则会默认为整个容器的100%。常用的块级元素有：
<div><p><h1><from><ul><li>

内联（行内）元素inline特点：
和其他元素都在一行上（不换行），行高以及顶和底边距不可改变。常用的内联元素有：

<span><a><label><input><img><strong>

inline-block特点：
不自动换行，能够识别宽高，默认排列方式为从左到右，常见的有img input
另外，在HTML5中开发者可以自定义元素类型，即display:block;

• DOM

在《JavaScript高级程序设计》一书中写道：文档对象模型(DOM，document object model）是针对XML但经过扩展用于HTML的应用程序编程接口，就是我们所说的API，即提供访问和操作页面内容的方法和接口。DOM把整个页面映射为一个多层节点结构，借助DOM提供的API，开发人员可以轻松删除，添加，替换或修改任何节点。

关于CSS（cascading style sheet层叠样式表）

• 关于CSS选择器

解析方式：从右至左，逐步验证父节点，提高效率

标记（元素）选择器：
一个HTML页面由很多不同的标记组成，例如<p>、<h1>、<div>等。CSS标记选择器就用于声明这些标记的CSS样式。

tagName {
    property:value;
}

伪元素选择器：
不会出现在html中，但真实存在，可以修改样式
:first-letter和:first-line：
:first-letter用于选中元素内容的首字符。:first-line用于选中元素中的首行文本。

CSS3新增伪元素选择器：
:before和:after(CSS1,2中用单冒号，CSS3中用双冒号，但都适用)
:before和:after两个伪对象必须配合content属性使用才有意义。它们的作用是在指定的标记内产生一个新的行内标记，该行内元素的内容由content属性里的内容决定。
before选择器用于在E元素之前插入内容。

<E>::before {
 content:文字或其他内容
 }

after选择器用于在某个元素之后插入内容。

  <E>::after {
 content:文字或其他内容
 }

类选择器：
类选择器用来为一系列标记定义相同的呈现方式。

 .className { 
     property:value; 
}

伪类选择器：
伪类选择器区别于类选择器，类选择器是由用户自行定义，而伪类选择器是在CSS中已经定义好的选择器。
如<E>:hover 指定当鼠标指针移动到元素上面时元素所使用的样式。

ID选择器：
ID选择器和类选择器在设置格式的功能上类似，都是对特定属性的属性值进行设置。但ID选择器的一个重要功能是用做网页元素的唯一标识，所以，一个HTML文件中一个元素的ID属性值中惟一的。

#idName{ 
   property:value ;
}

其它选择器还有：组合、否定、通用选择器等

优先级或权重：
ID （100）＞类、属性、伪类（10）＞元素、伪元素（1）＞其它（0）
注意：计算复合选择器权重时根据同级相加但不进位来判断
另外！important权重最大，若另一种优先级较高的也加了！important则可以覆盖；

css样式优先级：行内>嵌入>链接>导入；若权重相同，则后写的会覆盖前面的

• 盒子模型

网页中每个元素都具备四个属性，如同生活中常见的盒子，这四个属性分别为：content（内容）、padding（内边距）、border（边框）、margin（外边距）。
大多数浏览器采用W3C标准盒模型，还有一种IE内核浏览器采用的怪异盒模型。
不管哪种模型：
一个块的宽度=content宽度+padding*2+border*2+margin*2。
区别是：对于标准盒模型，元素宽度=content宽度，对应于CSS3中样式box-sizing的border-box属性；IE怪异盒模型，元素宽度=content宽度+padding×2+ border×2，对应于CSS3中样式box-sizing的content-box属性。

• 表格布局

之前常用布局，但现在可以使用样式实现表格的效果，即使用display属性值定义单元格样式。其中vertical-align: center;在使用的时候不会表现，具体原因待讨论。

• display的属性与作用

确定元素的显示类型：

inline，block，inline-block，none

其中none表示隐藏该区域，不占用实际空间，但对后台来说真实存在，可以获取被隐藏的元素

none和visibility：hidden的区别：
hidden占用实际空间，后面的元素不会占据hidden的区域；none不占用空间，后面的元素会占据原来的none区域

vertical-align可以设置inline与inline-block的对齐方式：

top（默认），bottom，middle

其它属性值：
list-item元素作为列表显示
run-in此元素会根据上下文作为块级元素或内联元素显示
（以下是跟表格布局有关的属性）
table 此元素会作为块级表格来显示（类似table），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似table），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似tbody）
table-header-group 此元素会作为一个或多个行的分组来显示（类似thead）
table-footer-group 此元素会作为一个或多个行的分组来显示（类似tfoot）
table-row 此元素会作为一个表格行显示（类似 tr ）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 colgroup ）。
table-column 此元素会作为一个单元格列显示（类似 col ）
table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）
table-caption 此元素会作为一个表格标题显示（类似 caption）

• position的属性与作用

确定元素的位置：
static：
静态，默认布局，按照文档流一个个布局
relative：
相对定位，相对于元素本身进行移动，并且偏移过后不会改变原来占据的空间大小和位置，只是呈现方式改变了，其它元素的布局计算按照原来元素的大小和位置。例如left:10px指距离原来元素的左边为10个像素
absolute ：
绝对定位，相对与父级元素中最近的absolute或relative的定位，不影响同级其它元素的布局，若没有父级元素或父级元素没有absolute和relative就相对与窗口定位，脱离了文档流，相当于一个独立的元素，但若只设定属性值而不设定绝对位置时，默认按照文档流布局
更正：子元素position为absolute的时候是相对于position不为static的父亲元素，即不仅仅是relative和absolute,还包括fixed
fixed：
固定定位，相对于Windows窗口的定位，或者是可视区域的定位，不会改变自己在窗口的位置

注意：属性取后三种值的元素，可以设置z-index属性，表示以屏幕为xy平面，以屏幕到人眼为z轴正方向，以此设置层叠方式，类似于PS的图层遮盖

• 响应式布局

所谓响应式布局，就是一个网站可以兼容多个终端，针对不同的终端设置不同的样式

• float布局

国内大部分网站都使用该布局方式，兼容性比较好，可以用于图文混排、文字环绕等展现效果，而且float会将元素inline-block化。
1.float对兄弟元素的影响：应用float之后不影响元素的布局，但是影响元素内部的文字表现，即脱离文档流但不脱离文本流
2.float对自身的影响：形成了块（使得本身为inline元素有了宽高属性）；尽量向上浮动和尽量向左/右浮动
3.对父级元素的影响：父级元素在没有设置高度或者内部没有子元素撑起高度时，产生高度塌陷。
解决方法：
①overflow: auto/hidden;zoom1;使该元素塌陷时可以根据float元素自动填充使之成为一个包含所有float子元素的块,zoom1兼容IE；
②在父级元素结束前添加子标签
<div style="clear:both;"></div>；
③利用伪元素::after在元素内部添加一个clear:both，伪元素选择器中content可以取值也可以为空，但要加visibility:hidden，允许浏览器渲染它但不显示；
④为父级元素设置高度

• Flexbox布局

即弹性盒子布局，可以更好的实现响应式布局，有如下特点：
1.任何容器可以使用flex布局，即对于块级元素有display：flex；
2.行内元素也可以使用flex布局display：inline-flex；
3.设为flex布局之后，子元素的float，clear，vertical-align属性失效，容器内的所有子元素也自动成为容器成员，成为flex项目

其中，容器属性有6个，控制其中的flex项目的排列方式；项目属性有6个，可以控制自身的相对顺序和大小，也可以覆盖由父级元素继承过来的某些属性。

（本周进度比较慢，其它布局方式还没有开始了解，还有CSS效果也到下周开始）