2017年5月22日 HTML基础知识（一）

一、Html 结构

1.1、HTML基本文档格式— 标记

   —文档的头部好和主体内容  根标记

— 文档的头部信息  头部标记 只能有一对

—  位于标记之内

—   主体标记  位于之内，标记之后

 声明文档类型

跟标签

  头部标签

   标题签

……

 

1.2、HTML 标签关系

嵌套关系：     父子

并列关系：     兄弟姐妹

1.3、 HTML 标签分类

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

等

    单标记  <标记名/> ：注释、
、、

---

二、标签

2.1 单标签

◆注释标签    ctrl+/

◆ 换行标签   

◆ 水平线标签  

---

2.2 双标签   

1.

文本内容

  特点：上下自动生成空白行。
换行不会生成空白行。

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

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

3.文本标签  文本内容

4.文本格式化标签

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

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

 删除线标签         工作里尽量使用del

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

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

2.3图片标签

Src    图片的来源   必写属性

Alt    替换文本    图片不显示的时候显示的文字

Title   提示文本    鼠标放到图片上显示的文字

Width  图片宽度

Height  图片高度

◆PS：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

 

三、路径

1. 相对路径   （相对于文件自身出发，就是相对路径）

◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。  

◆图片（html文档）在文件的下一级目录里。文件夹名称+/+图片（html文件）名称  

◆图片（html）在文件的上一级目录里，..+/+图片（html）名称   

◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称   

★总结：找到下一级目录（文件夹）的图片（文件）用 /       跳出当前目录使用../

2.绝对路径

    

四、超链接

超链接

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

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

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

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

4.1 锚链接

1.先定义一个锚点

2.超链接到锚点 回到顶点

4.2 空链  

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

　　空链

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

压缩包

4.3 超链接的优化写法

 让所有的超链接都在新窗口打开

  五、HTML 的特殊符号

六 、列表

6.1、无序列表

 

   列表项

 

 

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

 

6.2、有序列表

 　  

   列表项

　　

　　

 

效果：

 

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

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

6.3 自定义列表

 

   小标题

  

  解释标题

  

  解释标题

 

七、音乐标签和滚动

 

滚动：

 

转载于:https://www.cnblogs.com/chenyahuan/p/6891109.html