HTML超文本标记语言

已于 2024-03-01 14:30:52 修改
阅读量1k 收藏
点赞数
文章标签： html
于 2021-03-17 23:51:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lln1540295459/article/details/114955082
版权

HTML简介

 

实例

<!DOCTYPE html>声明为 HTML5文档 
<html lang="en">元素是 HTML页面的根元素 
<head>元素包含了文档的元（meta）数据，如<meta charset="UTF-8">定义网页编码格式为 utf-8。 
<title>元素描述了文档的标题
<body>元素包含了可见的页面内容

 

什么是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标题

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

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h2>

在浏览器显示如下：
在这里插入图片描述

 

HTML段落

HTML段落是通过标签< p >来定义的。

<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>

在浏览器显示如下：
在这里插入图片描述

 

HTML链接

HTML链接是通过标签< a >来定义的。
超链接可以是一个字，一个词，或一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签< a > 中使用了href属性来描述链接的地址；默认情况下，链接将以以下形式出现在浏览器中：

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

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

<a href="http://www.baidu.com/">百度链接</a>

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

在浏览器显示如下：
在这里插入图片描述

 

HTML图像

HTML图像是通过标签< img >来定义的。

<img src="../img/happy.jpg" alt="我学习 我嗨皮" title="皮卡丘" width="200px" height="200px">
注释：图像的名称和尺寸是以属性的形式提供的。

src：图像地址（本地路径/网络链接）
alt：图像替代文字
title：鼠标悬停提示文字

在浏览器显示如下：
在这里插入图片描述
若图片位置错误则显示替代文字（如下所示）：
在这里插入图片描述

HTML元素

HTML 文档是由 HTML 元素定义的。
 

HTML 元素

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

开始元素元素内容结束标签
< p >这是段落< /p >
< a href=“www.baidu.com”>百度链接< /a >
< br />换行

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

 

HTML 元素语法

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

 

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

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

HTML 文档实例（下面的例子包含三个 HTML 元素）：

<html>

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

</html>

 

HTML 实例解释

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</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 文档的主体。

这个元素拥有一个开始标签 ，以及一个结束标签 。

元素内容是另一个 HTML 元素（p 元素）。

 

< html> 元素：

<html>

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

</html>

< html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 < html>，以及一个结束标签 < /html>。

元素内容是另一个 HTML 元素（body 元素）。

 

HTML属性

属性为 HTML 元素提供附加信息。

 

HTML 属性

HTML 元素可以设置属性

属性可以在元素中添加附加信息

属性一般描述于开始标签

属性总是以名称/值对的形式出现，比如：name=“value”。

 

属性实例

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

<a href="http://www.w3school.com.cn">This is a link</a>

 

更多 HTML 属性实例

 

属性例子 1:（居中排列标题）

< h1> 定义标题的开始。

< h1 align=“center”> 拥有关于对齐方式的附加信息。

 

属性例子 2:（背景颜色）

< body> 定义 HTML 文档的主体。

< body bgcolor=“yellow”> 拥有关于背景颜色的附加信息。

 

属性例子 3:（表格属性）

定义 HTML 表格。
拥有关于表格边框的附加信息。

 

始终为属性值加引号

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

在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

 

HTML 属性参考手册

HTML标准属性参考手册

 

HTML标题

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

< h1> 定义最大的标题。< h6> 定义最小的标题。

实例

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

注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

 

HTML水平线

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

<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>

浏览器显示如下：
在这里插入图片描述

 

HTML注释

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

<!-- 这是一个注释 -->
<!-- This is a comment -->

 

HTML 段落

  • 可以把 HTML 文档分割为若干段落。
  • 段落是通过 < p > 标签定义的。
<p>This is a paragraph</p>
<p>This is another paragraph</p>

注释：浏览器会自动地在段落的前后添加空行。（< p> 是块级元素）
提示：使用空的段落标记 < p>< /p> 去插入一个空行是个坏习惯。用 < br /> 标签代替它！（但是不要用 < br /> 标签去创建列表。）

 

HTML折行（空的HTML元素）

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

<p>这是段落前半部分，<br/>这是段落后半部分。</p>

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

< br> 就是没有关闭标签的空元素（< br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 < br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 < br> 在所有浏览器中都是有效的，但使用 < br /> 其实是更长远的保障。

 

HTML文本格式化

<strong>加粗文本</strong>
<b>加粗文本</b>（bold）
<em>斜体文本</em>
<i>斜体文本</i>（italic）
通常使用标签< strong >加粗和<em>斜体，更加语义化。

 

HTML链接-target属性

使用 target 属性，可以定义目标窗口位置。

<a href="path" target="_self">当前网页打开</a>
<a href="path" target="_blank">新窗口打开</a>

 

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。（不能重复）

在HTML文档中插入ID：

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="path #tips"> 访问有用的提示部分</a>

 

HTML < div > 元素

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

<div style="border: 2px solid aqua; background-color: aliceblue; width: 300px;height: 200px; border-radius: 50px;">
  <p align="center">div框框</p>
</div>

在浏览器显示如下：
在这里插入图片描述

solid实心边框
dotted虚心边框
dashed虚心边框
aqua 设置边框颜色为aqua
background-color 设置div背景颜色为aliceblue
border-radius 添加圆角边框

 
 

HTML表格

表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td > 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：

    <table width="600" height="100" border="1" align="center" cellspacing="0">
    
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        
        <tr>
            <td align="center">row 1, cell 1</td>
            <td align="center" valign="top">row 1, cell 2</td>
            <td align="center" valign="bottom">row 1, cell 3</td>
        </tr>
        
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
            <td>row 2, cell 3</td>
        </tr>
        
    </table>

 

在浏览器显示如下：
在这里插入图片描述

表格的表头使用< th >标签进行定义。 大多数浏览器会把表头显示为粗体居中的文本。
border=“1” 定义边框属性。
cellspacing=“0” 设置内表格无边框。

 
 

HTML 样式- CSS

 

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">This is a paragraph</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（字体大小）属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

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

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

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

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
李林楠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
超文本标记语言HTML
qq_55674489的博客
12-29 1132
现今在网速足够快的情况下，非常适合使用web项目。开发好的网页可以部署在服务器中,然后通过浏览器访问即可。 那么要如何开发网页呢？ 基本都是使用html,css,javaScript开发网页(vue.js elementUI他们都是在html,css,js基础上封装而来的) 这就引出了，今天要讲的第一部分HTML。
html标签tag,一些基础的HTML Tag标签
weixin_39615596的博客
06-17 2514
HTML里，比较基础的Tag主要用于标题，段落和分行。学习HTML最好的方法，就是跟着示例学。为了各位学习的方便，我们准备了一个简单的HTML编辑器，你可以在左边写HTML代码，然后点击上面的按钮，查看HTML的显示结果。试试看吧！这是一个非常简单的HTML。这个示例算是一个最简单的HTML文件，只包含了最基本的能构成一个HTML文件的Tag。通过这个例子，你可以看到浏览器是如何显示这个文件的，以...
标记语言 编程语言 脚本语言分别有哪些？ 区别是什么？
Dontla的博客
11-08 4108
一、各自的定义 标记语言 标记语言，是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。 如：HTML、XML 脚本语言 脚本语言是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。它的命名起源于一个脚本“screenplay”，每次运行都会使对话框逐字重复。早期的脚本语言经常被
前端基础1——HTML标记语言
百慕卿君博客
08-29 544
HTML常用标签
HTML标记语言
pan_junbiao的博客
08-06 3860
1、HTML标记语言 HTML的全称是Hyper Text Markup Language，即超文本标记语言。HTML是一种在互联网上常见的网页制作标记性语言，HTML用于描述超文本中内容的显示方式。使用 HTML 可以实现在网页中定义一个标题、文本或者表格等。严格的说，HTML 并不能算作是一种程序设计语言，因为它缺少了程序设计语言所应有的特征。HTML是通过浏览器的翻译，将网页中的内容呈现...
HTML超文本标记语言速查手册.pdf
07-14
HTML超文本标记语言速查手册.pdf HTML超文本标记语言速查手册.pdf是HTML语言的速查手册，涵盖了HTML语言的基本结构、标签、属性和事件处理等方面的知识。下面是根据手册中的内容生成的相关知识点： 一、HTML基本...
HTML超文本标记语言标签
09-28
HTML 超文本标记语言标签 HTML 超文本标记语言是一种规范和标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。 ...
html超文本标记语言
11-06
html超文本标记语言
html 超文本标记语言
05-24
适合初学html的学员，HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令...
HTML入门学习笔记-常用的标记标签tag
wsl_cnxw的博客
08-25 3026
HTML超文本标记语言 (Hyper Text Markup Language)，是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 <...
HTML常用标记（超详解）
热门推荐
m0_52896041的博客
11-26 1万+
HTML常用标记（超详解）
一、HTML基础标签
qq_63011146的博客
11-16 1926
1.HTML简介 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言 标记语言是一套标记标签 HTML 使用标记标签来描述网页 HTML 文档包含了HTML标签及文本内容 HTML 运行在浏览器上，由浏览器来解析 HTML文档也叫做web 页面 文档的后缀名：xxx.html 或 xxx.htm 2.HTML标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag) HTML 标签是由尖括号包围的关..
HTML 介绍
Bananaaay的博客
03-11 337
web窗体上面的数据多是动态冲数据库中读取的，故加载慢，web窗体是一个动态网页的组合，分为.aspx和相应的.cs文件，.aspx文件可以用html标记语言实现网页前台，.cs则是服务器代码，永爱进行交互，web窗体可以直接利用vs各种服务器的空间，实现快速开发。Web浏览器（如谷歌浏览器，Internet Explorer，火狐，safari），其用于读取HTML文件，并将其作为网页显示，浏览器并不是直接显示HTML标签，但可以使用标签来决定如何展现HTML页面内容给用户，
HTML(1) 基础tag介绍
m0_74181795的博客
09-18 459
到依次变小，即h1>h2>h3>h4>h5>h6。将想要引用的内容写在之后，并以结尾。将想要另起一行的内容写在 的下一行，注意不可以紧接着写在tag后面。先写，在与内使用 。将文字段落写在之后，并以结尾。将内容写在 之后，并以之后，并以之后，并以
什么是标记语言
csdn_wpno1的博客
07-07 1万+
什么是文本文件：只有文本内容，没有任何格式。举例： 在记事本中输入“带你出师、闯荡江湖！”，并设置相应的格式，但是在其它电脑上打开并没有显示同样的格式，说明其不包含任何格式信息。查看文件大小显示20字节   在word中输入同样的内容，同时设置格式，在另一个电脑上看到的是同样的内容和同样的格式。同时查看文件的大小，   说明word文档中除了存储内容，还存储了格式等信息（document
加速网页加载，提升用户体验：HTML、JS 和 Vue 项目优化全攻略
最新发布
服务员的博客
08-16 802
除了以上列出的方法，还有很多其他的优化技巧，例如使用 CDN 加速、HTTP/2 协议、Service Worker 缓存等等。在信息爆炸的时代，网页加载速度成为了用户体验的重中之重。为了留住用户，提升转化率，网页优化势在必行！网页优化是一个持续的过程，需要不断学习和实践。通过以上方法，你可以有效提升网页加载速度，为用户提供更流畅的体验，最终实现更高的转化率和用户满意度。本文将从 HTML、JavaScript 和 Vue 项目三个方面，为你提供一份全面的网页优化指南，助你打造闪电般的加载速度！
HTML超文本标记语言详解
"这份资料是关于HTML超文本标记语言的学习材料，源自南京大学的内部教材，专注于网页编程。" 在互联网的世界中，HTML（HyperText Markup Language）是创建网页的基础，它是一种标记语言，用于描述网页的内容和结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值