这里列举了几点我认为比较重要的HTML&CSS的基本用法, 直接见示例如下:
1. 表单的控件
文本框:<input type="text"/>
密码框:<input type="password" />
单选框:<input type="radio" name="sex" value=""/>
女
a) 一定要有value值
b) 多个单选框的name属性值一定要一致
c) checked 默认选择
复选框:<input type="checkbox" name="hobby" value="">
荣耀
下拉框:
多行文本域:
按钮:
<form action="提交的路径" method="提交的方式"></form>
表单 表示将数据提交给后台
<!DOCTYPE html>
<html>
<head>
<title>09.html</title>
<meta charset="UTF-8">
<style type="text/css"> #div_id { width:800px; height:600px; border-style:solid; background-color: red; } </style>
</head>
<body>
<div id="div_id">
<form action="路径" method="post">
用户名:<input type="text" name="username" value="请输入用户名!" onfocus="abc()"/>
<br/>
密码:<input type="password" name="password"/>
<br/>
性别:<input type="radio" name="sex" value="female" />女
<input type="radio" name="sex" value="male" checked="checked"/>男
<br/>
爱好:
<input type="checkbox" name="hobby" value="rongyao">荣耀
<input type="checkbox" name="hobby" value="chiji">吃鸡
<input type="checkbox" name="hobby" value="lol">lol
<input type="checkbox" name="hobby" value="daota2">刀塔2
<input type="checkbox" name="hobby" value="taobao">淘宝
<input type="checkbox" name="hobby" value="qiaodaima" checked>敲代码
<br/>
地址:
<select name="province">
<option value="">湖北</option>
<option value="">湖南</option>
<option value="">广东</option>
</select>
<select name="city">
<option value="">武汉</option>
<option value="">长沙</option>
<option value="">广州</option>
</select>
<br/>
自我介绍:
<textarea rows="5" cols="50">
</textarea>
<br/>
<input type="submit" value="注册"/>
<input type="button" value="注册"/>
<button onclick="submit()">注册</button>
</form>
</div>
<script type="text/javascript"> function submit(){ // 暂时不写 } function abc(){ document.getElementsByTagName("input")[0].value=""; } </script>
</body>
</html>
2. CSS盒子模型
<!DOCTYPE html>
<html>
<head>
<title>CSS盒子模型.html</title>
<meta charset="UTF-8">
<style type="text/css"> /* CSS盒子模型 */ div{ width:500px;/* 设置盒子的宽度 */ height:500px;/* 设置盒子的高度 */ border-style: groove;/* 设置边框的类型 */ border-width: 20px;/* 设置边框的宽度 */ /*margin-top: 50px; 设置上边距*/ /*margin-left:50px; 设置左边距*/ /*margin:auto; 自动居中 */ /* margin:100px 200px 300px 500px; 设置上右下左 */ /*margin: 100px 200px 300px; 设置 上 左 下*/ margin:100px 200px; /*设置 上 左(下 左) */ padding: 3em; /* 设置填充的距离 */ border-color: red; background-image: url("../image/topfocusb_bg1.gif"); } </style>
</head>
<div>
这是一个div,你能看到什么
</div>
<body>
</body>
</html>
3. CSS类选择器
当标签选择器,类选择器,id选择器同时存在的时候, 若同时存在相同的属性名, 属性值的
优先级的顺序是
id选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html>
<head>
<title>11.html</title>
<meta charset="UTF-8">
<!-- CSS的语法: 选择器 { 属性名:属性值 } -->
<style type="text/css"> /* 在这个中间编写CSS样式 */ /*标签选择器*/ p{ font-family: "宋体"; text-align: center; font-size: 4em; } /*id选择器 id属性值在页面是唯一的 */ #id1{ font-size:2em;/*字体大小*/ color:red;/*字体颜色*/ background-color:yellow;/*背景颜色*/ font-style: italic;/*字体倾斜*/ text-decoration: line-through;/*文本上的线条*/ } /*类选择器 .类名{ } */ .pstyle{ background-image: url("../image/topfocusb_bg1.gif");/* 设置背景图片 */ height:40px;/* 设置高度 */ background-repeat: repeat-x;/* 水平方向重复 */ } </style>
</head>
<body>
<p id="id1" class="pstyle">窗前明月光</p>
<p class="pstyle">疑是地上霜</p>
<p class="pstyle">举头望明月</p>
<p class="pstyle">低头思故乡</p>
</body>
</html>
完整代码见:
https://github.com/menglanyingfei/Java/tree/master/JavaWebTrain