HTML总结

1. HTML简介

1.1 什么是HTML？

HTML是超文本标记语言（Hyper Text Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言 (markup language)。

在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。

HTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容<标签>

2. 标题 (heading)

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，如下所示：

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

在页面中，标题非常重要：

搜索引擎用标题来索引页面的内容
用户也习惯以标题进行主要内容浏览，以决定是否查看该页面。

3. 文本格式

<p></p> 显示文本内容
<del></del> 划掉文本内容
<strong></strong> 加粗文本内容
<em></em> 斜体；

4. 超链接

4.1 超链接语法

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

• href为要跳转去的地址 URL(Uniform Resorce Locator)
• target属性为_blank表示在新的页面打开超链接(默认是在当前页面打开即_self)
• 超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击的

4.2 锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

5. 图片及文件路径 img

5.1 图片

在页面插入一张图片语法如下：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

• src属性为要显示图片文件的位置 URL，即图片文件的路径
• alt属性当获取图片出现问题时显示的文字（占位符）
• 可为图片指定高宽度，但不建议（可能导致图片变形）

5.2 文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

例子	解释
<img src="picture.jpg">	该图片文件与当前文档在同一目录中
<img src="./images/picture.jpg">	该图片文件在当前目录下的images目录中
<img src="../picture.jpg">	该图片文件在上一级目录中

6. 表格 列表 表单

6.1 表格 Table

有时，页面的内容需要用表格来进行呈现。我们使用<table>等标签即可。

例如：

<table>
              <tr>
                     <th>Firstname</th>
                     <th>Lastname</th>
               </tr>
               <tr>
                     <td>Jill</td>
                     <td>Smith</td>
               </tr>
</table>

效果如下：

Firstname	Lastname
Jill	Smith

其中<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）

6.2 列表 List

6.2.1 无序列表

无序列表使用<ul></ul>标签

 <ul>
 <li>HTML1</li>
 <li>HTML2</li>
 </ul>

6.2.2 有序列表

有序列表使用<ol></ol>标签

<ol>
<li>HTML1</li>
<li>HTML2</li>
</ol>

6.3 表单 Form

使用<form></form>标签

下拉列表：
使用<select></select>标签
选项使用<option></option>标签

7. 其他

区块元素:
区块元素在浏览器显示时，通常会以新行来开始和结束。
如：<h1>, <pre>, <ul>, <table>，<div> 等。

内联元素:
内联元素不会新起一行。
如： <span>, <input>, <td>, <a>, <img>等。