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 标签分类

双标记 <标记名></标记名> :、 等

单标记 <标记名/> ：注释、 、<!Doctype html>、<hr/>

二、标签

2.1 单标签

◆注释标签 ctrl+/

◆ 换行标签

◆ 水平线标签 <hr />

2.2 双标签

1.文本内容 特点：上下自动生成空白行。 换行不会生成空白行。

2.标题标签 h1-h6 取值到h6

h1 在一个页面里只能出现一次。（seo）

3.文本标签 文本内容

4.文本格式化标签

文本加粗标签 工作里尽量使用strong

文本倾斜标签 工作里尽量使用em

删除线标签 <del></del> <s></s> 工作里尽量使用del

下划线标签（插入文本）<ins></ins> 工作里尽量ins

◆注意：之所以工作里使用、 、 <del></del>、<ins></ins> 是因为更有语义化（浏览器读起来更舒服）。

2.3图片标签

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.绝对路径

四、超链接

　　href 去往的路径（跳转的页面）必写属性

　　title 提示文本鼠标放到链接上显示的文字

　　target=”_self” 默认值在自身页面打开（关闭自身页面，打开链接页面）

　　Target=”_blank” 打开新页面（自身页面不关闭，打开一个新的链接页面）

4.1 锚链接

1.先定义一个锚点

2.超链接到锚点 <a herf="#sd">回到顶点</a>

4.2 空链

不知道链接到那个页面的时候，用空链

4.2 压缩文件下载（不推荐使用）

4.3 超链接的优化写法

<base target="_blank"> 让所有的超链接都在新窗口打开

五、HTML 的特殊符号

六、列表

6.1、无序列表

<ul>

<li></li> 列表项

</ul>

type=”square” 小方块 type=”disc” 实心小圆圈 type=”circle” 空心小圆圈

6.2、有序列表

<ol>

<li></li> 列表项

</ol>

效果：

◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I

start=”3” 决定了开始的位置。

6.3 自定义列表

<dl>

<dt></dt> 小标题

<dd></dd> 解释标题

</dl>

七、音乐标签和滚动

滚动：