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(元素)

bilibili

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

属性 = 属性名 + 属性值

格式是：

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

属性的分类

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

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

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

例如:

<meta charset="UTF-8">

空元素的两种写法:

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

元素的嵌套

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

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

例如:

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

标准的文档结构

<!DOCTYPE html>

这是我的第一个网页

bilibili
第一个网页
语义化

每一个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>