准备工具:
1. Sublime Text (Version3.1.1, Build 3176 下载地址:http://www.sublimetext.com/3)
2. Emmet插件(如果Tab快捷键无法使用,考虑是否需要安装Emmet插件)
安装方法:在Package Control官网复制SUBLIME TEXT3的代码
(https://packagecontrol.io/installation)
通过快捷键ctrl+`打开控制台,将上面看到的代码复制进去按Enter键就可以了。
注意:官网的这段代码是会不断更新的,所以不要从别的地方复制
~~~~~~~~~~~~~~以上参考自简书文章 https://www.jianshu.com/p/6768a4046bd9
~~~~~~~~~~~以下为HTML相关的基础知识~~~~~~~~~~~
“注释快捷键:Ctrl+/”
“取消注释快捷键:Ctrl+Shift+/”
“复制快捷键:Ctrl+Shift+D”
“自动补全:xx+Tab”
“换行:<br>”
“水平线:<hr>”
“空格: ”
文本输入框
<input type="text" name="mobilePhone" value="请输入手机号“>
密码输入框
<input type="password" name="password" value="">
选择框(可多选,以name值来分组)
<input type="checkbox" name="hobby" value="1">踢足球
<input type="checkbox" name="hobby" value="2">打篮球
<input type="checkbox" name="hobby" value="3">羽毛球
单选框(以name值来分组)
<input type="radio" name="gender">男生
<input type="radio" name="gender">女生
<input type="radio" name="gender">未知
按钮
<input type="button" value="百度一下">
文件上传
<input type="file">
下拉框
<select>
<option value="0">请选择--</option>
<option value="1">三年一班</option>
<option value="2">三年二班</option>
<option value="2">三年三班</option>
</select>
超链接
<a href="http://www.baidu.com">百度首页</a>
表格:行<tr></tr>、列<td></td>、表格线border
<table border="1" bgcolor="pink">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第13</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
</table>
图片
<img src="https://www.baidu.com/img/bd_logo1.png">
有序列表
<ol>
<li>a</li>
<li>b</li>
<jli>c</li>
</ol>
无序列表
<ul>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
文本域
<textarea rows="10" cols="20></textarea>
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
加粗标签
<b>Hello World</b>
label标签:增加属性、样式
<input type="radio" name="gender"><label> 男生 </label>
<input type="radio" name="gender"><label> 女生 </label>
<input type="radio" name="gender"><label> 未知 </label>
段落
<p>段落1</p>
<p>段落2</p>
iframe内联框架,嵌套另一个页面
<iframe src="http://www.baidu.com" width = "600" height = "900" frameborder="0"></iframe>