基本介绍
官网文档地址: HTML 教程
HTML（HyperText Mark-up Language）即超文本标签语言；HTML 文本是由HTML 标签组成 的文本，可以包括文字、图形、动画、声音、表格、链接等；HTML 的结构包括头部（Head）、主体（Body）两大部分。
- 头部描述浏览器所需的信息
- 主体则包含所要说明的具体内容。
注意：HTML 文件不需要编译，直接由浏览器进行解析执行；
网页的结构图
html 基本结构
说明：
HTML 标签：
- 用两个尖括号"<>"括起来
- 一般是双标签； 如<b>和</b> 前一个标签是起始标签, 后一个标签为结束标签；
- 两个标签之间的文本是html 元素的内容；
某些标签称为"单标签",因为它只需单独使用就能完整地表达意思：
- <br/> ：表示换行
- <hr/>：表示线条
HTML 元素指的是从开始标签到结束标签的所有代码；
html命名规范 xx.yy.html ， xx-yy.html ， xx_yy.html 根据公司规范要求即可
<!--文档类型说明 注释 -->
<!DOCTYPE html>
<!--将英语指定为语言，将美国指定为国家-->
<!--<html lang="en-US">-->
<!--中文指定为语言，将中国指定为国家-->
<html lang="zh-CN">
<!--html头-->
<head>
<!--charset文件的字符集-->
<meta charset="UTF-8">
<!--文件标题-->
<title>Java教育</title>
</head>
<!--body体，主体部分-->
<body>
<!--内容 -->
hello,Java教育
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签使用细节</title>
</head>
<body>
<!--标签不能交叉嵌套-->
<!--<div><span>tom</div></span> 错误用法-->
<div><span>tom</span></div>
<!--标签必须正确关闭-->
<span>jack</span>
<!--注释不能嵌套 -->
<!--html 语法不严谨。有时候标签不闭合，属性值不带""也不报错-->
<font color="red">张飞</font>
<font color=blue>关羽</font>
<br/>
</body>
</html>HTML 标签/元素
1、font字体标签
它可以用来修改文本的字体,颜色,大小(尺寸)。
语法
- <font size="40px" face="微软雅黑" color="red">北京</font>
属性
- color 属性修改颜色
- face 属性修改字体
- size 属性修改文本大小
注意：对应标签的属性，顺序不做要求；
2、字符实体
在网页上显示一些特殊的符号， 称为字符实体(也叫符号实体)。
|----------|--------|-----------|----------|
| 显示结果 | 描述 | 实体名称 | 实体编号 |
| | 空格 | |   |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
<body>
<!--浏览器会将 <hr/>解析成一条线-->
jack
<hr/>
<hr/>
smith smith2 hsp<br/>
smith smith2 hsp
</body>
3、标题标签
标题使用 <h1> - <h6> 标签进行定义： <h1> 定义最大的标题；<h6> 定义最小的标题。
语法： <h1>标签1</h1>
<body>
<!-- 标题标签
align: 属性是对齐属性
left: 左对齐(默认)
center :居中
right : 右对齐
-->
<h1>标签1</h1>
<h2>标签2</h2>
<h3 align="center">标签3</h3>
<h4>标签4</h4>
<h5>标签5</h5>
<h6 align="right">标签6</h6>
</body>4、超链接
超链接是指从一个网页指向一个目标的链接关系；
目标：另一个网页；相同网页上的不同位置；一个图片；一个电子邮件地址；一个文件；一个应用程序等等。
语法： <a href="http://www.sohu.com" target="_blank">搜狐2</a>
属性：
-
a 标签是超链接
-
href 属性设置连接的地址
-
target 属性设置哪个目标进行跳转： _self : 表示当前页面(默认值)； _blank : 表示打开新页面来进行跳转
5、列表
无序列表 ul/li：
有序列表 ol/li：
<body>
<h1>五虎将</h1>
<ol type="I" start="3">
<li>jack</li>
<li>tom</li>
<li>smith</li>
<li>mary</li>
<li>milan</li>
</ol>
</body>
6、图像标签
可以在 html 页面上显示图片。
语法： <img src="./imgs/1.png" height="150" border="10px" alt="美女找不到">
属性：
-
img: 标签是图片标签,用来显示图片
-
src: 属性可以设置图片的路径
-
width: 属性设置图片的宽度
-
height: 属性设置图片的高度
-
border: 属性设置图片边框大小
-
alt: 属性设置当指定路径找不到图片时,用来代替显示的文本内容
图片标签的演示
