学习javaweb前端1.1

最新推荐文章于 2024-06-17 17:37:48 发布

liuwenqing11

最新推荐文章于 2024-06-17 17:37:48 发布

阅读量973

点赞数

分类专栏： Java语言程序设计

本文链接：https://blog.csdn.net/liuwenqing11/article/details/115034062

版权

Java语言程序设计专栏收录该内容

45 篇文章 40 订阅

订阅专栏

学习文本前端基础首先学习HTML、css、JavaScript

1.Html的英文全称是HyperTest MarKup language 即超文本标记语言，他是Internet上用于编写网页的主要标记语言。

2.css是英文Cascading Style Sheet的缩写，又称为层叠样式表简称样式表是 w3c的定义标准是一种用来为机构化文档添加样式的计算机语言；、

3.JavaScript是一种描述性的脚本语言（Script language）它是由客户端浏览器解释执行在执行期间无需web服务器，减轻服务器的负担。javaScript可以向HTML页面添加交互行为，读写元素，验证表单以及进行事件处理。

一：HTML文件的基本机构

1）一个完整的HTML文件是由各种元素与标记组成，包括标题、段落、表格、文本和超链接。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
 ...............
<body>
</body>
................
</html>

从上面的代码段可以看出，HTML分为3部分各部分的含义如下

<html>......</html>；表示HTML的开始和结束位置，里面包括<head>和<body>等标记。HTML文件中所有的内容都放在这里面；

<head>.......</head>；文件的头部标记一般称为HTML的头部部分；

<body>....<./body>;用来指明文档的主题区域，网页所显示的所有内容都放这里面；

二：它们的扩展名；

1）HTML文件的扩展名为 .html；

2）css的文件扩展名为.css；

3）JavaScript的文件扩展名为.js

三：常用的HTML标签；

1）标题；


<h1>...........</h1>>
<h2>...........</h2>>
<h3>...........</h3>>
<h4>...........</h4>>
<h5>...........</h5>>
<h6>...........</h6>>

字号<h1> 到<h6>由大到小演示

2）段落；

<p>:实现一个新的段落，语法格式

<p>段落内容</p>>

<p>标签中的属性align能够设置段落中字体的对齐方式可以有左对齐，居中右对齐语法格式

<p align = "left">段落内容</p>
<p align = "right">段落内容</p>
<p align = "center">段落内容</p>

实现演示；

3）滚动（marquee）

在HTML中可以使用<marquee>标签让文字滚动起来，该标记滚动方向<direction>、滚动方式（behavior）、滚动次数（loop）、滚动速度（scrollamount）、滚动延迟（scrolldelay）、背景颜色（bgcolor）、宽度和高度常用属性。

<marque direction="滚动方向" behavior="滚动方式">滚动的文字</marque>

其中，direction的值有up、down、lef、和right分别表示向上、向下、向左和向右滚动，向左滚动是默认情况：behavior的值有scroll。slide和alternate，分别表示循环滚动。只滚动一次和来回交替滚动；loop的值为整数；scrollamount的值为文字每次移动的长度，以像素为单位；scrolldelay的单位是毫秒。

下面是实例：

<body>
//编写一个网页，网页中有一段滚动文字，文字滚动方向默认方向（向左滚动）文字滚动的背景设置为蓝色，文字滚动方式为
//来回交替滚动
<p align="center">《赠汪伦》<br><font size="2">李白</font><br>
    李白乘船将欲行；<br>
    忽闻岸上踏歌声；<br>
    桃花潭水深千尺；<br>
    不及汪伦送我情；<br>

</p>
<marquee bgcolor="blue" behavior="alternate">
<font color="white">大家好，我正在学习《古诗三百首》 </font>
</marquee>
</body>

效果图

4）列表

①无序列表标记<ul>

<ul>标记用于设置无序列表，在每个列表项目文字之前，以项目符号作为每条列表项目的前缀，各个列表没有级别之分。无序列表的语法格式如下；

<ul>
    <li>列表项</li>
    <li>列表项</li>
</ul>

图示

前面的黑点可以通过属性 type 赋值 disc 、circle、square 分别代表着实心圆空心圆实心正方体

②有序列表 <o;>

语法格式

<ol>
    <li>有序列表项</li>
    <li>有序列表项</li>
</ol>

结果图：

例子：有序和无序都有自己的项目类型、通过type设置自己的项目类型

type后面跟的属性值：1、a、A、i、I

<body>
<ul type="circle">
    <h1>无序列表--车类</h1>
    <li type="disc">小轿车</li>
    <li type="square">小货车</li>
    <li>重型卡车</li>
</ul>
<ol type="a">
    <h1>计算机网络专业的学生应该具备的能力</h1>
    <li>办公自动化能力</li>
    <li>计算机硬件选购与测试能力</li>
    <li>计算机组装与维护能力</li>
    <li>网站建设与维护能力</li>
    <li>动态网页设计能力</li>
</ol>
</body>

结果图

5）图像与多媒体

在HTML中通过<img>标记及你在哪个图片插入；它的属性src属性代表着所插入图像的位置和名称；语法格式

<img src="图像文件的路径及名称">

在网页中使用<bgsound>标记给网页添加背景音乐，语法格式如下：

<bgsound src="音乐文件的路径及名称" loop="播放次数">

在网页中使用<embed>标记将多媒体文件（例如flush、mp3 ）添加到网页；语法格式如下；

<embed src="所媒体文件的路径及名称" width="播放器的高度" height="播放器的高度"></embed>

代码演示

<!DOCTYPE html>
<html lang="en" xmlns="">
    <meta charset="UTF-8">
    <title>Title</title>
    <embed src="music/香香%20-%20千年等一回.mp3" autostart="true" loop="true">
</head>
<body>
<!--<bgsound src="music/香香%20-%20千年等一回.mp3"></bgsound>-->
<img src="img/book7.png">
</body>

</html>

结果

6）超链接

超链接的作用是建立从一个位置到另一个位置的链接。code形式

<a href="https://www.baidu.com/?tn=62095104_19_oem_dg" target="_self">百度</a>

其中链接的内容可以是文字内容也可以是一张图片 target 有（-salf、-blank、-top、-parent）这几个属性 -blank表示新的内容会在一个新的窗口中打开，top表示目标页会在顶层框架中打开、parent表示目标页会在当前框架的上一层打开

假设有3个文件，分别为index.html、addGoods.html、updataGoods.html。其中index.html为起始页，其余两个在同一目录下，在index.html中可以链接到哪两个网页上

①index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子商务后台首页</title>
</head>
<body>
<ul>
    <li><a href="index.html" >首页</a></li>
    <li><a href="addGoods.html" >添加商品</a></li>
    <li><a href="updateGoods.html">修改商品</a></li>
</ul>
<p >首页</p>
</body>
</html>

②addGoods.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
</head>
<body>
<ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="addGoods.html">添加商品</a></li>
    <li><a href="updateGoods.html">修改商品页</a></li>
</ul>
 <p>添加商品页面</p>
</body>
</html>

③updateGoods.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="addGoods.html">添加商品</a></li>
    <li><a href="updateGoods.html">修改商品页</a></li>
</ul>
<p>修改商品页面</p>
</body>
</html>

结果图

7）表格使用table ；tr代表行 td代表列 td的属性colspan：为跨越列的数值；td的属性rowspan ：为跨越行的值；code演示：

<!DOCTYPE html>
<html lang="en" xmlns="">
<meta charset="UTF-8">
<title>演示页面</title>
</head>
<body>
<table border="1" style="border-color: green">
    <tr>
        <td>单元格里面的内容</td>
        <td>单元格里面的内容</td>
        <td> 单元格里面的内容</td>
    </tr>
    <tr>
        <td>过分了啊</td>
        <td>过分了啊</td>
        <td> 过分了啊</td>
    </tr>
</table>
<table border="1">
    <tr>
        <td colspan="5">姓名</td>

    </tr>
    <tr>
        <td>姓名</td>
        <td> 姓名</td>
        <td> 姓名</td>
        <td>姓名</td>
        <td> 姓名</td>
    </tr>
</table>

<table border="1">
    <tr>
        <td rowspan="2">123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
    <tr>
       
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
</table>
</body>
</html>

图示

示例做一个个人简历

<!DOCTYPE html>
<html lang="en" xmlns="">
<meta charset="UTF-8">
<title>演示页面</title>
</head>
<body>
<table border="1" style="border-color: #55a532">
    <caption>个人简历</caption>
 <tr>
     <td rowspan="2">基本资料</td>
     <td>姓名</td>
     <td>李小白</td>
     <td>性别</td>
     <td>女</td>
 </tr>
    <tr>
        <td>政治面貌</td>
        <td>群众</td>
        <td>出生日期</td>
        <td>1988-12-09</td>
    </tr>
    <tr>
        <td colspan="5" align="center">业余爱好</td>
    </tr>
    <tr>
        <td>替身</td>
        <td>各种球类（包括中国足球）</td>
        <td>看言情</td>
        <td>爬山</td>
        <td>压马路</td>
    </tr>
</table>
</body>
</html>

结果图示

8）form表单表单是将用户输入的信息封装提交给服务器，实现与用户的交互，表单是用<from>标记定义的，表单对象必须放在表单中才有效，code格式如下：

<form action="表单的处理程序">
    ....
    input 元素
    ......
</form>

form的属性：

①action：属性值是表单提交的地址，即收集到信息后传递到程序地址；

②name：这个属性用于给表单命名，控制表单和后台程序之间的关系；

③method：属性用于指定使用哪种提交方法将表单数据提交到服务器。在默认情况下提交的方法是get。get方法将表单内容附在URL地址的后面，因此长度有限制（最大8192个字符），而且不安全。post方法将用户在表单中输入的数据包含在表单主体中，

一起提交给服务器，该方法没有信息长度的限制，也比较安全。

④：enctype：这个属性用于指定表单信息提交的编码方式，这个编码方式通常情况下采用默认的（application/x-www-form-urlencoded）即可，但是上传文件时必须选择mime编码（multipart/form-data）

1.文本框与密码框 code演示

<form>
    姓名：<input type="text" value=" " name="userName"/>
    <br>
    密码：<input type="password" value="" name="pwd"/>
</form>

图示

2：单选按钮和复选按钮 code演示

 <input type="radio" value="单选按钮值" name="单选按钮名称" checked/>

其中checked 在一组单选按钮中只能有一个被设置为checked 例子

 <from>
     <input type="radio" value="male" name="sex" checked/>男
     <input type="radio" value="female" name="sex"/>女
 </from>

结果图

复选框的属性为 type= “CheckBox” 这个属性是可以被同时选定的

3.按钮

按钮是配合脚本语言的（JavaScript）来进行表单处理，语法格式如下：

 <from>
   <input type="button" value="按钮的值" name="按钮的名称"/>
 </from>

例子：

4.文件域

在使用文件域上传文件时，一定不要忘记设置form表单信息提交的编码方式为 enctype=“multipart/form-data”

<form action="" enctype="multipart/form-data">
    你的靓照：<input type="file" name="fileName"/>
</form>

图示

5.下拉列表语法格式如下：

<select name="下拉列表的名称" size="显示项数" multiple>
    <option value="选项值1" selected>选项值1
    ........
</select>

例子：

<select name="cities" size="2" multiple>
    <option value="beijing" selected>北京
    <option value="shanghai" selected>上海
    <option value="guangzhou" >广州
    <option value="shenzhen" >深圳

</select>

结果

6.文本区：语法格式：

<textarea name="文本区域的名称" cols="列数" rows="行数"></textarea>

四：对之前所学的做个总结做一个问卷调查

<!DOCTYPE html>
<html lang="en" xmlns="">
<meta charset="UTF-8">
<title>实践环节---制作调查问卷</title>
</head>
<body>
<div >
<form>
   <h3>调查问卷</h3>
    姓名 &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp<input type="text" name="userName"/>
    <br>
    性别 &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp <input type="radio" />男  <input type="radio"  />女

</form>
   所在地  &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp <select name="cities" size="1" multiple>
        <option value="l" selected> 利比亚
        <option value="e" > 俄国
    </select>
   <form>
       喜欢的歌手 &nbsp <input type="checkbox" value="zhangSan" />张三
        <input type="checkbox"  value="W" />王五
        <input type="checkbox" value="li" />李四
    </form>
    <form action="" enctype="multipart/form-data">
    你的靓照： &nbsp<input type="file" name="fileName"/>
    </form>
    <table>
        <tr>
            <td rowspan="5">个人描述&nbsp&nbsp&nbsp</td>
        </tr>
        <tr>
            <td colspan="">
                <textarea cols="5" rows="5"></textarea>
            </td>
        </tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </table>
    <form>
        <input type="submit" value="提交"/>  &nbsp &nbsp &nbsp <input type="submit" value="重置"/>
    </form>
</div>
</body>
</html>

结果图

liuwenqing11

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习javaweb前端1.1

学习文本前端基础首先学习HTML、css、JavaScript1.Html的英文全称是HyperTest MarKup language 即超文本标记语言，他是Internet上用于编写网页的主要标记语言。2.css是英文Cascading Style Sheet的缩写，又称为层叠样式表简称样式表是 w3c的定义标准是一种用来为机构化文档添加样式的计算机语言；、3.JavaScript是一种描述性的脚本语言（Script language）它是由客户端浏览器解释执行在执行期间无需web服务.
复制链接

扫一扫

专栏目录