【Web前端】1.0 Sublime的使用、HTML知识点

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 软件。

image.png

如果默认的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”点击进入。

image.png

等待系统自动搜索完成，弹出安装对话框。

image.png

打开“package control” ，在搜索框中输入“chinese”，在弹出的下拉菜单中找到“ChineseLocalizations”，点击安装。如图：

image.png

等待系统自动安装完成。系统安装完成后会出现如下界面，然后菜单等英文就会自动切换成中文界面。如图：

image.png

想要切换会原本的英文状态，在菜单栏中找到“帮助”，在弹出的下拉菜单中，选择“Language”，在弹出的下拉菜单中，选择“English”，即可。

image.png

3.0 快捷键

放大缩小代码：ctrl+鼠标滚轮或者 ctrl+加号(减号)
html5标签： html:5+tab键或者 !+tab键

image.png

实现这个功能需要增加Emmet插件。

image.png

安装后会显示：

image.png

进入key Bingding

image.png

输入：

[{"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

image.png

解压备用。

image.png

打开Sublime：

image.png

最后做成如下样子，重启Sublime即可：

image.png

如果想设置代码代码自动格式化快捷键，可以设置如下：

[{"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 三个表(表格、表单、列表)

image.png

8.1 表格(table)

image.png

<!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>

image.png

<!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>

image.png

表头标签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>

image.png

<!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>

image.png

表格划分结构
头、身体、脚

<!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>

image.png

<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>

image.png

自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...
</dl>

image.png

综合案例：

<!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>

image.png

8.3 表单

现实中的表单，类似我们去银行办理信用卡填写的单子。如下图

image.png

input 控件

<input type="属性值" value="你好">

input 输入的意思
<input /标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性

image.png

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="data:images/btn.png"   /> <br />上传头像:<!-- 文件域 上传文件用的--><input type="file" />
</body>
</html>

执行：

image.png

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控件(文本域)

语法：

<textarea >文本内容
</textarea>

作用：

通过textarea控件可以轻松地创建多行文本输入框.

cols="每行中的字符数" rows="显示的行数" 实际开发不用

文本框和文本域区别

表单	名称	区别	默认值显示	用于场景
input type="text"	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

7. select下拉列表

目的：

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表.

语法：

<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="data:images/man.jpg" /> 男<input type="radio"  name="sex" /><img src="data: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="data: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>

执行：

image.png

END

查看全文

http://www.taodudu.cc/news/show-8213780.html

网络管理十一杀招
网络管理十一杀招网管几年经验总结
当网管几年的经验总结
搞定mplayer
网络管理十二杀招网管几年经验总结
做一个好网管必备的网络管理十二杀招
网络管理十二杀招经验谈
网管的几年经验总结
网管在网络管理中的十一大绝招
美团商家电话采集软件使用指南
vue 美团框架_vue2练习之仿美团外卖开发（一）
美团商家电话采集美团商户采集软件使用教程
美团商家该怎么采集
【强化学习】《动手学强化学习》动态规划算法
Java开发入门教程！java编辑器手机版下载
HTML5拉杆子过关小游戏代码免费下载
谷歌浏览器下载文件，ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION
羚羊行走在悬崖边：一份报告背后的移动开发者“自救计划”
驱动程序下载MySQL Connector/ODBC 5.2.4 发布驱动程序下载
mysqlmac怎么下载
HTML学生个人网站作业设计：动漫网站设计——悬崖上的波妞(4页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
数据源的动态切换
ROS系统入门笔记——topic实现以及小问题
Cannot uninstall 'PyYAML'. It is a distutils installed project and thus we cannot accurately determi
python tkinter进度条_python – 带进度条的tkinter gui
RuntimeError: adaptive_max_pool2d_backward_cuda does not have a deterministic implementation
AssertionError:` base_name` argument not specified...... a not have a` .queryset` attribute.
PyTorch可复现/重复实验的相关设置
2021年6月17日大学英语四一课一练阅读理解2-2
PyTorch设置可复现/重复实验