HTML定义及标签简单理解1

一.HTML概述

1.html是什么?

超文本标记语言

1.超文本 超链接形式,将各种不同空间的文字信息组织在一起的网状文本。即图片,视频等形式。

2.标记语言 标签 用标签标注网页内容,浏览器在运行网页时,就可以根据标注显示

2.html做什么?

制作网页

二.HTML基本语句

<!-- 用 ctrl+/ 进行标注
     声明html
	 声明html语言版本为html5 告诉浏览器HTML5的标准运行
-->
<!DOCTYPE html>
<!-- 网页中的所有内容必须写在标签内,网页的根元素 -->
<html>
	<!-- 网页头,可以设置网页内容,添加标题 -->
	<head>
		<!-- 设置网页字符集编码
     各个字符编码的含义:
         gb2312:代表国家标注的2312条,不包含繁体;
         gbk:国家标注扩充版,增加了繁体;
         unicode:万国码;
         utf-8:unicode的升级版.-->
		<meta charset="utf-8" />
		<!-- 这些信息是提供给搜索引擎 了解 -->
		<meta name="keywords" content="手机,家电" />
		<meta name="description" content="免费 Web & 编程 教程" />
		<meta name="author" content="zhu" />
		<!-- 为标题添加图标 href=“图标地址” rel=“说明文件类型” -->
		<link href="img/baidu.ico" rel="icon"/>
        <!-- 网页标题 -->
		<title>百度一下,还不知道</title>
	</head>
	<!-- 网页的身体 网页中的内容都写入body中 -->
	<!-- 
	    属性语法:
		 属性格式:属性名=“属性值”
		 位置:写在开始标题
		 数量:多个-->
	<body text="red" bgcolor="aquamarine">
		<!-- 标签分类
		<开始>修饰的内容</结束> 闭合标签(双标签)
		<link href="img/baidu.ico" rel="icon"/> 自闭合标签单标签)
		拓展:优先级=权重
		 -->
		这里面写内容、插图片、插视频、插音频
	</body>
</html>

页面如图所示
在这里插入图片描述

1.标题标签

# 一.HTML概述

## 1.html是什么?

超文本标记语言

1.超文本 超链接形式,将各种不同空间的文字信息组织在一起的网状文本。即图片,视频等形式。

2.标记语言 标签 用标签标注网页内容,浏览器在运行网页时,就可以根据标注显示

## 2.html做什么?

制作网页

# 二.HTML基本语句

2.段落标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>凡哥凡哥,你是一哥</title>
	</head>
	<body>
		<!-- 
		p 标签表示一个段落,占一行;段落与段落之间会有一定间隔
		align="center"居中
		style="text-indent:2em"首行缩进两个字
		代码中文字进行多个空格,在浏览器中只显示一个空格,且首行缩进不能用
		空格进行
		<br> 换行标签
		-->
		<p style="text-indent: 2em;">
			 不要让心太累,不要追想太多已经不属于自己的人和事。<br>
			 你我所走过的每一个地方,每一个人,也许都将成为驿站、成为过客。
			 <br>一向喜欢追忆,喜欢回顾,喜欢不忘记,如今却发现,
			 刻在心里的那些东西,早已在他们的时间里化成遗忘。
		</p>
		<p align="right">
			王一帆是个&nbsp;可爱的男娃吗
			王一帆是个可爱的男娃吗
			王一帆是个可爱的男娃吗
			不是的,谢谢
		</p>
		<!-- 
		 &nbsp 空格标签
		 &lt 小于号
		 &gt 大于号
		 &copy 版权
		 &trade 商标
		 &reg 注册商标-->
		 
		 &copy;
		 &trade;
		 &reg;
		 &lt;q &gt;
	</body>
</html>

3.列表标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		有序序列
		<!-- 
		由两组标签组成 ol li 列表项
		列表项前面会自动生成序号
		type="I"指定序号类型 1,a,A,I,i -->
		<ol>
			<li>列表项内容</li>
			<li>列表项内容</li>
			<li>列表项内容</li>
			<li>列表项内容</li>
		</ol>
		无序列表
		<!-- type="disc(默认),square,circle" -->
		<ul type="disc">
			<li>列表项内容</li>
			<li>列表项内容</li>
			<li>列表项内容</li>
			<li>列表项内容</li>
		</ul>
		</body>
</html>

4.超链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 超链接标签 a
		 连接到网络上的另一个指定的网络资源
		 href="" 超文本引用
		 target="_self"从当前网页打开;target="_blank"打开另一个网页-->
		 <a href="baidu.html">百度</a>
		 <a href="http//:baidu.com" target="_blank">百度</a>
		 <a href="http//:qq.com" target="_self">腾讯</a>
	</body>
</html>

5.图标标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 img 标签
		 src="图片地址" 引用项目中一个图片
		 alt="这是hao123"图片不能正常显示的提示
		 title="这是好123"鼠标移动到图片上的提示信息-->
		 <img src="img/hao123.png" width="230" height="100" border="1"
		 alt="这是hao123" title="这是hao12345"/>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_45866940/article/details/109165150