HTML基础

文本标签

超链接

表格

1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

列表

无序列表

1
2
3
<ul>
  <li>列表1</li> #<ul>里面只能放<li>标签，但<li>里面放什么都可以
</ul>

有序列表

1
2
3
<ol>
  <li>列表1</li> #<ol>里面只能放<li>标签
</ol>

自定义列表

1
2
3
4
5
<dl> #<dl>里只能包含<dt><dd>,<dt>等和上面一样
  <dt>自定义列表1</dt>
  <dd>自定义列表1的描述</dd>
  <dd>自定义列表1的描述2</dd>
</dl>

表单

为了收集用户信息
在html中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3部分组成
alt text

1
2
3
<form action="submit.php" method="post" name="myForm">
  
</form>

alt text
alt text

1
2
3
4
<form>
    用户名:<input type="text">
    密码:<input type="password">
</form>

type属性值

  • value只在文本框中能看到效果
  • name和value是每个表单元素都要有的属性，给后台人员使用
  • maxlength是用户可以在表单元素输入的最大字符数，一般较少使用
  • name是表单元素名，该处单选和复选必须有相同name,才可以实现多选一

单选和复选框

1
2
#定义单选按钮 男<input type="radio" name="gender" value="male"> 女<input type="radio" name="gender" value="female">
#复选框 吃饭<input type="checkbox" name="act" value="eat"> 睡觉<input type="checkbox" name="act" value="sleep">

单选和复选框可以设置checked属性，默认选中

1
2
吃饭<input type="checkbox" name="act" value="eat" checked="checked">
#其实直接打checked也行(checked只有一个取值)

submit按钮
提交给后台服务器

1
<input type="submit" value="提交表单">

reset按钮
重置

1
<input type="reset" value="重新设置">

button按钮(不提交元素)

1
<input type="button" value="获取验证码">

文件域 用于上传文件

1
上传头像：<input type="file">

表单标签

label标签
为input元素定义标签，方便用户点击

1
2
<label for="gender">男</label> for和id的值要一样
<input type="radio" name="gender" id="gender" value="male" />

select标签
定义下拉列表
默认选中：selected=”selected”(写selected即可,理由同checked)

1
2
3
4
5
选择：
<select>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

textarea标签
定义多行文本框(文本域)

1
2
3
个性签名：
<textarea name="content" rows="5" cols="30">请输入个性签名</textarea>
#在实际开发中用css控制行列，忘了row和col吧

查阅文档

  1. W3school: https://www.w3school.com.cn/
  2. MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTML