HTML资料之基本标签

▲ 单标签：


◆ 注释标签 ctrl+/

<!-- 	Hello World! -->

◆ 换行标签 <br />

纸上得来中崛起<br />绝知此事要躬行

◆ 水平线标签 <hr />

纸上得来中崛起<hr />绝知此事要躬行

◆ 图片标签<img />

<img src="1.jpg" alt="图片" title="picture" width="300" height="500" />

src：图片的来源（必写属性）
alt：替换文本，图片不显示的时候显示的文字
title：提示文本，鼠标放到图片上显示的文字
width：图片宽度
height：图片高度
注：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

◆ 音乐标签：

<embed src="Inna - Yalla.mp3" hidden="true"></embed>

src：音乐文件的来源
hidden： 是否隐藏音乐栏，默认false，不隐藏。

音乐栏

---

▲ 双标签：
◆ 段落标签<p></p>

<p>文本内容</p>

◆ 标题标签<h1></h1>    取值h1-h6，h1在一个页面里只能出现一次。

<h1>纸上得来中崛起，绝知此事要躬行</h1>
<h2>纸上得来中崛起，绝知此事要躬行</h2>
<h3>纸上得来中崛起，绝知此事要躬行</h3>
<h4>纸上得来中崛起，绝知此事要躬行</h4>
<h5>纸上得来中崛起，绝知此事要躬行</h5>
<h6>纸上得来中崛起，绝知此事要躬行</h6>

◆ 文本标签<font></font>

<font>文本内容</font>

不推荐加属性，不利于重复使用：

<font size="6" color="red">纸上得来中崛起，绝知此事要躬行</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> 是因为更有语义化。

◆ 超链接标签<a></a>

<a href="http://www.baidu.com" title="百度" target="_self">超链接</a>

href: 去往的路径（跳转的页面） *必写属性
title: 提示文本，鼠标放到链接上显示的文字
target： ★ _self：默认值，在自身页面打开，即关闭自身页面，打开链接页面。  
		 ★ _blank：打开新页面。自身页面不关闭，打开一个新的链接页面。

锚链接：
1、定义一个锚点

<p id="sd">顶部</p>

2、超链接到锚点

<a href="#sd">返回顶部</a>

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

<a href="#">空链</a>

压缩文件下载：

<a href="下载的文件.rar">下载的文件</a>

注：不推荐使用

超链接优化写法<base />：
设置整体链接的打开状态，例如让所有的超链接都在新窗口打开。写在头部标签内。

<base target="_blank"> 

◆ 页面内容滚动标签<marquee></marquee> 中间的内容可以为文字或者图片

<marquee height="30px" width="100px" bgcolor="green" behavior="scroll" direction="down" loop="2">滚动</marquee>

属性都是针对滚动条的设置，和内容无关
height：设置高度
width：设置宽度
bgcolor：设置背景颜色
behavior：滚动的方式
	★ alternate：表示在两端之间来回滚动
	★ scroll：由一端滚到另一端，会重复
	★ slide：由一端滚到另一端，不会重复
direction：滚动的方向
	★ down：向下滚动
	★ up：向上滚动
	★ left：向左滚动
	★ right：向右滚动
loop：滚动次数，默认值为-1，代表一直滚动下去。

◆ 上下标标签：

上标： <sup></sup>
下标： <sub></sub>

◆ <label>标签：

为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。

<label for="inp2">我是淘宝</label><input id="inp2" type="text"/>