(2)HTML基本标签
作者:互联网
一、认识纯文本格式
1.什么是纯文本格式?
纯文本格式,就是没有任何文本修饰的,没有任何粗体,下划线,斜体,图形,符号或特殊字符及特殊打印格式的文本,只保存文本,不保存其格式设置。
2.纯文本格式和富文本格式的对比?
纯文本格式:最常见的是.txt文件。在存储和传输过程中,只能保存文字,不能保存格式。
富文本格式:与纯文本对应,最常见的是.rtf文件,类似.doc文件,内部可以保存文本的样式、图片等。
从如下图我们可以看到,富文本格式占用大小大于纯文本格式的文件,所以纯文本格式更利于传输,因为它文件大小比较小。
3.纯文本文件的特点
- 文件只能保存文本,不保存其他的格式或非文本内容,有利于网络传输。
- 所有的纯文本格式文件,可以通过直接更改扩展名的方式更改保存格式。
- 纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑。
那么,我们要接下来要学习的html、css、js文件都是纯文本格式文件。
二、什么是标签(HTML tag)
1.标签概念:
标签又叫做标记,也叫元素,有特殊的书写规范,是写给浏览器的一种语法格式,结合普通的文字信息,实现特殊的语义或显示内容。在编辑器中可以编辑和查看,在浏览器中不显示。标签是由:小于号+中间字符+大于号组成的代码(注:代码的所有字符都由英文字符组成) 作用是给用户展示特定内容或是告诉浏览器与搜索引擎关于网页的部分信息。
2.标签基本结构
如下图所示:
- <!DOCTYPE html>文档类型声明,让浏览器清楚文档的版本、类型和风格,有助于浏览器正确显示网页标签,声明文档类型为html,定义该文件是一个html文档,专业术语称为DTD:文档类型定义(Document Type Definition),此标签不属于网页的内容. 它是一条指令,告诉浏览器编写页面所用的标记的版本。
- <html>标签是网页上的所有内容,无论是给用户看的还是用来与浏览器或是搜索引擎通讯的信息,统一存放在html的开始标签和结束标签之间,lang是language的缩写,代表是该网页属于哪一个国家或是地区的网页。常用lang: ①en-US/en 英语 (美国) ②zh-CN 中文 (简体, 中国大陆 ③zh-SG 中文 (简体, 新加坡) ④zh-HK 中文 (繁体, 香港) ⑤zh-MO 中文 (繁体, 澳门) ⑥zh-TW 中文 (繁体, 台湾)
- <head>标签用于定义页面的全局信息,网页上需要在浏览器上显示出来的,并且还要在互联网这个大的平台进行传输,必然就要将网页自身的部分信息发送给浏览器和搜素引擎,给浏览器或者搜索引擎看的所有信息。<head>是所有其他头元素的容器(title meta script style link等)
- <meta>标签被称为元数据,作用是专门告诉浏览器或是搜索引擎关于网页的一些基本数据,这里使用charset="UTF-8",是规定了编码格式为UTF-8格式,这是我们常用的编码格式。charset:char(字符的意思)+set(集合的意思)=字符集合=简称为“字符集”,告诉浏览器我们的网页上文字的编码格式,不同的编码格式包含的文字内容不一样 如果浏览器不知道网页文件的字符集的话,那么网页文件的内容就会变成乱码 展示中文的字符集种类: gb2312(gb是国标的汉语拼音的缩写,指的是国家标准的意思) ,包含6763个汉字 gbk(国家标准扩展),包含21886个汉字 gb18030,包含70244个汉字 utf-8,包含全世界200多个国家和地区的语言文字。如下是乱码图:
- <title>标签之间存放的是网页的名字,如下图所示:
6.<body>标签内部存放用户能够看到的所有内容,包含文字,图片,视频,音频等。
三、HTML标签语法
1.标签语法(1):
- 标签在使用时必须使用尖括号括起来
- 标签分为封闭类型和非封闭类型
- 封闭类型标记(双标记):需要结束标记,并且中间可以包含内容,例如(<p>内容</p>) 非封闭类型标记(空标记、单标记):不需要结束标记,但需要加/封闭,且不可包含内容,例如(<br/>) *开始标签常被称为起始标签,结束标签常称为闭合标签。
- <标记名>内容</标记名>
- <标记名/>
如下是添加标记后的网页效果
注:利用标记给普通的文本添加语义、描述超文本内容,搭建网页的基本结构,标签只负责网页的基本机构,不负责样式,样式我们需要通过css去实现,css负责我们的样式。
2.标签语法(2):
元素嵌套: 元素之间可以相互嵌套,形成更为复杂的语法 在嵌套元素时需要注意标记的嵌套顺序。
HTML属性规范:
- 书写位置:必须写在开始标签或者单标签之内,与标签名之间用空格进行分隔。
- 属性包含:属性名(key)、属性值(value)。属性名与属性值之间的写法通常称做键值对写法,HTML标签属性的键值对写法是k=”v”。XHTML要求属性值必须在双引号内部。<p k="v"></p>
- 一个标签内可以设置多个不同的属性,属性与属性之间使用空格进行分隔,每个属性的键值对写法都是k="v"。<p k="v" k="v" k="v"></p>4、部分标签属性k可以设置多个属性值v,所有属性值v都必须写在同一对双引号内,值与值之间需要使用空格分隔。<p k="v1 v2 v3 v4"></p>
3.标签语法(3):
标签特有属性:实例:HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:<a href="http://www.runoob.com">这是一个链接</a> 所以href属性就是a超链接的特有属性,只有该标签有的属性叫特有属性。
通用属性:适用于大多数 HTML 元素,也就是大多数元素标签都可以设置的属性,叫做通用属性。
4.标签语法(4):
HTML标签支持注释。
注释:为代码添加适当的注释,是一种良好的编码习惯,注释只在编辑文档情况下可见,在浏览器展示页时并不会显示。
语法规范: <!--注释的内容-->
注释示例:
三、常用标签
1.标题标签(h1~h6):
从h1开始,到h6结束,它是按照从大到小顺序排布的,h1是最大的标题标签,h6则是最小的标题标签,标题标签的作用是,它是加粗的文字。
标题标签适用场景:
2.<div>区域标签
目前网页布局技术总体而言可以分成三个步骤: 1:分区域 2:排位置 3:塞内容,div标签的作用就在网页内容中间划分出若干个矩形区域,用以存放不一样的内容。
四、什么是HTML的标签语义化?
标签语义化:说的通俗点就是,明白每个标签的用途(用正确的标签做正确的事情)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等。
好处:语义化可以让页面的内容结构化,便于浏览器解析,便于搜索引擎解析,并提高代码的可维护度和可重用性。
五、H5新增标签
标签:基本,浏览器,标签,文本格式,HTML,网页,属性 来源: https://blog.csdn.net/qq_36213140/article/details/121136546