HTML简单学习——javaweb学习笔记（三）

rosen6664

已于 2023-09-17 13:32:52 修改

阅读量1.2k

点赞数

分类专栏： javaweb学习文章标签：学习笔记

于 2023-09-16 10:32:23 首次发布

本文链接：https://blog.csdn.net/qq_72719894/article/details/132845179

版权

javaweb学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、HTML

（一）基本标签

1.字体大小设置

<!--字体大小-->
  <h1>h1字体</h1>
  <h2>h2字体</h2>
  <h3>h3字体</h3>
  <h4>h4字体</h4>
  <h5>h5字体</h5>
  <h6>h6字体</h6>

2.字体大小设置

<!--水平线-->
<hr>

3.设置字体

<!--字体尺寸-，颜色，尺寸-->
  <center><font face="楷体" color="#00008b" size="12" >字体font</font></center>
<hr>

(1)face为字体样式

(2)size为字体大小

(3)color设置颜色，16进制格式，也可以使用rgb样式设置颜色,也可以是英文单词

4.换行和段落

（1）换行

假如我是一只鸟，<br>
我也应该用嘶哑的喉咙歌唱：<br>
这被暴风雨所打击着的土地，<br>
这永远汹涌着我们的悲愤的河流<br>
这无止息地吹刮着的激怒的风，<br>
和那来自林间的无比温柔的黎明……<br>

（2）段落

<p>假如我是一只鸟，</p>
<p>我也应该用嘶哑的喉咙歌唱：</p>
<p>这被暴风雨所打击着的土地，</p>
<p>这永远汹涌着我们的悲愤的河流，</p>
<p>这无止息地吹刮着的激怒的风，</p>
<p>和那来自林间的无比温柔的黎明……</p>

5.粗体，下划线，斜体

<b>hello</b><br>
<u>hello</u><br>
<i>hello</i><br>

6.居中

<center>
<b>hello</b><br>
<u>hello</u><br>
<i>hello</i><br>
</center>

（二）图片，音频，视频标签

image:定义图片

->src：规定图像的URL

->height:定义图像的高度

->width:定义图像的宽度

audio:定义音频:MP3,WAV,OGG

->src：规定音频的URL

->controls:显示播放控件

video:定义视频。MP4,Web,OGG

->src:规定视频的URL

->controls:显示播放控件

举个图片的例子

<img src="favicon.ico" width="400" height="400">

（三）超连接标签

跳转页面

<a>标签

->href:指定访问的url

->target

_self：默认值，当前页面打开

_blank:空白页面打开

<a href="https://www.bilibili.com" target="_blank">点我</a>

点击后跳转到其他网页

（四）列表标签

1.有序列表

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>皮卡丘</li>
</ol>

当然也可以把1，2，3改为其他样式

<ol type="A">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>皮卡丘</li>
</ol>

2.无序列表

<ul>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>皮卡丘</li>
</ul>

（五）表格标签

table的属性：

->border：规定表格边框的宽度

->width：规定表格的宽度

->cellspacing：规定单元格之间的空白

tr的属性:

->align：定义表格行的内容对齐方式

td的属性：

->rowspan:规定单元格可横跨的行数

->colspan:规定单元格可横跨的列数

例子：

<table border="1" cellspacing="0" width="50%">
  <tr align="center">

    <th colspan="2">b</th>
    <th>c</th>
    <th>d</th>
  </tr>
  <tr align="center">
    <td>猫</td>
    <td>猫</td>
    <td>皮卡丘</td>
    <td>狗</td>
  </tr>
</table>

（六）布局标签

跟css一起使用，单独使用没什么效果

（七）表单标签

表单：在网页中主要负责数据采集功能，使用form定义表单

<form>

->action:规定当提交表单时向何处发送表单数据，url

->method:规定用于发送表单数据的方式

get:浏览器会将数据直接附在表单的action URL之后。大小有限制

post:浏览器会将数据放到http消息体中。大小无限制

如：

点击后将信息传到actio路径，键为username和password，get方式

  <form action="/javaweb_test_war/demo1" method="get">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit">
  </form>

提交后

（八）表单标签——表单项标签

<input >：表单项，通过type属性控制输入形式

<select>：定义下拉列表,<option>定义列表项

<textarea>：文本域

注意：

（1）text和password属性

想要在点击输入框前面的字时触发输入框，那么就要把前面的字与输入框连接

首先，将input加上id，作为唯一标识，然后在label把字体for（唯一标识）然后就将两者连接了

（2）单选框的互斥实现

两个属性值必须相同

而且必须设置提交的值，不然的话提交的都是一样，无法辨别

输入文本框，可以设置列和行

二、CSS

控制网页表现

（一）CSS的导入方式

1.内联样式

直接使用这一句就行

在标签内部使用style属性，属性值时CSS属性键值对

<div style ="color:red">Hello</div>

但是html和css代码在一起了，不利于维护和服用，用的少

2.内部样式

定义<style>标签，在标签内部定义CSS样式

定义好之后可以随时调用

<style type="text/css">
  div{
    color: blue;
  }
</style>

<div>haha</div>

3.外部样式

在外部导入写好的css文件

css文件：

p{
    color: blue;
  }

html内导入

<link rel="stylesheet" href="demo.css">

定义link标签，引入外部css文件

（二）CSS的选择器

选择器都需要在<style>内部

1.元素选择器

选择对应的标签名称，标签内的都设置了

2.id选择器

必须唯一，不能重复使用

3.类选择器

可以重复使用

三、JavaScript

跨平台，面对对象的脚本语言

实现网页行为

（一）JavaScript的引入方式

1.内部脚本

将JS代码定义在HTML页面中

可以在任意地方放标签，位置没有限制，数量也没有限制，一般放在body内部的最后

<script>
  alert("hello js")
</script>

2.外部脚本名

创建一个js文件，里面书写js代码

alert("1111")

然后再html导入即使用

<script src="./js/myjs.demo.js"></script>

（二）JavaScript的基础语法

1.书写语法

（1）区分大小写

（2）；可有可无

（3）注释：//或者/**/

（4）大括号标识代码块

2.输出语句

3.变量

（1）var变量

var关键字声明变量,弱类型语言，因此一个变量可以代表任何数据类型

var test=20;
test="zhangsan"
alert(test)

var时全局变量

（2）let变量

与var大致相同，但let是局部变量，且不能重复声明

（3）const

定义常量

4.数据类型

原始类型：

number：数字（整数，小数，NAN（Not a Number）

string：字符串，字符，单双引号皆可

boolean：布尔

null：对象为空

undefined：当声名变量未初始化，该变量的默认值是undefined

获取变量age的数据类型：typeof（age）

5.运算符

==：会先把类型同意在比较，如20==‘20’则true

===：不会转化类型，不一样直接返回false

6.流程控制语句

跟java一样

7.函数

第一种定义方法

调用的时候直接使用函数名即可

第二种定义方法

（三）JavaScript的对象

1.Array对象

定义

数组对象的两个方式

var myarr1=new Array(1,2,3)
var myarr2=[1,2,3]

访问

数组和java一样

myarr1[0]

myarr2[3]=1

特点

类似于java的集合，长度，类型都是可变的

输出myarr1时后，把数组内容全部显示

属性

length属性

使用：

var myarr2=[1,2,3]
for(let i=0;i<myarr2.length;i++){
  alert(myarr2[i])
}

方法

(1)push添加方法

myarr.push(添加的元素)

(2)splice删除方法

myarr.splice(0,1)

从0开始删除，删除0个

2.String对象

3.自定义对象

（四）BOM

指的是浏览器对象模型

把浏览器各个组成部分封装成对象

组成：

1.Window对象

浏览器窗口对象

(1)获取

直接使用window，其中window可以省略

如：window.alert("123")弹出警告框

(2)属性

(3)方法

弹出方法

confirm()

confirm("确认删除?")

点击确认返回true，低级取消返回false

定时器方法

setTimeout

将方法在3秒后执行一次

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

setInterval

循环执行，三秒一次

setInterval(function (){
  alert("hehe")
},1000)

2.History对象

历史记录

(1)获取

(2)方法

3.Location对象

(1)获取

(2)方法

location.href="https://www.baidu.com"

（五）DOM

文档对象模型

将标记语言的各个组装

作用

改变HTML元素内容

改变HTML元素样式

对HTML DOM事件做出响应

添加和删除HTML元素

1.获取Element对象

Element：元素对象

获取：使用Document对象方法来获取

例如：通过id获取对象

2.Element对象的使用

因为方法太多了，推荐查询文档

比如image对象，调用src属性，将src换了，达到动态效果

（六）事件监听

事件：鼠标键盘状态变化

事件监听：javascript监听后执行代码

1.事件绑定

（1）方式1

通过HTML的事件属性进行绑定

缺点：html和javascript写在一起了

（2）方式二

通过DOM元素属性绑定

2.常见事件

（1）onblur

失去焦点

（2）onfous

获取焦点

（3）onclick

单机事件

（4）onkeydown

按下事件

（六）正则表达式

1.概念

定义了字符串组成规则

2.定义

（1）直接量：不要加引号

代表至少6个最多12个字符

（2）创建RegExp对象

3.方法

4.语法

rosen6664

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录