HTML基础学习总结

怼烎@ 2022-06-08 00:24 173阅读 0赞

### **什么是 HTML？** ###

HTML 是用来描述网页的一种语言。

*  HTML 指的是超文本标记语言 (Hyper Text Markup Language)
 *  HTML 不是一种编程语言，而是一种标记语言 (markup language)
 *  标记语言是一套标记标签 (markup tag)
 *  HTML 使用标记标签来描述网页

### **HTML 标签** ###

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

*  HTML 标签是由尖括号包围的关键词，比如 `<html>`
 *  HTML 标签通常是成对出现的，比如 `<b>` 和 `</b>`
 *  标签对中的第一个标签是开始标签，第二个标签是结束标签
 *  开始和结束标签也被称为开放标签和闭合标签

### **HTML 文档 = 网页** ###

*  HTML 文档描述网页
 *  HTML 文档包含 HTML 标签和纯文本
 *  HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>
    <body>
    
    <h1>我的第一个标题</h1>
    
    <p>我的第一个段落。</p>
    
    </body>
    </html>

**例子解释**

*  <html> 与 </html> 之间的文本描述网页
 *  <body> 与 </body> 之间的文本是可见的页面内容
 *  <h1>与 </h1> 之间的文本被显示为标题
 *  <p> 与 </p> 之间的文本被显示为段落

### **HTML标题** ###

HTML 标题（Heading）是通过 `<h1> - <h6>` 等标签进行定义的。  
例如：

<h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>

### **HTML 段落** ###

HTML 段落是通过 `<p>` 标签进行定义的。  
例：

<p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

### **HTML 链接** ###

HTML 链接是通过 `<a>` 标签进行定义的。  
例：

在 href 属性中指定链接的地址。

### **HTML 图像** ###

HTML 图像是通过 `<img>` 标签进行定义的。  
例：

### **HTML 元素** ###

HTML 文档是由 HTML 元素定义的。  
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素语法

*  HTML 元素以开始标签起始
 *  HTML 元素以结束标签终止
 *  元素的内容是开始标签与结束标签之间的内容
 *  某些 HTML 元素具有空内容（empty content）
 *  空元素在开始标签中进行关闭（以开始标签的结束而结束）
 *  大多数 HTML 元素可拥有属性

### **HTML 实例解释** ###

**<p> 元素：**

<p>This is my first paragraph.</p>

这个 `<p>` 元素定义了 HTML 文档中的一个段落。  
这个元素拥有一个开始标签 `<p>`，以及一个结束标签 `</p>`。  
元素内容是：This is my first paragraph。

**<body> 元素：**

<body>
    <p>This is my first paragraph.</p>
    </body>

`<body>` 元素定义了 HTML 文档的主体。  
这个元素拥有一个开始标签 `<body>`，以及一个结束标签 `</body>`。  
元素内容是另一个 HTML 元素（p 元素）。

**<html> 元素：**

<html>
    
    <body>
    <p>This is my first paragraph.</p>
    </body>
    
    </html>

`<html>` 元素定义了整个 HTML 文档。  
这个元素拥有一个开始标签 `<html>`，以及一个结束标签 `</html>`。  
元素内容是另一个 HTML 元素（body 元素）。

**空的 HTML 元素**  
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。  
`<br>` 就是没有关闭标签的空元素（`<br>` 标签定义换行）。  
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。  
在开始标签中添加斜杠，比如 `<br />`，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。  
即使 `<br>` 在所有浏览器中都是有效的，但使用 `<br />` 其实是更长远的保障。

### **HTML属性** ###

属性为 HTML 元素提供附加信息。  
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。  
属性总是以名称/值对的形式出现，比如：name=“value”。  
属性总是在 HTML 元素的开始标签中规定。

**属性实例**  
HTML 链接由 `<a>` 标签定义。链接的地址在 href 属性中指定：

**始终为属性值加引号**  
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

### **HTML 水平线** ###

`<hr />` 标签在 HTML 页面中创建水平线。  
hr 元素可用于分隔内容。

### **HTML 注释** ###

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。  
注释是这样写的  
``  
在开始标签中有一个惊叹号，但是结束标签中没有。  
浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

### **HTML 折行** ###

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 **`<br />`** 标签：

<p>This is<br />a para<br />graph with line breaks</p>

`<br />` 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

### **HTML图像** ###

**图像标签（<img>）和源属性（Src）**  
在 HTML 中，图像由 <img> 标签定义。  
`<img>` 是空标签，意思是说，它只包含属性，并且没有闭合标签。  
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。  
定义图像的语法是：

URL 指存储图像的位置。

### **HTML表单** ###

HTML 表单用于搜集不同类型的用户输入。  
**<form> 元素**  
HTML 表单用于收集用户输入。  
<form> 元素定义 HTML 表单：  
**实例**

<form>
     
    form elements
     
    </form>

**HTML 表单包含表单元素。**  
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素  
<input> 元素是最重要的表单元素。  
<input> 元素有很多形态，根据不同的 type 属性。

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>定义常规文本输入。</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>定义单选按钮的输入。</td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>定义提交按钮（提交表单）。</td> 
  </tr> 
 </tbody> 
</table>

**文本输入**  
`<input type="text">` 定义用于文本输入的单行输入字段：

例如：

<form>
     First name:<br>
    <input type="text" name="firstname">
    <br>
     Last name:<br>
    <input type="text" name="lastname">
    </form>

**单选按钮输入**

`<input type="radio">` 定义单选按钮。  
单选按钮允许用户在有限数量的选项中选择其中之一：  
**例如：**

<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
    </form>

其中加上checked的标签按钮为默认选择

**提交按钮**  
`<input type="submit">` 定义用于向表单处理程序（form-handler）提交表单的按钮。  
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。  
表单处理程序在表单的 action 属性中指定：  
**例如：**

<form action="action_page.php">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
    </form>

**Action 属性**  
action 属性定义在提交表单时执行的动作。  
向服务器提交表单的通常做法是使用提交按钮。  
通常，表单会被提交到 web 服务器上的网页。  
在上面的例子中，指定了某个服务器脚本来处理被提交表单：

如果省略 action 属性，则 action 会被设置为当前页面。

**Method 属性**  
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

或：

**Name 属性**  
如果要正确地被提交，每个输入字段必须设置一个 name 属性。  
本例只会提交 “Last name” 输入字段：

例如：

<form action="action_page.php">
    First name:<br>
    <input type="text" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
    </form>

### **HTML 表单元素** ###

**<input> 元素**  
最重要的表单元素是 <input> 元素。  
<input> 元素根据不同的 type 属性，可以变化为多种形态。

**<select> 元素（下拉列表）**  
`<select>` 元素定义下拉列表：  
例如：

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>

列表通常会把首个选项显示为被选选项。  
能够通过添加 selected 属性来定义预定义选项。

例如：

**<textarea> 元素**  
`<textarea>` 元素定义多行输入字段（文本域）：  
例如：

<textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
    </textarea>

**<button>元素**  
`<button`> 元素定义可点击的按钮：  
例如：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

### **HTML输入类型** ###

**输入类型：text**  
`<input type="text">` 定义供文本输入的单行输入字段：

例如：

<form>
     First name:<br>
    <input type="text" name="firstname">
    <br>
     Last name:<br>
    <input type="text" name="lastname">
    </form>

**输入类型：password**  
 定义密码字段：  
例如：

<form>
     User name:<br>
    <input type="text" name="username">
    <br>
     User password:<br>
    <input type="password" name="psw">
    </form>

### **HTML块** ###

块级元素在浏览器显示时，通常会以新行来开始（和结束）。  
例子：`<h1>, <p>, <ul>, <table>`  
内联元素在显示时通常不会以新行开始。  
例子：`<b>, <td>, <a>, <img>`

**<div>元素**  
HTML `<div>` 元素是块级元素，它是可用于组合其他 HTML 元素的容器。  
`<div>` 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。  
如果与 CSS 一同使用，`<div>` 元素可用于对大的内容块设置样式属性。

**<span>元素**  
HTML `<span>` 元素是内联元素，可用作文本的容器。  
`<span>` 元素也没有特定的含义。  
当与 CSS 一同使用时，`<span>` 元素可用于为部分文本设置样式属性。

### **HTML 头部元素** ###

*  文档标题：`<title>` 标题定义文档的标题。
 *  所有链接一个目标：如何使用 base 标签使页面中的所有标签在新窗口中打开。
 *  文档描述：使用 `<meta>` 元素来描述文档。
 *  文档关键词：使用 `<meta>` 元素来定义文档的关键词。
 *  重定向用户：如何把用户重定向到新的网址。

**<head>元素**  
`<head>` 元素是所有头部元素的容器。`<head>` 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。  
以下标签都可以添加到 head 部分：`<title>`、`<base>`、`<link>`、`<meta>`、`<script>` 以及 `<style>`。

**<title>元素**  
`<title>` 标签定义文档的标题。  
title 元素在所有 HTML文档中都是必需的。

title 元素能够：

*  定义浏览器工具栏中的标题
 *  提供页面被添加到收藏夹时显示的标题
 *  显示在搜索引擎结果中的页面标题

**<base>元素**  
所有浏览器都支持，为页面上的所有链接规定默认地址或目标，设置了base url之后，浏览器会使用基地址url来填充  
所有的相对url，包括的标签有a , link ,img ,form.  
href :规定页面中所有相对链接的基准url  
target:在何处打开页面中的所有链接: \_blank:新页面 ， \_self：当前页面

**<link>元素**  
`<link>` 标签定义文档与外部资源之间的关系。  
`<link>` 标签最常用于连接样式表：

**<style>元素**  
`<style>` 标签用于为 HTML 文档定义样式信息。  
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

<head>
    <style type="text/css">
    body {background-color:yellow}
    p {color:blue}
    </style>
    </head>

**<meta>元素**  
元数据（metadata）是关于数据的信息。  
`<meta>` 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。  
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。  
`<meta>` 标签始终位于 head 元素中。  
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

**针对搜索引擎的关键词**  
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。  
下面的 meta 元素定义页面的描述：

下面的 meta 元素定义页面的关键词：

name 和 content 属性的作用是描述页面的内容。

**<script>元素**  
`<script>` 标签用于定义客户端脚本，比如 JavaScript。

### **URL 字符编码** ###

URL 只能使用 ASCII 字符集来通过因特网进行发送。  
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。  
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。  
URL 不能包含空格。URL 编码通常使用 + 来替换空格。

### **文档类型声明** ###

**`<!DOCTYPE>` 声明帮助浏览器正确地显示网页。**  
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。  
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 `<!DOCTYPE>` 的用处。  
`<!DOCTYPE>` 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

**常用的声明：**  
HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">