码迷,mamicode.com
首页 > 编程语言 > 详细

JavaWeb基础(三)--HTML、CSS、JavaScript

时间:2020-06-21 20:12:41      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:必须   文件   control   action   数组   隐藏   change   web   apn   

一、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/>水平下划线
*特殊字符
  &nbsp;空格
  &lt;小于
  &gt;大于

二、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")

JavaWeb基础(三)--HTML、CSS、JavaScript

标签:必须   文件   control   action   数组   隐藏   change   web   apn   

原文地址:https://www.cnblogs.com/baochao/p/13173425.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!