前言
本文主要在初学HTML时,对常用标签做一些记录。主要是标签的使用,以及效果展示。目的在于有个大概的认识:有什么标签?能做什么?
当然,这方面有runoob、w3school等非常出色的网站,如果想看更加全面的信息,可以直接去这些网站。(我也是在那学习的)
介绍
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上面看到的标题,也是收藏夹中的标题、搜索引擎结果页面的标题。
<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 类型 H5sizes
:被链接资源的尺寸。仅适用于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>
复制代码
效果:
tips:浏览器会自动地在段落的前后添加空行
水平线 < hr/>
在 HTML 页面中创建水平线。 效果:
换行 < br/>
一个简单的换行符,是空标签(意味着它没有结束标签,因此这是错误的:< br></br>
)
例: 可以测穿插在标签中
<p>段落2-1< br/>段落2-2</p>
复制代码
效果:
注:所有连续的空行(换行)也被显示为一个空格。
超链接
有两个作用 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
:显示图像的 URLalt
:图像的替代文本。
例:
<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入门)
作者:Gavin_ZYX
链接:https://juejin.cn/post/6844903776952795149
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。