实战演示：
<!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>练习</title>
</head>
<body>
<!-- 锚点 id-->
<p id="top">锚点</p>
<!-- 标题标签（1-6越来越小） -->
<h1>威武霸气</h1>
<!-- 水平线标签hr -->
<hr/>
<!-- 段落标签p -->
<p>这是一个<br/>段落标签</p>
<!-- 文本标签 font-->
<font size="6" color="red">
<!-- em 文字是斜体-->
<em>
<!-- 文字加粗 strong-->
<strong>威武霸气</strong></em></font>
<!-- 换行标签 -->
<br/>
<!-- 水平删除线 加在文字中间del-->
<del>235200.00</del><br/>
<!-- 下划线 ins-->
<ins>235200.00</ins><br/>
<!-- Src 图片的来源 必写属性(相对路径和绝对路径)
Alt 替换文本 图片不显示的时候显示的文字
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
-->
<!-- 图片标签 img-->
<img src="image/1.png" alt="兔子" title="两只兔子" width="600px" height="400px"/>
<img src="F:\sublime工程\day01\image/1.png" alt="兔子" title="两只兔子" width="600px" height="400px"/><br/>
<!-- 超链接 a
href 去往的路径（跳转的页面） 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）
Target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）-->
<a href="03图片标签.html" target="_self" title="超链接">超链接(关闭自身页面)</a><br/>
<a href="03图片标签.html" target="_blank" title="超链接">超链接（不关闭自身页面，在新窗口打开）</a><br>
<a href="#top">超链接到锚点（返回顶部）</a><br>
<a href="#">空链接</a>
<!-- 无序列表ul -->
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- 有序列表 ol-->
<ol type="1" start="1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<!-- 有序和无序的区别：
第一，有序列表的标签是<ol> ,有start属性 ，最大序号为999 无序列表的标签是<ul>,无start属性
第二，<ol>的显示方式是列表前面有序号（序号形式由type属性值决定） <ul>的显示方式是列表前面没序号,只有圆点（圆点样式由type属性值决定） -->
<!-- 自定义标签dl-->
<dl>
<!-- 小标题dt -->
<dt><strong>帮助中心</strong></dt>
<!-- 解释标题dd -->
<dd>订单管理</dd>
<dd>购物指南</dd>
<dd>账户管理</dd>
</dl>
<!-- 背景音乐标签embed -->
<embed src="E:\音乐\陈奕迅 - 十年.mp3" hidden="true"></embed>
<!-- 滚动 marquee-->
<marquee behavior="alternate" direction="right" loop="-1">滚动</marquee>
</body>
</html>
最终效果：
参考文档：
Html基础
１ 常用快捷键
Ctrl+c |
复制 |
Ctrl+v |
粘贴 |
Ctrl+x |
剪切 |
Ctrl+a |
全选 |
Ctrl+s |
保存 |
Ctrl+z |
撤销一步 |
Windows+d |
返回桌面 |
Windows+e |
我的电脑 |
Windows+r |
打开运行 |
Alt+tab |
切换软件 |
Ctrl+tab |
软件文档之间的切换 |
F2 |
重命名 |
F5 |
刷新页面 |
２ 认识大前端
２.1 前端就是将效果图生成网页，利用html+css+js等技术。
２.2 Pc端 移动端
２.3 用户体验
２.4 学习态度
养成一种习惯。
３ 认识网页
３.1 网页由文字、图片、输入框、视频、音频、超链接等组成。
３.2 Web标准
W3c组织（万维网联盟）
Html 结构标准 相当人的身体
Css 表现标准 相当与给人化妆 变的更漂亮
Js 行为标准 想当与人在唱歌，页面更灵动。
３.3 基础班课程安排
Html 2天
Css 7天
Js 3天
３.4 浏览器
◆浏览器是一个上网的客户端（软件）。
３.5 浏览器内核
渲染引擎
渲染引擎是兼容性问题出现的根本原因。
３.6 浏览器和服务器的那点事
IIS web服务器 提供网页浏览服务
３.7 Url地址
Url地址就是咱们说的网址。
４ 认识html
４.1 Hyper text markup language
超文本标记语言。
超文本：超链接。（实现页面跳转）
４.2 Html结构标准
< ! doctype html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
Html 与htm是一样的。
后缀名不能决定文件格式，只能决定打开文件打开的方式。
４.3 Html标签分类
单标签 <! Doctype html>
双标签 <html></html> <head></head> <title></title>
４.4 Html标签关系分类
包含（嵌套关系） <head><title></title></head> 父子
并列关系 <head></head><body></body> 兄弟姐妹
４.5 开发工具
Dw 历史悠久，设计师使用。
Sublime 轻量级 有很多好用的插件。
Webstorm 重量级 太过智能。
新建文件、打开文件、打开文件夹 |
|
Html:xt+tab |
Html结构代码 |
tab |
补全标签代码 |
Ctrl+shift+d |
快速复制一行 |
Ctrl+shiif+k |
快速删除一行 |
Ctrl+鼠标左键单击 |
集体输入 |
Ctrl+h |
查找替换 |
Ctrl+f |
查找 |
Ctrl+/ |
注释 |
Ctrl+L |
快速选择一行 |
Ctrl+shift+↑（↓） |
快速上移（下移）一行 |
F11 |
全屏 |
查看----布局 |
sublime快捷键使用： http://blog.csdn.netdetails/11530751
４.6 设置默认浏览器
Chrome浏览器右上角，设置里选择设置默认浏览器。
５ 标签
５.1 单标签
◆注释标签 ctrl+/
◆ 换行标签 <br />
◆ 水平线标签 <hr />
５.2 双标签
<p>文本内容</p>
特点：上下自动生成空白行。<br>换行不会生成空白行。
标题标签
h1-h6 取值到h6
h1 在一个页面里只能出现一次。
文本标签
<font>文本内容</font>
文本格式化标签
文本加粗标签 <strong></strong> <b></b> 工作里尽量使用strong
文本倾斜标签
<em></em> <i></i> 工作里尽量使用em
删除线标签
<del></del> <s></s> 工作里尽量使用del
下划线标签
<ins></ins> <u></u> 工作里尽量ins
◆注意：之所以工作里使用<strong></strong> <em></em> <del></del>
<ins></ins> 是因为更有语义化。
５.3 图片标签
Src 图片的来源 必写属性
Alt 替换文本 图片不显示的时候显示的文字
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
◆图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。
６ 路径
６.1 相对路径
相对于文件自身出发，就是相对路径。
◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。
◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称
◆图片（html）在文件的上一级目录里，..+/+图片（html）名称
◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称
★总结：找到下一级目录（文件夹）的图片（文件）用 /
跳出当前目录使用../
６.2 绝对路径
７ 超链接
href 去往的路径（跳转的页面） 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）
Target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）
７.1 锚链接
1.先定义一个锚点
2.超链接到锚点
７.2 空链 不知道链接到那个页面的时候，用空链
７.3 压缩文件下载 不推荐使用
７.4 超链接优化写法
<base target="_blank"> 让所有的超链接都在新窗口打开
８ 另存为 ctrl+shift+s
９ 特殊字符
１０ 列表
１０.1 无序列表
<ul>
<li></li> 列表项
<li></li>
<li></li>
</ul>
type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈
１０.2 有序列表
<ol>
<li></li> 列表项
<li></li>
<li></li>
</ol>
◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。
１０.3 自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
１１ 音乐标签
１２ 滚动
