HTML

最新推荐文章于 2022-05-06 16:15:00 发布
最新推荐文章于 2022-05-06 16:15:00 发布
阅读量226 收藏 3
点赞数
分类专栏： html

文章目录

1.什么是HTML？

  • HTML是用来描述页面的一种语言
  • HTML指的是超文本标记语言：HyperText Markup Language
  • HTML不是一种编程语言而是一种标记语言，标记语言是一套标记标签
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面
HTML实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML玩法</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

在这里插入图片描述

案例详解
  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落
HTML 标签
  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
HTML 网页结构

下面是一个可视化的HTML页面结构：
在这里插入图片描述
只有 < body> 区域 (白色部分) 才会在浏览器中显示。


<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype 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">

XHTML 1.0

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

2.HTML标题

  • HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的
  • <h1>定义最大的标题。<h6>定义最小的标题。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

在这里插入图片描述

2.1 标题很重要
  • 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
    -搜索引擎使用标题为您的网页的结构和内容编制索引。
  • 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
  • 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
HTML段落
  • HTML 可以将文档分割为若干段落。
  • HTML 段落是通过标签 <p> 来定义的
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

在这里插入图片描述

  • 注意：浏览器会自动地在段落的前后添加空行。（ 是块级元素）
  • 不要忘记结束标签
    即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来
HTML拆行
  • 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签
<p>这个<br>段落<br>演示了分行的效果</p>

在这里插入图片描述

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

  • HTML 链接是通过标签 <a> 来定义的

  • <a> 标签定义超链接，用于从一个页面链接到另一个页面。
    <a> 元素最重要的属性是 href 属性，它指定链接的目标。

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

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

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

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

  1. 一个未访问过的链接显示为蓝色字体并带有下划线。
  2. 访问过的链接显示为紫色并带有下划线。
  3. 点击链接时，链接显示为红色并带有下划线。
<a href="http://www.baidu.com">这是一个链接</a>

运行结果：这是一个链接

HTML链接语法
  • 链接的 HTML 代码很简单。它类似这样：
<a href="url">链接文本</a>

href 属性描述了链接的目标。

  • 实例
<a href="http://www.baidu.com/">访问百度</a>

访问百度

上面这行代码显示为：访问菜鸟教程
点击这个超链接会把用户带到百度的首页。
提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性
  • 使用 target 属性，你可以定义被链接的文档在何处显示。
    下面的这行会在新窗口打开文档：
<a href="http://www.baidu.com/" target="_blank">访问百度!</a>

访问百度!

HTML 链接- id 属性

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

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

  • 在HTML文档中插入ID:

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

有用的提示部分

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

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

访问有用的提示部分

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

<a href="https://blog.csdn.net/heibaikong6/article/details/88426278">
访问有用的提示部分</a>
访问有用的提示部分
HTML图像

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

<img src="/images/logo.png" width="258" height="39" />

在这里插入图片描述
注意： 图像的名称和尺寸是以属性的形式提供的。

3.HTML元素

开始标签*元素内容结束标签*
<p>这是一个段落</p>
<a href=“default.htm”>只是一个链接</a>
<br>换行

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

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

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

</html>

在这里插入图片描述
以上实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

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

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。

<body> 元素:

<body>

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

</body>

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

<html> 元素：

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

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

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落

<p>这是一个段落

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。 但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

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

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

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

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

4.HTML属性

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

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

&lt;a href="http://www.baidu.com"&gt;这是一个链接</a>
HTML 属性常用引用属性值

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

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

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

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

5. HTML 水平线

  • <hr> 标签在 HTML 页面中创建水平线。
  • hr 元素可用于分隔内容。
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

在这里插入图片描述

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

注释写法如下:

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

在这里插入图片描述

  • 注释: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。。
HTML 标签参考手册
标签描述
<html>定义 HTML 文档
<body>定义文档的主体
<h1> - <h6>定义 HTML 标题
<hr>定义水平线
<!–…-->定义注释
<p>定义一个段落
<br>插入单个折行（换行）
标题大小与字体大小的关系
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>

<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>

<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>

<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>

<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>

<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>

在这里插入图片描述

6. HTML文本格式化标签

标签描述
< b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字
HTML “计算机输出” 标签
标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本
HTML 引文, 引用, 及标签定义
标签描述
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。

7. HTML<head>

  • <head>元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS)及各种meta信息。

  • 可以添加在头部区域的元素标签为: <title> <style>, <meta>, <link>, <script>, <noscript>, and <base>

  • HTML head 元素

标签描述
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件
7.1 HTML<title>
  • <title>标签定义了不同文档的标题。
  • <title>在 HTML/XHTML 文档中是必须的。
  • <title> 元素:
  1. 定义了浏览器工具栏的标题
  2. 当网页添加到收藏夹时，显示在收藏夹中的标题
  3. 显示在搜索引擎结果页面的标题
  • 一个简单的 HTML 文档:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>
7.2 HTML<base>元素
  • <base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
7.3 HTML<link>元素

  • <link>标签定义了文档与外部资源之间的关系。

  • <link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
7.4 HTML <style> 元素

  • <style> 标签定义了HTML文档的样式文件引用地址.

  • 在 <style>元素中你也可以直接添加样式来渲染 HTML 文档:

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

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

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

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

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

  • <meta> 一般放置于 <head> 区域

  • <meta> 标签- 使用实例
    为搜索引擎定义关键词:

<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">
7.6 HTML <script> 元素
  • <script> 标签用于加载脚本文件，如： JavaScript。
heibaikong6
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
在html中include一个文件内容的几种方法
软件工程 plus 人工智能
01-18 3万+
在html文件引入其它html文件的几种方法简介：在论坛中常常有网友问到，可以在一个html的文件当中读取另一个html文件的内容吗？答案是确定的，而且方法不只一种，在以前我只会使用iframe来引用，后来发现了另外的几种方法，那今天就总结这几种方法让大家参考一下，本人觉得第三种方式较好！ 1.IFrame引入，看看下面的代码 [代码] 你会看到一个外部引入的文件，但会发现有一个类似外框的东西将
引用文档中的HTML元素
qq_37860994的博客
04-27 307
引用文档中的HTML元素的3种方法 document对象的all属性返回值包含文档中所有HTML标签的数组，对all[]数组中元素的引用方法有三种，分别为document.all[i]、document.all[name]、以及document.all.tags[tagName] 代码实例： &lt;body&gt; &lt;!--document.all[]返回了一个数组，数组中的...
HTML中的属性
余月初贰的博客
05-06 302
HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 实例 <a href="#">这是一个链接</a> a标签内部不能是空的，所以用“#”在内表示链接地址 HTML 属性常用引用属性值 属性值应该始终被包括在引号内。 双引号是最常用的，不过使用单引号也没有问题。 HTML 提示：使用小写属性 属性和属性值对大小写不敏感。 不过尽量写成小写，保证整体的流畅，使整体观看感觉更佳。 HTML 全局属性 下面列举..
一个Html页面给另一个html页面传值(或B.html页面调用A.html的参数)
太子的博客
08-27 2万+
自己项目中需要用到,很多朋友已经解决了这个问题,有好几种方法,但是我急用,就用了window.open方法先总结一个自己立马上手的方法,等周末或中间有空把其他方法也总结一下,主要希望自己以后再用到的时候万一忘了能快速回忆起来,也希望能帮助一下需要的朋友 A.html &lt;input type="text" name="username" class="us...
如何在html中调用js中的变量获取其值
qq_33271461的博客
04-18 3万+
<--html--> <input id="s1" type="hidden" name="house.terminalNo" value="" /> <---js--> var item = getQueryString("item"); document.getElementById('s1').value = item;
HTML期末设计——代码篇
热门推荐
greengirl5的博客
06-22 13万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
最新发布
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
html网页做的动态爱心（超好看）
11-07
用html+css+JavaScript网页做的动态爱心，浪漫十足
学生个人简介html网页
11-17
在IT领域，HTML（HyperText Markup Language）是用于创建网页的标准标记语言，是网页开发的基础。这个"学生个人简介html网页"项目是一个非常适合初学者学习的实例，它可以帮助理解HTML和CSS的基本概念以及如何结合...
HTML播放海康视频的RTSP视频流
07-04
HTML播放海康视频的RTSP视频流是一种在网页上实现监控视频实时播放的技术。RTSP（Real Time Streaming Protocol）是一种应用层协议，用于控制多媒体数据的传输，常用于IP摄像机、视频服务器等设备的视频流媒体服务。...
网页设计期末大作业+html+css
05-25
适合学生的html5响应式网站 成品可以让你们修改吗？ 学生网页成品坚持每周更新 学生网站一定不能太专业，否则老师会发现的！ DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品...
html页面 引入外部数据
u012040869的博客
05-17 3501
引入 <script src="citydata.js"></script>citydata.js文件写法 var citydata={"马累":"MLE","斯德哥尔摩":"STO","高雄":"KHH","达尔文":"DRW","保山":"BSD","札幌":"CTS","慕尼黑":"MUC","济州":"CJU","阿比让":"ABJ","普尔曼":"PUW","基奇纳":"YKF","
html引用java变量的值_Java中值传递和引用传递
weixin_29489791的博客
02-23 580
以下是我个人的一点看法，有不对的欢迎各位指出来。在Java中，值传递，是创建一个副本，副本中拷贝了这个变量的值，在调用函数中改变的是这个副本的值，与原变量的数值无关。引用传递，是创建一个副本，副本中拷贝了这个对象的地址，在调用函数中改变的是该副本所指向的地址。基本类型变量传递：输出结果：可以看到，num变量在传递进foo函数后，num的值已经传递进来了，但是foo函数修改了这个值，原变量却没有改变...
html如何引用另一个html的内容
weixin_34029680的博客
11-08 1703
第一种：使用jquery： https://api.jquery.com/load/ 这可以加载html中某个id的元素 $( "#result" ).load( "ajax/test.html #container" ); <body> <div id="page1"></div> <div id="page2"></d...
HTML基础知识详解
"HTML知识点汇总" HTML（HyperText Markup Language）是一种标记语言，用于构建和组织网页的结构。它是Web开发的基础，允许开发者通过各种标签来指定网页内容的样式和布局。以下是对HTML部分核心知识点的详细说明：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值