JavaWeb入门

原创
2018/07/29 20:00
阅读数 115

 

 

一、网页的组成

    1、结构(HTML)
        HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
    2、表现(CSS)
        CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

    3、行为
        JavaScript
        JQuery
        JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的,而JQuery是一个快速、简洁的JavaScript框架。

二、HTML简介

        HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language),超文本就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
        HTML 不是一种编程语言,而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag),  HTML 使用标记标签来描述网页。

 

    1、html文件的结

1、<html></html>为HTML页面中的根标签,所有的HTML网页中的标签都在<html></html>中。

2、<head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。

3、在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

    2、标签的语法

1、标签由英文尖括号 < 和 > 括起来,如:<html>
2、html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多一个 / ,<title>..</title>;还有一些是自结束标签,如:<br/>
3、标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div>的前面。如: <div><p>..</p></div>
4、注释是不可以嵌套的,如:<!-- <!-- 注释部分 --> -->
5、HTML标签不区分大小写,<h1>和<H1>是一样的,但建议小写。

    3、HTML的常用标签

1、标题标签:<h1>...</h1>~<h6>...</h6>
2、div标签:<div>...</div>,相当于一个容器,可以把一些独立的逻辑部分(如网页中独立的栏目版块)划分出来,如下图:

                            

3、段落标签:<p>...</p>
4、无序列表: <ul>
                  <li>...</li>
                  <li>...</li>
               </ul>
5、图片标签:<img alt="" src="" title=""/> 
     alt:图片无法显示时显示的描述性文字
      src:图片的地址
6、title:鼠标放在图片上时显示的描述性文字
7、超链接:<a href="" target=""></a>
    href:指向一个链接地址
     target:目标窗口 
       值为”_self”时在向当前窗口(默认)打开新的网页
       值为”_blank”时在新的窗口打开
8、内联框架:
	<iframe src="" name=""></iframe>
     src:一个网页的地址
     name: iframe的名字,当<a>标签的target属性值为iframe的name时,超链接的目标页面会在iframe中打开
9、<strong>和<em>标签
         两者在强调的语气上有区别: <em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用 斜体 表示,<strong> 用 粗体 表示。
10、<span>标签
         <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。有了它就可以对某段文字里的几个字单独设置样式了。

    4、转义字符

                

    5、HTML中的表格和表单

        HTML中表格的创建:
                       

        跨列合并单元格用 colspan 属性 ;   跨行合并单元格用 rowspan 属性。

表单中常用的标签
    表单标签:<form action="">..</form>
    文本输入框:<input type="text" name="username"/>
    密码输入框:<input type="password" name="pwd"/>
    单选框:
   <input type="radio" name="gender" value="提交的值"/>
    多选框:
   <input type="checkbox" name="" value="提交的值" checked="checked"/>
    下拉列表:
         <select name="">
            <option value="">没有value属性时提交的值</option>
         </select>
    重置按钮:<input type="reset">
    提交按钮:<input type="submit" value="修改的按钮的值">

三、CSS的简单应用

1、CSS简介
    CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体等。
2、CSS代码语法
    1.CSS样式由选择符(选择器)和声明组成,而声明又由属性和值组成,如下图所示:

             当有多条声明时,中间用英文分号”;”分隔

2、CSS的样式 
    ① 写在标签的style属性中:<p style=“font-size: 30px”>字体大小用px表示</p>
    ② 写在style标签中(style标签一般写在head标签与title标签之间):
          <style type="text/css">
	     p{
 		 color: blue;
              }
           </style>
	③ 引入外部CSS文件:
	<link rel="stylesheet" type="text/css" href="style.css">   
3、选择器的分类
	① 标签选择器:如上图的p
	② 类选择器:.class{..}
	③ ID选择器:#id{..}
4、CSS中也有注释语句:用/*注释语句*/标明。
5、CSS中的颜色
    CSS中的颜色用RGB颜色:红色(red)、绿色(green)、蓝色(blue)——光学三原色表示。
     RGB中每种颜色都用两位十六进制数表示,0表示没有光,F表示最强的光,并按红、绿、蓝的顺序排列,前面再加上#号。
     例如:#000000黑色;#FFFFFF 白色;#FF0000红色;
           #00FF00绿色;#0000FF蓝色等等。

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部