【前端】HTML标签

时间 2019-11-08

标签前端 html 标签栏目 HTML 繁體版

原文原文链接

前言

本文主要在初学HTML时，对经常使用标签作一些记录。主要是标签的使用，以及效果展现。目的在于有个大概的认识：有什么标签？能作什么？css

固然，这方面有runoob、w3school等很是出色的网站，若是想看更加全面的信息，能够直接去这些网站。（我也是在那学习的）html

介绍

HTML标签也叫HTML元素，是HTML语言中的基本单位，一个HTML页面（网页）由多个 HTML标签构成。浏览器

也就是说，咱们能够用HTML来编写一个网页。缓存

一个例子

在开始介绍标签以前，先看一个栗子。网络

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>这是个人第一个页面</p>
    <span>Gavin是真的帅</span>
    <span>Gavin是真的帅</span>
</body>
</html>
复制代码

这是只有两个元素的页面，运行后是这样的：（看中的内容，会发现跟Android中的布局有点像。）框架

来看看上面内容，其中包涵了<!DOCTYPE html>、<html>、<head>、<body>等标签。下面看看他们都有什么做用ide

为页面上的全部连接规定默认地址或默认目标。 浏览器随后将再也不使用当前文档的 URL，而使用指定的基本 URL 来解析全部的相对 URL。这其中包括<a>、<img>、<link>、<form>标签中的 URL。(绝对路径的不受影响，本地路径却受到波及？)

`<link>`

标签订义了文档与外部资源之间的关系。 标签一般用于连接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
复制代码

属性

href：被连接文档的位置
hreflang：被连接文档中文本的语言
media：被连接文档将被显示在什么设备上
rel：当前文档与被连接文档之间的关系（alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag）
type：规定被连接文档的 MIME 类型 H5
sizes：被连接资源的尺寸。仅适用于 rel="icon"

`<style>`

标签订义了HTML文档的样式文件引用地址，也能够直接添加样式来渲染 HTML 文档。 例：当前的body中的<p>颜色改成#BBBBBB

<head>
    <style type="text/css"> p { color: #BBBBBB; } </style>
</head>
复制代码

提供有关页面的元信息，提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素一般用于指定网页的描述，关键词，文件的最后修改时间，做者，和其余元数据。

元素定义了 HTML 文档的主体，包含文档的全部内容。 如下列举的标签都写在<body></body>中

以上是一个HTML页面所包含的标准结构，这些标签在页面中是看不见的（除了title），接下来看看那些页面中能够看到的标签

在介绍前先了解下内联元素、块级元素。上面例子中有两个标签上面没有提到，就是

和。

就是个典型块级元素，而是个典型的内联元素。

内联元素、块级元素

回到上面的例子，细心的同窗可能会奇怪，为何代码写了三行文字，页面上却只有两行？并且后面的两行是连在一块儿的？这就要说到块级元素和内联元素了。

<p>这是个人第一个页面</p>
<span>Gavin是真的帅</span>
<span>Gavin是真的帅</span>
复制代码

块级元素

老是独占一行，表现为另起一行开始，并且其后的元素也必须另起一行显示; 宽度、高度、内边距和外边距都可控制。 <p>就是个块元素。经常使用的块级元素：<h1>、<p>、<ul>、<table>、<div>。

内联元素

和相邻的内联元素在同一行; 宽度、高度、内边距的top/bottom和外边距的top/bottom都不可改变。上面用到的<span>就是个内联元素，因此，两个<span>中的内容出如今同一行上。经常使用的内联元素：<span>、<b>、<td>、<a>、<img>。

<hr/>

除了上面提到的，还有一些经常使用的其余标签

标题 `<h1>` - `<h6>`

h1 用做主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。例：

<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
复制代码

效果：

一、搜索引擎使用标题为网页的结构和内容编制索引。二、用户能够经过标题来快速浏览您的网页，因此用标题来呈现文档结构是很重要的。

段落 `<p>`

<p>表示一个段落，是个块级元素

例：

<p>段落1</p>
<p>段落2</p>
复制代码

效果：

tips：浏览器会自动地在段落的先后添加空行

水平线 `< hr/>`

在 HTML 页面中建立水平线。 效果：

换行 `< br/>`

一个简单的换行符，是空标签（意味着它没有结束标签，所以这是错误的：< br></br>）

例：能够测穿插在标签中

<p>段落2-1< br/>段落2-2</p>
复制代码

效果：

注：全部连续的空行（换行）也被显示为一个空格。

超连接

有两个做用一、超文本连接：跳转到指定目标二、锚点：跳转到指定位置

属性

href：规定连接的目标
target：标签的 target 属性规定在何处打开连接文档，规定已下：
- _blank：浏览器总在一个新打开、未命名的窗口中载入目标文档
- _self：当前相同的框架或者窗口打开（默认）
- _parent：使得文档载入父窗口或者包含来超连接引用的框架的框架集。若是这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效
- _top：文档载入包含这个超连接的窗口

做为连接

超连接能够是一个字，一个词，或者一组词，也能够是一幅图像

例：

<a href="https://www.jianshu.com/u/769d3d3a9d4b">连接</a>
复制代码

效果： 连接

做为锚点

跳转到指定位置

**例：**在<h1>中定义id（title1），<a>的href属性指向title1。点击<a>标签后将跳转到<h1>的位置（或到指定页面对应id的标签位置）。

<h1 id="title1">标题 1</h1>
<a href="#title1">跳转标题1</a><br/>
复制代码

图像

展现一张图片，能够是本地或网络图片。属性

src：显示图像的 URL
alt：图像的替代文本。

例：

<img src="image/image1.png">
<!--图片大小限制-->
<img src="image/image1.png" height="300" width="300">
<!--网络图片-->
<img src="http://g.hiphotos.baidu.com/image/pic/item/0dd7912397dda1443b5c9090bfb7d0a20cf486bf.jpg" height="300" width="500">
复制代码

附：图片image1.png路径和index.html层级关系

表格

用于绘制表格，须要用到一下内部标签： <tr>：表格分割若干行数 <td>：每行被分割为若干单元格 <th>：表格头

属性

border：表格边框的宽度（pixels）
cellpadding：单元边沿与其内容之间的空白（pixels、%）
cellspacing：规定单元格之间的空白（pixels、%）
frame：外侧边框的哪一个部分是可见的（void、above、below、hsides、lhs、rhs、vsides、box、border）
rules：内侧边框的哪一个部分是可见的（none、groups、rows、cols、all）
summary：规定表格的摘要

例：

<table border="1" cellpadding="5" cellspacing="10" frame="above" rules="all" summary="summary">
    <tr>
        <th>top1</th>
        <th>top2</th>
        <th>top3</th>
    </tr>
    <tr>
        <td>行1列1</td>
        <td>行1列2</td>
        <td>行1列3</td>
    </tr>
    <tr>
        <td>行2列1</td>
        <td>行2列2</td>
        <td>行2列3</td>
    </tr>
</table>
复制代码

数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等等。

列表

列表包含无序列表和有序列表

无序列表

例：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
复制代码

效果：

有序列表

例：

<ol start="D" type="A">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>
复制代码

效果：

结语

标签的介绍到这里就结束了，本文主要介绍一下经常使用的标签，并展现其实际效果，对其有个大体的认识。学完标签，你可能会有新的疑问：内容是写上去了，想改变一个内容的**颜色、背景...**该怎么办？这里就要说到CSS了（参考CSS入门）

参考

相关阅读

有错误之处，感谢指出，接收批评

【前端】HTML标签

前言

介绍

一个例子

标签

<!DOCTYPE>

`<html>`

`<head>`

`<title>`

`<base>`

`<link>`

`<style>`

内联元素、块级元素

块级元素

内联元素

标题 `<h1>` - `<h6>`

段落 `<p>`

水平线 `< hr/>`

换行 `< br/>`

超连接

属性

做为连接

做为锚点

图像

列表

无序列表

有序列表

结语

参考

【前端】HTML标签

前言

介绍

一个例子

标签

<!DOCTYPE>

<html>

<head>

<title>

<base>

<link>

<style>

内联元素、块级元素

块级元素

内联元素

标题 <h1> - <h6>

段落 <p>

水平线 < hr/>

换行 < br/>

超连接

属性

做为连接

做为锚点

图像

列表

无序列表

有序列表

结语

参考

`<html>`

`<head>`

`<title>`

`<base>`

`<link>`

`<style>`

标题 `<h1>` - `<h6>`

段落 `<p>`

水平线 `< hr/>`

换行 `< br/>`