HTML 指的是超文本标记语言 (Hyper Text Markup Language)
语 言: 人们用于交流的工具。 超文本:就是指页面内可以包含图片、链接,甚至音乐、视频等非文字元素; 标 记:一种标记符,可以告诉浏览器如何显示其中的内容;
注意事项:
HTML 不是一种编程语言(因为HTML中没有变量,流程控制等), 它是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页内容
静态网页,html代码和内容书写完毕后, 页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。 而动态网页则不然,页面代码虽然没有变, 但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。 注意:不要将动态网页和页面内容是否有动画效果混为一谈, 比如网页中幻灯片效果,文字滚动效果,如果内容本身没有变化,那么也属于静态网页。
什么是 HTML 标签?
HTML标签也称为HTML标记,由开始标签和结束标签组成,用于表现结构化的内容,将内容构造成为一个完整的网页。
开始标签是被尖括号包围的元素名。
结束标签是被尖括号包围的斜杠和元素名。
<元素名>内容< /元素名>
例如:<h1>文本内容</h1> <b></b>
单标签与双标签
通常情况下,在我们的HTML中,标签分为两大类:
双标签是指由开始标签和结束标签组成, 例如:<b>内容</b>
单标签是指没有结束标签的标签,由一个标签构成即为开始也是结束; 但根据XHTML的规范,标签一定要有结束,于是写上自结束符号: / 例如:<hr /> <br />
注意:有些 HTML 元素没有结束标签,比如
标签属性
定义:属性描述标签的更多细节
比如字体标签,如果需要设置字体大小,我们就需要使用size属性;
基本语法:
<标签名 属性名="属性值" 属性名="属性值" ....> <!-- 设置字体的标签 --> <font size="7">大不大</font>
属性值可以加双引号,也可以加单引号,也可以不加引号;千万不要在一个值又加单引号又加双引(混合),我们建议大家都使用双引号。
HTML 标签拥有通用属性,也就是每个标签都有属性(有个别例外)。
Base,head,html,meta,script,style,title标签不提供下面的属性:
<!DOCTYPE html> <html> <head></head> <body></body> </html>
DOCTYPE: 文档声明
html: 标签告知浏览器其自身是一个 HTML 文档
head: 标签用于定义文档的头部(文档的描述信息)
body: 标签用于定义文档的主体(文档的主体内容)
<!-- 文档声明:位于文档的首行,告知浏览器文档使用哪种 HTML 或 XHTML 规范。让浏览器通过正确的方式解析我们的网页,使网页能正常显示。 --> <!DOCTYPE html> <!-- html标签:告诉页面这是一个HTML文档 --> <html> <!-- head标签:就是一个网页的头,头部中的内容一般存放描述文档的信息。 --> <head> <!-- meta元素可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词等。 声明文件的编码是UTF-8的编码,告诉浏览器,你用什么编码去解析这个文件 UTF-8 : 国际通用码 GBK/GB2312 : 中文编码 这里的编码必需要和文件的编码完全一致 --> <meta charset="UTF-8"/> <!-- 提供给搜索引擎的关键字信息 --> <meta name="keywords" content="xxxxxxxxxxxxx"/> <meta name="description" content="xxxxxxxxxxxx"/> <!-- viewport:表示视窗的缩放比例 width=device-width实际宽度=设置宽度 initial-scale=1.0 按照1:1进行缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 表示对IE进行兼容的写法 --> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- title : 网页的标题,会显示在标题栏 --> <title>你看得见我嘛?</title> </head> <!-- body标签:就是一个身体 一般来说:body里面的内容要显示出来 --> <body> <!-- HTML的规范 1.HTML标签的尖括号必需是英文输入法中符号 2.写标签时,如果是双标签,必需写开始和结束标签 3.HTML不区分大小写,建议使用小写 4.HTML标签可以嵌套,但不能交叉嵌套 --> <!-- 基础标签(重点) 1.hn标签(双标签) 说明:hn标签不是一个标签,而是一系列标签 n:表示1-6 h1标签最大,h6最小 作用:定义标题 默认效果:文字加粗,有大小 注意: 1.h1和h2一般在同一个页面中只能使用一次(SEO权重) 2.h标签有明确语义,建议在同一行中不能使用h标签来控制文字大小 2. p标签 作用:定义段落 注意: 默认p标签自动在前后加入间距 3. br标签(单标签) 作用:插入一个简单的换行符(类似于回车) 4. hr标签(单标签) 作用:表示水平分隔线 早期用来制作标题下面的下划线,现在基本不使用,后期使用border(边框样式来代替) --> </body> </html>
文本标签(重点) 作用:主要用于对文字内容进行修饰时使用 1.b标签和 strong标签(双标签) 作用:对文字进行加粗 注意: 两个标签都加粗效果,在H5建议使用strong标签 2.i标签和 em 标签 作用:让文字变顷斜(斜体) 注意: 两个标签都斜体效果,在H5建议使用em标签 注意: 这四个标签都有强调的作用,一般在网页中,只需要对需要强调的文字进行修饰即可 3.small标签 作用:让文字呈现相对小号字体效果 注意: 1.相对性(针对当前文字进行缩小) 2.small标签有底线(小得有下限值) 4.big标签 作用:让文字呈现相对大一号的效果 注意: 1.相对性(相对大一号) 2.big标签没有上限值 5.pre标签 定义:预格式化的文本 (会保留空格和回车) 作用:一般用于保留计算机代码格式使用 6.u标签(了解) 作用:主要给文字加下划线效果 注意: 一般不建议在文字中使用u标签,容易和a标签搞混 7.del标签 作用:给文字加删除线 运用场景:现价与原价中的使用 8.sub标签 <sub> 定义文档中的下标文本。 9.sup标签 <sup> 定义文档中的上标文本。