JavaWeb(一) - - - HTML+CSS+JavaScript

科技2022-08-03 123

①HTML基本知识

1.表单

1.1 表单分组

<html> <head> <title>表单</title> </head> <body> <fieldset> <legend>注册新用户</legend> <form action="#" method="post"> <table cellpadding="2" align="center"> <tr> <td align="right">用户名：</td> <td> <input type="text" name="username" /> </td> </tr> <tr> <td align="right">密码：</td> <td> <input type="password" name="password" /> </td> </tr> <tr> <td align="right">性别：</td> <td> <input type="radio" name="gender" value="male" /> 男 <input type="radio" name="gender" value="fmale" /> 女 </td> </tr> <tr> <td align="right">兴趣：</td> <td> <input type="checkbox" name="interest" value="film" /> 看电影 <input type="checkbox" name="interest" value="code" /> 敲代码 <input type="checkbox" name="interest" value="game" /> 玩游戏 </td> </tr> <tr> <td align="right">头像：</td> <td> <input type="file" name="photo" /> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="注册" /> <input type="reset" value="重填" /> </td> </tr> </table> </form> </fieldset> </body> </html>

1.2 表单多行文本框

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form action="#" method="post"> 评论：<br />  <textarea cols="60" rows="5"> 评论区： </textarea> <br /> <br /> <input type="submit" value="提交" /> </form> </body> </html>

2.列表

2.1 无序列表

2.1.1 普通设置无序列表的不同类型

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>无序列表</title> </head> <body> <font size="10">无序列表</font> <br /> <font size="9">  <ul> <li>无</li> <li type="disc">type默认值实心圆</li> <li type="square">正方形</li> <li type="circle">空圆</li> </ul> </font> </body> </html>

2.1.2 CSS定义无序列表的不同类型

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS定义无序列表的不同类型</title> </head> <body> <p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p> <h4>圆点列表：</h4> <ul style="list-style-type:disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>圆圈列表：</h4> <ul style="list-style-type:circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>正方形列表：</h4> <ul style="list-style-type:square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html>

2.2 有序列表

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>有序列表</title> </head> <body>  <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>  <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>  <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>  <ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>

2.3 自定义列表

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义列表</title> </head> <body>  <h4>一个自定义列表：</h4> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html>

3.超链接

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>超链接标记</title> </head> <body>      HuJinya的博客网址：<a href="https://www.hujinya.com" target="_blank">www.hujinya.com</a> </body> </html>

②CSS基本知识

1.Div+CSS

在HTML文档中引入CSS有4种方式优先关系是：行内样式＞内嵌式＞导入式＞链接式外部CSS文件不能包含任何的HTML标签

1.1 内嵌式

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>div+CSS-内嵌式CSS</title>    <style type="text/css"> /* 定义 h2 标记居中效果 */ h2 { text-align:center; } /* 定义 div 标记的样式*/ /*边框:1像素实线红色 div宽:300像素高:80像素文字颜色:蓝色文字大小:28像素外边距:80像素*/ div { border:1px solid red; width:300px; height:80px; color:blue; font-size:28px; margin:80px; } </style> </head> <body> <h2>我会自己居中</h2> <div> div 意为：分割、区域 </div> </body> </html>

1.2 链入式

外部 style.css 代码 /* 定义 h2 标记居中效果 */ h2{ text-align:center; } /* 定义 div 标记的样式*/ /*边框:1像素实线红色 div宽:300像素高:80像素文字颜色:蓝色文字大小:28像素外边距:80像素*/ div{ border:1px solid red; width:300px; height:80px; color:blue; font-size:28px; margin:80px; } HTML代码 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>CSS链入式</title>   <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <h2>我会自己居中</h2> <div> div 意为：分割、区域 </div> </body> </html>

1.3 行内式

也称为内联样式 <!DOCTYPE html> <html> <head> <title>行内式CSS样式表</title> </head> <body>  <p style="color: red; margin-left: 50px"> his is a paragraph </p> </body> </html>

1.4 导入式

外部 style.css 代码 /* 定义 h2 标记居中效果 */ h2{ text-align:center; } /* 定义 div 标记的样式*/ /*边框:1像素实线红色 div宽:300像素高:80像素文字颜色:蓝色文字大小:28像素外边距:80像素*/ div{ border:1px solid red; width:300px; height:80px; color:blue; font-size:28px; margin:80px; } 外部 red.css 代码 h2 { color: red; } HTML代码 <!DOCTYPE html> <html> <head> <title>导入式CSS样式表</title>  <style type="text/css"> /* 导入外部的 style.css 文件 */ @import url("style.css"); /* 导入外部的 red.css 文件 */ @import url("red.css"); </style> </head> <body> <h2>我会自己居中、变红</h2> <div> div 意为：分割、区域 </div> </body> </html>

2.CSS选择器

标记选择器类选择器id选择器通配符选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS选择器的使用</title> <style type="text/css"> /* 标记选择器的定义 */ h2 { color: pink; font-size: 20px; } /* 类选择器的定义 */ .red_center { color: red; text-align: center; } .green { color: green; } .font18 { font-size: 18; } /* id 选择器的定义*/ #bold { font-weight: bold; } #font24 { font-size: 24px; } /* 通配符选择器的定义 */ /* 匹配页面中所有的元素，实际开发中不建议使用 */ * { margin: 10px; /* 定义外边距 */ padding: 0px; /* 定义内边距 */ } </style> </head> <body>   <h2>粉色的字体，大小20px</h2>   <h1 class="red_center">设置文字为红色,居中</h1> <p class="green font18">设置文字为绿色，字号为18px</p> <p class="red_center font18">设置文字为红色，居中，字号为18px</p>  <p id="bold">设置字体为粗体</p> <p id="font24">设置字号为24px</p>  <p id="font24">设置字号为24px</p>  <p id="font24 body">设置字号为24px，字体为粗体</p> </body> </html>

3.CSS常用属性

③JavaScript基本知识

1.DOM相关知识

# # #

JavaScript事件

onclick鼠标单击某个对象；ondblclick鼠标双击某个对象；onmousedown某个鼠标键被按下；onmouseup某个鼠标键松开；onmousemove鼠标被移动；onmouseout鼠标从某元素移开；onmouseover鼠标被移到某个元素之上；onfocus元素获得焦点；onblur元素失去焦点；onchange用户改变域的内容；onabort图像加载被中断；onerror当加载文档或图像发生某个错误；onload某个页面或图像被完成加载；onkeydown某个键盘的键被按下；onkeypress某个加盘的键被按下或按住；onkeyup某个键盘的键被松开；onreset重置按钮被点击；onresize窗口或框架被调整尺寸；onselect文本被选定；onsubmit提交按钮被点击；onunload用户退出页

Processed: 0.010, SQL: 8