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

    双标记  <标记名></标记名> :<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>

 

七、音乐标签和滚动

 

滚动:

 

posted @ 2017-05-22 19:56  心随所享  阅读(165)  评论(0编辑  收藏  举报