时间：2023-08-29 05:06:01 | 来源：网站运营
时间：2023-08-29 05:06:01 来源：网站运营
小白7天入门PHP Web开发 - Day 2 HTML的基础应用：《小白7天入门PHP Web开发》系列文章，面向单纯善良的完全不懂Web开发编程的入门速成课程，小白们如果感兴趣可以研读此系列文章，也可以连线提问。各路大神有何指教还请指点一二。希望各路大神手下留情，注意维护自己的身份和形象。拜谢各位。上一篇文章 我们比较通俗简单的了解了整个网站的访问过程，以及涉及到了哪些技术，为了快速入门，我们废话不多讲，从本篇文章开始，我们就以 留言评论功能（简版） 为例，讲解如何开发一个简单的web网站。
在线咨询
<!-- index.html --><!-- HTML页面代码基础结构 --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>页面标题（浏览器标签上看到的内容）</title> <link rel="stylesheet" href=""></head><body> 页面主体内容（网页上看到的内容）</body></html>仔细观察一下上面这个代码，看不懂没关系，正常，但是，有没有什么发现？<html></html><head></head><title></title><body></body>还有还有，那些不成对出现的，看到了吗？<meta><link>以上这些东西，在HTML代码里面，我们都叫她们 标签，她们是HTML的最基本的单位，用来组织各个元素然后组成网页。<!-- 注释（备注）内容 -->好，我们一起总结一下，以上基础代码我们了解了什么基本内容？<!-- 1.基础的HTML代码结构 --><!-- 2.标签 --><!-- 3.标签属性 --><!-- 4.HTML代码注释 -->你可以不用考虑太多，我们现在写HTML代码的话就直接先把上面的结构敲出来，然后再在里面添加东西就行了。通常其他标签都放在<body>标签内。下面我列了一些常用的或者我们即将可能用到的标签。<!-- index.html --><!-- HTML页面代码基础结构 --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>页面标题（浏览器标签上看到的内容）</title> <link rel="stylesheet" href=""></head><body> <!-- 内容块标签 --> <div>我是内容块，里面可以放下面所有的其他标签</div> <!-- 段落标签 --> <p>我是段落标签，也可以放下面所有的其他标签，并且我会自动上下换行</p> <!-- 内联文本标签 --> <span>我是内联文本标签，当然也可以放，但一般放别人里面，我可以和同样标签放一行不会自动换行</span> <!-- 图片标签 --> <img src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> <!-- 无序列表 --> <ul> <li>项目1</li> <li>项目2</li> </ul> <!-- 有序列表 --> <ol> <li>项目11</li> <li>项目22</li> </ol> <!-- 输入框 --> <input type="text" name="input" value="我现在是一个文本输入框"> <!-- 文本域标签 --> <textarea>我是文本域，可以放很多文本内容</textarea> <!-- 下拉选择菜单 --> <select> <optgroup>我是下拉菜单的分组</optgroup> <option>我是分组下的下拉选项</option> </select> <!-- 表格标签，行tr、列td --> <table border="1"> <tr> <td>我是表格第1行第1列</td> <td>我是表格第1行第2列</td> </tr> <tr> <td>我是表格第2行第1列</td> <td>我是表格第2行第2列</td> </tr> </table> <button>我是按钮</button> </body></html>更多的HTML知识和标签可以参考 <!-- board.html --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>留言评论页面</title></head><body> <!-- 已经留言评论的内容 --> <div> 这是展示的留言评论内容 </div> <!-- 提交留言和评论 --> <div> 我即将在这里提交新的留言评论 </div></body></html>②留言评论展示内容，从（图 2-3）能看出，包含了几行内容她们的从属关系或者叫层叠关系是评论，评论下面的评论回复，同时有多条评论、多条回复，评论中有评论者的头像和名称以及评论内容、时间等。有没有发现多条评论或者多条回复就像一个列表（或叫清单，1什么什么2什么什么），上面我们有提到列表标签<ul>。<!-- board.html --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>留言评论页面</title></head><body> <!-- 已经留言评论的内容 --> <div> <!-- 留言评论列表 --> <ul style="list-style: none;"> <li> <!-- 评论内容 --> <p> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>张五儿：</span> <span>我就是趴窗口看啊，不然能怎么看</span> <span>22：29</span> </p> <!-- 回复内容 --> <p> <!-- 回复列表 --> <ul style="list-style: none;"> <li> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>李二狗 <span>回复</span> 张五儿：</span> <span>666</span> <span>22：29</span> </li> </ul> </p> </li> <li> <!-- 评论内容 --> <p> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>张五儿：</span> <span>我就是趴窗口看啊，不然能怎么看</span> <span>22：29</span> </p> <!-- 回复内容 --> <p> <!-- 回复列表 --> <ul style="list-style: none;"> <li> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>李二狗 <span>回复</span> 张五儿：</span> <span>666</span> <span>22：29</span> </li> </ul> </p> </li> </ul> </div> <!-- 提交留言和评论 --> <div> 我即将在这里提交新的留言评论 </div></body></html>③接下来我们看一下提交留言评论的部分包含了那些内容，一个文本框（上面我们有提到的input标签这里用）、一个文本域（textarea）和一个提交按钮（button），我也把他们都先写下来，一行一个，我们可以用<p></p>标签也可以用<div></div>标签来包裹起来，他们都可以实现自动换行。<!-- board.html --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>留言评论页面</title></head><body> <!-- 已经留言评论的内容 --> <div> <!-- 留言评论列表 --> <ul style="list-style: none;"> <li> <!-- 评论内容 --> <p> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>张五儿：</span> <span>我就是趴窗口看啊，不然能怎么看</span> <span>22：29</span> </p> <!-- 回复内容 --> <p> <!-- 回复列表 --> <ul style="list-style: none;"> <li> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>李二狗 <span>回复</span> 张五儿：</span> <span>666</span> <span>22：29</span> </li> </ul> </p> </li> <li> <!-- 评论内容 --> <p> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>张五儿：</span> <span>我就是趴窗口看啊，不然能怎么看</span> <span>22：29</span> </p> <!-- 回复内容 --> <p> <!-- 回复列表 --> <ul style="list-style: none;"> <li> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>李二狗 <span>回复</span> 张五儿：</span> <span>666</span> <span>22：29</span> </li> </ul> </p> </li> </ul> </div> <!-- 提交留言和评论 --> <div> <form action="" method="get"> <!-- 标题，此处标题在上面其实并没有用到，大家理解怎么使用HTML就可以了 --> <p> <input type="text" name="title" placeholder="请输入标题"> </p> <!-- 内容 --> <p> <textarea name="content" placeholder="请输入内容"></textarea> </p> <!-- 按钮 --> <p> <button type="submit">提交</button> </p> </form> </div></body></html>到这里，我们是时候展现真正的实力了~！浏览器打开这个文件，看下效果~！关键词：基础,入门
