HTML入门教程||HTML 属性||HTML 元素

news2024/12/29 9:53:27

HTML 元素

HTML 元素


HTML 文档由 HTML 元素定义,HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。


HTML 元素

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

*开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)


HTML 元素语法

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

注释: 您将在本教程的 HTML属性一章中学习更多有关属性的详细内容。


嵌套的 HTML 元素

HTML 文档由嵌套的 HTML 元素(可以包含其他 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 空元素即为没有内容的 HTML 元素。

HTML 空元素应该在开始标签中关闭。

HTML 的一个空元素为 <br>(用于定义换行),<br> 元素就是没有关闭标签。

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

注意:在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭,即使是空元素。


HTML 提示:使用小写标签

由于 HTML 标签对英文字母的大小写不敏感,所以 <P> 和 <p> 表达的意思相同,不过早年的大部分网站喜欢使用大写的 HTML 标签。

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

 在HTML4之前,HTML的标准比较混乱,所以早年的HTML代码并不是那么规范,与XML的代码会更加相似,而XML代码的一大特点就是标签喜欢使用大写,所以在HTML刚发展的几年大部分网站都喜欢使用大写的标签。

随着HTML4甚至HTML5的普及,后续的网站都遵循HTML4的推荐——使用小写,这也是为什么现在的大多数网站使用小写的HTML标签的原因。

HTML 属性
 

HTML 属性


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


HTML 属性

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

属性实例

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

实例

<a href="https://www.w3cschool.cn">这是一个链接使用了 href 属性</a>


HTML 属性常用引用属性值

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

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

Remark

提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'


HTML 提示:使用小写属性

属性和属性值对大小写不敏感。

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。


HTML 属性参考手册

下面列出了适用于大多数 HTML 元素的属性:

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/779045.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《Docker和服务器无状态化:容器化应用的优势,构建高可伸缩性和灵活性》

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

【MATLAB第58期】基于MATLAB的PCA-Kmeans、PCA-LVQ与BP神经网络分类预测模型对比

【MATLAB第58期】基于MATLAB的PCA-Kmeans、PCA-LVQ与BP神经网络分类预测模型对比 一、数据介绍 基于UCI葡萄酒数据集进行葡萄酒分类及产地预测 共包含178组样本数据&#xff0c;来源于三个葡萄酒产地&#xff0c;每组数据包含产地标签及13种化学元素含量&#xff0c;即已知类…

c++高性能264/265实时流媒体服务器/h5客户端整体解决方案源码

文章目录 c高性能264/265实时流媒体服务器/h5客户端整体解决方案源码缘由目前的前端技术栈&#xff0c;已经能够支撑常规的安防桌面客户端软件开发我的方案一套c后端,两套前端H5 UI方案一&#xff1a;多屏h265/h264混合显示H5 UI方案二&#xff1a;H5监控大屏,提供视图切换功能…

基于SRS后端开发的前端页面

SRS(Simple Realtime Server)是简单高效的实时视频服务器&#xff0c;支持RTMP、WebRTC、HLS、HTTP-FLV、SRT等多种实时流媒体协议。 框架 https://www.thinkphp.cn 官网 https://ossrs.net/lts/zh-cn 播放器1 https://www.cdnbye.com 播放器2 https://www.artplayer.org …

苹果的Apple GPT要来了?

据外媒消息&#xff0c;苹果正在内部开发类 ChatGPT 的产品&#xff0c;与微软、OpenAI、谷歌、Meta 等科技巨头在生成式 AI 赛道展开竞争。该消息使得苹果股价上涨了 2%。据苹果工程师透露&#xff0c;苹果在内部构建了代号为“Ajax”的大语言模型开发框架&#xff0c;并构建了…

【C语言】表达式求值相关问题汇总—>隐式类型转换(整型提升)、算数转换与操作符优先级汇总(收藏查阅)

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负。 目录 前言&#xff1a; 一、隐式类型转换 &#xff08;一&#xff09;整型提升的意义…

【六天】高时空分辨率、高精度一体化预测技术之风、光、水能源自动化预测技术应用

最初的互补发电系统&#xff0c;就是将不同发点组件进行简单的组合&#xff0c;因为缺乏详细的数学计算模型&#xff0c;同时系统只用于保证率低的用户&#xff0c;导致使用寿命不长。随着新能源系统应用范围的不断扩大&#xff0c;保证率和经济性要求的提高&#xff0c;需要高…

Rust vs Go:常用语法对比(四)

题图来自 Go vs. Rust performance comparison: The basics 61. Get current date 获取当前时间 package mainimport ( "fmt" "time")func main() { d : time.Now() fmt.Println("Now is", d) // The Playground has a special sandbox, so you …

【力扣周赛】第 354 场双周赛

文章目录 Q1&#xff1a;2784. 检查数组是否是好的解法1——排序模拟判断解法2——哈希表计数模拟判断 Q2&#xff1a;6926. 将字符串中的元音字母排序Q3&#xff1a;6931. 访问数组中的位置使分数最大&#xff08;线性DP&#xff09;Q4&#xff1a;6922. 将一个数字表示成幂的…

什么是神经网络?

我们常常使用深度学习来指训练神经网络的过程。 在这里举一个房屋价格预测的例子&#xff1a;假设有一个数据集&#xff0c;它包含了六栋房子的信息。所以&#xff0c;你知道房屋的面积是多少平方米&#xff0c;并且知道这个房屋的价格。这是&#xff0c;你想要拟合一个根据房屋…

【Linux】linux工具和命令

这里写目录标题 一、Linux常用命令&#xff1a;二、Linux安装软件&#xff1a;1.yum安装2.Linux和Windows文件互传3.yum卸载软件 三、vim编辑器1.命令模式2.vim配置项说明3.vim操作总结 一、Linux常用命令&#xff1a; ls 显示当前目录下的文件 ls-a 显示当前目录下所有文件&a…

自定义类型:结构体进阶学习分享

自定义类型&#xff1a;结构体进阶学习分享 前言1 结构体的基础知识2 结构的声明3 特殊声明4 结构的自引用5 结构体变量的定义和初始化6 结构体内存对齐6.1 计算结构体大小相关笔试题&#xff08;基于VS&#xff09;笔试题一&#xff1a;笔试题二&#xff1a; 6.2 为什么存在内…

【C语言】指针进阶(1)

在前期的文章中&#xff0c;我们已经学习完了指针初阶的内容&#xff0c;这期我们开始学习指针的进阶部分。 指针初阶文章入口&#xff1a; 指针初阶 目录 重点知识概览 前期回顾 字符指针 指针数组 数组指针 数组指针的定义 &数组名VS数组名 数组指针的使用 数组…

Mac电脑文件夹无权限问题

sudo cp 16.5.zip /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport 走到之前的folder &#xff0c;右键选择get info更改權限, 再應用到所有子文件夹 右下解鎖再加自己Read & Write, -右邊拉下應該可以應用到所有子文件 这样就可以…

Java ~ Executor ~ ExecutorCompletionService【总结】

前言 文章 相关系列&#xff1a;《Java ~ Executor【目录】》&#xff08;持续更新&#xff09;相关系列&#xff1a;《Java ~ Executor ~ ExecutorCompletionService【源码】》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;相关系列&#xff1a;《Java ~ Exe…

如何做需求分析

目录 核心理念&#xff1a; 主要目的&#xff1a; 具体思路&#xff1a; 注意事项&#xff1a; 核心理念&#xff1a; 首先需要想清楚一个问题&#xff1a;作为一个测试&#xff0c;有没有把需求当作产品中的一个组成部分&#xff0c;然后尽到一个测试的责任与义务&#x…

JavaScript中truthy(真值)或者Falsy(假值)

● 在JavaScript中&#xff0c;有五个值是falsy ○ 0 ○ ’ ’ ○ undefined ○ null ○ NaN 除此之外&#xff0c;任何不是空值的都是真值&#xff1b; 假值是什么意思呢&#xff1f;就是转换为布尔值都是false&#xff0c;反则就是true 例如&#xff1a; console.log(Boole…

论文阅读:矩阵乘法GEMM的cache优化,子矩阵的切分方法Anatomy of High-Performance MatrixMultiplication

矩阵乘法优化的知名论文goto paper&#xff1a; 矩阵乘法的优化需要将矩阵切分成子矩阵&#xff0c;用子矩阵相乘的结果组合为原矩阵相乘的结果&#xff1a; 上图是拆分矩阵的方法&#xff0c;M表示矩阵&#xff0c;X方向和Y方向的两个维度都是未知的。P表示横条或竖条&#x…

微信小程序使用ECharts的示例详解

目录 安装 ECharts 组件使用 ECharts 组件图表延迟加载 echarts-for-weixin 是 ECharts 官方维护的一个开源项目&#xff0c;提供了一个微信小程序组件&#xff08;Component&#xff09;&#xff0c;我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表。 echarts-fo…

数据分享|R语言用lme4多层次(混合效应)广义线性模型(GLM),逻辑回归分析教育留级调查数据...

全文链接:http://tecdat.cn/?p22813 本教程为读者提供了使用频率学派的广义线性模型&#xff08;GLM&#xff09;的基本介绍。具体来说&#xff0c;本教程重点介绍逻辑回归在二元结果和计数/比例结果情况下的使用&#xff0c;以及模型评估的方法&#xff08;点击文末“阅读原文…