HTML和CSS
<font color="red" face="宋体" size="7">我是字体标签</font>
标题
![](https://i-blog.csdnimg.cn/blog_migrate/cb14c51f21f437c903ec0999c3583ba3.png)
超链接
![](https://i-blog.csdnimg.cn/blog_migrate/c102c04356b42e95bbf1a679ebaebd72.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c4f871d1bff67161d1435c8866eb36a6.png)
列表
![](https://i-blog.csdnimg.cn/blog_migrate/359292dfab75740eaede146588486eab.png)
图片
![](https://i-blog.csdnimg.cn/blog_migrate/8a62cb2b428c88fd698941e3cd90c51e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f7b3ad9566f0ef1af5f7808c84018db3.png)
表格
![](https://i-blog.csdnimg.cn/blog_migrate/c236cd05acd4d341ca9e86dd8b0027d3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1db4e037895350220e2a49c5a636a99a.png)
表格跨行
![](https://i-blog.csdnimg.cn/blog_migrate/994b6749ab810000a21478814283b7f2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/81a235061be320fee1fb748a8f2f4700.png)
内嵌窗口
![](https://i-blog.csdnimg.cn/blog_migrate/6b0a3a78b5cd5636a61f5dc7f56bc507.png)
表单标签![](https://i-blog.csdnimg.cn/blog_migrate/e0d2c2400f8c35c24a151eb0036652a2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a84b4f72f7eaae306a0e89cfa8604ab1.png)
表单格式化
![](https://i-blog.csdnimg.cn/blog_migrate/96570b251a77892d3fe9ff9411ab75cc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fffeaee2e8773cc2f07fd5192bbeb249.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4b2e126cc2910ced6787788bff53eb26.png)
用户注册
用户名称: | |
用户密码: | |
性别: | 男 女 |
兴趣爱好: | Java JavaScript C++ |
国籍: | --请选择国籍--中国美国小日本 |
自我评价: | 我才是默认值 |
| <body>
<!--
form 标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候,数据没有发送给服务器的三种情况:
1、表单项没有 name 属性值
2、单选、复选(下拉列表中的 option 标签)都需要添加 value 属性,以便发送给服务器
3、表单项不在提交的 form 标签中
GET 请求的特点是:
1、浏览器地址栏中的地址是:action 属性[+?+请求参数]
请求参数的格式是:name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是:
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制
-->
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称:</td>
<td>
<input type="text" name="username" value="默认值"/>
</td>
</tr>
<tr>
<td> 用户密码:</td>
<td><input type="password" name="password" value="abc"/></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" checked="checked" value="girl" />女
</td>
</tr>
<tr>
<td> 兴趣爱好:</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>Java
<input name="hobby" type="checkbox" value="js"/>JavaScript
<input name="hobby" type="checkbox" value="cpp"/>C++
</td>
</tr>
<tr>
<td>国籍:</td>
<td>
<select name="country">
<option value="none">--请选择国籍--</option>
<option value="cn" selected="selected">中国</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="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body |
css
![](https://i-blog.csdnimg.cn/blog_migrate/27ba615f541351623c2d9d9a86317f02.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ec57b19000238c1e0f1d1b89326a2701.png)
css选择器
![](https://i-blog.csdnimg.cn/blog_migrate/14b24b5b9fdcc5f84b454480805d27be.png)
![](https://i-blog.csdnimg.cn/blog_migrate/40b4ec1a0e09cf790937c43ed0c4fe76.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f4883a0a8b48ac2f839b49b8dd51dffd.png)
id选择器
![](https://i-blog.csdnimg.cn/blog_migrate/16cad626af3ac09dfbb8312705167679.png)
![](https://i-blog.csdnimg.cn/blog_migrate/540301435c3878fee0f30b415640431e.png)
组合选择器
![](https://i-blog.csdnimg.cn/blog_migrate/3ff82b68e96c4330a10e6d22b8fc9d44.png)
9.5、常用样式: 1、字体颜色 color:red; 颜色可以写颜色名如:black, blue, red, green 等 颜色也可以写 rgb 值和十六进制表示值:如 rgb(255,0,0),#00F6DE,如果写十六进制值必 须加#
2、宽度 width:19px; 宽度可以写像素值:19px; 也可以写百分比值:20%;
3、高度 height:20px; 高度可以写像素值:19px; 也可以写百分比值:20%;
4、背景颜色 background-color:#0F2D4C 4、字体样式: color:#FF0000;字体颜色红色 font-size:20px; 字体大小
5、红色 1 像素实线边框 border:1px solid red;
7、DIV 居中 margin-left: auto; margin-right: auto;
8、文本居中: text-align: center;
9、超连接去下划线 text-decoration: none;
10、表格细线 table { border: 1px solid black; /*设置边框*/ border-collapse: collapse; /*将边框合并*/ } td,th { border: 1px solid black; /*设置边框*/ }
11、列表去除修饰 ul { list-style: none; }
JavaScript
JavaScript和HTML结合的方法
![](https://i-blog.csdnimg.cn/blog_migrate/b85364912367f0638b306a5079c2f089.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ff680b16399aef7ffbe53d7ab785305a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2d51098cef5833da01d73018cbbbfde4.png)
JavaScript的变量形式
![](https://i-blog.csdnimg.cn/blog_migrate/a3c63c92f881c8829c32c18663ffb3f0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e57191a26fe883faac6476a8c6e90361.png)
![](https://i-blog.csdnimg.cn/blog_migrate/84fd393d1123390f3c8173601d075c74.png)
比较关系
== 字面值比较
=== 字面值和数据类型同时比较
逻辑运算,同Java
数组的定义
![](https://i-blog.csdnimg.cn/blog_migrate/d5dff8d3c6bd7eeda2c5a886cbb5cefe.png)
函数的两种定义方式
![](https://i-blog.csdnimg.cn/blog_migrate/dd8d3bf5502f9b7de954d789a0cd1b02.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4d75b486876580729c60e887baabb751.png)
JavaScript重载会覆盖掉上一次的定义
![](https://i-blog.csdnimg.cn/blog_migrate/72fdadda807ea5dc3aef73871b4f8c16.png)
![](https://i-blog.csdnimg.cn/blog_migrate/917b38331471c9fe8d92bc691de0eaea.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7b122c580bc43bdf2d7ff909a4d29545.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e2e947aac3f52ec41badb8024b2755f3.png)