Javaweb基础（一）前端基础

作者: 贾里 | 来源:发表于2017-08-19 11:28 被阅读61次

全部学习可以参考：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页面都是不规范的,主要的有以下几种情况:

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

（6）HTML代码结构

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

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

整体结构：

     <html>
        <head>
              <!--告诉浏览器网页以什么形式显示,必写。-->
             <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
              <!--网页的标题，用于浏览器标签页的标题显示。-->
              <title>我的第一个网页</title>
        </head>
        <body>
               你好HTML。
        </body>
    </html>

html结构.png

3.标签

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

标签格式.png

（2）文字标签

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

<body>标记的常见属性
   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）排版标签

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

（5）行内标签和块标签

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

（6）字符实体

要在网页中显示以下：

HTML字符实体（特殊符号）
       我今天去图书城，买了一本书，书名叫<DIV&CSS网页排版实例>，
书的价格是：¥98.20
©清华出版社 版权所有

字符实体:实现原理，html代码中不写特殊符号，而是使用一个字符实体来表示(使用另外的东西来表示一个符号.)
    " " 英文空格
    "   "  中文空格
<       <       小于
>       >       大于
&    & 


这些符号目前输入法都有，我们只需要记住和html有冲突的符号即可。

（7）列表标签

在HTML，列表标签大量使用，网页中随处可见。
符号列表标签
 type属性：disc(实心圆点)、circle(空心圆圈)、square(实心方块)

<ul>
    <li>内容</li>
    <li>内容</li>
</ul>


序列列表标签
<ol>
    <li>内容</li>
    <li>内容</li>
</ol>
属性：type编号类型，默认为整数。可选（1、A、a、Ⅰ、i）
           start起始编号，默认为1，即由最小编号开始。

dl用来创建定义列表
<dl>
    <dt>定义术语</dt>
    <dd>定义说明</dd>
    <dd>定义说明</dd>
</dl>
一条术语可以有多条相关说明，一条说明也可以应用到在它之前出现的一组术语。

（8）表格标签

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

（9）超链接

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

（10）图片标签

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

4.表单标签

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

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按钮,即图像提交按钮。
<input>标签其他通用属性:
name:指定input标签的名字,没有设置name属性的标签不能提交数据;
value:指定input标签的初始值;
checked:设置单选框,复选框的初始状态是否选中;
disable:设置input标签加载时禁用此标签;
maxlength:文本框输入最大字符数,属性值是数字;
readonly:指定文本框内值不允许直接修改;

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

1.隐式使用for属性:指定<lable>标签的for属性值为所关联表单控件的id属性值;
2.显示关联:将表单控件放在<lable></label>之间;(IE支持不好,不推荐)

<form action="">
           <label for="username">用户名:</label>
        <input id="username" name="username" type="text"/><br/>
        <label>密 码:
            <input name="pwd" type="password"/><br/>
        </label>
</form>

select标签

<seclet>和<option>一般同时使用：

<select name="country" >
         <option value="">---请选择---</option>
         <option value="zh" selected="selected">中国</option>
         <option value="en">英国---</option>
</select>

<select >属性：
multiple="multiple" 表示可以选中多个
size="2" 表示显示几个，（浏览器之间有差异）

textarea标签文本域标签

<textarea  cols="50" rows="5"> 要显示的内容</textarea>

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

二.CSS

1.CSS介绍

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

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

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

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

<p style="background-color:#FF0000; color:#FFFFFF">
        p标签段落内容。
</p>

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

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

<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>

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

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

<style type="text/css">
    @import url(css_3.css);
    div { color:#FF0000;}
</style>

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

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

<link rel="stylesheet" type="text/css" href="css_3.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 class=”pclass_1”>P标签样式</p>
<p class=”pclass_2”>P标签样式</p>

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

.classname {color:#00FF00;}
<p class=”classname”>P标签样式</p>
<div class=”classname”>DIV标签样式</div>

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

#pid { color:#0000FF;}
<p id=”pid”>P标签样式</p>

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

6.扩展选择器：

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

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

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

p,div { color:#FF0000;}
<p>P标签显示段落。</p>
<div>DIV标签显示段落</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.标签

4.表单标签

二.CSS

1.CSS介绍

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

3.样式优先级：

4.总结CSS代码格式

5.选择器：

6.扩展选择器：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读