html和css的使用
1.form表单格式化
<!-- form表单: action : 提交的服务器地址 method : 提交的方式 get(默认) , post 表单提交时 , 数据发送失败的三种情况: 1.表单项没有name属性 2.单选 , 复选 , 下拉框 需要有value 值 3.表单项 不在form标签中 get请求的特点: 1.请求格式 : 服务器地址+参数 2.不安全 3.请求有长度限制(100) post请求的特点: 1.请求格式只有服务器地址 2.比get相对安全 3.没有数据长度的限制 --> <form action="http://localhost:8080" method="get"> <h1 align="center">用户注册</h1> <table align="center"> <tr> <td>用户名:</td> <td><input type="text" name="username" value="username"/></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password" value="password"/></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="boy" checked="checked">男 <input type="radio" name="sex" value="girl">女 </td> </tr> <tr> <td>爱好 :</td> <td> <input name="hobby" value="java" type="checkbox"/>java <input name="hobby" value="javaScript" type="checkbox"/>javaScript <input name="hobby" value="C++" type="checkbox"/>C++ </td> </tr> <tr> <td>国籍 :</td> <td><select name="country"> <option value="none">--请选择国籍--</option> <option value="china">中国</option> <option value="usa">美国</option> <option value="jp">小日本</option> </select></td> </tr> <tr> <td>自我简介:</td> <td><textarea name="desc" rows="10" cols="20">默认值</textarea></td> </tr> <tr> <td> <input type="file"><br/> </td> </tr> <tr> <td><input type="reset"><br/></td> <td><input type="submit"><br/></td> </tr> </table> </form>
2. CSS定义文本样式
<!-- div , span , p 标签的使用 : 都是用来显示文本内容的 div:独占一行 span:都在同一行 p:上下会空出一行 --> <!-- 方式一 --> <div style="border: 1px solid red;">div标签1</div> <div style="border: 1px solid red;">div标签2</div> <span style="border: 1px solid red;">span标签1</span> <span style="border: 1px solid red;">span标签2</span> <!--方式二--> <!-- style 标签专门用来定义css样式代码 --> <style type="text/css"> /* 注 : 这里的代码为css代码 , 所以不能用html的注释格式 */ div,span{ border: 1px solid red; } </style> <!--方式三--> <!--link 标签专门用来引入css样式代码--> <link rel="stylesheet" type="text/css" href="1.css">
3.CSS选择器
<style type="text/css">
/* css选择器1 : 标签选择器 */
div{
border: 1px solid green;
color: red;
}
/* css 选择器2 : id选择器*/
#id001{
color: yellow;
font-size: 20px;
}
#id002{
color: blue;
font-size: 30px;
}
/*css选择器3 : class选择器*/
.class01{
border: 1px solid green;
font-size: 20px;
}
.class02{
border: 1px solid blue;
font-size: 30px;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<div>div标签3</div>
<div>div标签3</div>
<div>div标签3</div>
<span id="id001">span标签1</span>
<span id="id002">span标签2</span>
<span class="class01">span标签3</span>
<span class="class02">span标签4</span>
