摘要：HTML是用来编写网页的语言，定义网页的结构和内容。也叫超文本标记语言。依托于浏览器的解释编译。HTML文档是由许许多多相同或不同的标签所组成，HTML标签总...
HTML是用来编写网页的语言，定义网页的结构和内容。也叫超文本标记语言。依托于浏览器的解释编译 。
HTML文档是由许许多多相同或不同的标签所组成，HTML标签总共大约有89个之多。然而实战开发中用到的却并不多
下面是本人在学习中整理的一些实战开发中常用的html标签以及关键属性介绍，不全面却很常用欢迎各位前辈留言指正！
链接标签
<a href="链接" target="属性值">链接文本</a>
常用属性值：
target="_self"（默认值,当前窗口打开）
target="_blank" （新窗口打开）
target="_parent" （当前页面父窗口打开）
target="_top" （当前页面的顶级窗口打开）
target="内联标签中的 name 值" （在内联框架中打开）
图像标签
<img src="图片路径" alt="图片描述" width="图片宽度" height="图片高度">
备注说明：
为避免图片变形宽和高只设置一个另一个自动等比缩放
视频标签
<video src="视频文件地址" controls width="500" height="280" poster="图片地址"></video>
备注说明：
controls 显示播放控件按钮，不需要删除不加即可
poster="" 添加视频封面海报图片
列表
<ul><li>无序列表</li></ul> <ol><li>有序列表</li></ol> <dl> <!-- 自定义列表 --> <dt>自定义列表标题</dt> <dd>自定义列表介绍</dd> </dl>
备注说明：
<li>被<ul>标签包裹时为无序列表，实际效果每个<li>默认以实心黑色圆点开头
<li>被<ol>标签包裹时为有序列表，实际效果每个<li>默认以数字1开头
<dl>标签中为自定义列表，其中<dt>为自定义列表标题，<dd>为自定义列表介绍详情
<dt><dd>两个标签可多层嵌套
表格
<table border="边框" width="表格宽度" cellspacing="0" cellpadding="5"> <caption>表格标题</caption> <thead> <!-- 表头 --> <tr bgcolor="green" > <!-- 行标签 --> <th>列（单元格表头）</th> <th>列（单元格表头）</th> <th >列（单元格表头）</th> </tr> </thead> <tbody align="center"> <!-- 表主体 --> <tr bgcolor="green"> <!-- 第一行 --> <td colspan="" align="center">列（单元格）</td> <td colspan="" align="center">列（单元格）</td> <td rowspan="2" align="center" >列（单元格）纵跨两行</td> </tr> <tr bgcolor="green"> <!-- 第二行 --> <td colspan="" align="center">列（单元格）</td> <td colspan="" align="center">列（单元格）</td> </tr> </tbody> <tfoot> <!-- 表尾 --> <tr bgcolor="green"> <td colspan="3" align="center">备注：（表尾横跨三列）</td> </tr> </tfoot> </table>
备注说明：
cellspacing="0" （控制表格线）默认单元格之间的分割线为镂空实线，通过此属性可以设置单元格分割线为单实线
cellpadding=“5”（控制单元格中内容显示边框内）默认单元格中的内容自适应单元格大小紧贴着分割线显示
<th><td> 为表格单元格，一个<td>表示一个单元格，<th>同理。
不同之处在于<th>单元格中的内容会默认加粗显示通常用于表头，<td>不会自动加粗
表单
<form action="login.php" method="POST"> <p> <label for="username">账号:</label> <input type="text" id="username" name="username" value="peter zhu"> </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="example@email.com"> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="">课程</label> <!-- 下拉列表 --> <select name="" id=""> <optgroup label="前端"> <!-- 下拉列表分组 --> <option value="">请选择</option> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laravel</option> </optgroup> </select> </p> <p> <label for="">爱好:</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">撸代码</label> <!-- checked (默认选中)默认选中撸代码 --> <input type="checkbox" name="hobby[]" value="movies" id="movies"><label for="movies">看片</label> <!-- name="hobby[]" (为了方便服务器处理不要直接写成字符串，建议在字符串后面加上[]) --> </p> <p> <label for="male">性别:</label> <input type="radio" name="gender" id="male"><label for="male">男生</label> <input type="radio" name="gender" id="female"><label for="female">女生</label> <input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> <input type="button" name="reset" value="按钮"> <button type="button">注册</button> </p> </form>
备注说明：
<form>属性
action="" (提交到某个程序处理)
method="" (提交的传值方式)
<label>属性
for="username" （模糊点击输入框加了此属性点击输入框前方文本自动选中输入框输入）for属性值需要等于 input 标签中的 id 值，进行绑定否则无效
<input>属性
type="password" (时用户输入的文本回隐藏显示)
type="email" (时用户输入的文本必须是邮箱格式 example@email.com)
type="number" (时用户输入的文本必须是数字)
type="txt"（时用户输入的问普通txt文本）
type="checkbox" (定义input为复选框)
type="radio" (定义input为单选框选框)
内联框架标签
<iframe src="链接地址" frameborder="设置内联框架边框" width="宽" height="高" name="自定义值"></iframe>
备注说明：
可与a标签配合使用实现网站后台管理
src="链接地址" 在内联框架中打开某个链接页面
srcdoc="某个文本标签" 在内联框架中打开某个文本标签中的内容与 src 两者二选一使用
name="自定义值" （a 标签的 target属性可直接调用该 name 值实现链接地址在内联框架中打开）src属性与该属性并存时 src 地址做默认打开页面
容器
<div>常用的块级容器</div>
说明：
独立占取一行，并且自动换行
<span>常用的内联容器</span>
说明：
独立一个块，默认一行显示，标签中不建议直接放内容可以嵌套一些标签
课外整理html5常用语义化标签
<header>头部</header>
<!-- 头部标签，header 英文释义页眉的意思 -->
<nav>导航</nav>
<!-- 导航标签 nav 英文释义导航的意思 -->
<main>主体</main>
<!-- 主体标签 main 英文释义主要的，最重要的意思 -->
<article>左边内容区</article>
<!-- 内容标签 article 英文释义文章的意思 -->
<aside>侧边栏</aside>
<!-- 侧边栏标签 aside 英文释义在一边旁边的意思 -->
<footer>底部</footer>
<!-- 底部标签 footer 英文释义页脚页尾的意思 -->
本篇文档由 zmboy 从日常学习中精心整理而出，仅包含html部份，其中部分css样式属性仅为方便解释而添加。仅做参考！有任何疑问均可留言评论
