HTML

一、HTML 介绍

1. 什么是 HTML？

超文本标记语言（Hyper Text Markup Language）：
超文本：比普通文本功能更加强大,页面内可以包含图片、链接等非文字内容。
标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！例如：www.baidu.com

2. HTML 怎么使用？

语法和规范：
· HTML文件不需要编译，直接使用浏览器阅读即可
· HTML文件的扩展名是.html或.htm（推荐使用html）
· HTML结果都是由标签组成
· 标签名预先定义好的，我们只需要了解其功能即可。
· 标签名不区分大小写
· 通常情况下标签由开始标签和结束标签组成。例如：
· 如果没有结束标签，建议以/结尾。例如：
· HTML结构包括两部分：头head和体body

3. HTML相关标签的学习

3.1标题标签

标题标签使用,n 从 1 到 6 逐渐变小。超过 6 的按 6 的进行显示
特点：加粗加黑显示，单独占用一行。与其它行有一定的行间距。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标题标签</title>
	</head>
	<body>
		<h1>公司简介</h1><br />
		<h2>公司简介</h2><br />
		<h3>公司简介</h3><br />
		<h4>公司简介</h4><br />
		<h5>公司简介</h5><br />
		<h6>公司简介</h6><br />
		<h100>公司简介</h100>
	</body>
</html>
注释和换行：


快捷键：ctrl+/

插入单个换行

3.2水平线标签

水平线标签：


size属性：水平线的高度，单位像素
noshade属性：没有阴影，取值：noshade，表示显示纯色
image

3.3 段落标签

段落标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>段落标签</title>
	</head>
	<body>
		<p>
			加油，程序员。
		</p>
		<p>
			这是段落标签！
		</p>
	</body>
</html>

3.4 字体标签

字体标签使用
必须结合其属性才能具备一定的样式效果。
设置颜色：color(可以是英文单词也可以是十六进制)
设置字体：face(那些字体必须是你本机已经有的)
设置大小的：size (从 1 到 7 逐渐变大，超过 7 的部分按照 7 来显示)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体标签</title>
	</head>
	<body>
		<font color="#0000FF" size="1" >大小为1的蓝色字体</font><br />
		<font color="#0000FF" size="3">大小为3的蓝色字体</font><br />
		<font color="#0000FF" size="4">大小为4的蓝色字体</font><br />
	</body>
</html>

image

3.5格式化标签

粗体
斜体
image

实例：网站信息显示页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站信息显示页面</title>
	</head>

	<body>
		<!--1.创建一个标题标签-->
		<h2>个人简介</h2>
		<!--2.创建一条水平线标签-->
		<hr />
		<!--3.分别创建4个段落标签-->
		<p><font color="red">“oneboy”</font>你好，<b>我是onesun</b>，很高兴认识你。<i>Hello</i>,I am onesun,nice to meet you.</p>
	</body>
</html>

3.6图片标签

在html页面中引用一张图片
· src ：指定需要显示图片的URL（路径）。
· alt ：图片无法显示时的替代文本。
· width ：设置图像的宽度。
· height ：设置图像的高度。
image

3.7列表标签

·

    定义有序列表
    type 列表类型，取值:A、a、I、i、1 等
    ·
posted @ 2021-09-06 16:43  早晨9点  阅读(97)  评论(0)    收藏  举报