收藏
批改状态：合格
老师批语：将一组标签放在一起记忆不错的, 例如 <ul>+<li>, <table><tr><td>....
一、HTML标签的特点
由尖括号包围的关键词，比如 <html>
通常是成对出现的，比如 <div>和 </div>
标签对中的第一个标签是开始标签，第二个标签是结束标签；
开始和结束标签也被称为开放标签和闭合标签。
也有单独呈现的标签，如：<img src="" />等。
一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和 <input type="" value="" />。
网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中。
列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>有序列表、无序列表、</title> </head> <body> <h3>有序列表</h3> <ol> <li><a href="#">有序列表</a></li> <li><a href="#">有序列表</a></li> <li><a href="#">有序列表</a></li> </ol> <hr> <h3>无序列表</h3> <ul> <li><a href="#">无序列表</a></li> <li><a href="#">无序列表</a></li> <li><a href="#">无序列表</a></li> </ul> <hr> <h3>自定义列表</h3> <dl> <dt>列表标题</dt> <dd>列表内容</dd> <dt>列表标题</dt> <dd>列表内容</dd> <dt>列表标题</dt> <dd>列表内容</dd> <dt>列表标题</dt> <dd>列表内容</dd> </dl> </body> </html>
点击 "运行实例" 按钮查看在线实例
表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格</title> </head> <body> <table border="1px solide" cellspacing="0" cellpadding="25px" align="center" text-align="center"> <caption><b>学生成绩表</b></caption> <thead> <th>序号</th> <th>学号</th> <th>姓名</th> <th>成绩</th> <th>合格率</th> </thead> <tr> <td>1</td> <td>01</td> <td>张三</td> <td>80</td> <!-- 合并4行 --> <td rowspan="4">75%</td> </tr> <tr> <td>2</td> <td>02</td> <td>李四</td> <td>50</td> </tr> <tr> <td>3</td> <td>03</td> <td>王五</td> <td>90</td> </tr> <tr> <td>4</td> <td>04</td> <td>老六</td> <td>60</td>> </tr> <tr> <!-- //合并3个单元格（列） --> <td colspan="3">平均成绩</td> <td>70</td> <td></td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
表单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>注册表单</title> </head> <body> <div style="margin: 0 auto; width: 800px; height: 1200px;"> <h3>用户注册</h3> <form action="" method="POST"> <p> <!-- 文本类型 --> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> </p> <p> <!-- 密码类型 --> <label for="password">密 码:</label> <input type="password" id="password" name="password"> </p> <p> <!-- 邮箱类型 --> <label for="email">邮 箱:</label> <input type="email" name="email" id="email" placeholder="请输入邮箱"> </p> <p> <label for="mobile">电话号码</label> <input type="text" name="mobile" id="mobile" placeholder="请输入11位数的电话号码"> </p> <p> <!-- 数字类型 --> <label for="age">年 龄:</label> <input type="number" name="age" id="age" min="16" max="80"> </p> <p> 性别: <!-- 单选框 --> <input type="radio" name="sex" id="male" value="male"><label for="sex">男</label> <input type="radio" name="sex" id="female" value="female"><label for="female">女</label> </p> <p> <label for="hobby">爱好：</label> <!-- 下拉列表 --> <select name="hobby" id="hobby"> <option value="badminton">羽毛球</option> <option value="basketball">篮球</option> <option value="funning">跑步</option> <option value="swimming" selected>游泳</option> </select> </p> <p> 喜欢的水果： <!-- 复选框 --> <input type="checkbox" name="fruit" id="apple" value="apple"><label for="apple">苹果</label> <input type="checkbox" name="fruit" id="banana" value="banana"><label for="banana">香蕉</label> <input type="checkbox" name="fruit" id="pear" value="pear"><label for="pear">梨子</label> <input type="checkbox" name="fruit" id="peach" value="peach"><label for="peach">桃子</label> </p> <button type="button">注册</button> <input type="submit" value="注册"> </form> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
总结
1、常用的标签：段落<p></p> ,标题<h1-h6> ,图片<img> , 链接标签<a></a>, 表格<table></table>、<tr><td></td></tr>,列表： 无序<ul><li></li></ul>、有序<ol><li></li></ol>，表单:<form></forrm>、<input>、选择列表<select></select>、<option></option>、加粗<b></b>、斜体<i></i>，换行<hr>。
2、属性：href属性链接外部资源，src属性图片链接，type样式、格式，输入框中的name属性为变量名称，label标签中的for属性对应另外一个标签中的id属性。
3、属性值：即属性中对应的值，如：type属性中对应的checkbox、submit、ridio、number、email、text、textarea等。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
