html文档结构，标签，表格，表单都是 HTML语言的基础知识必须掌握！
html文档结构实例
<!--文档类型--> <!doctype html> <!--html文档开始, lang设置该文档的内容使用的语言,部分浏览器会依赖它进行翻译提示--> <!--lang属性非必须,如果页页就是提醒翻译,可以删除它,或者改成: zh-cn, 让它与你的系统语言一致--> <html lang="en"> <!--head是文档的头部声明和页面描述信息,除标题外, 其余内容对用户不可见, 供浏览器和搜索引擎读取--> <head> <!-- meta标签用来设置页面的元数据(描述),例如关键字,页面描述,作者等--> <!-- charset是你在编写和存储这个html文档时, 使用的编码集--> <meta charset="UTF-8"> <!-- title是显示在浏览器标签页内的文本内容,用来提示用户当前页面的基本信息--> <title>html文档的结构</title> </head> <!--以下内容会显示在当前浏览器的窗口中, 也是用户最感兴趣的部分--> <body> <h1>PHP中文网的小伙伴们,大家好~~</h1> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表的使用</title> </head> <body> <ul> <li>123</li> <li>123</li> <li><a href="http://www.baidu.com" target="_self">百度</a>123</li> <img src="https://img.php.cn/upload/course/000/000/014/5d1726e0d8a60770.jpg" alt="php的图片"> </ul> <table border="1" cellpadding="0" cellspacing="0" width="300"align="left"> <caption>购物车</caption> <thead> <tr> <td>编号</td> <td>名称</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr> </thead> <tbody> <tr> <td>2</td> <td>摄像头</td> <td>150</td> <td>2</td> <td>300</td> </tr> <tr> <td>3</td> <td>电脑</td> <td>4500</td> <td>2</td> <td>9000</td> </tr> </tbody> <tfoot> <tr> <td colspan="4" align="center">总计</td> <td>12000</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例、
三总列表：无序列表<ul></ul> <li></li>有序列表<ol></ol>子元素为<li></li>定义列表<dl></dl>子元素为<dt></dt>
超链接标签<a half="" target=""></a>
图片链接标签<img src="" atl="">
图像的alt属性是一定要有的,因为搜索引擎 和 屏幕阅读器都是依赖这个元素来获取图片的内容与介绍
表格标签<table></table> 属性有border为边框 cellpadding单元格内容与单元格之间的内边距
cellspacing 单元格与表格之间的间隙大小
align 设置对齐方式
cosplan 单元格在列方向上(水平)的合并
rowplan 单元格在行的方向(垂直)合并
表单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单用户注册</title> </head> <body> <h3>用户注册</h3> <form action="" method="" name="register"> <p> <label for="username">帐号</label> <input type="text" id="username" name="username" placeholder="不超过8个字符"> </p> <p> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="6-12字母或数字"> </p> <p> <label for="email">邮箱</label> <input type="email" id="email" name="email"placeholder="xx@mail.com" required> </p> <p> <label for="age">年龄</label> <input type="number" name="age" id="age" min="16" max="70"> </p> <p> <label for="birthday">生日</label> <input type="date"id="birthday" name="birthday"> </p> <p> <label for="1">课程</label> <select name="1" id="1" size="1"> <optgroup label="分组"> <option value="0">1</option> <option value="1">2</option> <option value="2" selected>jav</option> </optgroup> <optgroup label="分组"> <option value="3">3</option> <option value="4">4</option> </optgroup> </select> </p> <p> <label for="programe">爱好：</label> <input type="checkbox"id="programe" value="programe"name="bob"><label for="programe">打游戏</label> <input type="checkbox"id="movie" value="programe"name="bob"checked><label for="movie">看电影</label> </p> <p> <label for="yinsi">性别</label> <input type="radio" id="nan" name="gender" value="nan"><label for="nan">男性</label> <input type="radio" id="nv" name="gender" value="nv"><label for="nv">女性</label> <input type="radio" name="gender" id="yinsi" value="yinsi" checked><label for="yinsi">隐私</label> </p> <p> <label for="comment">简介</label> <textarea name="comment" id="comment" cols="30" rows="10" placeholder="不的超过20个字符"></textarea> </p> <p> <!-- 按钮--> <input type="submit" name="submit" value="提交"> <!-- 重置不是清空, 只是恢复表单控件的默认状态或者默认值--> <!-- 重置按钮现在极少用到啦--> <input type="reset" name="reset" value="重置"> <!-- 普通按钮, 没有具体的功能, 通过JavaScript将它的行为重新定义, 例如Ajax异步提交数据--> <input type="button" name="button" value="按钮"> <!-- 推荐使用button标签定义按钮--> <!-- 默认也input:submit功能是一样的--> <button>提交1</button> <!-- 等价于--> <button type="submit">提交2</button> <!-- 普通按钮, 点击执行的行为, 由用户自定义--> <button type="button">提交3</button> </p> </form> </body>
运行实例 »
点击 "运行实例" 按钮查看在线实例
<label for=""></label> <input type="" id=""> for和ID 可以把label和input联系起来
input type 类型有 文本：text 密码:password 邮箱:email 数字： number 日期：date 复选框：checkbox 单选框：radio
单选按钮： type="radio" 注意 name="" 要一致，不然就不是单选了！
下拉菜单：select 子元素为 <option value=""></option>
input 表单框中 要留有注释 用到 placeholder""属性
select下拉菜单中 设置默认值用到 selected 属性
复选框checkbox 和 单选按钮 radio 设置默认值用到 checked 属性