HTML 系列教程-HTML 简介

最新推荐文章于 2024-07-18 13:52:01 发布
最新推荐文章于 2024-07-18 13:52:01 发布
阅读量113 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/zhaoruixiao/p/3229934.html
版权

http://www.w3school.com.cn/html/index.asp

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> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

 

HTML 标题

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

HTML 段落

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

HTML 链接

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

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

HTML 图像

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

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

HTML 元素语法

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

 

嵌套的 HTML 元素

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

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

<p> 元素：

<body> 元素：

<html> 元素：

 

空的 HTML 元素

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

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

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

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

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

HTML 提示：使用小写标签

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

W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

更多 HTML 属性实例

属性例子 1:

<h1> 定义标题的开始。

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

TIY : 居中排列标题

属性例子 2:

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

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

TIY : 背景颜色

属性例子 3:

<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

<table border="1"> 拥有关于表格边框的附加信息。

 

始终为属性值加引号

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

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

name='Bill "HelloWorld" Gates'

 

HTML 标题

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

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

注释：浏览器会自动地在标题的前后添加空行。

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

 

标题很重要

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

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

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

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

 

HTML 水平线

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

hr 元素可用于分隔内容。

提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

 

HTML 注释

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

注释是这样写的：

实例

<!-- This is a comment -->

转载于:https://www.cnblogs.com/zhaoruixiao/p/3229934.html

diao5637
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【HTML5系列教程】
緑水長流*z
06-08 4637
**内容包括HTML简介、服务器的概念、B/S、C/S软件架构、前端与后端的开发内容、HTML发展历程、浏览器内核介绍、Web标准、WebStorm工具的使用、WebStorm常用快捷键、HTML常用标签** **如：文本标签(span)、排版标签(div/p/h1~h6)、图像标签(img)、超链接(a)、锚点的使用、列表标签(ul/li)、表格标签(table)、表单标签(form)** **元素的种类、块级元素/行内元素/行内块元素的特点** **HTML5新增标签：包括布局标签(header/
《Python全栈系列教程》目录
孤寒者的博客
05-12 67万+
《Python全栈基础教程》目录导读： 一、Python基础部分；二、Python常用模块部分；三、Python实战部分；四、Python习题部分。
HTML详细教程
weixin_54799350的博客
06-19 6497
新手小白想学前端,可以参考这篇文章,或者和我一样需要复习的小伙伴.临近秋招,系统的复习一下之前学过的知识.总结了一下,学习前端就是在前进的道路上捡了西瓜丢了芝麻,边学边忘.
go-cqhttp系列教程-go-cqhttp安装-1
xiaozhen的博客库
06-14 1万+
go-cqhttp系列教程-go-cqhttp安装
人工智能教程 - 前言
热门推荐
人工智能AI技术
07-28 100万+
所以我主张快乐学习，尽量加入搞笑的成分在教程里面，其实我生活中就很乐观幽默，歌手李健就是我性格的一个写照吧，只不过我能说荤段子他不能。我希望通过这一系列的教程使越来越多的中国人掌握人工智能技术，人工智能是中国的一次机遇，国家已经认识到了这一点并将人工智能提升到了国家战略级别。十四年前就认定了人工智能专业，一路学习着，从国内学到了国外，然后又回到了祖国参加工作，继续着对人工智能的研究!教程涉及到了人工智能的方方面面，从基础原理到现在很火的人脸识别，自动驾驶.，股票预测，金融分析…那么，让我们开始吧！
HTML+CSS+JS网页设计
m0_73738929的博客
04-15 4万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
HTML+CSS系列教程导学
l2298202515的博客
10-20 5758
前端学习
GLM-4本地部署的实战教程
herosunly的博客
06-05 6万+
本文主要介绍了GLM-4-9B本地部署的实战教程，希望对学习和使用大模型的同学们有所帮助。 文章目录 1. 前言 2. 配置环境 2.1 安装虚拟环境 2.2 安装依赖库 2.3 下载模型文件 3. 运行glm-4-9b-chat
idea使用教程-idea简介
jason的java世界
12-05 5529
集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如微软的Visual Studio系列，Borland的C++ Builder、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。...
ENVI入门系列教程---一、数据预处理---2.2 编辑图像头文件
胡侃有料的博客
03-27 9123
every blog every motto: you cannot change what you refuse to confront. 0. 前言 ENVI中修改头文件 说明： 本文基于ENVI 5.3 1. 正文 1.1 设置忽略值 代开文件 注： 这里数据已经好了，下方只是演示使用，主要针对图片周围是黑色的，改变成白色。 Raster Management -> Edit ...
HTML5系列教程-HTML5样式、链接和表格
11-28
在“HTML5系列教程-HTML5样式、链接和表格”这个主题中，我们将深入探讨三个核心概念：样式、链接和表格。 1. **HTML5样式**： 在HTML5中，样式主要是通过CSS（层叠样式表）来实现的，它让开发者能够控制网页的...
HTML5系列教程-HTML5列表、块和布局
11-28
本系列教程将深入探讨HTML5中的列表、块级元素以及布局相关知识，这些都是构建网页结构的基础。 首先，让我们来看看HTML5中的列表类型。HTML5支持两种主要的列表：无序列表（`<ul>`）和有序列表（`<ol>`）。无序...
HTML5系列教程-HTML5框架、背景和实体
11-28
本系列教程将深入探讨HTML5的框架、背景以及实体，帮助你全面掌握这一现代Web开发的基础。 1. **HTML5框架** - **Bootstrap**：是最受欢迎的前端框架之一，提供了响应式设计和丰富的组件库，简化了页面布局和样式...
HTML5系列教程-HTML5表单提交和PHP环境搭建
11-28
在"HTML5系列教程-HTML5表单提交和PHP环境搭建"中，我们将深入探讨两个核心主题：HTML5表单的新特性以及如何配置PHP开发环境。 首先，HTML5对表单元素进行了大幅度的升级，提供了更多的输入类型，如`...
HTML5系列教程--HTML5元素、属性和格式化
11-28
本教程将详细讲解HTML5中的元素、属性和格式化规则，帮助你构建更加先进、高效的Web应用。 首先，HTML5的新元素是其核心亮点之一。这些元素设计得更具语义化，有助于开发者更好地描述页面结构，如`<header>`（页眉...
web前端基础面试85题（一）
柯晓楠
07-18 937
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
HTML超文本标识语言入门教程-文字布局解析
“HTML教程全，涵盖文字布局、段落控制和空白占位符等内容，适用于HTML初学者。” 在网页设计中，HTML（HyperText Markup Language）起着至关重要的作用，它是一种用于创建超文本文档的标记语言。HTML文件由一系列...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值