标签之美一——HTML基础元素

简介:

标签之美--HTML基础标签使用总结

HTML是一种标记语言,因此,标签便是HTML的核心,一些基础标签的用法总结如下:

1、<html></html>

任何HTML文件都会有这样一个标签,标记网页的开始和结束。

2、<head></head>

头部标签中可以包含许多网页的头信息。

3、<title></title>

这个标签包含在头部标签内,其内容就是网页显示的标题,比如:

?
1
2
3
4
5
< html >
< head >
< title >我的HTML网页</ title >
</ head >
</ html >

结果如下:

170648_Uct0_2340880.png

4、<meta>

这是一个设置标签,也叫元信息标签,用于记录和设置网页的一些属性。

其中:name属性可以用来设置关键字,简要内容,网页生成工具及网页的制作者和网页链接查询权限,分别对应的字段为:Keywords、Description、Generator、Author、Robots。

每一个name的属性,后面都要用contect进行解释。对于Robots属性,contect权限的说明如下:

all:文件和链接都可以被检索

none:都不可以被检索

index:文件被检索

follow:页面上的链接被检索

noindex:文件不被检索,链接可以被查询

<meta>标签的另一个属性值为http-equiv,它将告诉浏览器一些重要的信息,例如编码信息:

?
1
< meta  charset = "UTF-8" > <!--告诉浏览器编码格式-->

定时跳转网页:

?
1
< meta  http-equiv = "Refresh"  content = "5;url=http://www.baidu.com" > <!--5S后将跳转到百度网页-->

5、<body></body>

顾名思义,网页的主体内容写在这个标签里。

下面这些标签都是在<body>标签下的:

6、<p></p>

段落标签,示例如下:

?
1
2
3
4
5
6
7
8
9
< html >
< head >
< title >我的HTML网页</ title >
< meta  charset = "UTF-8" >
</ head >
< body >
< p >这是第一段</ p >< p >这是第二段</ p >
</ body >
</ html >

173526_FBOj_2340880.png

7、<br>

换行标签,如下:

?
1
2
3
< body >
这是第一行< br >这是第二行
</ body >

173725_okEm_2340880.png

8、<hr>

水平分割线,示例如下:

?
1
2
3
4
5
6
7
8
9
< body >
这是第一行
< hr >这是第二行
< hr  size = "12" > <!--设置分割线宽度-->
这是第三行
< hr  width = "200" > <!--设置分割线的长度-->
这是第四行
< hr  width = "100"  align = "left" > <!--设置居左-->
</ body >

174555_wV9L_2340880.png

在设置分割线的颜色之前,我们先把HTML中颜色对应的代码总结如下:

175243_FVS4_2340880.png

?
1
2
3
4
5
6
7
8
9
< body >
这是第一行
< hr  color = "#0C2DEC" >这是第二行
< hr  size = "12"  color = "#FF0000" > <!--设置颜色-->
这是第三行
< hr  width = "200"  color = "#730C0D" >
这是第四行
< hr  width = "100"  align = "left"  color = "#158C4F" >
</ body >

175600_8Lfv_2340880.png

取消分割线阴影:

?
1
2
3
4
5
6
< body >
这是第一行
< hr  size = "12" > <!--设置分割线宽度-->
这是第二行
< hr  size = "16"  noshade> <!--取消分割线阴影-->
</ body >

180026_3nW0_2340880.png

9、<!---->

注释标签,任何编程语言都会有注释语句,这个就无需多说了。形式如下:

<!--注释内容-->

10、设置网页背景色

<body>标签中有一个属性,可以用来设置网页的背景颜色:bgcolor

?
1
2
3
4
5
6
< body  bgcolor = "#002BF8" > <!--设置背景为蓝色-->
这是第一行
< hr  size = "12" > <!--设置分割线宽度-->
这是第二行
< hr  size = "16"  noshade> <!--取消分割线阴影-->
</ body >

目录
相关文章
|
4天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
4天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
7天前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
11 1
前端基础(十七)_HTML5新特性
|
9天前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
本文介绍了Twaver HTML5中的拓扑元素(Element),包括网元(Element)、节点(Node)和连线(Link)的基本概念和使用方法。文章详细解释了Element的属性和方法,并通过示例代码展示了如何在React组件中创建节点、设置节点属性和样式。
20 1
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
|
9天前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(7)Layer图层元素
本文介绍了Twaver HTML5中的图层元素(Layer),包括图层的属性和使用方法。文章详细解释了如何创建图层、设置图层属性(如可见性、可编辑性、可移动性和可旋转性),并通过示例代码展示了如何在React组件中使用图层。
10 1
Twaver-HTML5基础学习(7)Layer图层元素
|
9天前
|
移动开发 JavaScript 前端开发
Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果
本文介绍了在Twaver HTML5中如何为告警元素(Alarm)创建闪烁效果,以提醒用户注意。文章通过示例代码展示了如何通过定时器间隔性地改变告警标签的颜色,从而实现闪烁提示效果。
23 1
Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果
|
1天前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
|
2天前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
|
5天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
12 2
|
7天前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
36 1