整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
.sublime使用的时候，页面先要保存为html格式文件.
2.调出网页骨架 html:xt 按ctrl+e 快捷键 html:5 ctrl+e 或者tab键
3.调整页面字体大小的方法，按住ctrl+滚轮
4.div.top ctrl+e <div class="top"></div>
5.div*5 生成5个div
6.>子级 (下一级) ul>li*5
7.+同级
8.按住滚轮可以竖着选
9.ctrl+shift+上下箭头移动一行
10.ctrl+shifit+大括号 折叠
快捷鼠标操作
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>
喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
1 html5文档类型和字符集
Html的发展历程：
文档类型设定
Document
HTML: sublime输入html:4s
XHTML: sublime输入html:xt
HTML5：sublime输入html：5或者！显示
2 查看手册及其新增标签
常用新标签（需掌握）
W3c手册中文官网：w3school
header：定义文档的页眉 头部
nav：定义导航链接的部分
footer：定义文档或节的页脚 底部
article：定义文章。
section：定义文档中的节（ section区段）
aside：定义其所处内容之外的内容 侧边
datalist：定义选项列表。与 input元素配合使用该元素
Fieldset：可将表单内的相关元素分组，打包
3 datalist标签
有提示的下拉菜单
4 fieldset元素
fieldset元素可将表单内的相关元素分组、打包， 和legend搭配使用
5 HTML5新增 iInput表单（一）
6 HTML5新增 input表单（二）
7 新增占位符焦点多选属性
8 autocomplete属性
输入内容自动记录，方便下次快速输入
autocomplete必须满足两个条件才会起作用，一是必须有提交按钮，二是必须给给他名字，名字是什么无所谓，例如上面“123”
9 内容不能为空和获得焦点属性
required是提示输入内容不能为空
accesskey是一个快捷键属性，如上字母“s”,意思是在页面中按“ctrl+s”可以将光标移至此文本框
10 表单综合案例学生档案
显示效果如下（马赛克不算）：
11 embed引入网上视频
多媒体标签 embed：定义嵌入的内容，embed可以用来插入各种多媒体，格式可以是Mid、Wav、AFF、AU、MP3等等。Url为音频或视频文件及其路径，可以是相对路径或绝对路径
因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解audio和video视频多媒体。
12 播放音频 audio
autoplay是自动播放，controls是显示播放器，Loop是循环次数
每个浏览器的显示样式有所不同，每个浏览器支持的音频格式有所不同
Source可以提供多个音频格式，以便兼容各种浏览器。
13 播放视频 video
跟音频播放用法一样
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。
第一阶段HTML5的所有章节都已结束，下篇文章将分享《第二阶段 CSS3》小伙伴们不要错过哟！
*请认真填写需求信息，我们会在24小时内与您取得联系。
