一、HTML基础框架
sublime生成快捷键：html:5 + tab键 或 !+tab键
<!DOCTYPE html> <!--文档类型/版本，此处为HTML5--> <html lang="en"> <!--默认语言，en即英文--> <head> <meta charset="UTF-8"> <!--字符集，常用UTF-8、GBK、GB2312等--> <title>标题</title> <!--文档标题，即标签页标题--> </head> <body> 页面内容 </body> </html>
二、标签分类
1. 双标签 以<>开头，</>结尾，如：<head></head>
2. 单标签 如：<br />
三、常用标签
1. 排版标签
<body> <!-- 标题标签 --> <h1>标题一</h1> <h2>标题二</h2> <h3>标题三</h3> <h4>标题四</h4> <h5>标题五</h5> <h6>标题六</h6> <!-- 段落标签 --> <p>这是一个段落</p> <!-- 水平线标签，这是一个单标签 --> <hr> <!--<hr>和<hr />并无区别，加上/只是为了符合W3C的标准--> <!-- 换行标签 --> <br> <!-- 分区、布局 --> <div>我是布局一</div> <div>我是布局二</div> <span>布局三</span> <span>布局四</span> </body>
2. 文本格式化标签
<body> <b>加粗</b> <strong>强调突出（推荐）</strong> <i>斜体</i> <em>斜体（推荐）</em> 原价：<s>￥99</s> <!--删除线--> 原价：<del>￥100</del> <!--删除线，推荐--> <u>下划线一</u> <ins>下划线二（推荐）</ins> </body>
3. 图像标签（单标签）
<body> <!-- 基本图像插入方式 --> <img src="F:/test.png"> <!-- 带有alt的图像 --> <img src="F:/test.png1" alt="图像不能显示时的替换文本"> <!-- 带有title的图像 --> <img src="F:/test.png" title="鼠标悬停时显示的文本"> <!-- 指定图像宽度、高度:一般指定宽度或者高度就行，图像会等比缩放 --> <img src="F:/test.png" width="100" height="50"> <!-- 给图像加边框 --> <img src="F:/test.png" border="1"> </body>
4. 链接标签
<body> 文本链接：<a href="https://www.baidu.com/" target="_blank">百度</a> 图片链接：<a href="https://www.baidu.com/" target="_blank"><img src="baidu.png"></a> <!-- href：外部链接使用 https://www.baidu.com/ 这种格式；内部链接使用 index.html 这种格式即可；链接页面没做好时可以用#代替，如：<a href="#">我的地址</a> target：目标窗口弹出方式，默认self表示当前窗口打开，blank表示在新窗口打开 --> </body>
5. 锚点定位：快速定位到文档置顶位置
<body> <h3 id=catalog>目录</h3> <hr> 1. 早年经历<br> 2. 演艺经历<br> 3. 个人生活<br> <a href="#products">4. 主要作品</a><br> <!--快速定位到文档指定位置--> <a href="#live">5. 社会活动</a><br> <h3>早年经历</h3> <p>早年经历1</p> <p>早年经历2</p> <h3>演艺经历</h3> <p>经历1</p> <p>经历2</p> <h3>个人生活</h3> <p>生活1</p> <p>生活2</p> <h3 id="products">主要作品</h3> <p>作品1</p> <p>作品2</p> <p><a href="#catalog">回到顶部</a></p> <h3 id="live">社会活动</h3> <p>社会活动1</p> <p>社会活动2</p> <p><a href="#catalog">回到顶部</a></p> </body>
6. base标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <base target="_blank"> <!--使页面中所有链接均带有target属性，也可以指定其他属性--> <title>标题</title> </head> <body> <a href="https://www.baidu.com">百度</a> <a href="https://www.sina.com.cn/">新浪</a> <a href="http://www.sohu.com/">搜狐</a> <a href="https://www.163.com/">网易</a> </body> </html>
7. 特殊字符
8. 注释标签
<!-- 这里是注释 -->
9. 列表
<body> <!-- ul和ol标签中只能放li标签，但li标签中可以放任何标签 --> <!-- 无序列表 --> <ul> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> </ul> <!-- 有序列表：默认带序号1、2、3 --> <ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <!-- 自定义列表 --> <dl> <dt>湖南</dt> <dd>长沙</dd> <dd>常德</dd> </dl> <dl> <dt>广东</dt> <dd>珠海</dd> <dd>深圳</dd> </dl> </body>
10. 表格
<body> <!-- align设置表格在网页中的水平对齐方式； cellspacing设置单元格边框与单元格边框之间的间距； cellpadding设置单元格内容与单元格边框之间的间距； colspan跨列合并单元格 rowspan跨行合并单元格 --> <table width="300" align="center" border="1" cellspacing="0" cellpadding="0"> <caption>个人信息表</caption> <!--表格标题：紧跟table标签后，居中显示在表格之上--> <thead> <!--表头标签--> <tr> <th>班级</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <!--行--> <td rowspan="2">python 1班</td> <!--rowspan跨行合并，2表示合并2格--> <td>陈鸿宇</td> <td>男</td> <td>28</td> </tr> <tr> <td>谢春花</td> <td>女</td> <td>23</td> </tr> </tbody> </table> </body>
11. 表单标签
在HTML中，一个完整的表单通常由表单控件（也称表单元素）、提示信息和表单域3个部分组成。
<body> <!-- form表单域:将所填写的信息提交给服务器，action（url地址），method请求方式（get、post等） --> <form action="" method="get" name=""> <table width="400" border="0" cellpadding="0" cellspacing="0" align="center"> <caption><h4>抓紧学习</h4></caption> <tr height="40"> <!-- input输入控件 type：text单行文本输入框；password密码输入框；radio单选按钮；checkbox复选框；button普通按钮；submit提交按钮；reset重置按钮；image图像形式的提交按钮；file文件域 name：控件名称 value：input空间中的默认文本值 size：input控件在页面中的显示宽度 checked：定义选择控件默认被选中的项 maxlength：控件允许输入的最多字符数 --> <!-- label用于绑定一个表单元素，点击label标签时，被绑定的表单元素就会获得输入焦点，for规定label与哪个元素绑定 --> <td><label for="username">用户名</label></td> <td><input type="text" value="请输入用户名" maxlength="15" id="username"></td> </tr> <tr height="40"> <td>密码</td> <td><input type="password"></td> </tr> <tr height="40"> <td>性别</td> <td> <!-- radio：如果是一组，必须命名为相同的名字，即name --> 男 <input type="radio" name="sex" checked="checked"> 女 <input type="radio" name="sex"> 未知<input type="radio" name="sex"> </td> </tr> <tr height="40"> <td>学习课程</td> <td> java <input type="checkbox" name="lesson"> python <input type="checkbox" name="lesson"> .net <input type="checkbox" name="lesson"> </td> </tr> <tr height="40"> <td>籍贯</td> <td> <!-- 下拉菜单 --> <select name="native" id="native"> <option value="">北京</option> <option value="" selected="selected">湖南</option> <option value="">广东</option> </select> </td> </tr> <tr height="40"> <td></td> <td></td> </tr> <tr height="40"> <td>自我介绍</td> <td> <!-- textarea文本域：输入大量信息，cols每行最多输入字数，rows显示行数 --> <textarea name="introduce" id="introduce" cols="30" rows="5">不支持富文本</textarea> </td> </tr> <tr height="40"> <td></td> <td> <input type="button" value="注册"> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="image" src="btn.png "> </td> </tr> </table> </form> </body>