【HTML】HTML 标签 ① ( 骨架标签 | 双标签和单标签 | 嵌套关系和并列关系 | 文档类型 | 页面语言 | 编码字符集 )

韩曙亮

发布于 2023-03-30 19:02:12

2K0

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、HTML 标签简介

HTML 英文全称 " HyperText Mark-up Language " , 中文名称是 " 超文本标记语言 " ;

多媒体 : 超文本指的是该文本超过了文本的限制 , 可以展现图片 , 声音 , 视频等多媒体内容 ;
超链接 : 除了多媒体之外 , 该文本还具有超链接跳转功能 , HTML 中还可以添加链接 , 可以跳转到其它文件中 ;

HTML 主要使用 HTML 标签描述网页中的元素 , 常见的标签有 : 文本标签 , 换行标签 , 图像标签 , 链接标签 , 注释标签等 ;

HTML 标签都在尖括号 <> 中进行定义 , 这些标签都有各自的语法规范 ;

二、HTML 骨架标签

HTML 骨架标签 :

跟标签 : 所有的标签都在跟标签中 ;

<html></html>

文档头部标签 : 该标签的作用是设置文档头部 , 其中最终要的是设置标题标签 ;

<head></head>

文档标题标签 : 设置 HTML 页面的标题 ;

<titile></title>

文档内容标签 : HTML 的网页内容 , 都放在这个标签内 ;

<body></body>

以下面的网页为例 ,

红色矩形框内是网页标题 , 在 head 标签的 tittle 标签中设置 ,
蓝色矩形框内是网页内容 , 在 body 标签中设置 ;

代码示例 : 创建一个文本文件 , 命名为 helloworld.html ;

<html>
	<head>     
        <title>网页标题</title>
    </head>
    <body>
    	网页内容
    </body>
</html>

运行效果 :

一般 HTML 的骨架都可以有编辑器自动生成 , 这里介绍一款文本编辑工具 Sublime , 该工具中可以自动生成 HTML 骨架标签 ;

Sublime 官方下载地址 : https://www.sublimetext.com/download

三、双标签和单标签

HTML 标签分为两种类型 : 双标签和单标签 ;

双标签 : 由两个尖括号标签组成的成对标签称为双标签 , 如上面介绍的骨架标签都是双标签 : <html></html> , <head></head> , <titile></title> , <body></body> ;
- 开始标签 : 双标签都是由一对标签组成 , 其中前面的标签称为开始标签 , <html></html> 中的 <html> 是开始标签 ;
- 结束标签 : 后面的标签称为结束标签 , <html></html> 中的 </html> 是结束标签 , 结束标签比开始标签多了标签关闭符 / ;
单标签 : 单标签都是空元素 , 不需要再标签中包含内容 , 如换行标签 <br /> ;

四、嵌套关系和并列关系

双标签之间的关系 :

嵌套关系 : 下面代码中 html 标签与 head 标签 , 属于嵌套关系 , 一般子标签会相对于父标签缩进一个 TAB 身位 ;
并列关系 : 下面代码中 head 标签与 body 标签 , 属于并列关系 , 二者对齐排在一起就可以 ;

<html>
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	网页内容
    </body>
</html>

五、文档类型

在 HTML 文件中 , 要在文档最开始位置 , 在所有的标签前面 , 标注 " 文档类型 " , 其作用是通知浏览器该网页使用的 HTML 或 XHTML 规范 ;

<!DOCTYPE html>

上面的配置是高速浏览器使用的是 HTML 5 规范 , 现在开发一般都使用该规范 ;

任意打开一个网页 , 不管页面有多复杂 , 在最开始一定是文档类型标注 ;

六、页面语言

在 html 标签中 , 设置 lang 属性 , 用于指定该 HTML 标签内使用的语言类型 ;

<html lang="en">

en 属性值表示英文 ;
zh-CN 属性值表示中文 ;

不管是设置什么语言 , 对开发是没有影响的 ;

该语言配置对于网页开发来说没有太大的作用 , 其目的是告诉浏览器或者搜索引擎 , 该页面是什么语言的 ;

翻译工具识别 : 如果页面设置成英文 , 系统设置成中文的话 , 浏览器就会提示你是否要对该网页进行翻译 ;
搜索引擎精准搜索 : 搜索引擎尽量搜索语言相同的网页 ;

示例 : CSDN 的网页类型设置的是英文的 ;

七、编码字符集

在 HTML 页面中 , 在 head 标签下的 meta 标签中设置字符集设置 , 该设置用于告诉浏览器 , 该 HTML 文件使用什么字符集进行的编码 , 浏览器也使用该字符集解码 , 使用的字符集不一致就会导致乱码 ;

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	网页内容
    </body>
</html>

这里直接配置 UTF-8 即可 , 不要使用其它字符集 ;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-02-03，如有侵权请联系 cloudcommunity@tencent.com 删除

html