JavaWeb基础（三）--HTML、CSS、JavaScript
heavenautumn 2020-06-21
一、html基础
1、基本组成结构
<html> <head> <title> <body>等标签
2、常用标签
*表单
<form action="提交地址(url)" method="提交方式(post/get)" [name="表单名称"]>
//文本框
<input type="text" name="名称" [value="提示语"]/>
//密码框,与文本框区别，输入内容后立刻隐藏
<input type="password" name="名称" [value="提示语"]/>
//隐藏域
<input type="hidden" name="名称" />
//文本域
<textarea name="XXX" rows="M" cols="N"/>
//单选按钮（小圆点）,如
男：<input type="radio" name="sex" value="男" [checked]/>
女：<input type="radio" name="sex" value="女" [checked]/>//名称必须一致
//复选框（小方框）
<input type="checkbox" name="XXX" value="XXX" [checked]/>//同一类的名称需一致
//下拉列表框
<select name="名称">
<option value="XXX">XXX</option>//可以用[checked]设置一个默认选中的
<option value="YYY">YYY</option>
</select>
//文件上传域
<input type="file" name="XXX" />
//普通按钮
<input type="button" name="XXX" value="按钮显示的内容"/>
//提交
<input type="submit" name="XXX" value="提交"/>
//重置
<input type="reset" name="XXX" value="重置"/>
</form>
*表格
<table name="XXX" align="left/right/center" border="边界粗细 实线/虚线 颜色" width="像素/百分百比" height="XXX" cellsapcing="单元格间隔"></table>
<tr></tr> <th></th> <td></td>
colspan="跨列数" rows="跨行数"
*字体标签
<font color="" face="黑体" size="">文本</font>
*img标签
<img src="url" alt="找不到图片时显示的文本" width="" height="" border=""(一般在css设置)/>
*audio标签
<audio controls>//添加播放组件,还可以添加自动播放autoplay,循环播放loop
<source src="xxx.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
*video标签
<video width="" height="" controls>//添加播放组件,还可以添加自动播放autoplay,循环播放loop
<source src="xxx.mp4" type="video/mp4">
您的浏览器不支持 video 元素。
</video>
*列表标签
<al></al>有序列表 <ul></ul>无序列表 <li><li>
*超链接
<a href="url">显示文本</a>
*标题段落
<h1></h1>. . .<h6></h6>6级大小递减 <p></p>段前段后自动设置成空行
*其它标签
<!--注释内容-->不允许嵌套
<div></div>
<sapn></sapn>
<br/>换行
<hr/>水平下划线
*特殊字符
空格
<小于
>大于
二、css基础
1、基本组成结构
选择器{属性1：值1;. . .属性n：值n;}
2、使用方式
*（1）写到首标签里面 缺点：影响阅读
<标签名 style="属性1：值1[;. . .属性n：值n]">内容</标签名>
*（2）写在<title>标签下面
<style type="text/css">
标签名{属性：值;} //会对所有使用到这个标签的内容生效
</style>
*写单独的css文件，用<link>标签引入
<link rel="stylesheet" type="text/css" href=""/>
3、css选择器
*（1）标签选择
通用标签名{
属性：值;
}
*（2）id选择，一般在一个文件中只用一次
#自定义名称{
属性：值;
}
使用：<标签名 id="自定义名称">
*（3）class选择，在一个文件中可以使用多次
.自定义名称{
属性：值;
}
使用：<标签名 class="自定义名称">
*（4）组合选择
选择器1,...,选择器n{
属性：值;
}
4、常用样式
*宽度
width:25px; width:30%;
max-width:xx; min-width:xxx;
*高度
height:60px; height:80%;//一般指定宽度，不指定高度
max-height:xx; min-height:xxx;
*位置
position: fixed;//位置固定
top:10px;left:20px;//方式一
bottom: 10px;right: 75px;//方式二
*边框
border:3px solid black;//多个值之间用空格隔开，不能用逗号 dotted点线 dashed虚线
border-radius:15px;//边框圆角，对四个角效果相同
border-radius:5px 10px 15px 20px;//同时设置四个角的值，左上角开始顺时针绕一圈
border-top-left-radius:5px;//也可分别设置
border-top-right-radius:10px;
border-bottom-right-radius:15px;
border-bottom-left-radius:20px;
*背景
background:背景;//blue rgb(234,122,120) #708080 rgba(234,122,120,0.7) //透明度
background:url("xxx");//图片做背景
background-size:80px 60px;
background-repeat:no-repeat;
*字体
color:字体颜色;//blue rgb(234,122,120) #708080
font-size:25px;
font-family:字体风格;
line-height:行高;//px em
text-align:对齐方式;
*居中
margin:auto;//外边距，自动
*al、ul去修饰
list-style:none;
*链接去下划线
text-decoration:none;
三、JavaScript基础
1、基本用法
主要出现在<head>标签中，其它位置也可以
变量 var 函数 function 函数名(参数){return 返回值;}
var 数组名=[];//空数组 var 数组名=[值1,...,值n];
JavaScript中所有变量都可以作为布尔型使用(null ""是false)，比如放在if()里面
字符串比较直接用==即可
*自定义内容
<script lange="JavaScript">内容</script>
*导入外部js文件
<script lange="JavaScript" src="xxx.js"/>
*向客户端输出内容
document.write("可以是少量html标签(如同在<body>里写)")
*获取表单元素
document.表单名.参数名.value
document.表单名.(单选按钮/复选框)参数名.checked//返回布尔型
document.getElementById(elementId)//单值
document.getElementsByName(elementName)//复选框
document.getElementsByTagName(tagname)//标签
*警告框(!)
alert("内容")
*确认框("")
windows.confirm("")
2、主要事件
onfocus()聚焦 onblur()失去焦点
<input type="button" onclick()="functionName()"/>//引号里面不写分号
<form ...... onsubmit="return functionName(this)">//函数需返回布尔型
<select ..... onchange="函数名(this.value)">//值发生改变时会触发事件
*windows对象
打开新窗口，设置滚动条有无，是否可调整大小
windows.open("url","标题","width=80,height=40,scrollbars=yes/no,resizable=yes/no")
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT