W3C : http://www.w3school.com.cn/MDN: https://developer.mozilla.org/zh-CN/
1.0 安装Sublime
其实我是喜欢用Visual Studio Code的,而且用的也是Visual Studio Code。但是培训机构的视频、教学资料等,都是用的Sublime。所以学着用。
两个软件使用起来开发的快捷键没有多大区别。
下载链接:http://www.sublimetext.cn/
安装成功后,进行汉化。
只有人去适应工具,而不是工具适应人
2.0 汉化Sublime Text 3
打开SublimeText 3 软件。
如果默认的Sublime 3中没有Package Control。
使用Ctrl+`
快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
如果顺利的话,此时就可以在Preferences菜单下看到Package Settings和Package Control两个菜单了。
打开“package control” ,在弹出的下框输入“install”,搜索会自动联想到“install package”点击进入。
等待系统自动搜索完成,弹出安装对话框。
打开“package control” ,在搜索框中输入“chinese”,在弹出的下拉菜单中找到“ChineseLocalizations”,点击安装。如图:
等待系统自动安装完成。系统安装完成后会出现如下界面,然后菜单等英文就会自动切换成中文界面。如图:
想要切换会原本的英文状态,在菜单栏中找到“帮助”,在弹出的下拉菜单中,选择“Language”,在弹出的下拉菜单中,选择“English”,即可。
3.0 快捷键
放大缩小代码:ctrl+鼠标滚轮 或者 ctrl+加号(减号)
html5标签: html:5+tab键 或者 !+tab键
实现这个功能需要增加Emmet插件。
安装后会显示:
进入key Bingding
输入:
[{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}]
保存即可,如果提示PyV8错误,Sublime Text手动安装pyv8-binaries,如下操作放入即可。下载链接:https://github.com/emmetio/pyv8-binaries
解压备用。
打开Sublime:
最后做成如下样子,重启Sublime即可:
如果想设置代码代码自动格式化快捷键,可以设置如下:
[
{
"keys": [
"tab"
],
"args": {
"action": "expand_abbreviation"
},
"command": "run_emmet_action",
"context": [
{
"key": "emmet_action_enabled.expand_abbreviation"
}
]
},
{
"keys": [
"ctrl+shift+f"
],
"command": "reindent"
}
]
设置浏览器默认打开快捷键。
"keys": [ "alt+b" ], "command": "open_in_browser" }
需要安装view in browser插件。
sublime快捷操作emmet语法
Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。
生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成 <div></div>
如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
如果有父子级关系的标签,可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签,用 + 就可以了 比如 div+p
如果生成带有类名或者id名字的, 直接写 .demo 或者 #two tab 键就可以了
如果生成的div 类名是有顺序的, 可以用 自增符号 $
.demo$*3
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
CSS中,
w200+tab键:width:200px
h200+tab键:height:200px
4.0 瞄点
通过点击上某行标题,跳转到当前页面的某一个位置。
新建test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>标题标题标题1</h3>
<h3>标题标题标题1</h3>
<a href="#tab1"><h3>标题标题标题1</h3></a>
<em></em>
<p >1981年出演电影处女作《彩云曲》 [2] 。1983年主演的武侠剧《神雕侠侣》在香港获得62点的收视纪录 [3-4] 。<br/>
1991年创办天幕电影公司 [5] 。1994年担任剧情片《天与地》的制片人 [6] 。<br/>
2000年凭借警匪片《暗战》获第19届香港电影金像奖最佳男主角奖 [7] 。<br/>
2004年凭借警匪片《无间道3:终极无间》获第41届台湾金马奖最佳男主角奖 [8] 。<br/>
2005年获得香港UA院线颁发的全港最高累积票房香港男演员”奖 [9] 。<br/>
2006年获得釜山国际电影节亚洲最有贡献电影人奖 [10] 。<br/>
2011年主演剧情片《桃姐》,并凭借该片获台湾金马奖最佳男主角奖、香港电影金像奖最佳男主角奖 [11] ;<br/>
担任第49届台湾电影金马奖评审团主席 [12] 。2017年主演警匪动作片《拆弹专家》 [13] ;获世界杰出华人奖。 [14]<br/>
1985年发行首张个人专辑《只知道此刻爱你》 [15] 。<br/>
1990年凭借专辑《可不可以》在歌坛获得关注 [16] 。<br/>
1994年获得十大劲歌金曲最受欢迎男歌星奖。<br/>
2000年被《吉尼斯世界纪录大全》评为“获奖最多的香港男歌手” [17] 。<br/>
2004年第六次获得十大劲歌金曲最受欢迎男歌星奖。他演唱的《忘情水》<br/>
《一起走过的日子》《谢谢你的爱》《冰雨》《爱你一万年》《世界第一等》等歌曲成为其歌唱生涯的代表作品。<br/>
演艺事业外,刘德华关心公益慈善。1994年创立刘德华慈善基金会 [18] 。2000年被评为世界十大杰出青年 [19] 。<br/>
2005年发起亚洲新星导计划 [20] 。2008年被委任为香港非官守太平绅士 [21] 。<br/>
2016年连任中国残疾人福利基金会副理事长</p>
<p id="tab1">刘德华出生于香港新界,在家中排行老四,幼时随家人搬到了九龙钻石山的木屋区居住,<br/>
并和姐弟一起帮助家里打理卖稀饭的生意 [22] 。1973年,刘德华随家人搬入香港蓝田邨第15座14楼 [23] 。<br/>
刘德华从黄大仙天主教小学毕业后升读可立中学 [24] 。<br/>
在可立中学读书期间,刘德华积极参加校内学校剧社的表演,在老师杜国威的指导下学习戏剧方面的知识。<br/>
此外,他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E(中文读本A)的成绩。<br/>
中六上学期后,他到香港电视广播有限公司的艺员训练班受训,从而开始了演艺之路 [25] 。</p>
</body>
</html>
beae标签
设置是否全页为新窗口中打开链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<base target="_parent">
</head>
<body>
…………
</body>
</html>
6.0 预格式化文本pre标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<pre>
静夜思
床前明月光,
疑是地上霜。
举头望明月,
低头思故乡。
</pre>
</body>
</html>
特点是:代码中怎么写,界面上就怎么显示,不需要换行或者空格标签。缺点是不能整体控制。少用。
7.0 特殊字符
# html 常用特殊字符大全https://www.jianshu.com/p/de9214cbe33bHTML5网页特殊字符https://www.jianshu.com/p/2bb0d3de7037
8.0 三个表(表格、表单、列表)
8.1 表格(table)
<!DOCTYPE html>
<html lang="ch-ZN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500px" height="200px" align="right">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>张三丰</td>
<td>28</td>
<td>男</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ch-ZN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="10px">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>张三丰</td>
<td>28</td>
<td>男</td>
</tr>
</table>
</body>
</html>
表头标签caption
<!DOCTYPE html>
<html lang="ch-ZN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="10px">
<caption>
<h3>信息统计表</h3>
</caption>
<tr>
<th>姓名</th>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>张三丰</td>
<td>28</td>
<td>男</td>
</tr>
</table>
</body>
</html>
合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="240" align="center" cellspacing="0">
<caption> 个人简历 </caption>
<tr>
<td>刘德华</td>
<td>男</td>
<td>18</td>
<!-- 目标单元格 先上后下 -->
<td rowspan="2">目标单元格 先上后下</td>
</tr>
<tr>
<td>身高 180</td>
<td>汉族</td>
<td>已婚</td>
<!-- <td>照片</td> 这个单元格是多余的 -->
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="240" align="center" cellspacing="0">
<caption> 个人简历 </caption>
<tr>
<td>刘德华</td>
<td>男</td>
<td>18</td>
<!-- 目标单元格 先上后下 -->
<td rowspan="2">照片</td>
</tr>
<tr>
<td>身高 180</td>
<td>汉族</td>
<td>已婚</td>
<!-- <td>照片</td> 这个单元格是多余的 -->
</tr>
<tr>
<td>个人作品</td>
<!-- 第二个单元格是目标单元格 -->
<td colspan="3">个人作品</td>
</tr>
<tr>
<td>个人简历</td>
<td colspan="3">个人简历</td>
</tr>
</table>
</body>
</html>
表格划分结构
头、身体、脚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" align="center" width="500">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘德华</td>
<td>男</td>
<td>55</td>
</tr>
<tr>
<td>刘若英</td>
<td>女</td>
<td>35</td>
</tr>
<tr>
<td>刘晓庆</td>
<td>女</td>
<td>65</td>
</tr>
<tr>
<td>刘三姐</td>
<td>女</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>信息地址</td>
<td colspan="2"> 北京市金燕龙校区举办演唱会</td>
</tr>
</tfoot>
</table>
</body>
</html>
- <thead></thead>:用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签!
- <tbody></tbody>:用于定义表格的主体。放数据本体 。
- <tfoot></tfoot>放表格的脚注之类。
- 以上标签都是放到table标签中。
8.2 列表
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
- <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
- <li>与</li>之间相当于一个容器,可以容纳所有元素。
- 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!
有序控件
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
自定义列表
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
综合案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>1. 无序列表</h2>
您喜欢的水果有哪些?
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>大白菜</li>
</ul>
<h2>2. 有序列表 </h2>
奥运金牌榜
<ol>
<li>中国</li>
<li>英国</li>
<li>俄罗斯</li>
<li>美国</li>
</ol>
<h2>3. 自定义列表 </h2>
地区:
<dl>
<dt>北京</dt>
<dd>昌平区</dd>
<dd>海淀区</dd>
<dd>大兴区</dd>
<dd>东城区</dd>
<dt>山东</dt>
<dd>威海</dd>
<dd>潍坊</dd>
<dd>济南</dd>
<dd>青岛</dd>
</dl>
</body>
</html>
8.3 表单
现实中的表单,类似我们去银行办理信用卡填写的单子。 如下图
input 控件
<input type="属性值" value="你好">
- input 输入的意思
- <input /标签为单标签
- type属性设置不同的属性值用来指定不同的控件类型
- 除了type属性还有别的属性
1. type 属性
- 这个属性通过改变值,可以决定了你属于那种input表单。
- 比如 type = 'text' 就表示 文本框 可以做 用户名, 昵称等。
- 比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。
用户名: <input type="text" />
密 码:<input type="password" />
2. value属性 值
用户名:<input type="text" name="username" value="请输入用户名">
- value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字,就可以通过这个value 来设置。
3. name属性
用户名:<input type="text" name=“username” />
name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。
- name属性后面的值,是我们自己定义的。
- radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
- name属性,我们现在用的较少, 但是,当我们学ajax 和后台的时候,是必须的。
4. checked属性
- 表示默认选中状态。 较常见于 单选按钮和复选按钮。
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
上面这个,表示就默认选中了 男 这个单选按钮。
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- type text 是一个文本框 -->
用户名: <input type="text" value="请输入用户名" name="username" /> <br />
昵称: <input type="text" value="请输入昵称" name="nicheng" /> <br />
<!-- type text 是一个密码框 -->
密码: <input type="password" name="pwd" /> <br />
性别:
男 <input type="radio" name="sex" />
女 <input type="radio" name="sex" checked="checked" />
未知 <input type="radio" name="sex" /> <br />
爱好:
睡觉 <input type="checkbox" name="hobby" checked="checked" />
爬山 <input type="checkbox" name="hobby" />
篮球 <input type="checkbox" name="hobby" />
足球 <input type="checkbox" name="hobby" /> <br />
<!-- 普通按钮需要些value值 -->
<input type="button" value="获取短信验证码" />
<input type="submit" value="提交所填" />
<input type="reset" value="重置所填" />
<!-- 图片提交按钮 里面必须包含 src 属性 -->
<input type="image" src="images/btn.png" /> <br />
上传头像:
<!-- 文件域 上传文件用的-->
<input type="file" />
</body>
</html>
执行:
5. label标签(理解)
目标:
label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
概念:
label 标签为 input 元素定义标注(标签)。
作用:
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢?
- 第一种用法就是用label直接包括input表单。
<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>
适合单个表单选择
- 第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面
label 的for绑定input的id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4>第一种用法,label直接包含 表单</h4>
<label> 用户名: <input type="text" /> </label>
<h4>第二种方法,通过for 和 id 来控制 </h4>
<label for="nc"> 昵称: </label> <input type="text" id="nc" />
</body>
</html>
6. textarea控件(文本域)
<img src="media/textarea.png" />
- 语法:
<textarea >
文本内容
</textarea>
-
作用:
通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数" rows="显示的行数" 实际开发不用
文本框和文本域区别
表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
---|---|---|---|---|
input type="text" | 文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea | 文本域 | 可以显示多行文本 | 双标签,默认值写到标签中间 | 留言板 |
7. select下拉列表
目的:
如果有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表.
<img src="media/sele.png" />
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
- 注意:
- <select> 中至少包含一对 option
- 在option 中定义selected =" selected "时,当前项即为默认选中项。
- 但是我们实际开发会用的比较少
3. form表单域
-
收集的用户信息怎么传递给服务器?
通过form表单域
-
目的:
在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
**语法: **
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
注意:
每个表单都应该有自己表单域。我们现在做页面,不写看不到效果,但是 如果后面学 ajax 后台交互的时候,必须需要 form表单域。
8. 团队约定
元素属性
- 元素属性值使用双引号语法
- 元素属性值可以写上的都写上
- 推荐:
<input type="text" />
<input type="radio" name="name" checked="checked" />
- 不推荐:
<input type=text />
<input type='text' />
<input type="radio" name="name" checked />
9.0 综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世纪佳缘-你在我也在</title>
</head>
<body>
<table width="600" align="center">
<caption> <h4> 青春不常在,抓紧谈恋爱 </h4></caption>
<!-- 1 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked="checked" /><img src="images/man.jpg" /> 男
<input type="radio" name="sex" /><img src="images/women.jpg" /> 女
</td>
</tr>
<!-- 2 -->
<tr>
<td>生日</td>
<td>
<!-- 年份的 -->
<select>
<option>--请选择年--</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>
<!-- 月份的 -->
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- 日子 -->
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<!-- 3 -->
<tr>
<td>所在地区</td>
<td>
<input type="text" value="北京思密达" />
</td>
</tr>
<!-- 4行 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" checked="checked"/> 未婚
<input type="radio" name="marry" /> 已婚
<input type="radio" name="marry" /> 离婚
</td>
</tr>
<!-- 5行 -->
<tr>
<td>学历</td>
<td>
<input type="text" value="幼儿园">
</td>
</tr>
<!-- 6行 -->
<tr>
<td>月薪</td>
<td>
<input type="text" value="10000-20000">
</td>
</tr>
<!-- 7行 -->
<tr>
<td>手机号码</td>
<td>
<input type="text">
</td>
</tr>
<!-- 8行 -->
<tr>
<td>昵称</td>
<td>
<input type="text" >
</td>
</tr>
<!-- 9行 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="love" /> 妩媚的
<input type="checkbox" name="love" /> 可爱的
<input type="checkbox" name="love" /> 小鲜肉
<input type="checkbox" name="love" /> 老腊肉
<input type="checkbox" name="love" /> 都喜欢
</td>
</tr>
<!-- 10 行 -->
<tr>
<td>自我介绍</td>
<td>
<textarea> 自我介绍 </textarea>
</td>
</tr>
<!-- 11行 -->
<tr>
<td></td>
<td>
<input type="image" src="images/btn.png" />
</td>
</tr>
<!-- 12 行 -->
<tr>
<td></td>
<td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td>
</tr>
<!-- 13行 -->
<tr>
<td></td>
<td>
<a href="#">我是会员,立即登录</a>
</td>
</tr>
<!-- 14 -->
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
执行:
END