HTML总结

定义

HTML是超文本标记语言，用于创建网页。我们可以用HTML构建web网页的框架。

HTML元素

HTML中会使用许多元素，在这里写了一些元素的用处。

< header >

标签定义文档或文档的一部分区域的页眉。

 <header>
<p>开开心心</p>
</header>

结果显示为：

开开心心

< footer>

标签定义文档或者文档的一部分区域的页脚。

< section >

标签定义文档中的区段。比如章节、页眉、页脚或文档中的其他部分。

< article >

表示页面中的一块与上下文不相关的独立内容，比如网页中的一篇文章或报纸中的一篇文章。< article >不同于其他DIV、 CSS布局结构，< article >主要布局文章类内容。如：论坛帖子、文章著作。

 <article>
 <pre>沾衣欲湿杏花雨，吹面不寒杨柳风。</pre>
</article>

结果显示为：

沾衣欲湿杏花雨，吹面不寒杨柳风。

< div >

定义文档中的分块。< div >能把文档分割为独立的、不同的部分。

<div>
<h1>绝句</h1>
<pre>
两个黄鹂鸣翠柳，一行白鹭上青天。
窗含西岭千秋雪，门泊东吴万里船。
</pre>
</div>

结果显示为：

< span >

可以对行内元素进行组合。

<p>hello <span style="color:#da1313;">world</span></p>

结果显示为：

< img >

将图像嵌入到文档中，使用< img >时必须包含 src(包含图片的文件路径）。

<img src="https://i-blog.csdnimg.cn/blog_migrate/c207bbda52b345a4fc808a9f93ca8aa8.jpeg">

结果显示为：

< aside >

表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。

< audio >

对于音频定义一个标准。

格式:<audio src="x.wav">

< canvas >

绘制图形以及图形动画

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #AAAAAA;"></canvas>
  <script>
  var c=document.getElementById("myCanvas");
  var k=c.getContext("2d");
  k.font="30px Arial";
  k.strokeText("你好",60,60);
  </script>

< datalist >

定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

<input id="color" list="flower's color" />
<datalist id="flower's color">
  <option value="red">
  <option value="blue">
  <option value="pink">
</datalist>

< br >

换行符。

<p>你好！<br>hello !</br></p>

你好！
hello !

< p >

标记一个段落。< p >不注重格式。

<p>这是                        一个                          段落</p>
<p>这是一个段落</p>

这是 一个 段落

这是一个段落

< pre >

标记文本，注重格式，HTML中写的是什么就显示什么内容。

<pre>
好好学习，
天天向上。
</pre>

好好学习，
天天向上。

< meta charset=“utf-8” >

防止文档中的汉字出现乱码。

< del >

在一段文字当中已删除的字符，和< ins >一起使用删除一端字符后改正的文本。

<p>My favorite color is <del>blue</del> <ins>red</ins></p>

My favorite color is blue red

文本格式

标签	作用
em	强调文本
strong	重要的文本
dfn	一个定义项目
code	计算机代码文本
samp	样式文本
kbd	键盘文本
var	变量
del	删除
s	标记不再正确的文本
u	文本添加下划线
small	定义小型文本

<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码 print("Hello World")</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>
<small>小型变量</small>
<s>标记不再正确的文本</s>
<u>文本添加下划线</u>

强调文本

加粗文本

定义项目

一段电脑代码 print(“Hello World”)

计算机样本

键盘输入

变量
小型变量
标记不再正确的文本
文本添加下划线

表格

标签	作用
table	表格
th	表头
tr	表格的行
td	表格单元
caption	表格标题
colgroup	表格列的组
col	表格列的属性
thead	表格的页眉
tbody	表格的主体
tfool	表格的页脚

 <style type="text/css">
    thead {
      color: green;
    }

    tbody {
      color: blue;
    }

    tfoot {
      color: red;
    }
  </style>
  </head>

  <table border="1">
    <caption>物价表</caption>
    <colgroup>
      <col span="1" style="background-color:pink">
      <col style="background-color:rgb(158, 158, 243)">
    </colgroup>
    <thead>
      <tr>
        <th>物品</th>
        <th>价钱（斤/元）</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>苹果</td>
        <td>5</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>香蕉</td>
        <td>3.99</td>
      </tr>
      <tr>
        <td>草莓</td>
        <td>20</td>
      </tr>
    </tbody>
  </table>

列表

1. 有序列表
   一列项目，列表项目使用数字进行标记。使用< ol >标签。可以用大写字母A，小写字母a，罗马字母i等作为排序的符号。当排序为不为数字1，2，3…时，要使用< ol type=“a/Ⅰ/A…”>

<ol type="a">
  <li>兔子</li>
  <li>熊猫</li>
  <li>大象</li>
</ol>

2. 无序列表
   使用< ul >标签，默认使用实心圆点作为每项的标志，当然也可以是空心圆/circle、实心方块/square以及不出现标志。

<ul type="水果">
  <li>苹果</li>
  <li>香蕉</li>
  <li>桃子</li>
</ul>

链接

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明：

1.href即为要跳转去的地址
2.target属性为_blank表示在新的页面打开超链接（要在当前网页打开要使用属性_self）
3.超链接标签包含的内容即为显示在页面上供用户点击的
超链接可以连接网页、图片等。