sublime text 安装emmet插件 工程级文件的话 webStorm
英文状态下! tab 或者 ctr +e 扩展，生成网页文件结构
a*3 扩展 生成三个a标签
一、html基本概念
1、标签：在尖括号中被括起来的部分。通常成对出现，也会单独出现。
例如：<html></html><p></p> 单独出现的标签，由一个斜杠作为日其结束：<img/> <br/>
2、元素：标签与标签内的内容构成一个元素。
例如：<title>百度一下，你就知道</title>
3、属性：在标签的内部除了有标签的名字外还有标签的属性。
例如：<img src="mw.jpg alt="图片无法正常显示"/>
二、html文件结构
index.html/index.htm
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8"/><!--注意保存文件时的编码方式和charset中的编码方式相同，否则会出现乱码-->
<title>首页</title>
</head>
<body>
</body>
</html>
三、html标签
1、标题：h1 ~h6 段落：p(块级元素） 段内换行：<br/> 空格： <pre></pre>：预留格式标签，其内的空格和换行都会被保留 <span></span>组合行内元素 组合表签内的元素，以便通过css样式来格式化，如<p> adhao<span>akdj</span></p>
水平线<hr/>
2、超链接a <a href=" http:www.baidu.com"> 文字或者图片</a> ，<a href = "index.html">文字或者图片</a> <a href="#"></a>
a是行内元素，可以放在p里，或者<br/>
3、<img src="路径，绝对或者相对" aalt=""/>
绝对路径：从盘符开始的路径
相对路径：以当前网页文件所在的文件夹作为基准
4、区域<div></div> <div id = "container"><div id = "navbar"></div></div>
5、无序列表 ul 列表项 li ul>li*3
6、有序列表 ol 列表项 li
7、表格 ：<table></table> 行：<tr></tr> 每行的单元格：<td></td> 表头：<th></th>
例如：<table>
<tr> <th>姓名</th><th>年级</th><th>班级</th></tr>
<tr><td>张三</td><td>4年假</td><td>5班</td></tr>
</table>
8、表单：是一个区域，添加表单元素，采集用户提交的信息。表单标签：<form action = " 提交给哪一个后台的页面">这里添加保单元素</form>
表单元素：①文本框、密码框
<input type = "text/password" name = " username/userpasw"/>name属性作用，表单提交信息给后端后，后端需要知道是哪个表单元素提交的数据，通过name就可以知道
②按钮
提交按钮
<input type="submit" value="提交” name="ua"/>
重置按钮
<input type="reset" value="" name=""/>
③单选框和多选框
男<input type="radio" value="boy" name="gender"/>
女<input type=“radio” value="girl" name="gender"/>
value是这一项的内容是什么，单选框的两个name属性要相同，这样才会两个里选仅一个
<input type="checkbox" value="1" name="music" checked="checked"/>音乐
<input type="checkbox" value="2" name="art"/>艺术
……
④下拉列表框
<select>
<option selected="selected">足球</option>
<option >篮球</option>
</select>
⑤文本域
<textarea rows="行数" cols="列数">在这里输入内容</textarea>
四、sublime的基本操作
1、alt+shift+1/2，分屏/单屏
2、行号左侧有个向下的箭头，可以折叠代码
3、ctrl+D选择一个单词 Ctrl+L选择一行 多处选择：按下ctrl，鼠标多处点击，光标会在多处闪烁，可以同时进行编辑
4、ctrl+N新建文件，然后按照html文件的格式保存ctrl+s 英文! tab 或ctrl e扩展，生成HTML文件的基本结构
5、生成注释：选择代码，ctrl+/生成注释，ctrl+shift+/撤销注释
6、标签的扩展：img扩展，会将属性也补充好 p{这里输入段落的内容}扩展，会生成正确的包含内容的标签，img[src=p.jig]扩展，属性也扩展出来了
7、标签的嵌套
p>span扩展，p是上级标签，span是下级标签 p>img+a img和a是同级标签
8、标签的分组
(div>p)+(div>img)扩展
9、快速生成多个元素 ul>li*3
4481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
