Javaweb基础（一）前端基础

全部学习可以参考：http://www.w3school.com.cn/

一.HTML

1.HTML网页介绍

JAVAWEB : 基于网页Java项目.
网页：网站中的任何一页面，通常是HTML格式的文件。网页是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。

2.HTML介绍

（1）HTML(Hypertext Markup Language),超文本标记语言，它是互联网上应用最广泛的标记语言。文件的命名方式为index.html（推荐）或者index.htm。

xml:1):作为少量简单数据的存储2):作为数据传输的载体..
html:做界面,展现给用户看的.

（2）区分HTMl4.01和XHTML:
XHTML:eXtensible Hypertext Markup Language,可拓展的超文本标记语言, 比HTML更严格,可以理解XHTML是新的HTML规范;所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。而按照HTML 2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。在XHTML中，所有的参数值，包括数字必须用双引号括起来（而在HTML中，引号不是必须的，当内容只是数字、字母及其它允许的特殊字符时，可以不用引号;除此之外XHTML废弃了部分HTML中的标签属性;

（3）认识DHTML:
DHTML是Dynamic HTML的简称，就是动态的html，是相对传统的静态的html而言的一种制作网页的概念。
所谓动态HTML(Dynamic HTML，简称DHTML)，其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript(或其它客户端脚本)，其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念,一般的使用法是:

1.通过HTML把网页标记为各个元素;
2.利用CSS设计元素之间的排版样式，并控制各个标签的位置;
3.利用javascript来控制各个标签;

（4）静态网页与动态网页:

静态网页:
我们写好的html内容在浏览器中显示出来的效果始终都一样，不管次进行多少访问，如果想内容改变那么必须修改源代码。
动态网页:
页面的内容是由服务器端程序控制输出，比如不同的人使用相同的网站，但是显示的当前用户是不一样的。
两者区别：静态就是我们写什么就显示什么，而动态通过程序的控制输出内容。

（5）认识HTML5:
虽然W3C一直呼吁HTML设计师遵循HTML标准,但是现实的HTML设计师都理会这个善意的忠告,也就是说目前互联网上的大部分HTML页面都是不规范的,主要的有以下几种情况:

元素的标签名大小写混杂;如:
内容
元素标签没有合理结束;如:内容,没有写结束标签;
元素标签使用了属性,但是没有指定属性值:如:
元素标签有属性值得时候,属性值没有使用引号:如:
W3C发现这种”恶习”真的改不了的时候,就索性承认了他们是符合规范的.除了”妥协”之外,HTML5的优势不容小视,主要是增强了Web应用程序的功能如客户端校验,绘图支持,多媒体支持等;

（6）HTML代码结构

一个标准的HTML至少由三对标签组成：

1. HTML页面的开始标签和结束标签，为页面的开始，为页面的结束。该标签在页面中只能出现一次，其他的标签都应该写在标签中，否则可能导致显示不正确。
2. 头标签，主要用于显示网页的标题和描述html内容的显示。
3. 主体标签，编写网页中可以见的内容部分。

整体结构：

html结构.png

3.标签

（1）标签格式
1.标签是由都是由<标签名>组成。比如
2.标签的结束标签为开始标签名前面加一个"/",比如：的结束标签为 ,的结束标签为。。。一对标签统一格式为<标签名>内容
3.html中有空标签，空标签没有结束标签,可以不写，但是规范一般在标签名后面加上一个" /",
。
4.标签都有相关属性，属性用于对标签的内容进行描述。你好格式为：<标签名属性名=”属性值“ 属性名=”属性值“>内容
5.标签必须正确的嵌套。

标签格式.png

（2）文字标签

普通标签：对标签中的内容进行修饰。
：标签中的文本加粗显示。
 : 标签中的文本以斜体显示。
：标签中的文本出现下划线。
_{:标签中的文本下浮显示。
^{:标签中的文本上浮显示。
:标签中的文本的 字体(face)、大小(size)、颜色(color)。该标签需要通过属性来设置。

标记的常见属性
   text : 内容中的文本颜色
   bgcolor:背景样式
   background:背景图片}}

（3）颜色

网页中提供的三种方式来代表颜色的值 1.通过英语单词，比如red,yellow,green,gray，blue.... 这种方式简单。 2.10进制表示：RGB, R=Red G=Green B=Blue，所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得,这个是一个关于物理和美术的问题。十进制的基数：0、1、2、3、4、5、6、7、8、9 rgb(0-255,0-255,0-255) ,比如红色rgb(255,0,0); 这种方式不推荐使用,某些浏览器识别不好。 3.16进制表示：十六进制的基数：0、1、2、3、4、5、6、7、8、9、A(10)、B(11)、C(12)、D(13)、E(14)、F(15) 表示方式#000000,每两位代表一个颜色，比如红色：#FF0000 ，绿色:#00FF00 , 蓝色:#0000FF;

（4）排版标签

：用来创建一个段落，该元素自动在其前后创建空行。常用属性align：定义文本的对齐方式，属性可取值：left、center、right :产生换行，不需要结束标记：一条水平线 align：对齐方式，可选值为 center、left、right size：线条粗细，取值为数字，单位为像素 width：线条宽度，取值为数字，单位为像素 color：线条颜色 noshade：规定水平线的颜色呈现为纯色，而不是有阴影的颜色。
：预排版标记
将保留文本中的空白(连续的空白)和换行符的信息
：h1~h6标题标签，属性align：对齐方式 left、center、right。

（5）行内标签和块标签

,都无实际的意义，比如不像标签具有含义代表加粗，这两个标签主要用于以后CSS中使用。文本 div 文本 div 文本 span 文本 span 通过观察我们可以看出div标签始终占一行，而span标签在一行中显示。那么在html中对于默认占一行的标签称为块级标签（块级元素），而在多个标签在一行显示的标签我们称为行内标签（行内元素）。

（6）字符实体

要在网页中显示以下： HTML字符实体（特殊符号）我今天去图书城，买了一本书，书名叫，书的价格是：¥98.20 ©清华出版社版权所有字符实体:实现原理，html代码中不写特殊符号，而是使用一个字符实体来表示(使用另外的东西来表示一个符号.) " " 英文空格 " " 中文空格 < < 小于 > > 大于 & & 这些符号目前输入法都有，我们只需要记住和html有冲突的符号即可。

（7）列表标签

在HTML，列表标签大量使用，网页中随处可见。符号列表标签 type属性：disc(实心圆点)、circle(空心圆圈)、square(实心方块) 内容内容序列列表标签内容内容属性：type编号类型，默认为整数。可选（1、A、a、Ⅰ、i） start起始编号，默认为1，即由最小编号开始。 dl用来创建定义列表定义术语定义说明定义说明一条术语可以有多条相关说明，一条说明也可以应用到在它之前出现的一组术语。

（8）表格标签

非常常用的标签。一个表格由主要由两部分组成，表格的行，行中的列。最简单的结构为: 姓名学号小明 008

（9）超链接

什么是超级链接？超级链接简单来讲，就是指按内容链接。链接的内容可以是另一个网页，还可以是一个图片，一个电子邮件地址，一个下载文件，甚至是一个另外的应用程序(迅雷，qq客户)。

（10）图片标签

图标标签：网页中显示一张图片。属性： src :图片的地址 border:图片的边框 width/height:宽高，默认为图片的元素高度。 alt:图片未加载成功，显示的文本。 title:图片提示。 align:对齐方式，left,right,bottom,top,center 其中left和right用来设置图片在水平方向上的对齐方式，这两个属性值比较特殊，因为图片浮动游离于文字之外，文字环绕图片周围（文字在图片旁自动换行，三面包围图片）。左、右对齐能让文字环绕图片周围注意:我们在网页中，只是指定了图片的路径，源代码的大小不会受影响。

4.表单标签

form标签
用于生成输入表单,该标签不可见;在HTML5之前,表单控件,如单行文本框,密码框,单选框等都必须放在
之间;常见属性如下:

action:必填属性,表示当点击”提交”按钮时,表单数据提交到哪个地址;

method:指定表单提交时的请求类型,该属性值有get或post,分别用于GET或POST请求,默认是get方式,开发建议使用post方式;

enctype:指定表单数据的编码方式,属性有3个值:

属性解释

application/x-www-form-urlencoded 默认,只处理表单控件里的value属性值;

multipart/form-data 以二进制流的方式处理表单数据,文件上传时必须使用该属性值;

text/plain 不对特殊字符编码,适合于表单的属性值为mailto”URL形式,也就是说该方式适用于表单邮件的发送;

input标签
input标签,表单控件标签里功能最丰富的,用于接收用户输入的信息.
其中的type属性指定输入标签的类型。

单行文本框:type = text,输入的文本信息直接显示在框中;

密码输入框:type = password,输入的文本以圆点形式显示;

单选框:type = radio,如：性别选择;

复选框:type = checkbox,如：多个兴趣选择;

隐藏域:type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个数据;

提交按钮:type = submit,用于提交表单中的数据内容;

重置按钮:type = reset,将表单中填写的内容均设置为初始值;

无动作按钮:type = button,可使用javascript为其自定义事件;

文件上传域:type = file,会生成一个文本框和一个浏览按钮;

图像域:type = image, 它可以替代submit按钮,即图像提交按钮。
标签其他通用属性:

name:指定input标签的名字,没有设置name属性的标签不能提交数据;

value:指定input标签的初始值;

checked:设置单选框,复选框的初始状态是否选中;

disable:设置input标签加载时禁用此标签;

maxlength:文本框输入最大字符数,属性值是数字;

readonly:指定文本框内值不允许直接修改;

label标签(了解)
label标签用于在表单标签中定义标签,可对表单控件进行提示说明;
使用的作用是:当用户点击所包含的文本时,该标签关联的表单控件就会获得焦点;让标签和表单控件相关联的两种方式:

1.隐式使用for属性:指定标签的for属性值为所关联表单控件的id属性值;

2.显示关联:将表单控件放在之间;(IE支持不好,不推荐)

用户名: 密码:

select标签

和

要显示的内容

有的浏览器是可以拖动其大小的，我们可以用什么办法解决呢？
CSS à style="resize:none"

二.CSS

1.CSS介绍

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

那么CSS和Html是如何在网页代码中相结合的呢？

2.CSS的引入方式通过四种方式

style属性方式：
利用标签中style属性来改变每个标签的显示样式。
例：

p标签段落内容。

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

2. style标签方式：（内嵌方式）
在head标签中加入style标签，对多个标签进行统一修改。

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

3. 导入方式：
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
例：

注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。

4. 链接方式：
通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
例：

注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

3.样式优先级：

由上到下，由外到内。优先级由低到高。

4.总结CSS代码格式

选择器名称 { 属性名：属性值；属性名：属性值；…….}

5.选择器：

就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
选择器共有三种：

html标签选择器。

class选择器。

id选择器。

每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。
在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。

（1）class选择器：
在标签中定义class属性并赋值。通过标签名.class值对该标签进行样式设置。
例：
相同标签设置不同样式的时候，用class进行区分。

p.pclass_1 {color:#FF0000;} p.pclass_2 {color:#0000FF;} P标签样式 P标签样式

不同标签进行相同设置的时候，用class进行统一定义。

.classname {color:#00FF00;} P标签样式 DIV标签样式

（2）id选择器：
与class选择器类似，但格式不同，选择器的名称为：#id值。
例：

#pid { color:#0000FF;} P标签样式

注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。

6.扩展选择器：

（1）关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
例：

p { color:#00FF00;} p b { color:#FF000;} P标签刘德华段落样式 P标签段落

（2）组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。

p,div { color:#FF0000;} P标签显示段落。 DIV标签显示段落

注：多个不同选择器要用逗号分隔开。

（3）伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。（CSS的术语）
格式：标签名：伪元素。类名标签名。类名：伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
使用顺序 L – V – H - A
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。
:focus 具有焦点的元素。IE浏览器不支持，在FireFox中可以看到效果。
看显示效果的时候注意，浏览器的缓存的问题。

a:link {color:blue; text-decoration: none; font-size:12px} a:visited {color:gray; text-decoration: none; font-size:8px} a:hover {color:red; text-decoration: underline; font-size:20px} a:active {color:green; text-decoration: none; font-size:30px}

最后，说明一下，我们这里讲解的CSS只是CSS知识库里面的九牛一毛，如果喜欢WebUI的同学可以自学,目前最新的版本是CSS3.0

Javaweb基础（一）前端基础

一.HTML

1.HTML网页介绍

2.HTML介绍

3.标签

`：h1~h6标题标签，属性align：对齐方式 left、center、right。`

4.表单标签

二.CSS

1.CSS介绍

2.CSS的引入方式通过四种方式

3.样式优先级：

4.总结CSS代码格式

5.选择器：

6.扩展选择器：

你可能感兴趣的:(Javaweb基础（一）前端基础)

属性	解释
application/x-www-form-urlencoded	默认,只处理表单控件里的value属性值;
multipart/form-data	以二进制流的方式处理表单数据,文件上传时必须使用该属性值;
text/plain	不对特殊字符编码,适合于表单的属性值为mailto”URL形式,也就是说该方式适用于表单邮件的发送;