基本概念
HTML
超文本标记语言,带有"<>"的称为标签(标记)
Html文件格式
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个网页</title>
</head>
注:(1)<!DOCTYPE html>
:表示当前文档是Html5的文档
(2)<titel></titel>
:表示网页标题
标签的分类
(1)双标签(双体标签):<开始标签> 内容 </结束标签>
(2)单标签(空标签):<标签名/>
html常用标签
- 段落标签:
<p>内容</p>
内容显示出来后,自动换行
<p>西安邮电大学</p>
<p>西北政法大学</p>
- 行标签:
<span>内容</span>
内容显示出来后,不会自动换行。
<span>大唐芙蓉园</span>
<span>钟楼</span>
- 字体标签:
<font face="字形" color="颜色" size="字号"> 内容</font>
:用来设置字形、字号、文字颜色。
<font color="red" face="隶书" size="25">
<p>西安邮电大学</p>
</font>
- 换行标签:
<br>
一个标签换一行
三国演义 <br>
西游记
- 水平分割线标签:
<hr color="颜色" width="宽度" size="粗细"/>
- 标题标签:
<hn>内容</hn>
n的取值在1~6之间,数字越小字体越大,并且自动加粗。
<hr color="red" width="500" size="10"> //水平分割线
<h1>床前明月光</h1>
<h2>床前明月光</h2>
<h3>床前明月光</h3>
<h4>床前明月光</h4>
<h5>床前明月光</h5>
<h6>床前明月光</h6>
- 文本格式标签:
(1)字体加粗:<b>内容</b>
或<strong>内容</strong>
-------->XHTML的标签(推荐)
<p>AAAAAA</p>
<p>
<b>AAAAAAA</b>
</p>
<strong>
<p>AAAAAAA</p>
</strong>
(2)斜体:<i>内容</i>
或<em>内容</em>
<p>
<i>BBBBBBBB</i>
</p>
<p>
<em>BBBBBBBBB</em>
</p>
(3)删除线:<del>内容</del>
<del>星星会眨眼睛吗</del>
(4)下划线:<ins> 内容 </ins>
或<u> 内容 </u>
<ins>星星会眨眼睛的</ins>
<br>
<u>星星会眨眼睛的</u>
- 高亮显示标签:
<mark>内容</mark>
<p>我是<mark>高亮</mark>标签哦</p>
- 特殊字符标签:
(1)空格字符:
一般三个空格标签占位一个汉字
<p>空 格</p>
(2)<符号:&It;
>符号:>
a>b
<br><br>
a<b
(3)版权符号 ©:©
©星空有限公司
(4)注册商标 ®:®
®星空有限公司
(5)摄氏温度 °:°
今天的气温是:30°
(6)加减符号 ±:±
a±b
(7)乘号 ×:×
a×b
(8)除号 ÷:÷
a÷b
(9)平方 ²:²
立方 ³:³
a²+b²=c²
a³+b³=c³
(10)下标:<sub>下标内容</sub>
CO<sub>2</sub>
-
图像标签:
(1)图像格式:
A、gif:支持动画、透明、无损的图像格式
B、png:体积小,支持alpha透明,不支持动画
C、jpg(jpeg):有损压缩的余香格式,体积大,不支持动画,不支持透明,色彩丰富。
(2)图像标签:<img src="图像全名" alt="提示信息" width="宽度" height="高度"/>
注:这里的"图像全名"是指图像所在的目录(位置) -
路径:
(1)绝对路径:从根目录(带盘符)开始的路径—>C:/program files/vscode
(2)相对路径:从当前目录开始的路径
A、’.’:表示当前目录
B、’…’:表示当前目录的上一级目录
<img src="../images/8.png.jpeg" alt="图像加载中..." width="300" height="200">
- 列表标签:
(1)无序列表:各个列表项之间没有顺序,是并列的
<ul type="项目符号的类型">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
注:type的取值:disc为默认实心圆点
<p>四大名著:</p>
<ul>
<li>红楼梦</li>
<li>三国演义</li>
<li>西游记</li>
<li>水浒传</li>
</ul>
(2)有序列表:列表项有先后顺序
<ol type="项目符号" start="开始值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
注:type的取值:‘A’、‘a’、‘1’、‘I’、‘i’
start的取值必须为数字
<p>西北五省:</p>
<ol type="A" start="5">
<li>陕西省</li>
<li>甘肃省</li>
<li>宁夏</li>
<li>青海</li>
<li>西藏</li>
</ol>
- 超链接标签:
<a href="页面的地址">文本或多媒体</a>
超链接的内容,文本或多媒体,可结合图像标签一起使用。点击链接的图片,跳转到相关网页。
<a href="d3.html">
<img src="../images/8.png.jpeg" width="300" height="200">
</a>
- 页面背景:在页面的body中设置
(1)页面背景颜色:<body bgcolor="颜色">
(2)页面背景图片:<body backcolor="图像全名">
本篇仅整理了部分基本标签用法,其他用法请看下一篇。