【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/de9214cbe33b
HTML5网页特殊字符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="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="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>

执行：

image.png

END

最后编辑于：2020.04.08 08:44:58

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,117评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,328评论 1赞 293
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,839评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,007评论 0赞 206
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,384评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,629评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,880评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,593评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,313评论 1赞 243
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,575评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,066评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,392评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,052评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,082评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,844评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,662评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,575评论 2赞 270

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

1.0 安装Sublime

2.0 汉化Sublime Text 3

3.0 快捷键

sublime快捷操作emmet语法

4.0 瞄点

beae标签

6.0 预格式化文本pre标签

7.0 特殊字符

8.0 三个表（表格、表单、列表）

8.1 表格（table）

8.2 列表

有序控件

自定义列表

8.3 表单

input 控件

1. type 属性

2. value属性 值

3. name属性

4. checked属性

5. label标签(理解)

6. textarea控件(文本域)

文本框和文本域区别

7. select下拉列表

3. form表单域

8. 团队约定

元素属性

9.0 综合案例

推荐阅读更多精彩内容

2. value属性值