HTML概述
HTML是一种超文本标签语言。用来展示内容。
- 超文本
- 超越了一般的文本，描述了文本的字体、颜色、图片。
- 标签
- 既标记。有特殊含义的。
<></>
书写一个简单的.html文件
- 既标记。有特殊含义的。
<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<!-- 防止中文乱码 -->
<meta charset="utf-8">
</head>
<body>
<h1>标题1</h1>
</body>
</html>
列表页面展示
标准的单元格书写：
<table border="1" cellpadding="0" width="200px" height="100px" align="center" bgcolor="#ffff00">
<!-- tr 行 -->
<tr align="center">
<!-- td 列 -->
<td>用户名</td>
<td>密码</td>
</tr>
<!-- tr 行 -->
<tr>
<!-- td 列 -->
<td>coderhong</td>
<td>1234</td>
</tr>
</table>
单元格合并
- 跨行合并
colspan="行数" - 跨列合并
rowspan="行数"
<!DOCTYPE html>
<html>
<head>
<title>列表页面的展示</title>
<!-- 防止中文乱码 -->
<meta charset="utf-8">
</head>
<body>
<h align="center">标题1</h1>
<table border="1" cellpadding="0" width="200px" height="100px" align="center" bgcolor="#ffff00">
<!-- tr 行 第一行-->
<tr align="center">
<!-- td 列 -->
<td>用户名</td>
<td colspan="2">密码</td>
</tr>
<!-- tr 行 -->
<tr>
<!-- td 列 第二行-->
<td rowspan="2">coderhong</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<!-- td 列 第三行-->
<td>1234</td>
<td>1234</td>
</tr>
</table>
</body>
</html>
Snip20171113_14.png
表单
表单标签<form></form>,用来从浏览器收集用户提交的数据。
常见的子标签：
- input
- select 下拉选
- textarea 文本域
input常见的属性：
-
type:
常见的属性- text 文本框
- password 密码框
- radio 单选框
- checkbox: 多选框
- file: 文件框
- submit: 提交
- reset：重置
- button：普通按钮
- hidden：隐藏域 隐藏在页面上 提交的时候数据可以被提交到服务器。
- image：图片提交
-
name属性
- 可以将几个单选框(复选框设置为一组)
- 要想将数据提交到服务器必须有name属性 ⭐️⭐️⭐️
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
</head>
<body>
<h1>个人资料</h1>
<form method="" target="">
姓名：<input type="text" name="username"> <br>
密码：<input type="password" name="password"> <br>
性别：<input type="radio" name="sex" value="1" checked="checked">男
<input type="radio" name="sex" value="0">女
<br>
爱好: <input type="checkbox" name="hobby" value="eat" checked="checked">吃
<input type="checkbox" name="hobby" value="drink">喝
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
<br>
头像: <input type="file" name="photo"><br>
籍贯: <select name="pro">
<!-- select要想有内容 必须有option标签 -->
<option value="001">北京</option>
<option value="002">上海</option>
<option value="003" selected="selected">广州</option>
<option value="004">杭州</option>
</select>
<select name="city">
<!-- select要想有内容 必须有option标签 -->
<option value="00101">朝阳</option>
<option value="00102">崇文本</option>
<option value="00103" selected="selected">广东</option>
<option value="00104">西湖</option>
<option value="00105">余杭</option>
<option value="00106">下沙</option>
</select>
<br>
自我介绍:
<!-- cols 设置宽 rows设置高 -->
<textarea name="intr" cols="40" rows="4">
helloworld！！
</textarea>
<br>
<input type="submit" value="保存">
<input type="reset">
<input type="button" value="普通按钮">
</form>
</body>
</html>
浏览器打开如下：
Snip20171113_15.png
提交的内容是需要注意：
对于文本框 、密码框、手写的内容可以传递过去
对于单选框和多选框却没有把值传递过去 必须设置value属性
若下拉选框要想把选中的内容值传递过去，请加上value
默认值的设置：
文本框、 密码框只需要添加value属性
单选框多选框 添加 checked="checked"
对于下拉选： 添加select="select"
文本域： 标签体
默认提交只提交当前页面。如果提交到指定路径，就需要设置<form></form>属性
- action:信息提交的路径 默认是当前页面
- method: 表单的提交方式
- get（默认）
- post
GET请求跟POST请求区别
- GET会把所有的参数追加在地址栏上，post不会。
- 2.get请求参数有大小限制，post请求参数大小没有限制
- 3.post相对于get请求安全些。
扩展：
设置输入框不可输入
- 设置属性为readonly="readonly"
举例：
<input type="text" name="username" readonly="readonly" value="coderhong "><br>
网友评论