HTML基础标签(一)
主要对HTML的基础知识和初学常用的标签进行总结。
1.HTML介绍
网站中的一页我们一般称之为网页,以.html或.htm结尾,故称其为HTML文件。
HTML是Hyper Text Markup Language(超文本标记语言)的缩写,是超文本标记语言,是构成Web页面的基本元素,是一种规范,一种标准。 HTML不是一种编程语言,而是一种描述性的标记语言。
我们现在用的是2014年发布的HTML5。
2.HTML工作原理
-
HTML是部署在服务器上的文本文件;
-
根据HTTP协议,浏览器发出请求给服务器,服务器做出响应,给浏览器返回一个HTML;
-
浏览器解释执行HTML,从而显示内容;
-
HTML部署在服务器上,运行在浏览器上。
3.HTML主要结构
代码如下:
<!DOCTYPE html> <!--于文档中的最前面的位置,处于 <html> 标签之前,不是 HTML 标签,它是文档类型声明标签。-->
<html lang="en"> <!--zh-CN定义采用语言为中文-->//HTML 文件开始
<head>//文件头开始
<meta charset="UTF-8"> <!--必须写.采取UTE-8来保存文字-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//用于定义页面元信息
<title>标题</title>
</head>//文件头结束
<body>//文件体开始
...
</body>//文件体结束
</html>//HTML 文件结束
4.常用标签
4.1标题标签
<h#>…</h#>;
#表示从1、2、3、4、5、6;
标题级别h1最大,依次减小,h6最小
<h1>内容</h1>
...
<h6>内容</h6>
标题元素让文本以醒目的方式显示,字体加粗变大,往往用于文章的标题
4.2段落标签
如果有大段文字的情况下,用p标签进行分段
<p>
第一段文字.....
</p>
<p>
第二段文字.....
</p>
4.3换行标签
<br/>
单标签,可以省略 /
4.4分割线
<hr color="颜色" size="粗细" width="宽度"/>
4.5文本格式化标签
<b>加粗</b>
<strong>加粗、并且具有语义化效果</strong>
<i>倾斜</i>
<em>倾斜、并且具有语义化效果</em>
<del>倾斜</del>
<em>倾斜、并且具有语义化效果</em>
<u>下划线</u>
<ins>下划线</ins> 推荐使用
4.6文本样式标签
<font size="字体大小" color="字体颜色" face="字形"> 内容 </font>
可以设置内容的字体大小、颜色、字形
4.7文本语义标签
(1)高亮显示
<mark> 内容 </mark>
(2)引用标签
<cite> 内容 </cite>
4.8特殊字符
(1)空格: -- 浏览器不识别空格字符,因此需要使用
(2)小于: <
(3)大于:>
(4)版权符号:©
(5)注册商标:®
(6)摄氏温度:°
(7)乘号:×
(8)除号:÷
(9)平方:²
(10)立方:³
4.9下标标签
<sub> 内容 </sub>
4.10图像标签
<img src="图像文件全名" />
例如:
<img src="./images/6.png" />
路径:
(1)相对路径:从文件当前位置开始的路径
例如:
demo/004.html
(2)绝对路径:从磁盘根目录开始的路径
例如:
E:\\前端\\2021-4-3\\demo\\004.html`、
反斜杠(’’):在windows操作系统中以双反斜杠(’\’)作为路径分隔符
斜杠(’/’):是Linux操作系统下的路径分隔符
E:/前端/2021-4-3/demo/004.html
‘./’ :当前目录(当前文件夹)
‘…/’:表示当前目录的上一级目录
图像标签的属性:
<img src="图像的名称" alt="图像加载异常时的提示信息"
width="宽度" height="高度" border="边框线"
vspace="垂直间距" hspace="水平间距"/>
4.11超链接标签
<a></a>
,可以进行页面跳转
(1)文字超链接:
<a href="网页的地址"> 文字 </a>
(2)图像超链接
<a href="网页的地址">
<img src="图像名" />
</a>
4.12设置页面背景
(1)设置页面背景颜色:
<body bgcolor="颜色值">
(2)设置背景图像:
<body background="图像名">
4.13滚动标签
(1)图像滚动:
<marquee behavior="500" direction="down">
<img src="./images/7.png" width="500" height="280">
</marquee>
- direction:表示滚动的方向,值可以是left,right,up,down,默认为left
- behavior:表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
- loop:表示循环的次数,值是正整数,默认为无限循环 scrollamount:表示运动速度,值是正整数,默认为6
- scrolldelay:表示停顿时间,值是正整数,默认为0,单位是毫秒
(2)文字滚动
<marquee behavior="500" direction="down">
<font color="" size="" face="">滚动的文字</font>
</marquee>