Javaweb基础（一）前端基础

2017-08-19  本文已影响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不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念,一般的使用法是:

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

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

（6）HTML代码结构

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

整体结构：

     <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>之间;常见属性如下:

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

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

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

<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的引入方式通过四种方式

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

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

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

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

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

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

<link rel="stylesheet" type="text/css" href="css_3.css" />

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

3.样式优先级：

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

4.总结CSS代码格式

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

5.选择器：

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

每一个标签都定义了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.扩展选择器：

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

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

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

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

上一篇下一篇

猜你喜欢

热点阅读