02.HTML前言

asadsfasfasdfas

已于 2023-12-14 08:27:16 修改

阅读量818

点赞数 24

分类专栏：前端文章标签： html 前端

于 2023-12-14 08:21:06 首次发布

本文链接：https://blog.csdn.net/weixin_43891622/article/details/134986153

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML前言

1.什么是HTML

介绍

全称：HyperText Markup Language，也叫做“超文本标记语言”，它是用来描述网页的一种语言

什么是超文本

是超级文本的缩写，它可以加入图片，声音，动画，多媒体等内容（超越了文本限制）
它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超链接文本）

标记

又叫做标签（HTML tag），有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器中可以编辑和查看，在浏览器中不显示

注意

HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签

2.HTML的功能

利用标记给普通文本添加语义，描述超文本内容，搭建网页的基本结构

3.HTML的语义化

HTML文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记给普通的文字添加了不同的语义，能够让网站的结构划分更加清晰

注意：标签默认的效果不重要，语义才重要，因为效果可以通过 CSS 随便控制

4.语义化网页的优势

方便代码的阅读和后期维护
便于浏览器或是网络爬虫更好地解析网站内容
使用语义化标签有利于 SEO 搜索引擎优化，提高网站的搜索排名
方便设备解析（屏幕阅读器，盲人阅读器）

5.HTML发展历史

在这里插入图片描述

6.HTML一个完整标签的组成

HTML标签
HTML元素内容
HTML属性

7.HTML标签

介绍

HTML 标记通常被称为 HTML 标签（HTML tag）。标签在书写和使用过程中，必须遵循特定的语法

语法

HTML 标签由尖括号包围的关键字
标签分为单标签和双标签，双标签必须成对出现
双标签包含开始标签和结束标签，结束标签必须书写关闭符号 /，单标签也需要进行自封闭书写。在 HTML5 中，单标签可以不写关闭符号

标签级别

介绍

根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别

级别

容器级: 标签内部可以存放任意内容，包含容器级标签。比如 h1，div 等
文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等

标签关系

介绍

双标签关系可以分为两类：包含关系和并列关系

包含关系

在这里插入图片描述

并列关系

在这里插入图片描述

8.HTML元素

介绍

HTML 元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签

举例

下面就是一段 HTML标签，里面包含着 HTML元素

<p>我是一段HTML元素</p>

元素内容

元素内容可以是纯文本，也可以是其他的HTML元素。这种元素内容包含其他HTML元素的情况，我们可以称为嵌套
这种嵌套关系可以有多层

特点

元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系
空白折叠现象：元素内容如果是文本，所有文字 (类似文字内容) 之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象

9.HTML属性

介绍

HTML 标签可以添加属性，属性可以提供关于 HTML 元素的更多信息

规范

书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔
属性包含：属性名、属性值。属性名与属性值之间的写法通常称做键值对写法，HTML 标签属性的键值对写法是 k=“v”。XHTML要求属性值必须在双引号内部
一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键
值对写法都是 k=“v”
部分标签属性 k 可以设置多个属性值 v，所有属性值 v 都必须写在同一对双引号内，值与值之间需要使用空格分隔

10.HTML基本结构

介绍

每个网页都会有一个基本的标签结构（也成为骨架标签），页面内容也是在这些基本标签上书写

基本结构代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

含义

在这里插入图片描述

HTML文档声明（DTD）

介绍

告诉浏览器当前网页的版本

旧写法

更依网页所用的HTML版本而定，写法有很多，建议去 W3C 官网查看，正常来说以前的写法已经被淘汰了根本用不上

正常写法

<!DOCTYPE HTML>

注意

文档声明，必须在网页的第一行，且在 HTML 标签的外侧

HTML字符编码

介绍

告诉浏览器当前网页的字符编码

代码

<head>
    <meta charset="UTF-8">
</head>

HTML设置语言

介绍

设置网页语言，有很多比如：zh-CN，en 等等

代码

<html lang="zh-CN">
</html>

9.HTML注释标签

<!-- 注释内容 -->

asadsfasfasdfas

关注

24
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
02.HTML前言

是超级文本的缩写，它可以加入图片，声音，动画，多媒体等内容（超越了文本限制）它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超链接文本）HTML 标记通常被称为 HTML 标签（HTML tag）。标签在书写和使用过程中，必须遵循特定的语法根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别双标签关系可以分为两类：包含关系和并列关系HTML 元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签。
复制链接

扫一扫