什么是HTML?
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
语 言: 人们用于交流的工具。
超文本:就是指页面内可以包含图片、链接,甚至音乐、视频等非文字元素;
标 记:一种标记符,可以告诉浏览器如何显示其中的内容;
注意事项:
HTML 不是一种编程语言(因为HTML中没有变量,流程控制等),
它是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页内容
动态网页与静态网页
静态网页,html代码和内容书写完毕后,
页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。
而动态网页则不然,页面代码虽然没有变,
但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。
注意:不要将动态网页和页面内容是否有动画效果混为一谈,
比如网页中幻灯片效果,文字滚动效果,如果内容本身没有变化,那么也属于静态网页。
HTML5新特性
- 语义(语义化标签):能够让你更恰当地描述你的内容是什么
- 连通性(websocket 双向通信协议。可用于实现即时通讯,例如:qq、微信…):能够让你和服务器之间通过创新的新技术方法进行通信。
- 离线 & 存储(本地存储):能够让网页在客户端本地存储数据以及更高效地离线运行。
- 多媒体(音频、视频播放器):使 video 和 audio 成为了在所有 Web 中的一等公民。
- 2D/3D 绘图 & 效果(canvas绘图):提供了一个更加分化范围的呈现选择。
- 性能 & 集成(webworks“多线程”):提供了非常显著的性能优化和更有效的计算机硬件使用。
- 设备访问 Device Access(mediaquery 响应式设计):能够处理各种输入和输出设备。
- 样式设计(css3): 让作者们来创作更加复杂的主题吧!
HTML标签格式
什么是 HTML 标签?
HTML标签也称为HTML标记,由开始标签和结束标签组成,用于表现结构化的内容,将内容构造成为一个完整的网页。
开始标签是被尖括号包围的元素名。
结束标签是被尖括号包围的斜杠和元素名。
<元素名>内容< /元素名>
单标签与双标签
通常情况下,在我们的HTML中,标签分为两大类:
- 双标签
双标签是指由开始标签和结束标签组成,
例如:<b>内容</b>
- 单标签
单标签是指没有结束标签的标签,由一个标签构成即为开始也是结束;
但根据XHTML的规范,标签一定要有结束,于是写上自结束符号: /
例如:<hr /> <br />
注意:有些 HTML 元素没有结束标签,比如
标签属性
定义:属性描述标签的更多细节
比如字体标签,如果需要设置字体大小,我们就需要使用size属性;
基本语法:
<标签名 属性名="属性值" 属性名="属性值" ....>
<!-- 设置字体的标签 -->
<font size="7">大不大</font>
属性值可以加双引号,也可以加单引号,也可以不加引号;千万不要在一个值又加单引号又加双引(混合),我们建议大家都使用双引号。
HTML 标签拥有通用属性,也就是每个标签都有属性(有个别例外)。
Base,head,html,meta,script,style,title标签不提供下面的属性:
HTML的基本结构
<!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> 定义文档中的上标文本。