Web页面或app等前端页面之HTML与CSS技术小结

Java Web前端开发基础，前端的HTML、CSS基础，以及浮动和定位等内容，应用布局进行页面开发。

2.1.1 HTML基础

HTML(hypertext markup language)超文本标记语言,简称HTML页面。
重点：
1.Sublime使用方法及其开发HTML。2.HTML必须掌握的标签及属性。3.掌握使用表格进行各类型数据展示的方法。4.掌握利用表单进行交互式页面设计的方法。5.能用技术完成实际应用场景。

开发环境:1.浏览器(建议Chrome浏览器)。2.开发工具:Sublime3。
下载Sublime:


普通文本一般包含文字、图片。超文本还可包含声音、视频等展示信息的内容。


完成准备工作后打开Sublime进行页面设计。

html结构组成/文件结构:

HTML文件的基本结构是由哪几个标签组成的？html标签文档标记，head标签头部标记，body标签正文标记，这三个标记为HTML的基本结构的组成标签，而title标签属于head标签中的一部分。
常用标签:

字体标签font:字体大小size属性设置范围1-7(默认是3)，字体样式face属性设置宋体、隶书等，字体颜色color属性设置red等(颜色还可用RGB或16进制表示)，font标签内是要表示的字体信息。
html5不支持font标签，但是在html5中编写font标签依然能使用，是因为使用一个不合规范的标签后，浏览器有时会自动降级。
查看html版本，可看文档第一行，!DOCTYPE HTML标签即是HTML5标准网页的一个声明，告知浏览器此文档的解析类型。

p标签段落标签，有段间距(空行).br标签换行不换段，无行间距。


标题标签:主要是对关键词的优化(SEO搜索引擎优化，eg:百度爬虫抓取h1标签很重要)，h1标签要突出主标题,最好只有一个,多个不会报错但搜索引擎会视所有h1标签作弊。属于块级元素，最后一行不管满没满都自动换行。
行内元素:默认情况下需要行满才能换行。
h1大标题标签，h2副标题标签，h3栏目标题标签。

HTML是比较宽松的web标准，不加/也可以，XHTML就比较严格，要求一定要有/作为结束。
src值为要显示图片的路径，本地机器上图片的位置有相对路径(使用较多,”…”返回上一级路径)和绝对路径两种访问方式；还可是网络上的图片(外网的图片地址前面必须有http://)。alt值为当找不到src中的路径或不能正常显示时的提示信息。
height、width属性设置高度和宽度,单位是px(像素,pixel)。

火狐浏览本地文件，是根据本地文件传输协议的。
1、本地文件传输协议也就是File协议主要用于访问本地计算机中的文件，就如同在Windows资源管理器中打开文件一样。2、要使用File协议，基本的格式如下：file:///文件路径， 比如要打开d盘download文件夹中,在FF地址栏中输入：file:///d:/download/，还可以排序。浏览具体文件：file:///d:/download/abc.txt 浏览文件信息、文本文件、图片、PDF文件比较方便。
理解HTML和JSP：
1、HTML是文本标记语言，它是静态页面，只需要一个浏览器那么它就可以正常显示出来，而不需要指定的编译工具，只需在TXT文档中写上HTML标记就OK。JSP是Java服务端的页面，所以它是动态的，它是需要经过JDK编译后把内容发给客户端去显示。
2、区别就是。HTML能直接打开，jsp只能发布到Tomact等服务器上才能打开。定义上HTML页面是静态页面可以直接运行，JSP页面是动态页它运行时需要转换成Servlet。它们的表头不同，这个是JSP的头“ <%@ page language="java" import="java.util.*" pageEncoding="gbk"%>”在表头中有编码格式和导入包等。在jsp中用<%%>就可以写Java代码了，而html没有<%%>。

超链接标签:鼠标移到超链接的载体上鼠标会显示成手指状，
href用来设置链接指向的页面的 URL。target规定在何处打开链接文档。
用title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
name规定锚的名称。

在开发工具Sublime Text中输入左尖括号html或html:5(根据版本有所不同)按Tab键快捷生成html基本结构模板/标准格式。

锚点的使用:1.先定义锚点，a name=”锚名”标签,name属性最好望文生义。2.使用锚点，跳转到超链接设置的锚的位置a href=”#锚名”标签。锚点定位要保证包含此锚点内容页面是完整的,下面部分不能为空。
锚链接和超链接都是使用a标签定义；命名锚点使用a标签的name属性值，使用a标签的 href属性指定要链接到锚点的位置，可跳转到同一网页和不同网页内某个位置；超链接打开网页、图片。


有序/无序列表的使用区别在于描述的内容有无次序关系。列表是块级元素，中间有一行段间距。

sublime里输入li*5后按TAB会出现五个li标签，快捷输入需安装插件。


表格:
border属性为1代表有边框，width属性两种设置方式1.设置多少像素(固定宽度500px等)，2.占容器的百分比(50%,即占容器一半宽度)。

HTML语言的标签详细的使用可查HTML官方文档。
列的合并相对简单，在一个行里面去找就行了，行的合并先去找行，再去找列。

表格的其他属性:

bgcolor属性三种表示方法:1.颜色单词，”red”等。2.”#”+6位16进制数表示，前两位表示”红”，中间两位”绿”，最后两位”蓝”,即红绿蓝三原色。3.RGB，eg:bgcolor=”rgb(255,0,0)”，html4后不支持该属性的RGB表示方法，可用style属性代替，eg:style=”background-color:rgb(255,0,0)”，其这三种表示方法都可用。
可在代码中对align和人valign进行尝试。


th标签是表格的表头，表头部分会默认加粗，例如这里的星期一星期二等。

cellspacing 属性表示的是表格中单元格之间的间距大小。caption 标签表示定义的表格的标题。
tr标签属性valign垂直居中方式。valign的值分别是：top：对内容进行上对齐。middle：对内容进行居中对齐（默认值）。bottom：对内容进行下对齐。baseline：与基线对齐。
表单：

form标签定义表单，表单本身是不可见的，所有表单元素要放在form标签中,form标签一定要写，因为当submit提交按钮将当前页面表单内容提交给下一个页面(后台)继续处理.
form标签中的action属性值表示后台要处理的文件的文件名，form中的method属性代表提交方式,值为post是隐式提交安全性较高,值为get是显式提交安全性较低。

form标签里可放许多控件,如label标签,用于文字显示.input标签用于定义表单元素,input中可有很多属性,如type,name,id,value.
在表单中普通提示文本需要加label标签进行标记，便于后面对这个进行批量操作；但在表格中对提示文本可以不用加label标签(表格中列td标签本身也是一种标记)。因为在表格中提供一系列对表格格式进行操作的方式。但是具体加不加也需要依据实际情况而定！表单标签form一定在table表格前面.
单选按钮 input type=“radio” name="" id=""标签，单选按钮中name定义名称一致为一组。
1、name与id并不是必须要一起出现。2、id 属性规定 HTML 元素的唯一的 id。以便通过JavaScript或者CSS的选择器找到对应属性。name 属性规定 input 元素的名称(可重复)，name 属性用于对提交到服务器后的表单数据进行标识。在后面Servlet的学习中，会明白只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。传值给后台时,value最好为数字而不要是字符，因为字符有诸多限制。
input标签中type属性中的值:checkbox复选框,radio单选框,text文本框(显式),password密码(小黑点,隐式),button普通按钮,submit提交按钮(点击会把当前表单内容提交给后台).
value 属性为 input 元素设定值:1. value属性是设置初始（默认）值。将value设置的默认值不会在浏览器页面中展示，而可以通过javascript 获取的默认值。2. value 属性对于不同input类型，用法也不同：1.对于 “button”、“reset”、“submit” 类型 - 定义按钮上的文本.2.对于 “text”、“password”、“hidden” 类型 - 定义输入字段的初始（默认）值.3.对于 “checkbox”、“radio”、“image” 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。注意：1.value 属性对于 input type="checkbox"标签 和 input type="radio"标签 是必需的。2.value 属性不适用于 input type="file"标签。
列表框select标签中的option标签中的value属性自定义,selected属性设置为”selected”默认被选中.

表单其他控件:

多行文本框:textarea标签中有rows属性表行即高度,cols属性表列即宽度,name属性给后台识别,id给当前页面的前端识别。
上传控件:input标签中的属性type设置为file。后最好跟一个按钮确定。input type=“file” 标签用于文件上传。默认的显示就是一个浏览按钮，点击后可以浏览选择本地文件。

隐藏域:input标签中的属性type设置为hidden,还有name,id属性与前面作用类似,作为后台和前端数据交换不便于显示在页面中的中间件。
普通列表框:和下拉列表框有所不同,在,select标签中的添加size属性设置初始可视选择项(超过此数,以滚动条形式),添加multiple属性设置为”true”可同键盘上Ctrl多选。
文本框中的字体内容可以使用placeholder属性完成，如：input type=“text” name=“username” placeholder="用户名"标签
通常一个标签是成对出现的，一般会写成:XXX成对标签的格式.若一个标签不是成对出现的，通常在后面加 /来表示标签的结束，养成良好的代码书写习惯。
自闭合标签由于没有结束符号，没办法在内部插入其他标签或文字，只能定义自身的一些属性。常见的自闭合标签：1、meta标签定义页面的说明信息，供搜索引擎查看。2、link标签用于连接外部的CSS文件或脚本文件。3、base标签定义页面所有链接的基础定位。4、br标签用于换行。5、hr标签水平线。6、input标签用于定义表单元素7、img标签 图片。

2.1.2 CSS基础

CSS基本使用、常用样式及选择器等
什么是CSS?css层叠样式表:Cascading Style Sheets(层叠 样式 列表)，作用:1.结构与样式分离的方式,便于后期维护与改版。2.可用多套样式，使网页有任意样式切换的效果。3.使页面载入得更快、降低服务器的成本。
重点:1.css在html页面设计的必要作用。2.css语法格式、选择器及分类。3.使用css设置字体、文本、背景、链接等。4.使用css列表,显示隐藏的方法、各种伪类用法。


css样式文件结构:

CSS规则是由选择器和声明组成。声明要由花括号包围起来；属性和属性值之间用冒号分开；属性值如果有单位，那么数字和单位之间不能有空格；每条声明的结尾用分号结束；

样式的选择器p表示标签选择器，标签选择器有很多种,如tr、td等，选择器也有很多种。
内部样式表:样式选择器的声明和需添加样式的html代码在同一html文件。外部样式表:样式选择器的声明在单独文件中。

(归)类选择器的声明如”.p”需要”.”开头。
同一个元素设置多个类名可以在class中使用空格分隔。eg:p class=“p1 p2"标签。
使用内部样式表，完成背景设置:



单行多行注释符(/* */)快捷键是ctrl + shift+/ 或ctrl +/ 。
如果background-position中如果仅规定了一个关键词，那么第二个值将是"center”。默认是左上。
像素可以理解成是显示器屏幕长宽的单位，所以可以用像素表示字体大小，表示位置距离。
外部样式表：

link标签用于定义文档与外部资源地关系。属性rel是relationship的英文缩写，也就是”关系”。属性type定义css样式文件的类型，可省略，属性href引入的具体文件(指明要链接的外部样式表文件)。
在浏览器种按F12快捷键，查看一下浏览器的控制台。
文本类样式:



对于阿拉伯语和”./。”，direction属性值rtl是从右到左的书写方向(eg:1 2 3 .–>. 3 2 1)。
对于非阿拉伯语和”./。”，direction属性和text-align属性作用都是文本对齐方式。

text-shadow :(文本设置阴影，h-shadow阴影的行坐标，v-shadow阴影的列坐标，blur阴影的模糊程度，color阴影颜色)。

nem是n个字符距离。
小结:

字体类样式:


对相同属性的设置类选择器的优先级大于标签选择器。
列表样式:


list-style-type的默认值，有序的默认是decimal，无序的默认是disc。

伪类样式:


a标签超链接中的属性href值为”#”代表访问本页面。
标签主要是用来包裹元素，实现页面的结构。
伪类可以用来给元素添加一些特殊效果。比如：鼠标放在某个元素（标签）上，背景色改变。通常使用在a标签上面。
伪类选择器的顺序是固定的，必须这么写，不然有些效果就无法实现。
伪类的分类:伪类包含两种:状态伪类和结构性伪类。

:first-child，eg:p:first-child表示若父元素的第一个元素是p标签，元素p才能被选中。否则无效。
伪元素选择器:伪元素选择器就是向文本的部分内容设置特殊样式。



::selection不能选择after和before伪元素选择器中插入的新内容。
CSS其他选择器:

id选择器:标签对应的id最好唯一，虽然重复语法没有错误，但是语义很大问题，书写格式:#+id选择器名称。
选择器:选择html所有元素，其中是通配符。
CSS选择器优先级:


只能在某个属性后边加上!important选择器代表强制优先，使用较少。
同级别的优先级有层叠效果以后出现的为准。如div class=”p1 p2”标签,类选择器层叠效果以p2为准。
行内样式：就是将样式代码写在具体网页中的一个元素内，比如：body标签 div style="width:100px;height:100px;background:red;"标签，不能大部分使用，小部分使用根据情况可允许。

2.1.3 CSS浮动

盒子模型和浮动
浮动效果设计:
重点:1.学习边框、轮廓等块级元素设置，盒子模型。2.标准流、文档流、脱标流等技术术语。3.浮动的设置、浮动的特点。4.使用浮动技术进行特效制作。
内容:

什么是DIV?1.DIV是层叠样式表中的定位技术,全程DIVision。2.有时把div称为图层，更多时候称为“块”。
DIV样式设置:1.div大小、背景设置。2.div溢出效果演示、换行、滚动条显示。3.div边框、轮廓设置。4.盒子模型。
DIV溢出处理效果:1.超出div宽度高度的文字或图片进行隐藏处理。2.超出div宽度高度的文字或图片增加滚动条。

定位，根据想要达到的效果去选择：1、相对定位：是相对于自己的原位置进行偏移。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。2、绝对定位：绝对定位会使被定位的元素脱离文档流。也就是说，它之前占据的位置将被其余块取代。它自己“向上浮一层”，可以遮挡到原文档流中的内容（不一定是原位置周围的）。
并且绝对定位是根据“最近的已定位的元素”进行偏移。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（可以看做是相对于浏览器窗口）。


盒子模型:

与padding属性一样都是顺时针。

盒子模型:

网页中的每个元素都可以看作一个盒子，盒子有外边距（margin）、边框（border）、内边距（padding）、内容（content）这4个属性。外边距（margin）：是元素与元素之间的距离，或者是元素外面留出的一段空白。内边距（padding）：元素里的内容与元素边框之间的距离。边框（border）：元素本身。内容（content）：元素中放置的东西，元素的宽和高指的是元素中内容的宽和高，并不是元素本身的宽和高。
margin对象与对象间的距离，如果是上下的距离，它们之间的距离是两个值之间最大的；如果是左右的距离，它们之间的距离是两个值的叠加。padding是内容与边框的距离。

Box-sizing属性默认值是content-box.
所有的块级元素 (display:block) 都可以进行盒模型的设置，而行内元素 (display：inline) 设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

1. margin-top是这个层的边距设置，是上边距。2.top是当css样式为定位（比如：position:absolute; ）时，left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位，比如：position:absolute;top:0px;3.如果没有设置定位，使用top是不会生效的。
   浮动:
   
   
   
   文档流：指的是元素在HTML中的位置顺序决定排布的过程，主要的形式是自上而下（块级元素）一行接一行，每一行从左至右（行内元素）。主要是针对盒子模型来说的
   文本流：文本流是指html文本的显示，相对于文字段落来说,文本流不会脱标。
   float属性设置:
   
   float有四个属性,分别是:none没有浮动;left左浮动;right右浮动;inherit继承父元素的浮动(浮动样式不会自动被子元素继承).
   设置浮动后，元素会脱离文档流。会对平级的其他元素产生浮动的影响。
   文档流是相对于盒子模型，而盒子模型是由标签组成，标签分为两种等级：行级元素(span、img)和块级元素(div、p)，可简单理解为标签属于文档流，所以文档流是对于行级元素和块级元素。
   块级元素(eg:div)在没有设置宽度属性默认为上一级元素的宽度。默认情况下，子元素会撑起父元素的高度。
   浏览器中快捷键F12检查元素可调试网页代码(调试中修改代码改变效果不会保存)。
   float包裹和崩溃:
   
   float崩溃特性:将子元素设置为浮动之后，父元素(未设置浮动)在没有指定高度的情况下，父元素的高度将发生破坏。
   float包裹特性:浮动使元素脱离标准文档流后，对应的它就会产生包裹性,元素的尺寸只由内部元素决定。行级元素(如图片)会有基准线，若具有包裹性的元素里面是块级元素，那么就不存在基准线的影响。
   
   行级元素垂直方向是基准线对齐，文字垂直方向是行高底部对齐，块级元素占满一行，所以将行级元素的垂直对齐属性vertical-align设值为bottom底部对齐即将行级元素块级化,消除基准线带来的影响。(行级元素与行高底部对齐，类似块级元素占满一行).
   
   浮动的元素脱离文档流，会覆盖同属于文档流的p元素。但若p标签中的内部元素是文字属于文本流，所以浮动的元素不会覆盖文字，就形成了图文环绕的现象。
   设置尺度除了用px，还可以用em，em是指当前页面上采用的字体大小的单位，1em就是一个字的距离，2em就是两个字的距离。
   text-align: justify; 两端对齐。
   
   法一(不常用):直接在所属没有浮动的div清除浮动，
   法二:单独设置一个div清除浮动，
   
   
   法三(主流):单独设置一个div使用::after清除浮动，
   
   
   说明:1、在一个div中，如果没有内容，此时的height(高度)默认为0，这里clearDiv中没有内容，所以默认行高就是0px；2、content属性与::after 伪元素配合使用，来插入生成内容,在这里是为了设置clearDiv的插入内容为空.3、::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素，行内元素本身就可以并排显示，所以clear对行内元素不起作用，这里需要将这个元素使用display:block;变为块状元素。
   1.:after 的意思是再.class内部的最后加入伪元素:after，2、所谓清除浮动，目的是让下面的元素不会受到上面浮动的影响。 ：after伪元素在浮动的父级元素后面增加了一个content为’ '的block元素。而且这个block元素两边都不允许出现浮动元素，下面的浮动元素只能另起一行浮动。这里：after这个伪元素形成了一道看不见的“防护墙”，让防护墙的两边各自浮动而不受影响。
   针对IE浏览器一些bug可单独设置一个div使用zoom属性重新加载重新计算解决。
   
   zoom属性是IE浏览器的专有属性。#clearDiv::after中的清除浮动在谷歌等浏览器中有效，但在IE部分版本中由于不支持伪元素:after，所以无法清除浮动，需要使用zoom:1清除浮动。一般是在某个项目中，需要各种浏览器支持时，就需要再添加上zoom。
   clear属性是清除设置这个clear属性的元素前边的浮动影响。
   clear 属性（清除浮动）定义了元素的哪边上不允许出现浮动元素。如下图所示：
   
   如果网页中某个元素内具有多个带有浮动属性的子元素，使得父元素发生塌陷，如何解决浮动元素父级塌陷的问题？因为浮动的子元素元素脱离了标准流，使得父元素发生塌陷，如果父元素同样使用float脱离标准流，那么父元素和子元素就在同一排版空间，父元素就可以检测子元素的高度，所以就有了高度，我们给父元素添加overflow 和 zoom 可以有效地闭合住内部元素，使得父元素检测到当前元素的垂直总高度。clear同样具有闭合浮动的作用，需要在浮动的末尾进行使用，所以需要在所有浮动元素之后的元素给其添加clear 清除浮动才有效果。
   给父元素添加overflow和zoom可以使浏览器计算其中内容所占的宽高，解决父元素塌陷的问题。1、overflow 属性规定当内容溢出元素框时发生的事情。hidden属性规定其中内容会被修剪，并且其余内容是不可见的。2、zoom是处理缩放比例的。zoom这个属性是IE特有的，其他浏览器并不支持，除了可以设置和检索对象的缩放比例，再有就是触发IE中的hasLayout属性，用户清除浮动或重叠等。3、通俗来说，overflow要掩藏，zoom要缩放。要掩藏，缩放就要知道这个盒子的尺寸。所以就会触发浏览器去计算这个盒子的宽和高。
   在css中添加注释是/* 注释内容 */，html中添加注释是<! --注释说明内容 -->。
   百度css参考手册和html参考手册查找css和html标签和属性。

2.1.4 CSS定位

CSS定位中的相对定位、绝对定位和固定定位等，以及定位与浮动的结合使用。
重点：

内容：

定位:


相对定位是相对于该元素以前所在的位置，一般不作为元素单独显示出来，而是作为容器进行一种包含，做为父元素使用。
margin属性值设置外边距，padding属性值设置内边距,top属性值设置定位容器距离顶部边缘的位置.

绝对定位跟浮动，浮动会以某种方式将浮动元素从文档的正常流中删除，并把浮动元素向左边和右边浮动，不过它还是会影响布局。绝对定位会脱离文档流，绝对定位会关闭占据所在的空间。两者略有不同。
设置position定位有了参照物后偏移量top等才有效。
1、float与绝对定位浮动问题底层区别；1)、设置float和absolute属性，都可以让元素脱离文档流，并且可以设置其宽高。2)、使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本(也就是文字)依然会为这个元素让出位置，环绕在周围。而对于使用absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
2、float可以覆盖其他div,不能覆盖文字。
文档流是指html文档加载解析时从上到下，从左向右，但相对于盒子模型来说，float浮动后脱离文档流，但是没有脱离文本流。文本流是指html文本的显示，是相对于文字段落来说的。所以浮动后的元素并不会影响文字内容的展示，文字会根据加载顺序，依次开始继续加载。
浮动和绝对定位的相同点：1>、都是漂起来的元素，也就是离开了原来的位置。2>、不占据原来的位置。3>、宽度会发生变化，比如：h1标签的文字宽度，默认只设height的情况下，它的width是铺满父元素的宽度的，而当浮动或绝对定位后，它的宽度就是h1内文字的宽度。
绝对定位和相对定位的位置一般不一样，绝对定位以最近已定位祖先元素(一般是body,若不是则两者定位的位置可能一样),以坐标(0,0))作为参照物，相对定位以原元素作为参照物，一般两者相差一个body的margin外间距(默认情况body的margin为8px)。
相对定位与浮动可结合使用，float可有图文环绕效果，相对定位可设置偏移量控制盒子位置(注:若偏移量过大还是会覆盖文字).
因为文本会无视绝对定位所以绝对定位与浮动结合使用还是不会出现图文环绕效果,即float在绝对定位时不生效。
z-index的值可以控制定位元素在垂直于显示屏幕方向上的堆叠顺序，值大的元素发生重叠时会在值小的元素上面。也就是z-index的值越大，就在越上面显示。设置为绝对定位的多个div之间会出现重叠，z-index属性可设置重叠显示的上下层，z-index属性值越大层数越靠上(一般几个div的z-index属性值设置数值间隔大，便于后期灵活增加其他需求的div)。


固定定位是生成绝对定位的元素，相对于浏览器窗口进行定位。
定位技术小结:
1.相对定位一般作为父元素一般可不设置偏移量仅为子绝对定位元素提供参考物，子元素布局采用绝对定位。
2.定位的参照物。
3.浮动与定位，分别用在什么情况。