HTML常用标签及介绍（一）

一、HTML头部结构

<!DOCTYPE html>

此语句声明文档类型为HTML5的的文件，同时必须放在文档的第一行必不可少

1.【head标签】

head标签用于定义文档的头部，它是所有头部元素的容器
其中有很多标签可用在head标签中，如： meta title style link. 接下来将一一介绍

2.【meta标签】
用法1：<meta charset="UTF-8">

本句定义了文档字符的编码格式，其中charset为meta标签中的一个属性，用来设置字符及编码格式，UTF-8为万国码，基本兼容各个国家的语言

用法2：<meta name="属性值" content="属性的详细内容"> 
       <meta http-equiv="refresh" content="2" URL=网站">

name,http-equiv也是meta标签中的一个属性，接下来介绍几个常见的关键字：
1.keywords(name) 网站关键字（用于检索关键字，且可以输入多个关键字）
2.description(name) 关于网站的描述
3.refresh(http-equiv) 代表定时刷新网页，content中为几秒后刷新，URL为刷新后跳转到的网页

3.【title标签】

用法：<title>我的第一个html页面</title>

用于设置网页的标题，即选项卡上的名称

二.HTML标签的分类形式

【单标签与双标签】

在html中标签可以分为单标签以及双标签，通过学习，我们不难发现head，body等标签都是成对出现的，形如<head></head>,<body></body>,类似这些标签称之为双标签，但是还存在一些标签形如<meta><br><hr>这些标签称之为单标签。

【内联标签及块级标签】
1.【内联标签】

内联标签又被称为行内标签，内联标签（行内标签）具有以下特点:
1.不能设置文字的宽和高（内容多宽，标签显示就有多宽）。
2.同属性的标签同行排列，代码换行时被解析为一个空格。

【常见的内联标签】

<a>  <span>  <img> <b>  <i>  <br>  <input>  <u>

2.【块级标签】

块级标签具有以下特点：
1.总是在新行上开始；
2.高度，行高以及顶和底边距都可控制；
3.宽度缺省是它的容器的100%，除非设定一个宽度

【常见的块级标签】

<div>  <dl>  <form>  <h1>-<h6>  <p>  <table>  <ul>  <ol>  <li>

三、HTML常用标签用法及介绍

【h标签（标题标签）】

用于表示标题，从h1到h6依次变小变细

<!--<h>标题内容</h>-->
      <h1>菠萝蜜</h1
      <h2>菠萝蜜</h2>
      <h3>菠萝蜜</h3>
      <h4>菠萝蜜</h4>
      <h5>菠萝蜜</h5>
      <h6>菠萝蜜</h6>

【img标签】

用于导入图片，src为图片地址，alt为如果图片不存在需要提示的信息，title为当鼠标指针指在图片上显示的信息。

<img src="图片地址" alt="如果图片不存在，提示信息" title="鼠标指在图片上的提示">

【a标签】

a标签用于给文字图片等设置超链接
href为超链接链接的网址，target中_self为本页面跳转，_blank为新建页面跳转。

<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

【div标签】

div标签虽然没有任何属性，但是很重要，正因为它干净的像一张白纸，后期才可以更好的利用css进行其内容样式的编辑。（块级标签）

<div id="" style="" class="">今天天气真不好</div>

【span标签】

span为内联标签（行内标签），其作用类似于div标签

<span id="" style="" class="">今天天气真不好</span>

【列表标签】
【无序列表】

生成一个无序列表，其中type可以设置列表前的标志

<ul type="square">
    <li>无序1</li>
    <li>无序2</li>
    <li>无序3</li>
</ul>

【有序列表】

生成一个有序列表，其中type可以设置序号的样式

<ol type="A">
    <li>有序1</li>
    <li>有序2</li>
    <li>有序3</li>
</ol>

【table标签】

table为表格标签，方法如下：

<table border=1px cellpadding="10">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>小强</td>
        <td>9000</td>
        <td rowspan="2">戴帽子</td>
    </tr>

    <tr>
        <td>小强</td>
        <td>900110</td>
        <td rowspan="2">戴帽子</td>
    </tr>
    </tbody>
</table>

其中border为设置边框宽度，cellpadding为表格内部宽度，rowspan为一列跨越多行。

【其他标签】

b加粗 i斜体 u下划线 s文字上一条横线 p段落标签 br换行 hr水平线（行分隔）

<b>你今天真好看</b>
<i>今天天气很差</i>
<u>我不想学习</u>
<s>菠萝蜜</s>
<p>不知道说什么</p>
<hr>
<br>

【其他特殊符号】

&lt 小于
&gt 大于
&copy 版权
&reg 注册商标
&nbsp 空格

补充：标签嵌套规则
1.行内标签不能嵌套块级标签。
2.p标签不能嵌套块级标签。

HTML常用标签及介绍（一）

一、HTML头部结构

二.HTML标签的分类形式

三、HTML常用标签用法及介绍

猜你喜欢