今天完成：

任务四

笔记：

行框和行内框区别：

行内框=padding+content 即行高      行内框只是一个概念

一行有很多行内框，而所谓行框就是是包含这一行行内框最高点和最低点的

关于定位：子绝父相

vertical-align属性设置一个元素的垂直对齐。

baseline       默认。元素放置在父元素的基线上。

sub              垂直对齐文本的下标。

super           垂直对齐文本的上标

top              把元素的顶端与行中最高元素的顶端对齐

text-top      把元素的顶端与父元素字体的顶端对齐

middle        把此元素放置在父元素的中部。

bottom       把元素的底端与行中最低的元素的顶端对齐。

text-bottom 把元素的底端与父元素字体的底端对齐。

length  

%                使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit         规定应该从父元素继承 vertical-align 属性的值。

focus伪类选择器：获取焦点

outline:0 none   当元素获得焦点的时候，焦点框为0.

比如说当前这个网页，你用tab键切换的时候，文字链接、搜索框、按钮等的外面会有一个虚线框（或高亮框），此时当前的元素就获得了焦点，你可以对它进行操作。

这个功能一般是为使用键盘操作的用户准备的。

 有些链接——比如一个图片链接，你不想让他出现虚线框破坏设计感，就可以用此方法。

一般不要去掉，只在一些影响设计美感的地方用。毕竟这个焦点框对键盘用户是很有帮助的。

-------------------------------------------------------

 功能：去掉链接周围的虚线框！

CSS:

a{outline:none;}

a:active{noOutline:expression_r(this.onFocus=this.blur());}

:focus{outline:0;}

JS:

$("a").bind("focus", function(){

if(this.blur){

this.blur();

}

});

box-shadow

举例：box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06) inset;

参数说明

    i.  第1个长度值用来设置对象的阴影水平偏移值。可以为负值

    ii. 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

    iii.如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

    iv. 如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值

    v.  设置对象的阴影的颜色

box-shadow:1px 1px 3px #292929;

阴影水平偏移值（可取正负值）；

阴影垂直偏移值（可取正负值）；

阴影模糊值；

阴影颜色

button和input区别：

button元素内部可以加文本，图像，input不能

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

其实form提供的是一个链接，button的属性是提交submit，而且method方法是得到，应该注意的是button标签尽量少和form一起使用，因为不同的浏览器提交的内容是不同的，有的是value的值，有的是button之间的内容 

在一个页面上画一个按钮，有四种办法：

<input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。

<input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。

<button> 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题（葛亮）。

其他标签，例如 a, img, span, div，然后用图片把它伪装成一个按钮。

button需始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

a，表单元素不继承body样式

a：link和a实现效果一样，a:link表示链接的平时状态

可以使用百分比的样式属性

定位属性：top, right, bottom, left;

盒模型属性：height, width, margin, padding;

背景属性：background-position;

文本属性：text-indent, line-height, vertical-align;

字体属性：font-size;

背景属性：background-position;

图像中描述为50% 50% 的点（中心点）;如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角;如果图像位置是 100% 

100%，会使图像的右下角放在右边距的右下角。

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%。

background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

常用表单元素

form:定义供用户输入的表单。

fieldset:定义域。即输入区加有文字的边框。

legend：定义域的标题，即边框上的文字。

label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。

input:定义输入域，常用。可设置type属性，从而具有不同功能。

textarea:定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。

button:定义一个按钮。

select:定义一个选择列表，即下拉列表。

option:定义下拉列表中的选项。

表单的种类

文本框: 文本框是一种让访问者自己输入内容的表单对象，通常被用来填写信息或者简短的回答，如姓名、地址等。

代码格式：<input type="text" name="..." size="..." maxlength="..." value="..."

 属性解释：

 type="text"定义单行文本输入框；

name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

size属性定义文本框的宽度，单位是单个字符宽度；

maxlength属性定义最多输入的字符数。

value属性定义文本框的初始值

多行文本框: 也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

代码格式：<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>

属性解释：

cols属性定义多行文本框的宽度，单位是单个字符宽度；

rows属性定义多行文本框的高度，单位是单个字符宽度；

wrap属性定义输入内容大于文本域时显示的方式

密码框: 是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

代码格式：<input type="password" name="..." size="..." maxlength="...">

属性解释：

type="password"定义密码框；

size属性定义密码框的宽度，单位是单个字符宽度；

maxlength属性定义最多输入的字符数。

隐藏域:

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式：<input type="hidden" name="..." value="...">

属性解释：

type="hidden"定义隐藏域；

value属性定义隐藏域的值

单选框: 当需要访问者在单选项中选择唯一的答案时，就需要用到单选框了。

代码格式：<input type="radio" name="..." value="...">

 属性解释：

 type="radio"定义单选框；

value属性定义单选框的值，在同一组中，它们的域值必须是不同的。

复选框: 复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

代码格式：<input type="checkbox" name="..." value="...">

属性解释：

type="checkbox"定义复选框；

value属性定义复选框的值

提交按钮: 提交按钮用来将输入的信息提交到服务器。

代码格式：<input type="submit" name="..." value="...">

属性解释：                

type="submit"定义提交按钮；

value属性定义按钮的显示文字；

复位按钮: 复位按钮用来重置表单。

代码格式：<input type="reset" name="..." value="...">

属性解释：               

 type="reset"定义复位按钮；

value属性定义按钮的显示文字；

常用type属性：button、checkbox、hidden、image、password、checkbox、

radio、reset、submit、text。

html5新增type属性：

（1）search：input会呈现为搜索框（与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容）。

（2）tel：编辑电话号码的控件，提交时换行符会自动从输入框中去掉（普通的text并不会，故text类型验证输入值时一般需要trim()函数处理）。

（3）url：编辑url的控件，提交时换行符与首位的空格都将自动去除。

（4）email：可输入一个邮件地址。

css如何实现input不可编辑？

答：有两种方法

第一：disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。

第二：readonly="readonly" 只读字段是不能修改的。不过，用户仍然可以使用tab 键切换到该字段，还可以选中或拷贝其文本。

如何实现会发光的输入框input？

答：取消浏览器默认样式outline。

设置边框样式、宽度、颜色。

设置边框阴影。

渐变过渡效果

详情：CSS实现会发光的输入框input - CSDN博客

用HTML5怎么实现输入密码功能（六个格子）？

答：用六个li充当六个格子，同时将input框隐藏，点击承载六个格子的容器时，使焦点聚焦在input上。

详情：HTML5实现输入密码（六个格子） - 无敌小坑笔 - 博客园

1．为什么要语义化?

a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；

c. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

d. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；

e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

2. 写HTML代码时，应注意什么？

1.  尽可能少的使用无语义的标签div和span；

2.  在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3.  不要使用纯样式标签，如：b、font、u等，改用css设置。

4.  需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i）；

5.  使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

6.表单域要用fieldset标签包起来，并用legend标签说明表单的用途；demo

7.每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

8.补充一点：不仅写html结构时，要用语义化标签，给元素写css类名时，也要遵循语义化原则，不要，随便起个名字就用，那样等以后，再重构时，非常难读。

最忌讳的是不会英文，用汉语拼音代替。别那么LOW 。

HTML5新增了哪些语义化标签？

1、header元素

header元素代表“网页“和”section”的页眉。通常包含H1~H6元素或者hgroup元素。作为整个页面或者内容块的标题，也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素

header使用注意：

•可以是“网页”或任意“section”的头部部分；

•没有个数限制。

•如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

2、footer元素

footer元素代表“网页”或“section”的页脚，通常含有该页面的一些基本信息，例如：文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。。

footer使用注意：

•可以是“网页”或任意“section”的底部部分；

•没有个数限制，除了包裹的内容不一样，其他跟header类似。

3、hgroup元素

hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

hgroup使用注意：

•如果只需要一个h1-h6标签就不用hgroup

•如果有连续多个h1-h6标签就用hgroup

•如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章

元数据一起放入header标签

4、nav元素

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。但是我在有些时候却情不自禁的想用它，譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了。

nav使用注意：

•用在整个页面主要导航部分上，不合适就不要用nav元素；

5、aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名词解释等。（特殊的section）在

article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

aside使用总结：

•aside在article内表示主要内容的附属信息，

•在article之外则可做侧边栏，没有article与之对应，最好不用。

•如果是广告，其他日志链接或者其他分类导航也可以用

6、article元素

article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）

除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。

article使用注意：

•自身独立的情况下：用article

•是相关内容：用section

•没有语义的：用div

另外，说一下，HTML5其他结构元素标签

HTML5节元素标签包括body article nav aside section header footer hgroup ，还有h1-h6和address。

•address代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

•h1-h6因为hgroup，section和article的出现，h1-h6定义也发生了变化，允许一张页面出现多个h1。

section：

section元素表示文档或应用的一个部分。所谓“部分”，这里是指按照主题分组的内容区域，通常会带有标题。【也就是每个section对应不同的主题。注意是内容本身的主题，而不是其他人为设定的划分标准。】section的例子包括书的章节回目、多tab对话框的每个tab页、论文以数字编号

的小节。网站的主页可能分成介绍、最新内容、联系信息等section。

注意：网页作者应使用article而不是section元素，如果其内容是用于聚合（syndicate）。【比如blog首页上的每篇blog。又如论坛帖子的一楼、二楼、

三楼……n楼。通常这样的每部分内容形式上是类似的，但是来源是独立的。】

注意：section不是通用容器元素。如果仅仅是用于设置样式或脚本处理，应用div元素。一条简单的准则是，只有元素内容会被列在文档大纲中时，才适合用section元素。

至于何时使用，基本上可以这两点： 

section 不是一个专用来做容器的标签，专用的是 div 

section 里应该有 标题（h1~6），但文章中推荐用 article 来代替 

我们可以理解为一个非文章段落，有明确 id 的一个特殊模块容器（不是专用以包住块的容器）。

明天完成：

1.复习之前的知识，忘的很多，还有一些不够理解

2.想想深度思考5

3.继续任务5

遇到问题:

图片大小调整： transform: scale(0.5);

图片和输入框没有对齐：  vertical-align:middle；

图片垂直居中 line-height=height

登录的位置不太对  因为没把三个小模块一起写，所以对不齐，以后布局可以看的元素多一点，这样写起来更容易

input表单没有自适应，四边有框      outline: none

关于定位居中：  position: absolute;

                          left: 50%;

                          transform: translateX(-50%);

收获：

做页面的时候应该只是拿到一张psd图，所以有一些动态的效果，和用户体验相关的需要自己添加，不只是让页面和psd图一样，而且希望看起来更舒服