html:常用标签

我们首先来介绍一下head标签的主要内容和作用，文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等。 以下标签是可以用在head标签中的：

<head lang='en'>
    <title>标题信息</title>
    <meta charset='utf-8'>
    <link>
    <style type='text/css'></style>
    <script type='text/javascript'></script>
</head>

一 title标签

<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

我们接下来做一个小练习，创建一个带有我们自定义标题内容的网页：

<!DOCTYPE HTML>
<html>
    <head>
        <title>路飞学城</title>
    </head>
    <body></body>
</html>

将上面的文件另存为demo.html，然后用浏览器打开，就可以看到下面的内容。

HTML_03.png

上面我们介绍了title标签的用法，接下来我们继续看一下head标签中可以使用的其他标签：

二 meta标签

Meta标签介绍：

元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。

提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

常用的meta标签：

  1. http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
  1. name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城">

三 body标签

想要在网页上展示出来的内容一定要放在body标签中。 把我们之前海燕那一段HTML代码贴过来，保存到一个HTML格式的文件中。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飞学城</title>
</head>
<body>
<h1>海燕</h1>
<p>在苍茫的大海上，</p>
<p>狂风卷集着乌云。</p>
<p>在乌云和大海之间，</p>
<p>海燕像黑色的闪电，</p>
<p>在高傲地飞翔。</p>
</body>
</html>

body.png

四 标题标签 h1~h6

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用css来定义来达到漂亮的显示效果。 标题标签通常用来制作文章或网站的标题。

h1~h6标签的默认样式：

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>路飞学城</title>
    </head>
    <body>
        <h1>一级标题</h1><h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
</html>

请看上面代码 <h1>和<h2>书写在一行上展示，但是在浏览器的效果却是换行了，大家现在预习一下9.1.9标签分类知识点。

文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等...

1\. `<b></b>`：加粗
2\. `<i></i>`：斜体
3\. `<u></u>`：下划线
4\. `<s></s>`：删除线
5\. `<sup></sup>`：上标 
6\. `<sub></sub>`：下标

现在如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。

这两个标签都是表示强调，但是两者在强调的语气上有区别:`<em>`表示强调，`<strong>`表示更强烈的强调。
在浏览器中`<em>`默认会用斜体表示，`<strong>`会用粗体来表示。两个标签相比，我们通常会推荐大家使用`<strong>`表示强调

段落标签 p

<p>,paragraph的简写。定义段落

<body>
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>

</body>

浏览器展示特点：

  1. 跟普通文本一样，但我们可以通过css来设置当前段落的样式
  2. 是否又独占一行呢？ 答案是的 块级元素

超链接标签 a

超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像

<body>
    <h1>

        <!-- a链接 超链接  
        target:_blank 在新的网站打开链接的资源地址
                _self 在当前网站打开链接的资源地址
        title: 鼠标悬停时显示的标题
        -->
        <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a>
        <a href="a.zip">下载包</a>
        <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
        <!-- 返回页面顶部的内容 -->
        <a href="#">跳转到顶部</a>

        <!-- 返回某个id -->
        <a href="#p1">跳转到p1</a>
        <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 -->
        <a href="javascript:alert(1)">内容</a>
        <a href="javascript:;">内容</a>

    </h1>
</body>

target:_blank 在新的网站打开链接的资源地址 target：_self 在当前网站打开链接的资源地址 title: 表示鼠标悬停时显示的标题

链接其他表现形式：

  1. 目标文档为下载资源 例如：href属性值，指定的文件名称，就是下载操作(rar、zip等)
  2. 电子邮件链接 前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。 例如：<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
  3. 返回页面顶部的空链接或具体id值的标签 例如：<a href="#">内容</a>或<a href="#id值">内容</a>
  4. javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。 例如：<a href="javascript:alert()">内容</a>
  5. javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a

四 列表标签 ul，ol

网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容

<ul>:unordered lists的缩写 无序列表 <ol>:ordered listsde的缩写 有序列表


    <!-- 无序列表 type可以定义无序列表的样式-->
    <ul type="circle">
        <li>我的账户</li>
        <li>我的订单</li>
        <li>我的优惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ul>
打开网页样式如下图：
![DL.PNG](https://upload-images.jianshu.io/upload_images/24072767-862eedf87cbe0ae8.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


    <!-- 有序列表 type可以定义有序列表的样式 -->
    <ol type="a">
        <li>我的账户</li>
        <li>我的订单</li>
        <li>我的优惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ol>

有序列表如图所示
(https://upload-images.jianshu.io/upload_images/24072767-f8cd528ed8afc54d.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


ol标签的属性：

type：列表标识的类型

*   1：数字
*   a：小写字母
*   A：大写字母
*   i：小写罗马字符
*   I：大写罗马字符

列表标识的起始编号

*   默认为1

ul标签的属性： type：列表标识的类型

*   disc：实心圆(默认值)
*   circle：空心圆
*   square：实心矩形
*   none：不显示标识

五 盒子标签 `div`
 
`<div>`可定义文档的分区 division的缩写 译：区 `<div>` 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" >
<title>常用标签一</title>
</head>
<body>
<div id="wrap">
<div class="para">
<p style="height: 1000px" id="p1">段落</p>
</div>

    <div class="anchor">
        我是普通的文本
        <h1>

            <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a>
            <a href="a.zip">下载包</a>
            <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
            <a href="#">跳转到顶部</a>
            <a href="#p1">跳转到p1</a>

            <a href="javascript:alert(1)">内容</a>
            <a href="javascript:;">内容</a>
        </h1>
    </div>
    <!-- <h2>路飞学城</h2>
    <h3>路飞学城</h3>
    <h4>路飞学城</h4>
    <h5>路飞学城</h4>
    <h6>路飞学城</h6> -->
    <div class="para">
    <!-- 定义段落 通常指文章一段内容 -->
    <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
    <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
    <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
    </div>

    <div class="lists">
        <!-- 无序列表 -->
        <ul type="circle">
            <li>我的账户</li>
            <li>我的订单</li>
            <li>我的优惠券</li>
            <li>我的收藏</li>
            <li>退出</li>
        </ul>
        <!-- 有序列表 -->
        <ol type="a">
            <li>我的账户</li>
            <li>我的订单</li>
            <li>我的优惠券</li>
            <li>我的收藏</li>
            <li>退出</li>
        </ol>
    </div>
</div>

</body>
</html>


分析上面代码可以下面的层次结构

<div id='wrap'>
<div class='para'></div>
<div class='anchor'></div>
<div class='para'></div>
<div class='lists'></div>
</div>


我们将文档放在一个父级的区（div）中，它里面包含四块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的，所以div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id，跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=’para n1‘

六  图片标签 `<img/>`

一个网页除了有文字，还会有图片。我们使用`<img/>`标签在网页中插入图片。

语法：`<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />`
![src.png](https://upload-images.jianshu.io/upload_images/24072767-427f52a283238f98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


注意：

1.  src设置的图片地址可以是本地的地址也可以是一个网络地址。
2.  图片的格式可以是png、jpg和gif。
3.  alt属性的值会在图片加载失败时显示在网页上。
4.  还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度

    ```
     <div>
         <span>与行内元素展示的标签<span>
         <span>与行内元素展示的标签<span>
         <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
         <img src="./finance-right.png" alt="人工智能实战"  style="width: 200px;height: 200px">
     </div>

    ```

    浏览器查看效果：行内块元素
5.  与行内元素在一行内显示
6.  可以设置宽度和高度
7.  span标签可以单独摘出某块内容，结合css设置相应的样式

<p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<span>金融分析</span>,<span>人工智能</span>等互联网最前沿技术,开启职业生涯新可能</p>


好的，同学们，此时大家是不是对于以上标签有所认知了呢？ 这样吧！我来出一个小练习，你来做！ 练习：将img标签中的图片独占一行展示，并设置设置相应标题，在图片下方，描述该图片内容的信息。

## 其他标签

#### 换行标签 `<br>`

`<br>`标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。

#### 分割线 `<hr>`

`<hr>`标签用来在HTML页面中创建水平分隔线，通常用来分隔内容

#### 特殊符号

浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。

举个例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飞学城</title>
</head>
<body>

    <p>帮助有志向的年轻人

        通过努力学习获得
        体面的   工作    和    生活！</p>
</body>

</html>


上面的代码在浏览器中最终的显示效果：

[图片上传失败...(image-c4d9e-1600085645105)]

> 所以HTML代码对缩进的要求并不严格，我们通常使用缩进来让我们的代码结构更清晰，仅此而已。

### 特殊字符

在上一个实例中，我们演示了HTML中输入空格、回车都是没有作用的。要想输入空格，需要用特殊符号 -- `&nbsp;`。



### 表格标签 table

表格由`<table>` 标签来定义。每个表格均有若干行（由 `<tr>` 标签定义），每行被分割为若干单元格（由`<td>`标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
![table.png](https://upload-images.jianshu.io/upload_images/24072767-9ee53c48076fcf74.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

<div class="table">
<table>

<thead>

<tr>

<th></th>
</tr>
</thead>

<tbody>

<tr>

<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>

<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
</div>


表格行和列的合并

rowspan 合并行(竖着合并)
colspan 合并列(横着合并)

<body>
<div class="table">
<table border="1" cellspacing="0">

<thead>

<tr>

<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>

<tbody>

<tr>
<td rowspan="3">上午</td>

<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>

<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>

<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td rowspan ="2">下午</td>

<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>

<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody>

<tfoot>
<tr>
<td colspan="6">课程表</td>
</tr>
</tfoot>
</table>
</div>
</body>


### 表单标签 form

表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）

### 表单的作用

表单用于显示、手机信息，并将信息提交给服务器

1.  语法：

<form>允许出现表单控件</form>


1.  属性 见下图：
![1226410-20180701102109370-413468924.png](https://upload-images.jianshu.io/upload_images/24072767-7453668c6d56b3ac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


2.  表单控件分类 见下图
(https://upload-images.jianshu.io/upload_images/24072767-c46c198aaa13134b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

<form action="http://www.baidu.com" method="get">


<p>
用户名称：
<input type="text" name="txtUsename" value="请输入用户名称" readonly>
</p>
<p>
用户密码：
<input type="password" name="txtUsepwd">
</p>
<p>
确认密码：
<input type="password" name="txtcfmpwd" disabled>
</p>

<p>
用户性别：
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>

<p>
用户爱好：吃
<input type="checkbox" name="chkhobby" value="吃" checked> 喝
<input type="checkbox" name="chkhobby" value="喝"> 玩
<input type="checkbox" name="chkhobox" value="玩"> 乐
<input type="checkbox" name="chkhobox" value="乐" checked>
</p>

<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按钮">
</p>

<p>
请上传文件：
<input type="file" name="txtfile">
</p>

<p>
自我介绍：
<textarea name="txt" cols="20" rows="5"></textarea>
</p>


<p>籍贯：
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>

<p>意向工作城市：
<select name="sel">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
</form>

最后效果代码最终效果如下图所示
(https://upload-images.jianshu.io/upload_images/24072767-d3ece2b59b15f5b4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,001评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,210评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,874评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,001评论 1赞 291
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,022评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,005评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,929评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,742评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,193评论 1赞 309
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1赞 346
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,305评论 5赞 342
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,911评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2赞 352