返回顶部
首页 > 资讯 > 前端开发 > JavaScript >HTML标签语法的知识点有哪些
  • 557
分享到

HTML标签语法的知识点有哪些

2024-04-02 19:04:59 557人浏览 安东尼
摘要

这篇文章主要介绍“html标签语法的知识点有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML标签语法的知识点有哪些”文章能帮助大家解决问题。 一、标签语

这篇文章主要介绍“html标签语法的知识点有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML标签语法的知识点有哪些”文章能帮助大家解决问题。

一、标签语法

1、所有的标签都必须使用尖括号扩起来,例如 <a>,<div> ... <A>,<a>

2、有封闭类型的标签,也有非封闭类型的标签

2.1、封闭类型,也称作双标记,则必须成对出现;语法规则: <标记>文本内容</标记>; 不同的标记,决定 了"文本内容"的不同表现形式;常见的封闭类型标记有:<a></a>,<p></p>,<div></div>

2.2、非封闭类型,也称作单标记、空标记;语法规则: <标记>或者<标记/> 常见的非封闭类型标记有: <hr>,<br>,<img>

区别封闭类型和非封闭类型标签,就看这标签是一对出现的,还是单个出现的。

3、标签嵌套

标签之间可以相互嵌套,形成复杂的语法结构,简单的例子如下:

<body>

<p>

<a></a>

</p>

</body>

4、标签属性,标签属性是指出现在开始标记中的内容,作用是修饰元素,如 <div 属性名="属性值"></div>

标准属性:就是每个元素与生俱来就具备的通用属性,常见的标准属性有:

id :定义每个标签的唯一标识

title:提示文本

class:样式相关,类样式

style:样式相关,行内样式

现在可以和小编一个编写一个简单的标签,同时设置这个标签的id属性为myDIv。(属性命名方式:驼峰命名,后续会分享给大家)

实战:第一步:先定义一个标签div,即<div></div>

第二步:添加id属性,即<div id="myDIv"></div>

疑问:如果存在多个属性值怎么办?怎么添加属性值是编码规范的?

答:如果是多属性的,那么直接在前一个属性值后继续编写,不需要用“,”或者“;”分开,直接写就对了!而且,多个属性排名不分先后的,举个栗子: <div id="myDiv" title="myTitle"></p>

二、文档结构

1、文档类型声明:即声明使用的HTML版本和风格,HTML5中使用声明为: <!doctype html>

2、html页面

2.1、文档根元素,每个文档有且仅有一对根元素 , html

2.2、在根元素的内部,包含两对子元素;

2.2.1、head : 页面的头部内容,定义页面全局信息 包含的内容有:

<title></title> ;网页标题,就是网页地址上面显示的名称;

<meta />:声明元数据(编码,关键字,描述),最重要的搜索引擎SEO主要是写这部分;同时也可以定义一些网页属性,比如说,中文显示 <meta charset="utf-8" />;

<style></style>:声明内部样式表,声明当前网页所用到的样式,这种方式的样式定义只能运用在当前页面,其他页面不能使用这里定义的样式;

<link />:引入外部样式表,引入外部定义好的样式,只要是这个页面想要用到某一个外部样式表,就直接引入就可以用了,这种样式表定义运用弥补上面<style></style>不能共享的缺陷,是的代码达到了重用的优势;

<script></script>:定义或引入脚本文件,主要是引入一些js脚本语言,完成这个页面所需要的交互;

2.2.2、body : 页面的主体内容,任何一个标签,都可能会出现在body中;<body>也是标签,它也可以定义自己的属性,比如网页背景有绿色,那么就是<body bGColor="green"></body>;

HTML标签语法的知识点有哪些

3、文本标记

3.1、特殊的文本,除了正常文字外,在一些特定的情况下会需要有特别的标点符号等,小编举例几个常见的特殊符号的标记,如 空格对应的是“&nbsp;”、 <对应的是 “&lt;” 可以理解为less than 、> 对应的是 “&gt; ”理解为greater than、 版权标识对应的是 “&copy”,这里需要特别特别注意的一点是 每个特殊字符有需要“;”

3.2、文本标记

3.2.1、文本样式

<b>...</b>: 加粗文本;

<i>...</i>:斜体文本;

<u>...</u>:下划线;

<s>...</s>:删除线;

<sup>...</sup>:上标;

<sub>...</sub>:下标;

3.2.2、标题元素, 1-6级6个标题 <hn></hn> n:1-6 其中一级是最大的, 六级是最小的;

3.2.3、段落元素,提供了结构化文本的表现方式, 语法:<p></p>, 注意:每对p标签单独成一个段落,常用属性:

align:水平对齐方式 取值:left center right;

4、换行元素,在代码的任何位置处,实现回车的效果 <br />,是非封闭类型标记;

5、水平线, 又叫分割线, <hr /> 也是非封闭类型标记,常用属性;

5.1、size :水平线的粗细,通常以像素(px)为单位;

5.2、width:宽度;

5.3、align:水平线的水平对齐方式;

5.4、color:颜色;

6、分区元素目的:为元素进行分组,多数用在布局中;

块分区元素:<div></div> ;

行内分区元素:<span></span>;

注意:

div :主要用在布局上;

span:修改其内部内容的样式;

7、预格式化,保留源文档中的空格和回车 <pre>文本内容 </pre>;

8、注释

可以写在html源码中,但不被浏览器解释的文本;

语法: <!-- 注释内容 -->

!!!特别注意:行内元素与块级元素

块级元素:默认情况下,块级元素独占一行,元素的前后都会自动换行 div、hn、hr、p等 主要用于布局。

行内元素:默认情况,多个元素位于同一行,不会换行,span、文本标记... .主要行内元素作用:修改内部内容的样式。

关于“HTML标签语法的知识点有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网JavaScript频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: HTML标签语法的知识点有哪些

本文链接: https://lsjlt.com/news/93864.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • HTML标签语法的知识点有哪些
    这篇文章主要介绍“HTML标签语法的知识点有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML标签语法的知识点有哪些”文章能帮助大家解决问题。 一、标签语...
    99+
    2024-04-02
  • html中a标签的知识点有哪些
    这篇文章主要介绍“html中a标签的知识点有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html中a标签的知识点有哪些”文章能帮助大家解决问题。 a标签 ...
    99+
    2024-04-02
  • HTML标签的基础知识点有哪些
    这篇文章主要介绍“HTML标签的基础知识点有哪些”,在日常操作中,相信很多人在HTML标签的基础知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML标签的基础知...
    99+
    2024-04-02
  • HTML标签、结构和语义化的知识点有哪些
    这篇文章主要介绍“HTML标签、结构和语义化的知识点有哪些”,在日常操作中,相信很多人在HTML标签、结构和语义化的知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • CSS标签的知识点有哪些
    这篇文章主要讲解了“CSS标签的知识点有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS标签的知识点有哪些”吧!1 如果想在网页上显示文章,这时就...
    99+
    2024-04-02
  • Jspxcms标签基本知识点有哪些
    这篇文章主要介绍“Jspxcms标签基本知识点有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Jspxcms标签基本知识点有哪些”文章能帮助大家解决问题。Jspxcms标签是基于FreeMark...
    99+
    2023-06-26
  • SpringMVC表单标签知识点有哪些
    小编给大家分享一下SpringMVC表单标签知识点有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一.首先我们先做一个简单了例子来对Spring MVC表单表单标签的使用有一个大致的印象,然后再结合例子对各个标签介绍一...
    99+
    2023-05-30
    springmvc
  • C++语法知识点有哪些
    这篇文章主要讲解了“C++语法知识点有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“C++语法知识点有哪些”吧!C++程序的组成 (1)预处理命令以#开头。三类预处理命令。A 宏定义命令...
    99+
    2023-06-17
  • java中的HTML知识点有哪些
    这篇文章主要介绍“java中的HTML知识点有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“java中的HTML知识点有哪些”文章能帮助大家解决问题。   1...
    99+
    2024-04-02
  • HTML元素的知识点有哪些
    这篇文章主要介绍“HTML元素的知识点有哪些”,在日常操作中,相信很多人在HTML元素的知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML元素的知识点有哪些”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-27
  • html基础知识点有哪些
    这篇文章主要介绍了html基础知识点有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。HTML语义化HTML标签的语义化是指:通过使用包含...
    99+
    2024-04-02
  • HTML规范知识点有哪些
    这篇文章主要介绍“HTML规范知识点有哪些”,在日常操作中,相信很多人在HTML规范知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML规范知识点有哪些”的疑惑...
    99+
    2024-04-02
  • HTML初级知识点有哪些
    今天小编给大家分享一下HTML初级知识点有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧...
    99+
    2024-04-02
  • html入门知识点有哪些
    本文小编为大家详细介绍“html入门知识点有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“html入门知识点有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。   一、...
    99+
    2024-04-02
  • HTML媒体有哪些知识点
    这篇文章主要讲解了“HTML媒体有哪些知识点”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML媒体有哪些知识点”吧!HTML 媒体(Media)1HTML 多媒体Web 上的多媒体指的是...
    99+
    2023-06-03
  • HTML块元素的知识点有哪些
    这篇文章主要介绍“HTML块元素的知识点有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML块元素的知识点有哪些”文章能帮助大家解决问题。大多数 HTML ...
    99+
    2024-04-02
  • html css基础知识点有哪些
    今天小编给大家分享一下html css基础知识点有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了...
    99+
    2024-04-02
  • html+css入门知识点有哪些
    这篇文章主要介绍“html+css入门知识点有哪些”,在日常操作中,相信很多人在html+css入门知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html+css...
    99+
    2024-04-02
  • HTML中有哪些基础知识点
    本篇内容主要讲解“HTML中有哪些基础知识点”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML中有哪些基础知识点”吧!一、 HTML的基本结构<head>  ...
    99+
    2023-06-27
  • HTML和CSS的重难点知识点有哪些
    这篇文章主要介绍“HTML和CSS的重难点知识点有哪些”,在日常操作中,相信很多人在HTML和CSS的重难点知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作