HTML详解

最新推荐文章于 2024-05-30 11:35:48 发布

AngeliaZheng

最新推荐文章于 2024-05-30 11:35:48 发布

阅读量1.7k

点赞数 1

分类专栏： Web HTML 文章标签： HTML

本文链接：https://blog.csdn.net/u014010512/article/details/82963975

版权

Web 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

HTML超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML文档的后缀名，以下两种后缀名没有区别，都可以使用：

.html
.htm

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

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，以开始标签起始。第二个标签是结束标签，以结束标签终止。开始和结束标签也被称为开放标签和闭合标签。
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML 元素，"HTML 标签" 和 "HTML 元素" 通常描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。
HTML 属性，属性是 HTML 元素提供的附加信息。属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

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

注: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Angelia "Snowdrop" Zheng'。

适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname），类名从样式文件引入
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

Web 浏览器，如Google，IE，Firefox，Safari 是用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。
HTML 网页结构

<!DOCTYPE html> 
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档，doctype 声明是不区分大小写的。<!DOCTYPE HTML>，<!doctype html>，<!Doctype Html>都可以。
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

HTML 标题，HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML 水平线，<hr> 标签在 HTML 页面中创建水平线。

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

<!-- 这是一个注释 -->

HTML 段落，HTML 可以将文档分割为若干段落。HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 折行， <br /> 标签可以在不产生一个新段落的情况下进行换行（新行）。<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML 链接，HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。HTML 链接是通过标签 <a> 来定义的。在 href 属性中指定链接的地址。

<a href="https://blog.csdn.net/u014010512/article/details/82963975/">这是一个链接</a>

注："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://blog.csdn.net/u014010512/article/details/82963975"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://blog.csdn.net/u014010512/article/details/82963975/"。

HTML 链接属性：

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

<!-- 新窗口打开文档 -->
<a href="https://blog.csdn.net/u014010512/article/details/82963975" target="_blank">这是一个链接</a>

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

<!-- 创建ID -->
<a id="detail" href="https://blog.csdn.net/u014010512/article/details/82963975">具体展示部分</a>
<!-- 在HTML文档中创建一个链接到"具体展示部分(id="detail"）" -->
<a href="#detail">访问具体展示部分</a>
<!-- 从另一个页面创建一个链接到"具体展示部分(id="detail"）" -->
<a href="https://blog.csdn.net/u014010512#tips">访问具体展示部分</a>

HTML 图像，HTML 图像是通过标签 <img> 来定义的。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。alt 属性用来为图像定义一串预备的可替换的文本。height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

<img src="/images/image.png" alt="图片" width="100" height="100" />

注：浏览器无法载入图像时，替换文本属性替换失去的图片信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

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

HTML <head> 元素，<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <base> 元素，<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。

HTML <link> 元素，<link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表。

<link rel="stylesheet" type="text/css" href="mystyle.css">

HTML <style> 元素，<style> 标签定义了HTML文档的样式文件引用地址。在<style> 元素中也可以直接添加样式来渲染 HTML 文档。

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

HTML <meta> 元素，meta标签描述了一些基本的元数据，元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

<!-- 关键字 -->
<meta name="keywords" content="HTML, CSS, XML, HTML5, JavaScript">
<!-- 作者 -->
<meta name="author" content="Angelia">

HTML <script> 元素，<script>标签用于加载脚本文件，如： JavaScript。

HTML 表格，表格由 <table> 标签来定义。每个表格均有若干行（<tr>），每行被分割为若干单元格（<td>）。字母 td 指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格的边框使用 border 属性进行定义，表头使用 <th> 标签进行定义。

<table border="2">
    <tr>
        <th>Header</th>
        <th>Header</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>    
</table>

HTML 列表，HTML 支持有序、无序和定义列表:

无序列表使用 <ul> 标签，是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

<ul>
<li>Angelia</li>
<li>Snowdrop</li>
</ul>

有序列表使用 <ol> 标签。每个列表项始于 <li> 标签。列表项目使用数字进行标记。

<ol>
<li>Angelia</li>
<li>Snowdrop</li>
</ol>

HTML 自定义列表，自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Angelia</dt>
<dd>- 英文名字</dd>
<dt>Snowdrop</dt>
<dd>- 昵称</dd>
</dl>

结果展示
Angelia
- 英文名字
Snowdrop
- 昵称

HTML 区块，大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。如: <h1>, <p>, <ul>, <table>。
内联元素在显示时通常不会以新行开始。如: <b>, <td>, <a>, <img>。

HTML <div> 和<span>，HTML 可以通过 <div> 和 <span>将元素组合起来。

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素是内联元素，可用作文本的容器。与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 布局，网页布局对改善网站的外观非常重要。大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

HTML 表单和输入，HTML 表单用于收集不同类型的用户输入。表单使用表单标签 <form> 来设置。表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。常被用到的输入类型如下：

<!-- 文本域 -->
<input type="text" name="name">
<!-- 密码字段 密码字段通过标签<input type="password"> 来定义。-->
<input type="password" name="pwd">
<!-- 单选按钮 <input type="radio"> 标签定义了表单单选框选项。 -->
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
<!-- 复选框 <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。 -->
<input type="checkbox" name="hobbies" value="Reading">I like reading
<input type="checkbox" name="hobbies" value="Sing">I like sing
<!-- 提交按钮 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。-->
<input type="submit" value="Submit">

HTML 框架，通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="URL" width="100%" height="500" frameborder="1"></iframe>

该URL指向不同的网页。height 和 width 属性用来定义iframe标签的高度与宽度。frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框。

iframe可以显示一个目标链接的页面。目标链接的属性必须使用iframe的属性，如下实例:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML From Angelia</title> 
</head> 
<body>
<iframe src="" name="iframe_a" width="100%" height="500" frameborder="1"></iframe>
<p><a href="https://blog.csdn.net/u014010512/article/details/82963975" target="iframe_a">HTML详解</a></p>
</body>
</html>

HTML 颜色，HTML 颜色由红色、绿色、蓝色混合而成。即颜色由红(R)、绿(G)、蓝(B)组成。

颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。十六进制值的写法为 # 号后跟三个或六个十六进制字符。

HTML 脚本，JavaScript 使 HTML 页面具有更强的动态和交互性。

HTML <script> 标签，<script> 标签用于定义客户端脚本，比如 JavaScript。<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

HTML<noscript> 标签，<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容。

总结，HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

AngeliaZheng

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML详解

HTML超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了...
复制链接

扫一扫