HTML标签元素,列表,表格,表单的理解及总结__2019-8-30
程序员文章站
2022-03-11 14:19:43
...
一：HTML 标签
html的标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <p> 和 </p>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML标签大都是成对出现，也有一些特殊的标签没有结束标签，如<img />、<input />、<hr />等没有结束标签
-
。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>html标签实例</title> </head> <body> <p>html中的段落标签p标签实例效果</p> <br> <a href="http://www.php.cn">html中的链接标签a标签实例效果</a> <br> <br> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6e1577037989.jpg" width="300" height="142" /> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
二：HTML 元素
HTML 元素指的是从开始标签（<p>）到结束标签（</p>）的所有代码。
实例
<!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>html标签实例</title> </head> <body> <p>html中的元素实例效果</p> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
三：HTML元素属性
是由元素属性和值来组成，HTML的元素属性显示了对HTML元素的描述，如img标签里的src、width、height属性，p标签里的style属性，浏览器就会按照设定的效果来显示内容。
实例
<!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>html属性实例</title> </head> <body> <h1 align="center">html属性实例</h1> <p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三：HTML列表
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>html标签实例</title> </head> <body> <ol> <li>有序列表实例</li> <li>有序列表实例</li> <li>有序列表实例</li> </ol> <br> <ul> <li><a href="#">无序列表实例</a></li> <li><a href="#">无序列表实例</a></li> <li><a href="#">无序列表实例</a></li> </ul> <br> <dl> <dt>列表标题</dt> <dd>定义列表内容实例</dd> <dt>列表标题实例 </dt> <dd>定义列表内容实例</dd> <dt>列表标题实例</dt> <dd>定义列表内容实例</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四：html列表与表格的区别
列表由ol、ul、dl表示，l代表了list，内部有li、dt、dd组成，而表格由table包裹外部，内部有thead、tbody、tfoot，tr、td、th组成
如果数据比较简单，只有一列数据，就用列表来进行代码编写，如果有多列数据，就适合用表格来编写
五：列表实现工作计划实例
实例
<!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> <h1>列表实现工作计划</h1> <ol> <li>先看一遍老师的直播视频</li> <li>视频过程手写记不住的英语单词</li> <li>看完视频后再动手敲一遍课程学到的知识</li> <li>敲代码过程有错误反复观看视频找出错误点认真去记</li> </ol> <br> <ul> <li>先看一遍老师的直播视频</li> <li>视频过程手写记不住的英语单词</li> <li>看完视频后再动手敲一遍课程学到的知识</li> <li>敲代码过程有错误反复观看视频找出错误点认真去记</li> </ul> <br> <dl> <dt>列表实现工作计划</dt> <dd>先看一遍老师的直播视频</dd> <dd>视频过程手写记不住的英语单词</dd> <dd>看完视频后再动手敲一遍课程学到的知识</dd> <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>Document</title> </head> <body> <caption>商品清单</caption> <!-- 表格头部 --> <table border="1" width="500" cellspacing="0" cellpadding="10"> <thead> <tr> <th>类别</th> <th>排序</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <!-- 表格主体内容 --> <tr> <td rowspan="5">笔记本电脑</td> <td>1</td> <td>华硕笔记本</td> <td>5000</td> <td>1</td> <td>5000</td> </tr> <tr> <td>2</td> <td>联想笔记本</td> <td>4999</td> <td>2</td> <td>9998</td> </tr> <tr> <td>3</td> <td>神州笔记本</td> <td>4999</td> <td>3</td> <td>14447</td> </tr> <tr> <td>4</td> <td>华为笔记本</td> <td>4999</td> <td>4</td> <td>19996</td> </tr> <tr> <td colspan="3" align="center">共计所需金额</td> <td>10</td> <td>49991</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
七：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> <h3>用户注册编写</h3> <form action="rigister.php" method="POST"> <p> <label for="username">账号：</label> <input type="username" id="username" name="username" placeholder="用户名不能超过8个字符"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="密码不能超过8个字符"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="请输入您的邮箱地址"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="5" max="10"> </p> <p> <label for="">课程：</label> <select name="" id=""> <optgroup label="前端"> <option value="">html</option> <option value="">css</option> <option value="">javascript</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laraver</option> </optgroup> </select> </p> <p> <label for="">爱好：</label> <input type="checkbox" name="bobby[]" value="game" id="game"><label for="game">打游戏</label> <input type="checkbox" name="bobby[]" value="program" id="program"><label for="program">敲代码</label> <input type="checkbox" name="bobby[]" value="movies" id="movies" checked><label for="movies">看大片</label> </p> <p> <label for="">性别：</label> <input type="radio" name="gender" id="girl"><label for="">女生</label> <input type="radio" name="gender" id="male"><label for="">男生</label> <input type="radio" name="gender" id="secrced" checked><label for="">保密</label> </p> <p> <label for="">按钮：</label> <input type="submit" value="提交"> <input type="reset" value="重填"> <input type="button" value="按钮"> <button>提交</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
八：课程总结
有序列表ol，无序列表ul，定义列表dl,dd,dt
h1-h6,h1标签字体最大，h6标签字体最小
html语言不分大小写
表格里的cellspacing表示单元格内容与其边框之间的距离，cellpadding表示单元格之间的距离， colspan表示合并列，rowspan表示合并行，
表单的type属性类型有很多种敲代码的时候要选择相对的类型，max表示用户输入字段最大值限制,min表示输入字段的最小值限制，checked表示默认选项放在input标签内不要混淆。
直接写button标签也可以提交网页数据
-
感谢老师百忙之中检阅(ps:作业写了2个小时以上，我太难了)