HTML基本应用

朴灿烈づ我的快乐病毒、 2023-07-06 13:16 27阅读 0赞

# 2020.2.11HTML基本应用： #

## 什么是HTML以及HTML文档解释： ##

HTML ：是一种超文本标记语言（HyperText Markup Language简称HTML），也是一种用于创建网 页的标准**标记语言**，使用标记标签来描述网页

HTML文档：包含了HTML标签及文本内容，也叫做web页面

HTML文档的后缀名：.html或者是.htm(两者是没有什么区别的)

## 元素组成： ##

//这是声明为HTML5文档

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uYfA096L-1582082806808)(C:\\Users\\hp\\AppData\\Roaming\\Typora\\typora-user-images\\1581393286284.png)\]

### 通用声明： ###

### HTML5 ###

<!DOCTYPE html>

### HTML 4.01 ###

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

### XHTML 1.0 ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//元素是HTML页面的根元素

//元素包含了文档的元（meta）数据，如定义网页编码格式为utf-8。

//元素描述了文档的标题

//元素包含了可见的网页内容

HTML标题：

# – #

###### 元素定义一个标题（ ######

# 定义最大的标题， #

###### 定义最小的标题。浏览器会自动地在标题的前后添加空行。） ######

HTML段落：

一个段落

元素定义一个段落（浏览器会自动地在段落的前后添加空行）

HTML图像：通过标签来定义的。例如![Image 1][]

<br>换行，无结束标签

注意：图像的名称和尺寸是以属性的形式提供的。

注：\*\*在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

## HTML标签： ##

HTML标记标签：通常被称为HTML标签（HTML tag），也是由尖括号包围的关键词，比如<html>，通常			   是成对出现的。
        		比如<b>（开始标签/开放标签）和</b>（结束标签/闭合标签）
    格式：<标签>标签内容</标签>

## HTML元素： ##

HTML标签和HTML元素意义相同，但严格来说一个HTML元素包含了开始于结束标签

#### HTML元素： ####

<p>段落</p>
    某些元素具有空内容（empty content）

web浏览器：是用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示的HTML标 签，但可以使用标签来解决如何展现HTML的内容给用户。

<a href="default.html"></a>
    HTML的链接：通过标签<a>来定义的。例如<a href="https://www.runoob.com">这是一个连接</a>
    提示:在 href 属性中指定链接的地址。

换行

大多数HTML元素拥有属性。

#### HTML空元素： ####

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

### 嵌套的HTML元素： ###

HTML文档由嵌套的HTML元素构成。

#### HTML文档实例： ####

<!DOCTYPE html>
    <html>
    
    <body>
    <p>这是第一个段落。</p>
    </body>
    
    </html>
    包含是三个HTML元素

HTML实例解析：

<p>元素

元素定义了HTML文档的主体。 元素定义了整个HTML文档。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8h60TZh6-1582082806809)(C:\\Users\\hp\\AppData\\Roaming\\Typora\\typora-user-images\\1581393208680.png)\]

## HTML编译器： ##

HTML编辑器推荐：VS Code：https://code.visualstudio.com/

Sumlime Text：http://www.sublimetext.com/

接下来我们将为大家演示如何使用 VS Code 工具来创建 HTML 文件，其他两个工具操作步骤类似。

## VS Code ##

Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

#### 使用步骤： ####

1、新建HTML文件，

2、另存HTML文件（文件名.html 或者 文件名.htm）

3、在浏览器中运行这个HTML文件（右击编辑器上的文件名，选择默认浏览器打开Open In Default Browser，也可以是其它的浏览器Open In Other Browsers）

## HTML属性： ##

### 属性解释： ###

属性是HTML元素提供的附加信息，可以在元素中添加附加信息，属性一般描述于开始标签，并且总是以名称/值对的形式出现，例如：name=“value”。HTML可以设置属性。

#### HTML属性常用引用属性值： ####

属性值应该始终被包括在引号以内。

双引号是最常用的，不过使用单引号也没有问题。

提示：在某些个别的情况下，比如属性值本身就含有双引号，那么你必须使用单引号，例如：name=‘John“ShotGun”Nelson’

HTML提示：使用小写属性

#### HTML提示：使用小写标签 ####

#### HTML标签对于大小写不敏感 ####

等同于

。许多网站都使用大写的 HTML 标签。

菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中**推荐**使用小写，而在 (X)HTML 新版本中**强制**使用小写属性。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7tw41Nn2-1582082806810)(C:\\Users\\hp\\AppData\\Roaming\\Typora\\typora-user-images\\1581472306940.png)\]

## HTML标题： ##

#### 标题的重要性： ####

标题很重要，请确保锦囊HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为你的网页的结构和内容编制索引。

因为用户可以用过标题来快速浏览你的网页，所以用标题来呈现文档是很重要的。

应该将h1用作主标题（最重要的），其后是h2（次重要的），以此类推。

### HTML水平线： ###

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

#### HTML注释： ####

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

#### HTML 提示 - 如何查看源代码 ####

单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

## HTML段落： ##

### HTML 输出- 使用提醒 ###

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

<br>,<br/>和<br />的区别：
    <br>是HTML写法，也是XHTML1.1的写法，还是XML写法
    <br/>是XHTML为兼容HTML的写法，也是XML写法
    HTML5因为兼容XHTML，所以三种都可以使用。

## HTML文本格式化： ##

### HTML 格式化标签 ###

HTML 使用标签 **(“bold”) 与 *(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体***

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
    然而，这些标签的含义是不同的： 
    <b> 与<i> 定义粗体或斜体文本。
    <strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

### HTML文本格式化标签： ###

**定义粗体文本**

*定义着重文字*

*定义斜体字*

定义小号字

**定义加重语气**

定义下标字

定义上标字

定义插入字

定义删除字

### HTML“计算机输出”标签 ###

`定义计算机代码`

定义键盘码

定义计算机代码样本

定义变量

<pre>定义预格式文本

HTML引文，引用，及标签定义

定义缩写

<address>定义地址
    <bdo>定义文字方向
    <blockquote>定义长的引用
    <q>定义短的引用语
    <cite>定义引用、引证
    <dfn>定义一个定义项目

## HTML链接： ##

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

### HTML 超链接（链接） ###

HTML使用标签来设置超文本链接。(定义一个超级文本链接)

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

*  一个未访问过的链接显示为蓝色字体并带有下划线。
 *  访问过的链接显示为紫色并带有下划线。
 *  点击链接时，链接显示为红色并带有下划线。

#### 注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。 ####

HTML链接语法

#### target属性： ####

使用target属性，可以定义被链接的文档在何处显示。

例如：

target="\_blank"新打开一个窗口。

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

### HTML链接-id属性： ###

id属性可用于创建在一个HTML文档书签标记。

##### 提示：书签不是以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的 #####

例如：

在HTML文档中插入ID:
    <a id="tips">有用的提示部分</a>
    在HTML文档中创建一个链接到“有用的提示部分（id="tips"）”
    <a href="#tips">访问有用的提示部分</a>
    或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
    <a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

## HTML头部： ##

### HTML 元素 ###

元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: ,

#### HTML  元素： ####

<title> 标签定义了不同文档的标题。
    <title> 在 HTML/XHTML 文档中是必须的。
    <title> 元素:

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

一个简单的 HTML 文档:

#### HTML元素 ####

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接：
    <head>
    <base href="http://www.runoob.com/images/" target="_blank">
    </head>

#### HTML元素： ####

#### HTML ####

#### HTML 元素 ####

meta标签描述了一些基本的元数据。

标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

一般放置于 区域

##### 实例： #####

为搜索引擎定义关键词:
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    为网页定义描述内容:
    <meta name="description" content="免费 Web & 编程 教程">
    定义网页作者:
    <meta name="author" content="Runoob">
    每30秒钟刷新当前页面:
    <meta http-equiv="refresh" content="30">

#### HTML ####

#### HTML元素 ####

<head>定义了文档的信息
    <title>定义了文档的标题
    <base>定义了页面的链接标签的默认链接地址  
    <link>定义了一个文档和外部资源之间的关系    
    <meta>定义了HTML文档中的元数据    
    <script>定义了客户端的脚本文件    
    <style>标签定义了HTML文档的样式文件引用地址。

## HTML样式CSS ##

CSS用于渲染HTML元素标签的样式。

#### 如何使用CSS： ####

CSS 可以通过以下方式添加到HTML中:

*  内联样式- 在HTML元素中使用"style" **属性**
 *  内部样式表 -在HTML文档头部 区域使用

最好的方式是通过外部引用CSS文件.

### 内联样式： ###

使用内联样式的方法是在相关的标签中使用样式属性。

样式属性可以包含任何 CSS 属性。

以下实例显示出如何改变段落的颜色和左外边距。

例如:

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

#### HTML样式实例 - 背景颜色 ####

背景色属性（background-color）定义一个元素的背景颜色：

<body style="background-color:yellow;">
    <h2 style="background-color:red;">这是一个标题</h2>
    <p style="background-color:green;">这是一个段落。</p>
    </body>

#### HTML 样式实例 - 字体, 字体颜色 ，字体大小： ####

可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用标签。

#### HTML 样式实例 - 文本对齐方式： ####

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<h1 style="text-align:center;">居中对齐的标题</h1>
    <p>这是一个段落。</p>

#### 颜色标记：background：rag（）； ####

#### 内部样式表： ####

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 部分通过

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

#### 外部样式表： ####

直接在内部输入link+enter

### HTML样式标签： ###

定义资源引用地址

## HTML图像： ##

HTML图像标签源属性（Scr）

在 HTML 中，图像由 标签定义。

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义地址：

#### HTML 图像- Alt属性 ####

alt 属性用来为图像定义一串预备的可替换的文本。

在浏览器无法载入图像时，替换文本属性显示失去的信息

#### HTML 图像- 设置图像的高度与宽度 ####

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

**注意:** 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

## HTML表格 ##

表格定义由：

行由：

单元格:

表头：（会自动把内部的字体变粗）

创建表格：<table+enter>

隐藏边框属性

合并单元格：<td rows+enter键=“2”>大部分单元格都是上下合并，并且合并一个，会挤出相应的单元格在整个表的外部，所以合并过后要注意删除一些多余的单元格

table属性除了broder还有cellspacin、 cellpadding（这两个相当于表格的大小） bordercolor（背景颜色）

## HTML列表： ##

<li>定义列表项
    <dl>定义列表
    <dt>自定义列表项目
    <dd>定义自定义列表项描述

#### HTML有序列表：使用  标签，并且项目使用粗圆点进行标记。 ####

<ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7kJELyLq-1582082806810)(C:\\Users\\hp\\AppData\\Roaming\\Typora\\typora-user-images\\1582050509697.png)\]

#### HTML无序列表：使用  标签，项目使用数字标记 ####

<ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HpNahdhi-1582082806810)(C:\\Users\\hp\\AppData\\Roaming\\Typora\\typora-user-images\\1582050608840.png)\]

## HTML区块： ##

<div>
        块级元素，可用于组合其他HTML元素的容器。显示拆行。
        文档布局。使用表格定义布局的老式方法。
        定义文档区域。
        如果与 CSS 一同使用，可用于对大的内容块设置样式属性
    <span>
        （行内元素）
        内联元素、用作文本容器。
        当与 CSS 一同使用时，可用于为部分文本设置样式属性。
    这两种元素组合就合成了HTML

#### HTML区块元素： ####

<h1><p><ul><table>等等（有开始标签和结束标签的，以新行开始）

#### HTML内敛元素： ####

<b><td><a><img>等（不会以新行开始）

## HTML表单： ##

#### HTML表单： ####

一个区域，允许用户在表单中输入内容。用标签

为输入元素

<form>
    input 元素
    </form>

比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

#### 文本域： ####

文本域：通过 标签来设定