html的基本标签能组成最简单的网页，是构成网页的必备元素。
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>给内容贴上标签</title> </head> <body> <div> <!-- 标题标签 --> <h1>不道德的礼物</h1> <h2>不道德的礼物</h2> <h3>不道德的礼物</h3> <!--段落 --> <p>如果目前这不是你想要的生活</p> <p>那是你自找的</p> </div> <!-- 添加水平分隔线 --> <hr> <!-- 文本修饰 --> <div> <!--strong 文本加粗 --> <p>我们大多人都被<strong style="background:yellow;color:black">按在地上摩擦</strong>,只有坚持到最后的人,<span style="color:green">才能把地磨平</span></p> <!--em 文本斜体--> <p>人生自古<em style="color:red">谁无死</em>,早死晚死<em style="color:blue">都得死</em>。</p> </div> <hr> <div> <!--无序列表--> <h3>购物清单</h3> <ul> <li>小米商务***一个，99元，出外旅游</li> <li>宾得ks1套机一个，1500元，拍照必备</li> <li>2018萤火虫年鉴一套，108元，做个纪念</li> </ul> <!--有序列表--> <ol> <li>小米商务***一个，99元，出外旅游</li> <li>宾得ks1套机一个，1500元，拍照必备</li> <li>2018萤火虫年鉴一套，108元，做个纪念</li> </ol> <!--定义列表 用作名词解释--> <dl> <dt>大力哥</dt> <dd>斗鱼漫展王，斗鱼一哥</dd> <dt>简言</dt> <dd>漫展老司机，知名coser</dd> </dl> </div> <hr> <!--表格 --> <table border="1" cellpadding="0" cellspacing="0" width="500" height="150"> <caption>购物车</caption> <!--表头--> <thead> <tr bgcolor="lightblue"> <th>序号</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>用途</th> </tr> </thead> <tr align="center"> <td>1</td> <td>小米商务***</td> <td>99元</td> <td>1</td> <td>出外旅游</td> </tr> <tr align="center"> <td>2</td> <td>宾得ks1套机</td> <td>1500元</td> <td>1</td> <td>拍照必备</td> </tr> <tr align="center"> <td>3</td> <td>2018萤火虫年鉴</td> <td>108元</td> <td>1</td> <td>做个纪念</td> </tr> </table> <hr> <!--表单--> <h2>用户注册</h2> <form action="" method="GET"> <div> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="不少于6位"> </div> <!--另一种写法--> <div> <label>密码:<input type="password" name="password" placeholder="必须包括字母数字大小写" size="30"></label> </div> <div> <label>确认密码:<input type="password" name="password" placeholder="必须包括字母数字大小写" size="30"></label> </div> <div> <!--单选按钮 每组的name属性必须相同--> <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"><label for="female">女</label> </div> <div> <!--复选框 每组name属性必须相同 应该使用数组语法 能选择多个文本--> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="smoke" id="smoke"><label for="smoke">抽烟</label> <input type="checkbox" name="hobby[]" value="coding" id="coding"><label for="coding">写代码</label> </div> <div> <!--下拉列表--> <label for="edu">毕业的学校:</label> <select name="" id="edu" value=""> <option value="1">清华大学</option> <option value="2" selected>北京大学</option> <option value="3">复旦大学</option> </select> </div> <div> <!--文本域 多行文本框--> <label for="common">请留言:</label> <textarea name="" id="common" cols="30" rows="10" placeholder="不超过100字" value=""></textarea> </div> <!--按钮--> <input type="submit" value="提交"> <!--重置--> <input type="reset" value="重置"> <button type="button">注册</button> </form> <!--图片与媒体--> <img src="" alt="佐拉" width=""> <video src="" controls="controls" width="" height=""></video> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
上述代码涉及的知识点总结：
一.<!DOCTYPE html>声明为 HTML5 文档
二.<head>中常用的标签
<meta>定义网页编码格式
<title>定义网页文档标题
三.<body>中常用的标签
<div>定义区块
<h1>~<h6>标题元素，随着数字的增大标题字体变小
<p>定义一个段落
<hr>定义水平分隔线
<ul>定义无序列表
<ol>定义有序列表
<li>定义列表项
<dl>自定义列表，以<dt>开始,<dd>结束,常用作名词解释.
<table>定义表格
<caption>定义表格标题
<thead>定义表格的页眉
<tr>定义表格的行
<td>定义表格单元
<th>定义表格的表头
<form>定义表单
<input>定义输入域，type类型可为text,password等
<label>定义了 <input> 元素的标签，一般为输入标题
<img>定义图像
实例
<img src="https://ww3.sinaimg.cn/mw1024/006rfkSogw1fazof5uprhj31901o0qv6.jpg" alt="佐拉" width="200">
运行实例 »
点击 "运行实例" 按钮查看在线实例
<video>定义视频
实例
<video src="https://rbv01.ku6.com/eD-afSSmRPRCRQ3QoFzelA.mp4" controls="controls" width="400" height="500"></video>
运行实例 »
点击 "运行实例" 按钮查看在线实例