1. 实体字符
<h1>我是<h1>标签</h1>
2. 列表
<body>
无序列表 :
<ul type="circle">
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
<li><a href="">444</a></li>
<li><a href="">555</a></li>
</ul>
有序列表 :
<ol type="I">
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
<li><a href="">444</a></li>
<li><a href="">555</a></li>
</ol>
城市 :
<dl>
<dt>河北</dt>
<dd>石家庄</dd>
<dd>沧州</dd>
<dd>廊坊</dd>
<dt>北京</dt>
<dd>昌平区</dd>
<dd>朝阳区</dd>
<dd>海淀区</dd>
</dl>
</body>3. 表格
3.1 创建表格
在HTMl网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>在上面的语法中包含三对HTML标签,分别为table,tr,td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释。
1. table用于定义一个表格
2. tr用于定义表格中的一行,必须嵌套在table标签中,在table中包含了几对tr,就有几行表格
3. th/td : 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对<tr></tr>中包含几对<td></td>,就表示改行中有多少列.
注意 :
1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签,他就像一个容器,可以容纳所有的元素
<!--
table : 定义表
border : 表的边框
width : 表的宽度
align : 表居中显示
cellspacing : 单元格与单元格之间的距离
cellpadding : 文字到单元格之间的距离
tr : 定义一行
align : 行中内容局部
th : 定义表头列
td : 定义行中一列数据
caption : 定义表头
-->
<table border=1 width="500" cellpadding="10" cellspacing="0" align="center">
<caption><h2>学习信息</h2></caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center">
<td align="center">张三</td>
<td>男</td>
<td>19</td>
</tr>
<tr align="center">
<td>李四</td>
<td>女</td>
<td>18</td>
</tr>
</table><body>
<table border=1 width="500" cellpadding="10" cellspacing="0" align="center">
<tr>
<!-- colspan : 列合并 -->
<th colspan="3">学生信息</th>
<th colspan="2">成绩</th>
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>专业</th>
<th>课程</th>
<th>分数</th>
</tr>
<tr align="center">
<td>张三</td>
<td>男</td>
<!-- rowspan : 跨行合并 -->
<td rowspan="2">计算机</td>
<td rowspan="2">java开发</td>
<td>98</td>
</tr>
<tr align="center">
<td>李四</td>
<td>女</td>
<!-- <td>计算机</td>
<td>java开发</td> -->
<td>99</td>
</tr>
</table>
</body>3.2 表格结构
在使用表格进行布局时,可以将表格划分为头部、主体和页脚,具体如下所示 :
<thead></thead> : 用于定义表格的头部,必须位于<table></table>标签中,一般包含网页的logo和导航等头部信息
<tbody></tbody> : 用于定义表格的主体. 位于<table></table>标签中,一般网页中除头部和底部之外的其他内容
表头单元格一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格 .设置表头非常简单,只需用表头标签<th></th>题海相应的单元格标签<td></td>即可
4. 表单
表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问者的名字和e-mail地址,调查表,留言表等等
一个表单有三个基本组成部分 : 表单标签 :这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 : 包含了文本框, 密码框, 隐藏域 , 多行文本框 , 复选框 , 单选框 , 下拉选择框和文件上传框 等 表单按钮 : 包括提交按钮、复位按钮和一般按钮; 用于将数据传送到服务器上的CGL脚本或者取消传入,还可以用表单按钮来控制其他定义了处理脚本的处理工作
应用场景 : 主要是应用在数据的提交,比如点击按钮发送数据到服务端。
<body>
<table border="1" width="500" cellpadding="2" cellspacing="0" align="center">
<caption>
<h2>学员信息录入</h2>
</caption>
<!-- action : 把数据请求到哪里去 -->
<!-- method : 请求方式 , get/post
get : 明文传输,相对不安全,传递数据量较少,效率高
post : 不是明文传输,相对安全,传递的数据量较多,效率低
向服务器发送数据,考虑安全性,一般使用post
向服务器索要数据,一般使用get,比如查看,搜索等都是为了获取数据
action?name=value&name=value.....
http://www.baidu.com?age=2
-->
<form action="http://www.baidu.com" method="get">
<!--
input 最重要的三个属性
name : 就是定义 的名字
value : 输入框输入的数据会自动赋值给value,当然我们也可以手动设置
最终数据会以 name=value的形式进行传递
type : 定义了输入框的类型
text : 普通输入域
password : 密码输入框
radio : 单选框,多个标签的name必须一致
checked="checked" 单选框默认选项
checkbox : 复选框
checked="checked" 复选框默认选项,和单选一致
file : 选择文件,比如文件上传
button : 普通按钮(没有提交功能)
submit : 提交按钮(点击后,提交表单)
reset : 重置按钮
image : 用图片代替提交按钮
placeholder : 提示文字,输入数据后不再显示
label : 无语义标签,使用上之后没有任何样式变化
当label的for属性和对应的输入框的id属性值一致的时候
点击label标签的内容,会在对应输入框中获得焦点
-->
<tr>
<td><label for="username">用户名 : </label></td>
<td><input id="username" type="text" name="username" placeholder="请输入用户名" /></td>
</tr>
<tr>
<td><label for="password">密码 : </label></td>
<td><input id="password" type="password" name="password" placeholder="请输入密码" /></td>
</tr>
<tr>
<td>性别 : </td>
<td>
<input type="radio" checked="checked" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>爱好 : </td>
<td>
<input type="checkbox" name="like" value="篮球" /> 篮球
<input type="checkbox" name="like" checked="checked" value="学习" /> 学习
<input type="checkbox" name="like" value="玩游戏" /> 玩游戏
</td>
</tr>
<tr>
<td>毕业证照片 : </td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>出生年月日 : </td>
<td>
<!-- select : 定义下拉列表
option : 下拉列表中的选项
下拉列表 是以 select的name = option的value 进行数据提交
selected="selected" : 默认选项
multiple : 可以选择多个,按ctrl
-->
<select name="year" id="">
<option value="">---请选择年份---</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option selected="selected" value="1994">1994</option>
</select>
</td>
</tr>
<tr>
<td>自我评价 : </td>
<td>
<textarea cols="30" role="10"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="image" src="图片地址">
<!-- button按钮也是可以触发submit的,除非设置类型为button -->
<button type="button">按钮</button>
<button>按钮</button>
</td>
</tr>
</form>
</table>
</body>5. 搜索
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd"> <input type="submit" value="搜索">
</form>
3296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
