ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML基本语法

2020-05-23 20:09:11  阅读:229  来源: 互联网

标签:基本 段落 书写 语法 嵌套 HTML 标签 属性


HTML基本语法

1. 标签

HTML标记标签通常被称为HTML标签(HTML tag)。标签在书写和使用的过程中,必须遵循特定的语法

1. 标签名必须书写在一对尖括号<>内部

<htn></html>

2. 标签分为单标签和双标签, 双标签必须成对出现

<p></p>    双标签
<br />     单标签

3. 双标签包含开始标签和结束标签,xhtml中要求结束标签必须书写关闭符号/, 单标签也需要进行自封闭书写。

<div></div>
<br />

4. 标签之间可以进行嵌套,即双标签内部也可以书写其他标签

例如, html标签内部嵌套了head和body标签,head标签内部嵌套了title标签。其中,head和body是同级标签关系

<html>
    <head>
    <title></title> </head> <body> </body> </html>

嵌套的标签书写时,必须正确嵌套不能出现以下情况:

<div><p>div标签内部嵌套p标签</div></p>

5. 标签与标签之间对空格、换行、缩进等形成的空白不敏感,有无空白对在浏览器中加载的效果没有影响

<p>段落内容</p><p>段落内容</p><p>段落内容</p><p>段落内容</p><p>段落内容</p>

等价于

<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>

原因在于浏览器识别的是标签的开始和结束以及互相之间的嵌套关系

鉴于标签的这个特点,建议:

  • 书写代码过程中,同级标签之间进行换行对齐书写,嵌套标签之间进行缩进书写,增强代码的可读性
  • 上传代码过程中,需要减少代码的体积,压缩 不必要的空白,提升网页的加载速度

6. 根据标签内部可以存放的内容不同,可以将双标签划分为两个级别

  • 容器级: 标签内部可以存放任意内容,包含容器级标签。比如h1、div等
  • 文本级: 标签内部只能放文字或类似文字的内容,比如放图片,表单元素等。比如p、span等

2. 空白折叠现象

所有文字(类似文字内容)之间如果有空格、换行、缩进等空白字符,在浏览器加载时,连在一起的空白都会折叠成一个空格显示,这就是空白折叠现象

如果想要在浏览器显示连续空白可以使用一些替换写法解决,例如:

  • 空格可以使用字符实体中的进行替换书写
  • 换行可以使用一个<br />实现

3. 标签属性

HTML可以添加标签属性,属性可以提供关于标签及内部内容的更多信息

标签属性书写时需要遵循以下的语法内容:

1. 书写位置: 必须写在开始标签或单标签之内,与标签名之间用空格进行分隔

2. 属性包含: 属性名(Key)、属性值(Value)。属性名与属性值之间的写法叫做键值对写法,HTML标签属性的键值对写法是k="value",XHTML要求属性值必须在双引号内部

<p k="v"></p>

3. 一个标签可以有多个不同的属性,属性与属性之间使用空格进行分隔,每个属性的键值对写法都是k="v"

<p k="v" k="v" k="v"></p>    

4. 部分标签属性可以设置多个属性值,所有属性值都写在同一对引号内,值与值之间使用空格分隔

<p  k="v1 v2 v3 v4"></p>

 

HTML标签

HTML包含大量的标签,在这介绍一些常见的标签

更多的标签可以查询W3C手册(网址:https://www.w3school.com.cn/)

 

标签:基本,段落,书写,语法,嵌套,HTML,标签,属性
来源: https://www.cnblogs.com/featherwit/p/12944164.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有