html:5 + tab
ctrl + /: 快速注释/取消注释
ctrl+shift+d: 光标定位在要复制的那行代码, 快速复制
ctrl + { or } 缩进
div*3 + tab 快速生成多个div标签
span{text$}*3 + tab emmt语法
html文件的后缀:
html文档的后缀可以是 .html .htm
在早期dos8位机的时代, 电脑只能识别3个字母的后缀名文件, 所以当时html的文件后缀是.htm
现在所有的电脑都支持多字符的文件名后缀, 所以现在大家都使用.html后缀名了。 当然 .htm = .html都是一样的效果
HTML 头部标签
<!DOCTYPE> 标记位于文档的最前面, 用于向浏览器说明当前文档使用哪种标准 HTML OR XHTML 标准规范, 主要用于浏览器解析文档标签的依据 必须在开头处使用<!DOCTYPE>标记为所有的html or xhtml版本和类型, 只有这样浏览器才能将该网页作为有效的XHTML文档, 并按指定的文档类型进行解析。
<!DOCTYPE> 标记和浏览器兼容性有关, 删除此标签, 就是把展示html页面的权利交给浏览器。
这是ie6, 7, 8, firefox chrome 有多种浏览器 页面就有可能多种显示效果 这是不被允许的
<!DOCTYPE html> <!-- 文档的声明, 当前文档是一个html文档, 遵循的标准是html5的标准 -->
html5文档标准(现在主流 其他的4t, 4s都已经不在用了):
sublime 快捷键:html:5 + tab键 如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
之前两年也有在用 XHML
XHTML 严格标准:
sublime 快捷键:html:xs + tab键 如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
XHTML 过度标准:
sublime 快捷键:html:xt + tab键 如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
下面是更早的标准:
html4 文档标准 (严格的标准):
sublime 快捷键: html:4s + tab
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html4t 文档标准(宽松的标准):
sublime 快捷键: html:4t + tab
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
现在主流的,新的网站都是使用html5的标准, 所以以后开发都是html5的标准 html:5 + tab
文档声明标签一定要有, 不能省略, 后面学习了css之后, 文档的声明标签会严重影响页面的展示效果
<html> </html> 标签
<html lang="en">
- lang属性 一般可以用来搜索引擎的优化, 可以通过这个属性判断当前页面的语言是英文还是中文,增加搜索的权重 另外也有利于网页翻译功能 盲人阅读借助第三方工具也会利用到这个属性
<head> 标签
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
head 标签用于嵌套 给浏览器使用的一些配置和设置
1. meta 标签 设置文档的编码格式 可以通过这个标签告诉浏览器我的编码格式 这样浏览器就是使用正确的编码来解析文档, 防止出现乱码。
2. title标签 设置文档标题, 这样也有利于搜索引擎的优化权重
3. lnik 标签的第一种用法: 设置dns预解析 可以有效的提高后续访问网站的效率 也是网站优化的一个点
<link rel="dns-prefetch" href="http://ming.127.net">
link标签的第二种用法 引入网站icon图标
<link rel="shortcut icon" href="http://www.126.com/favicon.ico" />
link标签的第三种用法:引入css
</link ref="stylesheet" href="css/bg.css" >
<img src="" alt="" title="" >标签
<img src="图片的地址" alt="" title="">
src:图片的地址
alt: 如果图片无法显示 就显示此处的alt属性的文本使
title: 图片的标题, 鼠标一上去 图片显示tip 提示文本内容 对网站seo有很大的影响
(1)、与HTML在同一文件夹,描述:<img src=“logo.gif”>
(2)、在HTML下一级文件夹,描述:<img src=“img/img01/logo.gif”>
(3)、在HTML上一级文件夹,描述:<img src=“../logo.gif>
段落标签
<p> 段落内容</p>
p标签之间不会相互共用一行, 会独占一行或多行空间, 是块级标签。
水平线标签
<hr> 标签是单标签, 不需要闭合标签
HTML文档空格合并
在html文档中, 文字之间的空格或者换行会合并一个空格或换行。
br标签
<br> 单标签, 强制段落进行换行, 不受空格和换行合并的影响。
空格
增加一个空格, 不受空格和换行合并的影响
超链接标签:
<a href="" target="" #> </a>
href属性: 指向跳转的地址
target属性: _blank, _self (default)
锚点链接: 通过创建锚点链接, 用户可以快速定位到目标内容
创建锚点链接分两步“
1. 使用<a href="#id名">链接名称</a>
2. 使用相应的id名称标注跳转目标的位置
超链接标签可以嵌套文本, 图片 表格, 标题几乎什么标签都可以进行包囊
内联框架:
iframe标签, 元素创建包含另外一个文档的内联框架(即行内框架)
<iframe src ="demo_iframe.html" width="200" height="200"> </iframe>
列表标签:
1. 有序列表 unorder list: ul和li标签之间最好不要嵌套其他标签, 但li标签之间可以
ul>li
2. 无序列表 order list
ol>li
3. 自定义列表 design list
dl>dt+dd
4. 列表的嵌套
ul>li>ul>li
4. <table> </tatble> 表格标签
<table>
<thead>
<tr>
<th>CaseID</th><th>CaseSummary</th><th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<!-- rowspan属性:一个单元格暂用多行显示 --!>
<!-- colspan属性:一行中的单元格占用多列显示 --!>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
节标签
<div> </div> - 块级标签
span标签 - 行级标签 可以和其他标签共占一行
块级标签:p, div, ul, ol, dl, li, dt, h1-h6
行级标签:span stong, em, 文本相关的标签