整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
写表单的时候，经常用鼠标点击输入框的行为是十分累人的，经常上网的同学估计都会使用tab键进行表单输入框之间的切换。
在html代码中有一个键盘属性——tabindex，它可以设置访问者在页面中按tab键的顺序。如下：
<input type="button" id="b1" tabindex="1" value="Button1" />
<input type="button" id="b2" tabindex="2" value="Button2" />
<input type="button" id="b3" tabindex="3" value="Button3" />当用户选择第一个输入框再按tab键，输入框的焦点就会按照定义好的顺序切换。 tabindex不仅可以用于输入框间的切换，也可以用于链接之间的切换。方法和上面相同。 在没有定义属性值的时候，tabindex的默认值是0。如果将tabindex设为负值（tabindex="-1"），这个元素会被排除在tab键切换的范围之外。
录入系统需要用户输入相关数据，但用户习惯在excel中回车继续输入下一个项目。
<script type="text/javascript">
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
do {
i = (i + 1) % field.form.elements.length;
}while(field.form.elements[i].type != 'text' ) //可扩展到其他比如select 值了，避开label
field.form.elements[i].focus();
//window.event.keyCode=9
return false;
}
else
return true;
}
</script>页面
部样式解决了内联样式的问题，但他也有弊端，主要表现在一下两个方面：
弊端1，内部样式只能作用于一个页面，如果要实现多个页面共享一个样式，就做不到了。
弊端2，随着样式代码的不断增加，在编辑器中，要不停的上下滚动屏幕来编辑样式，很不方便。
解决这些弊端的方法就是使用外部 CSS。
外部 CSS，也叫外部样式，可以通过改变一个文件来改变整个网站的外观！
外部样式，将 CSS 代码放在一个独立的，以 .css 为后缀名的文件中，使 html 页面结构文件和 css 样式文件完全独立开来。
每个HTML页面都必须在 head 元素里添加 <link> 元素，link 是链接的意思。
在 <link> 元素里定义 rel 属性，rel 是 relationship 的缩写，译为关系、关联，值为 stylesheet，表示关联一个样式表。
再定义一个 href 属性，用来设置一个对外部样式表文件的引用，值为 .css 文件的路径。
我们来做个例子。
在 002-add-css 文件夹里创建一个 external-1.html 文件，构建好基础代码。添加 h1 和 p 元素，分别填入一些文本。
再创建一个 external-2.html 文件，构建好基础代码。添加 h1 和 p 元素，分别填入一些文本。
在 002-add-css 文件夹里创建一个 mystyle.css 文件，在这个文件里直接编写样式：
body，空格，花括号，回车，定义样式属性名 background-color，冒号，属性值为 lightblue，分号。
h1，空格，花括号，回车，color，navy，分号，margin-left，20px，分号。
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
前面说到，样式表代码的编写格式很宽松，但是我们编写样式的时候还是要有一定的规范：
选择器和花括号中间用一个空格隔开；
每一条样式声明语句单独一行定义；
两组样式定义用空行来分隔。
样式文件定义好后，在 external-1.html 文件的 head 元素里输入 link，按下回车键或 tab 键，emmet 会为我们自动补全一些代码，我们只需要设置 href 属性的外部样式文件路径就好了。这里我们填入 mystyle.css。保存。
预览页面，第一个页面的样式添加好了。
在 external-2.html 文件的 head 元素里也添加一个 link 元素，设置同样的路径 mystyle.css。保存。
预览页面，第二个页面的样式也添加好了。
不难发现，在 mystyle.css 定义的一套样式，应用到了两个页面上，做到了多个页面的样式共享。
文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=55
tml的主体结构
标签的分类
标签的关系
sublime快捷键
单标签
双标签
路径
超链接额外知识运用
锚点
空连接
超链接的优化写法 写在head标签中
特殊标记符
列表
<!doctype html><html><head>
单标签
<!doctype html>
双标签
<head></head>
包含（嵌套关系、父子关系）
<head>
并列
<head></head><body></body>
| 快捷键 | 作用 |
|---|---|
| html:xt + tab | html4.01模板【新版本可能失效】 |
| html + tab | html5模板 |
| tab | 补全标签 |
| ctrl + shift + d | 快速复制一行 |
| ctrl + shift + k | 快速删除一行 |
| ctrl + 鼠标左键单击 | 集体输入 |
| ctrl + h | 查找替换 |
| ctrl + f | 查找 |
| ctrl + / | 注释 |
| ctrl + L | 快速选中当前行 |
| ctrl + shift + ↑(↓) | 代码的快速上移和下移 |
<!-- --> 注释标签<br /> 换行标签<hr /> 水平线标签<img src="logo.gif" alt="logo" title="这是淘宝的logo" width="200" height="100" />图片标签
<p></p> 段落标签<h1></h1> 标题标签 h1 - h6<font></font> 文本标签<strong></strong> 文本加粗标签，有语音加强<b></b> 文本加粗标签<em></em> 文字倾斜，有语音加强<i></i> 文字倾斜<del></del> 删除线，有语音加强<s></s> 删除线<ins></ins> 下划线，有语音加强<u></u> 下划线<a href="http://www.baidu.com" title="百度" target="_blank">百度</a> 超链接
相对路径
同一个目录下直接写文件的名称就可以
文件和图片在下一级目录中，需要文件夹名称 + \ + 文件名称
图片在上一级目录中 ../ + 文件名称
图片在上一级的其它文件夹中 ../ + 文件夹名称 + 文件名称
总结：找到下级目录使用/，找到上一级目录使用../
绝对路径
从盘符中开始的，这种路径不能使用！因为项目最后都要移动，文件的路径都是会变的。如：c:\baidu\logo.jpg
锚点
1.设置一个锚点 设置一个id
<div id="top"></div>
2.超链接到锚点
<a href="#top"></a>
空连接
<a href="#"></a>
超链接的优化写法 写在head标签中
<base targer="_blank">
让所有的超链接都是从新窗口中打开
| 空格 | |
|---|---|
| < | < |
| > | > |
| © | © |
更多信息请查阅
无序列表
<ul type="disc">
类型：disc 默认小黑点 circle 空心小圆点 square 小方块
有序列表
<ol type="A" start="C">
类型：a A 字母顺序 i I罗马顺序 1数字 start 表示开始的位置
自定义列表
<dl>
*请认真填写需求信息，我们会在24小时内与您取得联系。
