一、HTML文档的基本结构
1.<!DOCTYPE html>声明文档的类型为html
2.<html lang="en">，html文档开始，lang可以不写，lang="en"浏览器支持则对网页内容进行中文翻译
3.<head>网页头部，内容用户不可见，供浏览器和搜索引擎解读，主要信息为网页内容的描述及文档声明。组成部分：【1】<title>网页标题</title>，描述网页的主要内容。【2】meta标签用来设置页面的元数据（描述），属性值有<meta charset="utf-8">（设置网页的编码格式），<meta name="description" content="网页内容描述">，<meta name="keywords" content="网页关键字">
4.<body>浏览器渲染呈现给用户的可见内容部分
<!DOCTYPE html> <html> <head> <title>html文档的基本结构及常用标签的使用</title> <meta charset="utf-8"> <meta name="keyword" content="关键字"> <meta name="description" content="网页内容描述"> </head> <body> <h1>html文档的基本结构</h1> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、常用标签
1.p段落标签
2.h1~h6标题标签
3.图片<img src="图片地址" alt="描述文本" title="图片名称">
4.<a href="链接地址">超链接</a>
5.列表：无序列表ul>li,有序列表ol>li，定义列表dl>dt>dd
6.table,thead+tr>th,tbody+tr>td,tfoot
7.form>p>label+input
8.div（本意划分），区域标签
9.span无意义标签
<h3>常用标签</h3> <p>段落标签</p> <h1>标题标签</h1> <h2>标题标签</h2> <h3>标题标签</h3> <h4>标题标签</h4> <h5>标题标签</h5> <h6>标题标签</h6> <img src="http://www.php.cn/static/images/index_banner3.gif" alt="描述文本" title="图片名称"> <a href="http://www.php.cn/">超链接</a> <ul> <li>无序列表</li> </ul> <ol> <li>有序列表</li> </ol> <dl> <dt> <dd>定义列表</dd> </dt> </dl> <table> <thead> <tr> <th>表头</th> </tr> </thead> <tbody> <tr> <td>表格</td> </tr> </tbody> </table> <form action="get/post"> <p> <label for=""></label> <input type="text"> </p> </form> <div>盒子模型</div> <span>文本</span>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、列表
1.有序列表，ol>li
<h3>有序列表</h3> <ol> <li>html</li> <li>css</li> <li>javascript</li> <li>mysql</li> <li>php</li> </ol>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.无序列表，ul>li
<h3>无序列表</h3> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ul>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.无序列表（习惯，常用于导航列表），ul>li>a
<h3>有序列表</h3> <ol> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> <li><a href="#">mysql</a></li> <li><a href="#">php</a></li> </ol>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4.定义列表（常用于名词解释），dl>dt>dd
<h3>定义列表</h3> <dl> <dt>html</dt> <dd>html是超文本标记语言</dd> </dl> <dl> <dt>php</dt> <dd>php是全球主流后端语言之一</dd> </dl>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、表格
1.table,表格最外层结构，cellpadding="5"（表格元素内边距），cellspacing="0"（边框合并），border="1"（边框线为1）,align="center"（内容剧中），bgcolor="#4ea2d6"（背景色），rowspan（跨列合并），colspan（跨行合并）
2.caption，表格标题
3.thead表格表头，结构为thead>tr>th,表头内容默认字体加粗，居中
4.tbody表格主体内容，结构为tbody>tr>td，width="宽"（只需第一行设置即可）
5.tfoot,结束部分
<h3>表格</h3> <table cellpadding="5" cellspacing="0" border="1"> <caption><h3>栏目管理</h3></caption> <thead> <tr bgcolor="#4ea2d6"> <th width="40">ID</th> <th width="50">栏目名称</th> <th width="80">添加时间</th> <th width="40">排序</th> <th width="80">操作</th> </tr> </thead> <tbody> <tr align="center"> <td>001</td> <td>HTML</td> <td>2019-7-1</td> <td>01</td> <td><a href="#">编辑</a> <a href="#">删除</a></td> </tr> <tr align="center"> <td>002</td> <td>css</td> <td>2019-7-1</td> <td>02</td> <td><a href="#">编辑</a> <a href="#">删除</a></td> </tr> <tr align="center"> <td>003</td> <td>javascript</td> <td>2019-7-1</td> <td>03</td> <td><a href="#">编辑</a> <a href="#">删除</a></td> </tr> <tr align="center"> <td>004</td> <td>php</td> <td>2019-7-1</td> <td>04</td> <td><a href="#">编辑</a> <a href="#">删除</a></td> </tr> </tbody> <tfoot> <tr align="center"> <td colspan="5">共1页，4条记录</td> </tr> </tfoot> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、表单
1.form标签用于包裹表单中的元素，并将信息通过get/post方法提交
2.表单结构p>label>input，label中for的值用于绑定input中的id，type（类型）=“username/password/email/number/date”
<form> <p> <label for="username">用户名：</label> <input type="username" name="username" id="username" placeholder="用户名不超过8字符" autofocus> </p> <p> <label for="password">密 码：</label> <input type="password" name="password" id="password" placeholder="请输入6-12位由数字、字母组成的密码" autofocus> </p> <p> <label for="email">邮 箱：</label> <input type="email" name="email" id="email" placeholder="email@qq.com" requider> </p> <p> <label for="age">年 龄：</label> <input type="number" name="age" id="age" max="99"> </p> <p> <label for="birthday">生 日：</label> <input type="date" name="birthday" id="birthday"> </p> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.select>option（选项）下拉选择框，size="1"下拉选项显示个数
<form> <p> <label for="address">地 址：</label> <select name="address" id="address" size="1"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>杭州</option> <option>西安</option> </select> </p> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4.复选框<input type="checkbox" name="sport" id="volleyball" value="volleyball" checked><label for="volleyball">排球</label>，type="checkbox"（文本框类型类型），checked默认选项
<form> <p> <label for="sport">球类运动：</label> <input type="checkbox" name="sport" id="volleyball" value="volleyball" checked><label for="volleyball">排球</label> <input type="checkbox" name="sport" id="Basketbal" value="Basketbal"><label for="Basketbal">蓝球</label> <input type="checkbox" name="sport" id="football" value="football"><label for="football">足球</label> </p> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5.单选框<input type="radio" name="sex" id="male" value="male"><label for="male">男</label>
<form> <p> <label for="male">性 别：</label> <input type="radio" name="sex" id="male" value="male"><label for="male">男</label> <input type="radio" name="sex" id="female" value="female"><label for="female">女</label> <input type="radio" name="sex" id="secrecy" value="secrecy"><label for="secrecy">保密</label> </p> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6.文本域<textarea name="text" id="text" cols="20" rows="5" maxlength="100" placeholder="不超过100字"></textarea>，cols行宽度，rows列宽，maxlength最长文本，placeholder提示内容
<form> <p> <label for="text">个性签名：</label> <textarea name="text" id="text" cols="20" rows="5" maxlength="100" placeholder="不超过100字"></textarea> </p> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7.提交按钮<input type="submit" name="submit" value="提交">等价于<button type="submit">提交</button>
重置按钮<input type="reset" name="reset" value="重置">
普通按钮<input type="button" name="button" value="按钮">等价于 <button>按钮</button>
<h3>表单</h3> <form> <p> <input type="submit" name="submit" value="提交"> <button type="submit">提交</button> <input type="reset" name="reset" value="重置"> <input type="button" name="button" value="按钮"> <button>按钮</button> </p> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
