前端学习-HTML
一、HTML概述
1、HTML定义
HTML全称 超文本标记语言 (Hype Text Markup Language) ， 用于制作超文本文件的标签语言。
HTML中包含大量的网页标签，制作的网页文件可以通过浏览器直接访问。
2、HTML通途
用于制作静态网页，展示网页信息，HTML网页也称为 web页面
该文件的后缀 .html 或者 .htm
3、 网页的基本格式
新建一个 文本文件，更改后缀为.html
<!-- 第一句话 引入网页标签 -->
<!DOCTYPE html>
<html>
<head>
<title>这是第一个网页</title>
</head>
<body>
这是我的第一个网页
</body>
</html>
解释：
第一句话： 表示网页的注释 ，不被网页解释
第二句话： : 表示该也页面可引入 html5的标签 ，因为在html5之前写法较为繁琐
第三句话： 网页的根标签 ： 一个网页有且只有一个根标签（根节点）
第四句话: : 网页的头标签 ，也只能有一个head标签， 里面引入指定的标题或其他描述信息
第五句话：： 网页的内容标签： 所有的网页信息都应该写在body里面
编辑网页可以手写，也可以是使用工具 ， 这里推荐使用 HBuilderX
二、HTML标签
1、HTML元素
html元素由开始标签和结束标签构成 ，例如
开始标签
结束标签
放在开始标签和结束标签之间的是元素内容 ， 有些标签没有结束标签， 例如
2、html元素属性
在开始标签中定义的 元素特征 表示属性 ，例如 其中 color是font标签的属性名，red 是数学值
所有元素都由元素属性和值
3、常用标签
3.1 标题标签
从 h1~h6标签，用于描述文本的标题
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
< hr/> : 表示分隔线条
3.2 段落标签
<p>表示一个段落</p>
如果对段落换行 可以使用
3.3 文本格式化标签
用于设置文本格式化 例如 加粗，斜体，大字体 小字体等
| 标签 | 描述 |
|---|---|
| 定义粗体文本 | |
| 定义着重文字 | |
| 定义斜体字 | |
| 定义小号字 | |
| 定义加重语气 | |
| 定义下标字 | |
| 定义上标字 | |
| 定义插入字 | |
| 定义删除字 |
<b>粗体</b> <br/>
<em>着重</em> <br/>
<small>小字体</small> <br/>
<sub>下标字</sub> <br/>
<sup>上标字</sup> <br/>
<strong>加强字体</strong> <br/>
<i>斜体</i> <br/>
<ins>插入字体</ins> <br/>
<del>删除字体</del> <br/>
2<sup>3</sup>
pre : 预文本格式 ，按照网页中的默认格式 排版
3.4 链接标签
也叫a标签 ，用于超链接到其他网页
属性： href： 指定的链接地址
target： 页面打开的方式
_blank 在空白页面打开
_self 在当前页面打开
#自定义： 在对应的iframe类似容器中打开
<a href="http://www.softeem.com" target="_blank">软帝</a>
<a href="02 标签.html" target="_self">02页面</a>
<!-- 在当前页面跳转 #id -->
<a href="#top">回到顶部</a>
<!-- 刷新当前页面 -->
<a href ="#">空</a>
3.5 head标签
该标签是网页的头标签，里面包含一些子标签 title ， base ， meta标签
<!--设置文本的编码 -->
<meta charset="utf-8">
<!-- 设置网页输出的内容格式 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 设置网页宽度 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 设置关键字 作者 -->
<meta name="keywords" content="HTML 头部">
<title>网页标题 </title>
3.6 设置标签的样式
style属性 = "样式名:样式值;样式名:样式值"
<h2 style="background-color:red;color:yellow">h2标签</h2>
颜色设置：
颜色组成: 通用颜色： rgb （red（0-255） green blue）
颜色由16进制数组成 ： #000000 黑色
#FFFFF 白色
也可以由英文单词组成： red yellow blue。。。
设置颜色的透明度
参数4：0-1 表示透明度 0：全透明 1：全部遮盖
background-color: rgba(178,200,211,0.5);
3.7 图像标签
img ： 用于在网页上插入图像 ，必须将放置在项目中 img下
<a href="#">
<img src="img/1599275813168.jpg" style="border: 1px solid gray;" width="200px" height="200px" title="图像标题" alt="当图像不存在时用该文字填充" />
</a>
