HTML初识

最新推荐文章于 2023-06-17 18:09:35 发布

qq_45671732

最新推荐文章于 2023-06-17 18:09:35 发布

阅读量1.8k

点赞数 1

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/qq_45671732/article/details/119599420

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

HTML
- - HTML简单介绍
  - HTML的文本元素

HTML

HTML简单介绍

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <!--超链接-->
  <a href="https://www.bilibili.com/">bilibili</a>
</body>
</html>

注释

注释为代码的阅读者提供帮助，不参与运行

格式如下：

<!--注释内容-->

可以换行写多行

元素标签标记

整体是一个element(元素)

<a href="https://www.bilibili.com/">bilibili</a>

元素 = 起始标记（begin tag） + 结束标记(end tag) + 元素内容 + 元素属性

属性 = 属性名 + 属性值

格式是：

<起始标记 属性名="属性值">元素内容</结束标记>

属性的分类

局部属性：某些元素特有的属性

全局属性：所有的元素通用

注意：有些元素没有结束标记，这样的元素称为是空元素

例如:

<meta charset="UTF-8">

空元素的两种写法:

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

元素的嵌套

元素之间是可以嵌套的，像body元素和head元素,但是不可以相互嵌套

由于元素之间是可以嵌套的，所以当一个元素中直接嵌套了另一个元素，前者可以称为是父元素，后者可以称为是子元素；当一个元素中包含另一个元素但是并没有直接嵌套时，前者可以称为是祖先元素，后者可以称为是后代元素，类似于html元素；当多个元素(至少两个以上)拥有同一个父元素，可以互相称为兄弟元素

例如:

<div>
	<p></p>
</div>

标准的文档结构

<!--文档声明，告诉浏览器当前使用的是HTML标准是HTML5-->
<!DOCTYPE html>
<!--html根元素，一个页面最多只可以有一个，并且该元素是其他的元素的父元素或者是祖先元素，HTML5中没有强制要求书写该元素-->
<!--html元素中有一个属性是lang属性，代表的是language语言，是一个全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写成的-->
<html lang="en">
<!--head元素作为html元素的子元素出现，表示文档头，文档头内部的内容不会显示到页面上-->
<head>
  <!--meta元素代表的是文档的元数据，也就是附加信息，其中的charset属性告诉浏览器文字编码是UTF-8-->
  <meta charset="UTF-8">
  <!--适应手机端的-->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!--告诉浏览器使用的内核-->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--title元素表示的是网页的标题-->
  <title>这是我的第一个网页</title>
</head>
<!--body元素作为html元素的子元素出现，表示的是文档体，页面上所有要参与显示的元素，都应该放到文档体中-->
<body>
<!--超链接-->
<a href="https://www.bilibili.com/" title="网页">bilibili</a>
<h1 title="this is my first page">第一个网页</h1>
<img
  src="data:image/jpeg;base64,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">
</body>
</html>

语义化

每一个HTML元素都有具体的含义

a元素：超链接

p元素：段落

h1元素：一级标题

所有的元素和展示效果无关

元素展示到页面中的效果，应该是由CSS决定的而不是由HTML决定的。

因为浏览器带有默认的CSS样式，所以每一个元素有一些默认样式

选择什么元素，取决于内容的含义，而不是显示出的效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1 style="font-size: .5em;font-weight: normal">这是一个一级标题</h1>
<p>这是一个段落</p>
</body>
</html>

为什么需要语义化？

为了搜索引擎优化:每隔一段时间，搜索引擎会从整个互联网中抓取页面源代码

为了让浏览器理解网页

HTML的文本元素

HTML5中支持的元素：HTML5的元素周期表

h元素

h1到h6元素代表的是1级标题到六级标题，英文是head

p元素

p元素代表段落

span元素【无语义元素】

没有语义，仅用于设置样式

以前：某些元素在显示时会独占一行(块级元素)，而某些元素不会(行级元素)

到了HTML5，已经弃用了这种说法

pre元素

pre元素表示的是预格式化文本元素

空白折叠：在源代码中的连续空白字符(空格换行制表 )，在页面显示时，会被折叠成为一个空格

在pre元素中的内容不会出现空白折叠，会按照源代码的内容格式来显示在页面上

该元素通常用于在网页上显示一些代码

pre元素功能的本质：它是有一个默认的CSS的属性

code元素

显示代码时，通常外面套code元素用来显示代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>这是一个段落</p>
三原色包含:<span style="color: red">红</span>、<span style="color: green">绿</span>、<span style="color: blue">蓝</span>
<p>
  ₍₍◡( ╹◡╹ )◡₎₎
  (ノ◕ω◕)ノ
  (҂‾▵‾)︻デ═一
</p>
<pre>
  ₍₍◡( ╹◡╹ )◡₎₎
        (ノ◕ω◕)ノ
    (҂‾▵‾)︻デ═一
</pre>
<code>
  <pre>
  var i = 2;
  if (i){
    console.log(i);
  }
  </pre>
</code>
<code style="white-space: pre">
  var i = 2;
  if (i){
    console.log(i);
  }
</code>
</body>
</html>

HTML实体字符：

HTML Entity,实体字符通常用来在页面中显示一些特殊的符号

格式如下：

&单词;

&#数字;

常见的实体字符有：小于符号大于符号空格版权符号 &符号

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
在页面中,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表示段落使用:&lt;p&gt;
&copy;&amp;
</body>
</html>