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

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

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

1、<html></html>

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

2、<head></head>

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

3、<title></title>

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

<html>
<head>
<title>我的HTML网页</title>
</head>
</html>

结果如下:

4、<meta>

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

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

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

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

none:都不可以被检索

index:文件被检索

follow:页面上的链接被检索

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

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

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

定时跳转网页:

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

5、<body></body>

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

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

6、<p></p>

段落标签,示例如下:

<html>
<head>
<title>我的HTML网页</title>
<meta charset="UTF-8">
</head>
<body>
<p>这是第一段</p><p>这是第二段</p>
</body>
</html>

7、<br>

换行标签,如下:

<body>
这是第一行<br>这是第二行
</body>

8、<hr>

水平分割线,示例如下:

<body>
这是第一行
<hr>这是第二行
<hr size="12"><!--设置分割线宽度-->
这是第三行
<hr width="200"><!--设置分割线的长度-->
这是第四行
<hr width="100" align="left"><!--设置居左-->
</body>

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

<body>
这是第一行
<hr color="#0C2DEC">这是第二行
<hr size="12" color="#FF0000"><!--设置颜色-->
这是第三行
<hr width="200" color="#730C0D">
这是第四行
<hr width="100" align="left" color="#158C4F">
</body>

取消分割线阴影:

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

9、<!---->

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

<!--注释内容-->

10、设置网页背景色

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

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

疏漏之处 欢迎指正

学习使用 欢迎转载

专注技术,热爱生活,交流技术,也做朋友。 ——珲少 QQ群:203317592

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

一斤代码深入理解系列(二):微信小程序样式机制

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机...

20070
来自专栏无所事事者爱嘲笑

react-native flatlist 上拉加载onEndReached方法频繁触发的问题

1K20
来自专栏源码之家

博看网杂志下载时批量更改图片大小

13020
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第一天 HTML【悟空教程】

一天的学习需要使用众多独立没有关联的标签,为了大家更好的吸收,现给出标签总览,以“重要程度”排序。例如:“表格标签”为今天最重要的标签。

42050
来自专栏葡萄城控件技术团队

ActiveReports 区域报表中的事件介绍

1、仅触发一次的事件 以下是在报表的处理过程中仅触发一次的所有事件这些事件在报表的处理周期中仅在最开始和结束前触发一次。 ReportStart 该事件在Dat...

24670
来自专栏无原型不设计

用Mockplus教你使用属性面板的设置交互状态

使用Mockplus软件有段时间了,期间有很多使用者问我组件的设置交互状态怎么用(当然有很多人看了都会用),我就有想把怎样使用设置交互状态的方法记录下来,供初学...

29350
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(三)

1.1 先选中MasterViewController.xib,重新调整view 的尺寸和排列内部的各个控件,(以你喜欢的方式)让控件看起来更协调,而且能够全部...

12620
来自专栏pangguoming

使用svgdeveloper 和 svg-edit 绘制svg地图

目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一、SVGDeveloper 5. 方法二、SVG-Edit 1. 描述 有...

62550
来自专栏河湾欢儿的专栏

01-工具 面板 视图

网页分为两步: 1.从设计稿中切出网页素材 比如说:按钮 logo 图片 背景等 2.编写代码,按效果图实现静态页面

11910
来自专栏行者常至

(20)Struts2_主题

9110

扫码关注云+社区

领取腾讯云代金券