阅读 130

【前端】HTML标签

前言

本文主要在初学HTML时,对常用标签做一些记录。主要是标签的使用,以及效果展示。目的在于有个大概的认识:有什么标签?能做什么?

当然,这方面有runoobw3school等非常出色的网站,如果想看更加全面的信息,可以直接去这些网站。(我也是在那学习的)

介绍

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>等标签。下面看看他们都有什么作用

标签

以下是一些常见的标签

<!DOCTYPE>

用于声明

声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。如: HTML 5 : <!DOCTYPE html> HTML 4.01 Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

告知浏览器其自身是一个 HTML 文档。 是 HTML 文档中最外层的元素,是所有其他 HTML 元素(除了 <!DOCTYPE>)的容器。 <html></html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。

属性

  • manifest :规定文档的缓存 manifest 的位置

<head>

元素包含了所有的头部标签元素。<head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。 <head>标签中可以包含<base>, <link>, <meta>, <script>, <style>, 以及<title>

<title>

定义文档的标题,它是 head 部分中唯一必需的元素。 就是在网页tab上面看到的标题,也是收藏夹中的标题、搜索引擎结果页面的标题。

title

<base>

为页面上的所有链接规定默认地址或默认目标。 浏览器随后将不再使用当前文档的 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>
复制代码

效果:

标题

1、搜索引擎使用标题为网页的结构和内容编制索引。 2、用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。

段落 <p>

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

例:

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

效果:

段落  <p>

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

水平线 < hr/>

在 HTML 页面中创建水平线。 效果:


换行 < br/>

一个简单的换行符,是空标签(意味着它没有结束标签,因此这是错误的:< br></br>

例: 可以测穿插在标签中

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

效果:

换行 < br/>

注:所有连续的空行(换行)也被显示为一个空格。

超链接

有两个作用 1、超文本链接:跳转到指定目标 2、锚点:跳转到指定位置

属性
  • 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">
复制代码

图像 <img>

附:图片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>
复制代码

表格<table>

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

列表

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

无序列表

    例:

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

    效果:

    无序列表 <ul>

    有序列表

      例:

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

      效果:

      有序列表<ol>

      结语

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

      参考

      runoob w3school

      相关阅读

      初识HTML

      HTML属性

      CSS : 入门

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

      关注下面的标签,发现更多相似文章
      评论