Html学习一
程序员文章站
2023-11-30 10:04:58
1、解决HTML中的编码问题 2、列表的使用 3、HTML中的表格标记 4、表单标记 ......
1、解决html中的编码问题
<html>
<head>
<title>hellohtml</title>
<!--告知浏览器用utf-8编码打开-->
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<marquee>hello java</marquee>
</body>
</html>
2、列表的使用
<html>
<head>
<title>列表标记</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<!--有序列表：ol；
属性：
type：默认值是1，可选值：aaii
start:开始的序号
-->
<ol type="1" start="10">
<li>星期日</li>
<li>星期一</li>
<li>星期二</li>
</ol>
<hr/>
<!--无序列表：ul
属性：
type：默认值是disc，可选值：circle square
-->
<ul type="square">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<!--自定义列表
dt:定义标题
dd：定义内容
-->
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<hr/>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<hr/>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
</body>
</html>
3、html中的表格标记
<html>
<head>
<title>表格标记</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<!--
tr:表示表中的行
td:表示行中的列。内容要在td中
colspan:当前列占用的几列的宽度
rowspan：当前列占用的行数
th:表示行中的列。内容会被自动居中和加粗。作为表头使用
cellspacing:单元格之间的距离。取值是像素值. 外补丁
cellpadding：单元格中的内容和边线的距离。取值是像素值 内补丁
-->
<table border="1" width="60%" align="center">
<tr>
<th>姓名</th>
<th>性别</th>
<th>籍贯</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>山东</td>
</tr>
<tr>
<td> 李四</td>
<td>女</td>
<td>山东</td>
</tr>
</table>
<hr/>
<table border="1" width="60%" align="center" cellspacing="0" cellpadding="5">
<tr>
<th>姓名</th>
<th>性别</th>
<th>籍贯</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>山东</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>山东</td>
</tr>
</table>
<hr/>
<table border="1" width="60%" align="center" cellspacing="0" cellpadding="5">
<tr>
<td align="center" colspan="3">
学员信息列表
</td>
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>籍贯</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>山东</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>山东</td>
</tr>
</table>
<hr/>
<table align="center" border="1" width="60%" cellspacing="0" cellpadding="5">
<caption>表格的标题</caption>
<tr>
<th>年度</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="3">2014</td>
<td>javaee12</td>
</tr>
<tr>
<td>javaee13</td>
</tr>
<tr>
<td>javaee14</td>
</tr>
<tr>
<td rowspan="3">2015</td>
<td>javaee15</td>
</tr>
<tr>
<td>javaee16</td>
</tr>
<tr>
<td>javaee17</td>
</tr>
</table>
</body>
</html>
4、表单标记
<html>
<head>
<title>表单标记</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<!--表单有关的标记放在form中
form：代表一个表单
属性：
action:是一个地址，接收数据的地址
method:默认值是get。建议使用post
重点：get和post的区别（暂时记住）
get：(默认值)01html.html?username=abc&password=123
保密性查，容易被旁边的人看到，不安全。
长度有限制：<1kb
post：建议使用的
保密性好。长度没有限制
username=abc&password=123
input:输入标记
属性：
type:输入域的类型。text(默认值)|password(暗文)
|radio(单选)|checkbox(复选)|file(上传)
|reset（重置）|submit（提交）|button（按钮，结合js使用）
|image(指定src用图片代替按钮)
|hidden隐藏域，向服务器传递信息
name：给该输入域取一个名字。
maxlength:限制输入的内容的最大长度
select:下拉选择
textarea:文本区域
-->
<form action="01html.html" method="get">
<input type="hidden" name="id" value="123"/>
用户名：<input type="text" name="username" value="" maxlength="5"/><br/>
密码：<input type="password" name="password"/><br/>
性别：<input id="g1" type="radio" name="gender" value="1" checked="checked"/>
<label for="g1">男</label>
<input id="g2" type="radio" name="gender" value="0"/>
<label for="g2">女</label>
<br/>
爱好：<input type="checkbox" name="hobby" value="吃饭"/>吃饭
<input type="checkbox" name="hobby" value="睡觉"/>睡觉
<input type="checkbox" name="hobby" value="学java"/>学java<br/>
籍贯：<select name="province">
<option value="bj">北京</option>
<option value="sd" selected="selected">山东</option>
<option value="hb">湖北</option>
</select><br/>
靓照：<input type="file" name="photo"/><br/>
简介：<textarea name="discription" rows="3" cols="38"></textarea><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="按钮"/>
<input type="image" src="images/reg.jpg"/>
</form>
</body>
</html>