2017年5月22日 HTML基础知识（一）
一、Html 结构
1.1、HTML基本文档格式—<html> 标记
—<html>文档的头部好和主体内容 </html> 根标记
—<head> 文档的头部信息</head> 头部标记 只能有一对
—<title>显示在浏览器窗口的标题栏中“网页名称”</title> 位于<head>标记之内
—<body></body> 主体标记 位于<html>之内，<head>标记之后
<!doctype html> 声明文档类型
<html> 跟标签
<head> 头部标签
<title></title> 标题签
</head>
<body>
</body>
……
</html>
1.2、HTML 标签关系
嵌套关系：<head><title></title></head> 父子
并列关系：<head></head><body></body> 兄弟姐妹
1.3、 HTML 标签分类
双标记 <标记名></标记名> :<font ></font >、<p > </p> 等
单标记 <标记名/> ：注释、 <br/> 、<!Doctype html>、<hr/>
二、标签
2.1 单标签
◆注释标签 ctrl+/
◆ 换行标签 <br />
◆ 水平线标签 <hr />
2.2 双标签
1.<p>文本内容</p> 特点：上下自动生成空白行。<br>换行不会生成空白行。
2.标题标签 h1-h6 取值到h6
h1 在一个页面里只能出现一次。 （seo）
3.文本标签 <font>文本内容</font>
4.文本格式化标签
文本加粗标签 <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> 是因为更有语义化（浏览器读起来更舒服）。
2.3图片标签
<img src="3.gif" alt="小岳岳" title="我的天呐！" width="300" height="200" />
Src 图片的来源 必写属性
Alt 替换文本 图片不显示的时候显示的文字
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
◆PS：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。
三、路径
1. 相对路径 （相对于文件自身出发，就是相对路径）
◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。 <img src="1.pig" alt="" />
◆图片（html文档）在文件的下一级目录里。文件夹名称+/+图片（html文件）名称 <img src="图片/1.pig" alt="" />
◆图片（html）在文件的上一级目录里，..+/+图片（html）名称 <img src="../1.pig" alt="" />
◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称 <img src="../练习/1.pig" alt="" />
★总结：找到下一级目录（文件夹）的图片（文件）用 / 跳出当前目录使用../
2.绝对路径
<img src="F:\前端开发基础知识\练习\1.pig" alt="" /> <!-- 电脑上的绝对路径 -->
四、超链接
<a href="林志玲.html" title=" 我的女神" target="_blank">超链接</a>
href 去往的路径（跳转的页面） 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）
Target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）
4.1 锚链接
1.先定义一个锚点 <p id="sd">
2.超链接到锚点 <a herf="#sd">回到顶点</a>
4.2 空链
不知道链接到那个页面的时候，用空链
<a herf="#">空链</a>
4.2 压缩文件下载（不推荐使用）
<a herf="../../练习.rar">压缩包</a>
4.3 超链接的优化写法
<base target="_blank"> 让所有的超链接都在新窗口打开
五、HTML 的特殊符号
六 、列表
6.1、无序列表
<ul>
<li></li> 列表项
<li></li>
<li></li>
</ul>
type=”square” 小方块 type=”disc” 实心小圆圈 type=”circle” 空心小圆圈
6.2、有序列表
<ol>
<li></li> 列表项
<li></li>
<li></li>
</ol>
效果：
◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。
6.3 自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
七、音乐标签和滚动
滚动：
