javaweb入门笔记2 静态页面

最新推荐文章于 2023-05-02 23:34:05 发布

QQ.哥

最新推荐文章于 2023-05-02 23:34:05 发布

阅读量146

点赞数 1

分类专栏： javaWeb 文章标签： html javascript css java Powered by 金山文档

本文链接：https://blog.csdn.net/A9266a/article/details/129103980

版权

javaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML：

字体标签
<fontface="楷体"size="5"color="#ff0000">传智教育</font>
    //字体标签
    
    <center>
    <b>沙柳河水流淌</b>
    </center>
    //center 居中


//img：定义图片
<imgsrc="../img/a.jpg"width="300"height="400">

* src：规定显示图像的 URL（统一资源定位符）

* height：定义图像的高度

* width：定义图像的宽度


超链接
<ahref="https://www.itcast.cn"target="_self">点我有惊喜</a>
`a` 标签属性：

* href：指定访问资源的URL 
* target：指定打开资源的方式
  * _self：默认值，在当前页面打开
  * _blank：在空白页面打开


布局标签
<span>我是span</span>
<div>我是div</div>

<div> 定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局页面
<span> 用于组合行内元素


表单、表单项标签
//表单：在网页中主要负责数据采集功能，使用<form>标签定义表单

//表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
表单标签:   
<formaction="/aaa/demo"method="post">
    <inpputname="username"></inpputtype="submit">
</form>
form 定义表单:  
 input定义表单项，通过type属性控制输入形式
type取值:
 button  定义可点击按钮 submit  定义提交按钮，提交按钮会把表单数据发送到服务器
    
    
<form定义表单
<input 定义表单项 通过type属性控制输入形式
<label为表单项定义标注
<select 定义下拉列表
<option定义下拉的列表项
<textarea 定义文本域
    
    
form标签属性；
    action：规定当提交表单时向何处发送表单数据，该属性值就是URL
    以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 `#` ，表示提交到当前页面来看效果。
    **method ：规定用于发送表单数据的方式**
        * get：默认值。如果不设置method属性则默认就是该值
        请求参数会拼接在URL后边
        url的长度有限制 4KB
        * post：
        浏览器会将数据放到http请求消息体中
        请求参数无限制的

type 取值	描述
text	默认值。定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮

2.CSS:

编写页面 `02-导入方式.html`，内容如下：

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
    <linkhref="../css/demo.css"rel="stylesheet">
</head>
<body>
    <divstyle="color: red">hello css</div>

    <span>hello css </span>

    <p>hello css</p>
</body>
</html>

3.javascript:

//定义变量
vartest=20;
test="张三";

leta=20; // let 关键字来定义变量它的用法类似于 `var`，但是所声明的变量，
//只在 `let` 关键字所在的代码块内有效，且不允许重复声明。
 (var是全局变量，let是局部变量)


//定义数组
vararr=[1,2,3];


alert("hello js");//弹出对话框

函数定义

function函数名(参数1,参数2..){
    要执行的代码
}
例子：
varsb=add(3,5)

functionadd(a, b){
    returna+b;
}

window对象函数

window 对象提供了很多函数供我们使用，而很多都不常用；下面给大家列举了一些比较常用的函数

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。

setInterval()按照指定的周期来调用函数或计算表达式。

setTimeout()在指定的毫秒数后调用函数或计算表达式

confirm代码演示：

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
varflag=confirm("确认删除？");

alert(flag);
当我们点击 `确定` 按钮，`flag` 变量值记录的就是 `true` ；当我们点击 `取消` 按钮，`flag` 变量值记录的就是 `false`。

定时器代码演示：

setTimeout(function (){
    alert("hehe");
},3000);

获取 Element对象:

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

getElementById()：根据id属性值获取，返回单个Element对象

getElementsByTagName()：根据标签名称获取，返回Element对象数组

getElementsByName()：根据name属性值获取，返回Element对象数组

getElementsByClassName()：根据class属性值获取，返回Element对象数组

例子：

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
</head>
<body>
        <imgid="light"src="../imgs/off.gif"><br>
        <divclass="cls">传智教育</div>   <br>
        <divclass="cls">黑马程序员</div><br>

        <inputtype="checkbox"name="hobby"> 电影
        <inputtype="checkbox"name="hobby"> 旅游
        <inputtype="checkbox"name="hobby"> 游戏
                                    <br>
    <script>
        varimg=document.getElementById("light");
        alert(img);
    </script>
</body>
</html>