列表标签
1、无序列表 (ul)
ul标签是无序列表标签,里面只能放li标签,而li标签可以放任意标签,li标签是用来描述无序列表中的内容
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
</body>
运行结果:
2、有序列表(ol)
ol标签是有序列表标签,里面只能放li标签,而li标签可以放任意标签,li标签是用来描述有序列表中的内容,对于ol标签,有两个属性值type,可以指定不同的排序方式如abc,ABC等,只能填五个值:1,a,A,i,I;start,可以指定开始的数字或字母或罗马数字
<body>
<ol>
<li>打开冰箱</li>
<li>把大象装进冰箱</li>
<li>关上冰箱</li>
</ol>
</body>
运行结果:
3、自定义列表(dl)
dl是自定义列表标签,里面只能放dt标签代表列表标题,dt标签只能放dd标签,代表列表内容
<body>
<dl>
<dt>
登录
<dd>登录账号</dd>
<dd>登录密码</dd>
</dt>
</dl>
<dl>
<dt>
游戏
<dd>俄罗斯方块</dd>
<dd>国际象棋</dd>
</dt>
</dl>
</body>
运行结果:
表格标签
1、表格基本标签(table,caption,tr,th,td)
表格标签table用来绘制表格,table标签中有一属性border,用来表述绘制表格的线粗细,此属性有属性值,表示表格线的粗细;caption用来表示表格标题,tr表示表格的每一行,tr里面只能写th和td,th表示表格中的描述数据如姓名性别等,加粗,td表述表格中的实际数据
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
</tr>
</table>
</body>
运行结果:
2、表格结构标签(thead,tbody,tfoot)
thead描述表格头部,tbody描述表格主体,tfoot描述表格尾部
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>总结</td>
</tr>
</tfoot>
</table>
</body>
运行结果:
注:对于浏览器而言加身体头部和尾部没什么区别
3、表格合并
表格合并有两属性值,rowspan垂直合并,此属性有属性值,表示合并的单元格个数;colspan水平合并,此属性有属性值,表示合并的单元格个数。遵循左上原则即垂直合并保留最上面的数据,水平合并保留最左边的数据
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>小明</td>
<td rowspan="2">男</td>
</tr>
<tr>
<td>小李</td>
</tr>
<tr>
<td colspan="2">总结</td>
</tr>
</table>
</body>
运行结果:
注意:用了这两标签之后同一行或同一列不能有其他数据,否则表格将会错误
表单标签
1、input标签
input有一个属性type,type属性值有8个:text,password,radio,checkbox,file,submit,reset,button
text属性值:
文本框,用于输入单行文本
<body>
姓名:<input type="text">
</body>
运行结果:
password属性值
密码框,用于输入密码
<body>
密码:<input type="password">
</body>
运行结果:
radio属性值
单选框,用于多选一,要实现多选一,必须要对多个radio属性值的input标签进行归组,归组属性为name,当name的属性值相同的归为一组,name的属性值可以任意
<body>
性别:男<input type="radio" name="sex"> 女<input type="radio" name="sex">
</body>
运行结果:
checkbox属性值
多选框,用于多选多
<body>
兴趣爱好:打篮球<input type="checkbox"> 踢足球<input type="checkbox"> 打排球<input type="checkbox">
</body>
运行结果:
file属性值
文件选择,用于之后上传文件,若要上传多个文件,必须书写一个属性值multiple
<body>
<input type="file" multiple>
</body>
运行结果:
submit属性值
提交按钮,用于提交信息,使用该属性值时前要加form标签
<body>
<form>
<div>
姓名:<input type="text">
</div>
<div>
学号:<input type="password">
</div>
<div>
性别:男<input type="radio" name="sex"> 女<input type="radio" name="sex">
</div>
<div>
兴趣爱好:打篮球<input type="checkbox"> 踢足球<input type="checkbox"> 打排球<input type="checkbox">
</div>
<div>
<input type="submit">
<div>
</form>
</body>
运行结果:
reset属性值
重置按钮,用于重置所有输入的信息,使用该属性时要加form标签
<body>
<form>
<div>
姓名:<input type="text">
</div>
<div>
学号:<input type="password">
</div>
<div>
性别:男<input type="radio" name="sex"> 女<input type="radio" name="sex">
</div>
<div>
兴趣爱好:打篮球<input type="checkbox"> 踢足球<input type="checkbox"> 打排球<input type="checkbox">
</div>
<div>
<input type="reset">
<div>
</form>
</body>
运行结果:
button属性值
普通按钮,与js配合使用功能,若在此按钮中写该按钮名称时,需要写value属性,属性值为按钮名称
<body>
<input type="button" value="普通按钮">
</body>
运行结果:
2、button标签
该标签有一个button属性,有三属性值:submit,reset,button,关于这三个属性值,参考input标签中的button属性值
3、select下拉菜单标签(option)
select里只能写入option标签,该标签描述下拉菜单列表内容
<body>
城市:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</body>
运行结果:
4、textarea标签
改标签有两属性:cols规定了文本区的可见宽度;rows规定了文本区的可见行数
<body>
<div>文本框:</div>
<div><textarea cols="30" rows="10"></textarea></div>
</body>
运行结果:
5、label标签
该标签常用于绑定内容与表单标签的关系。有两种使用方法:方法一、使用label标签把内容包裹起来,再把表单标签上添加id属性,在label标签的for属性中设置对应的id属性值;方法二、直接使用label标签把内容和表单标签一起包裹起来,然后把label标签的for属性去掉
方法一:
<body>
性别:
<input type="radio" id="r1" name="sex"><label for="r1">男</label>
<input type="radio" id="r2" name="sex"><label for="r2">女</label>
</body>
方法二、
<body>
性别:
<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
</body>
字符实体
1、空格
当网页文字需要输入空格时候,需要输入 依据输入空格数输入 ;
<body>
我的名字是 xxx
</body>
运行结果:
2、小于号和大于号
由于html标签有小于号和大于号,因此当需要输入小于号的时候则输入<代替;当输入大于号的时候则输入>代替
<body>
这是一个<HTML>文件
</body>