前端基础-HTML标记语言

阅读目录

  • 一、 HTML标签与文档结构
  • 二、 HTML标签详细语法与注意点
  • 三、 HTML中标签分类
  • 四、 HTML注释

一、 HTML标签与文档结构

HTML作为一门标记语言,是通过各种各样的标签来标记网页内容的。我们学习HTML主要就是学习的HTML标签。

那什么是标签呢?

#1、在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`、`<head>`、`<body>`都是标签,
#2. HTML中标签通常情况下是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个`/`,开始标签和结束标签之间的就是标签的内容。
#3、有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签,例如:<br/> <hr/> <input/> <img/>

HTML中的标签存放于文本文件中,需要按照下述固定的文档结构组织:

<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>

各部分解释

#1、<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。
#2、<html></html> 称为根标签,所有的网页标签都在<html></html>中。
#3、<head></head> 标签用于定义文档的头部,它是所有头部元素的容器。
常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签,头部标签在下一节中会有详细介绍,
<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。 #4、在<body>和</body>标签之间的内容是网页的主要内容,最终会在浏览器中显示出来。

标签间关系

#1、并列(兄弟/平级)
head与body
#2、嵌套(父子/上下级)
html内有body

二、 HTML标签详细语法与注意点

标签的语法:

<标签名 属性1=“值1” 属性2=“值2” ......>内容部分</标签名>
<标签名 属性1=“值1” 属性2=“值2” ....../>

注意:

#1. HTML标签不区分大小写,`<h1>`和`<H1>`是一样的,但是我们通常建议使用小写,大部分程序员都以小写为准。
#2. 标签之间是可以嵌套的。例如:<div><p>段落</p></div>,但不能交叉<div><p></div></p>
#3、不是所有标签都支持互相嵌套。 

三、 HTML中标签分类

单从是否可以嵌套子标签的角度去分,标签分为两类

#1、容器类标签
容器类标签可以简单的理解为能嵌套其它所有标签的标签。
常见容器级的标签: 
h系列 
ul>li
ol>li
dl>dt dd
div
#2、文本类标签
文本级的标签对应容器级标签,只能嵌套文字/图片/超链接的标签。
常见文本级的标签:
p
span
strong
em
ins
del

四、 HTML注释

无论我们学习什么编程语言,一定要重视的就是注释,我个人一直把注释看成是代码之母。 HTML中注释的格式:

<!--这里是注释的内容-->

注意: 注释中可以直接使用回车换行。

并且我们习惯用注释的标签把HTML代码包裹起来。如:

<!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->

HTML注释的注意事项:

#1、HTML注释不支持嵌套。
#2、HTML注释不能写在HTML标签中。

更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

带有Gradle的Docker容器分为4个步骤

您是否需要通过Java Web应用程序创建Docker映像&#xff1f; 您在使用Gradle吗&#xff1f; 如果是这样&#xff0c;那么您距Docker nivana仅4步之遥。 对于此示例&#xff0c;我将使用一个简单的Spring Boot应用程序。 您可以在我的名为galoshe的Github存储库中找到所有源代码…

第七周

这个作业属于哪个课程C语言程序设计 &#xff08;第三版&#xff09;这个作业要求在哪里2019春季第七周作业我的课程目标学习指针的运用这个作业在哪个具体方面帮助我实现目标这个作业让我知道了指针实用性参考文献无一、2019春第七周作业&#xff08;基础题&#xff09; 7-2 自…

Java EE 8 –为更多设备提供更多应用程序

如果我不喜欢夏天的一件事&#xff0c;那就是事实是没有太多要分享或谈论的新闻。 谁决定将Java Day Tokyo置于这一年的无聊时间里&#xff0c;谁干得不错&#xff0c;就给我一个机会撰写有关新的和即将到来的Java EE 8规范的博客文章&#xff0c;其中包含了更多的思想和建议。…

Gradle入门:依赖管理

即使不是没有可能&#xff0c;创建没有任何外部依赖关系的现实应用程序也是一项挑战。 这就是为什么依赖性管理是每个软件项目中至关重要的部分的原因。 这篇博客文章描述了我们如何使用Gradle管理项目的依赖关系。 我们将学习配置已使用的存储库和所需的依赖项。 我们还将通过…

HTML5常用标签及特殊字符表

*http://html5doctor.com/nav*http://html5doctor.com/article*http://html5doctor.com/section*http://html5doctor.com/asidehttp://html5doctor.com/divhttp://html5doctor.com/figurehttp://html5doctor.com/outlinehttp://html5doctor.com/semantics p 和 span 的理解 p标…

【转载】使用Imaging组件加载GIF动画

Mobil手机加载GIF动态图像的方法有两种&#xff0c;一个就是使用GIF89a标准算法&#xff0c;另一个就是使用SDK自带的Imaging组件&#xff0c;这两种方法是很典型的手机图像处理技术的实践。使用Imaging组件加载GIF比使用标准算法处理高效的多&#xff0c;特别是在处理真彩GIF动…

【处理手记】Configuration system failed to initialize异常的另类原因

有个c#程序在某台电脑上&#xff0c;执行某个操作时&#xff0c;总是会报如图错误&#xff1a; 度娘一番&#xff0c;发现市面上常见的原因是配置文件中的特定节点的位置不对&#xff0c;或者配置文件损坏等等&#xff0c;而这个程序根本没有使用内置的配置文件方案&#xff0c…

学习《Building Applications with FME Objects》 之四 从数据集读取要素

FMEOReader可以访问任何支持格式的数据。 FMEOReader返回两类要素&#xff1a;schema&#xff08;模式&#xff09;要素和数据要素&#xff0c;模式要素用于描述数据集模型。每种支持的格式都有一个模式&#xff0c;一个模式要素是一类要素的数据模型&#xff0c;模式要素描述属…

使用Zapier将应用程序与Neo4j集成

最近&#xff0c;我被带往Zapier &#xff0c;以便在系统之间完成一些轻量级的集成&#xff0c;以快速地进行概念验证。 最初是持怀疑态度的&#xff0c;我发现它确实可以节省时间&#xff0c;并将您从未集成过的系统所有部分捆绑在一起。 而且&#xff0c;这是人们集成他们使…

[silverlight基础]仿文字连接跑马灯效果-高手绕道

运行效果如下:分析示意图&#xff1a;代码:1<Canvas x:Name"a"Background"AliceBlue"MouseEnter"a_MouseEnter"MouseLeave"a_MouseLeave"Cursor"Hand">2<Canvas.Clip>3<RectangleGeometry RadiusX"0&qu…

Hibernate脏检查的剖析

介绍 持久性上下文使实体状态转换进入队列&#xff0c;该实体状态转换在刷新后转换为数据库语句。 对于托管实体&#xff0c;Hibernate可以代表我们自动检测传入的更改并安排SQL UPDATE。 这种机制称为自动脏检查 。 默认的脏检查策略 默认情况下&#xff0c;Hibernate检查所有…

软件工程第二次作业-VSTS单元测试

一、选择开发工具 开发工具选择 Visual studio 2017 社区版&#xff0c;开发语言为C 由于之前已经安装完毕&#xff0c;所以不上传安装过程&#xff0c;主界面如下&#xff1a; 二、练习自动单元测试 使用的测试工具是VSTS&#xff0c;具体步骤如下&#xff1a; 1.编写一个判断…

随便写写(8)

凌晨两点了&#xff0c;还在捣鼓虚拟机&#xff0c;教师节老师们吃不上饭&#xff0c;罪过可就大了。远程有点慢&#xff0c;还遇到个小问题&#xff0c;.netfx 3.5几次都没装上&#xff0c;看了下日志&#xff0c;好像是ghost里的.netfx 2.0有问题&#xff0c;想卸载之&#x…

识别JVM –比预期的要复杂

在Plumbr&#xff0c;我们花了最后一个月的时间来为将来的重大改进奠定基础。 此类构件之一是为JVM添加唯一标识符&#xff0c;以便将来自同一JVM的所有会话链接在一起。 虽然一开始看起来似乎很琐碎的任务&#xff0c;但是当查看JVM捆绑的jps命令的输出时&#xff0c;围绕该问…

React后台管理系统-品类的增加、修改和查看

1.页面 2.品类列表展示 let listBody this.state.list.map((category, index) > { return ( <tr key{index}> <td>{category.id}</td> <td>{category.name}</td> <td> <a className"opear" onClick{(e) > this.onUpda…

Vue node.js商城-购物车模块

一、渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){ return { cartList:[] // 购物车商品列表 } }, mounted:function(){ this.init(); }, methods:{ init(){ // 初始化商品数据 axios.get(/users/…

RxJava + Java8 + Java EE 7 + Arquillian =幸福

微服务是一种体系结构样式&#xff0c;其中每个服务都实现为一个独立的系统。 他们可以使用自己的持久性系统&#xff08;尽管不是强制性的&#xff09;&#xff0c;部署&#xff0c;语言等。 由于系统由一个以上的服务组成&#xff0c;因此每个服务将与其他服务通信&#xff…

C# -- RSA加密与解密

1. RSA加密与解密 -- 使用公钥加密、私钥解密 public class RSATool{public string Encrypt(string strText, string strPublicKey){RSACryptoServiceProvider rsa new RSACryptoServiceProvider();rsa.FromXmlString(strPublicKey);byte[] byteText Encoding.UTF8.GetByt…

VMware Station NAT上网模式配置

转载于:https://www.cnblogs.com/MimiSnowing/p/10718235.html

JavaFX技巧10:自定义复合控件

用JavaFX编写自定义控件是一个简单直接的过程。 需要一个控件类来控制控件的状态&#xff08;因此命名&#xff09;。 外观需要控件的外观。 而且通常不是用于自定义外观CSS文件。 控件的常用方法是将其使用的节点隐藏在其外观类中。 例如&#xff0c; TextField控件使用javaf…