html整体结构,详解HTML的整体结构

HTML文档实际上是由各种 HTML 元素组成的，如 html(HTML 文档)元素、head(头)元素、body(主体)元素、title(题目)元素和 p(段落)元素等，这些元素都采用了尖括号组成的标签形式。实际上，HTML的整体结构包括标签、元素和属性，下面我们来一一介绍其结构和功能。

1、标签

HTML 标签是由一对尖括号 < > 及标签名称组成的。标签分为「起始标签」和「结束标签」两种，两者的标签名称是相同的，只是结束标签多了一个斜杠「/」。如图 1-5 所示， 为起始标签， 为结束标签，它是英文 bold(粗体)的缩写。标签名称对大小写是不敏感的，即 … 和 … 的效果是一样的，但是为了便于程序的阅读和维护，万维网联盟推荐使用小写字母书写标签。

图 1-5 HTML 标签

2、元素

HTML 元素是组成 HTML 文档的最基本的部件，它是用标签来表现的，一般情况下，「起始标签」表示元素的开始，「结束标签」表示元素的结束。

HTML 元素分为「有内容的元素」和「空元素」两种。「有内容的元素」是由起始标签、结束标签以及两者之间的元素内容组成的，其中，元素内容既可以是需要显示在网页中的文字内容，也可以是其他元素。例如，示例 1-1 中起始标签 与结束标签 组成的元素的内容是文字「第一个」；而起始标签

与结束标签组成的元素的内容是另外一个元素—title 元素。「空元素」则只有起始标签，而没有结束标签和元素内容，如示例 1-1 中的 hr(分隔线)元素就是空元素。

HTML 元素还可以分为「块元素」和「行元素」。「块元素」在网页中的效果是该元素中的内容相对于其前后元素的内容另起一行，图 1-6 左侧所示的 p 元素就是块元素，图 1-6 右侧所示为 p 元素的网页显示效果。而「行元素」的网页效果则是，行元素中的内容与其前后元素的内容在同一行中，图 1-7 左侧所示的 a 元素就是行元素，图 1-7 右侧所示为 a 元素的网页显示效果。

图 1-6 块元素程序及其网页显示效果

图 1-7 行元素程序及其网页显示效果

3、属性

在元素的起始标签中，还可以包含「属性」，用来表示元素的其他特性，它的格式如下。

< 标签名称属性名 =「属性值」>

例如，下述代码中 img(图像)元素中的 src=「my_picture.jpg」就是 img 元素的属性，表示「该图像元素的图像源文件是 my_picture.jpg」。

像标签名称一样，属性名对大小写也是不敏感的，但是为了便于程序的阅读和维护，编程时建议使用小写字母。另外值得注意的是，虽然 HTML5 并没有要求属性值一定要有双引号，但是，为了养成良好的编程习惯，还是应该统一地在属性值外面加上双引号(英文输入模式下的双引号)。

网页的本质就是超文本标记语言，通过结合使用其他的Web技术(如：脚本语言、公共网关接口、组件等)，可以创造出功能强大的网页。因此，想在前端开发中占得一席之地，HTML技术的掌握是至关重要的一环，快来观看本站的HTML教程，为了成为一名前端开发大师而努力学习吧！

html整体结构,详解HTML的整体结构相关推荐

论文笔记：Densely Connected Convolutional Networks(DenseNet模型详解)
[ 转载自http://www.yyliu.cn/post/7cabb4ff.html ] CVPR 2017上,清华大学的Zhuang Liu.康奈尔大学的Gao Huang和Kilian Q.We ...
ViT：视觉Transformer backbone网络ViT论文与代码详解
Visual Transformer Author:louwill Machine Learning Lab 今天开始Visual Transformer系列的第一篇文章,主题是Vision Tran ...
9.DRN: A Deep Reinforcement Learning Framework for News Recommendation论文详解
摘要这篇文章是微软18年发的基于强化学习来做推荐系统的文章. 一.引言新闻领域的个性化推荐十分重要,传统的方法如基于内容的方法.协同过滤.深度学习方法在建模user-item交互关系时,经常面临以 ...
全卷积神经网路【U-net项目实战】语义分割之U-Net详解
文章目录 1.简介 2.U-net典型应用 3. U-net详解 4.参考文献 1.简介语义分割(Semantic Segmentation)是图像处理和机器视觉一个重要分支.与分类任务不同,语义分 ...
Lesson 8.1Lesson 8.2 决策树的核心思想与建模流程CART分类树的建模流程与sklearn评估器参数详解
Lesson 8.1 决策树的核心思想与建模流程从本节课开始,我们将介绍经典机器学习领域中最重要的一类有监督学习算法--树模型(决策树). 可此前的聚类算法类似,树模型也同样不是一个模型,而是一类模 ...
Transformer 模型详解
Transformer 是 Google 的团队在 2017 年提出的一种 NLP 经典模型,现在比较火热的 Bert 也是基于 Transformer.Transformer 模型使用了 Self- ...
分布式系统关注点(14)——「弹性架构」详解
如果第二次看到我的文章,欢迎右侧扫码订阅我哟~ ? 本文长度为3633字,建议阅读10分钟. 坚持原创,每一篇都是用心之作- 如果我们的开发工作真的就如搭积木一般就好了,轮廓分明,个个分开,坏了哪块 ...
数据结构--图(Graph)详解(二)
数据结构–图(Graph)详解(二) 文章目录数据结构--图(Graph)详解(二) 一.图的存储结构 1.图的顺序存储法 2.图的邻接表存储法 3.图的十字链表存储法 4.图的邻接多重表存储法二 ...
otg usb 定位_详解USB OTG工作原理及其应用
原标题:详解USB OTG工作原理及其应用 1994年,Intel,Compaq等七家软硬件全球知名企业为了突破当时PC使用串口和并口传输速度的限制,成立了通用串行开发者论坛( Implemente ...
CenterNet算法详解
Objects as Points-论文链接-代码链接目录 1.需求解读 2.CenterNet算法简介 3.CenterNet算法详解 3.1 CenterNet网络结构 3.2 CenterNe ...

html整体结构,详解HTML的整体结构

html整体结构,详解HTML的整体结构相关推荐

最新文章

热门文章