#HTML语言的基本规则# ##1.1 HTML基本结构 <head>内是头部信息，不显示在网页上 <body>内是网页内容 <DOCTYPE>声明必须放在HTML文档第一行，不是html标签 <meta http-equiv="Content-Type content="text/html";charset=UTF-8"/>依次说明内容、文档类型、编码方式
<DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content-Type content="text/html";charset=UTF-8"/>
</head>
<body>
网页主体内容
</body>
</html>
扩展名可以是htm或html ##1.2 html标签 ###1.21成对出现的标签 标题标签<h1></h1>~<h6></h6> 段落标签<p></p> 轮播图效果<marquee behavior="altern">轮播内容</marquee> 字体规范标签<font size=30px color="blue" family="隶书">文本内容</font> 居中标签<div align="center">居中内容</div> 加粗字体<strong></strong>``` ###1.22单独出现的标签 分隔线<hr/> 换行<br/>` 例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<h1>hello world!<br/>hello world!</h1><!--换行-->
<h1>hello world!<hr width=60%/>hello world!</h1><!--分隔线-->
<strong><p>I'm FXM</p></strong><!--加粗-->
<div align="center">bilibili</div><!--居中标签-->
<marquee behavior="altern">
<font size=30px color="blue">acfun</font><!--轮播图效果-->
</marquee>
</body>
</html>
##1.3 <head>标签 内容<title>网页名称</title>显示在浏览器标签栏上 ###meta标签 HTML中，meta标签没有结束标签。 在XHTML中，meta需要被正确地关闭 内容: 向浏览器传回一些有用的信息http-equiv="content-type" 规范文本内类型content="text/html; 字符编码，网页开发中一般用utf-8charset=UTF-8" 搜索引擎关键字name="keywords" content="搜索引擎关键字1 字2" 搜索引擎描述name="descripyion" content="描述1 描述2" 自动刷新，3：3秒，url：name="refresh" content="3;url=http://www.baidu.com" 加网页logo <link rel="icon" href="图片地址">
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<!--http-eqiuv:设置浏览器兼容性，content:文本类型，charset:字符编码-->
<title>哔哩哔哩动画</title><!--显示在网页标签栏-->
<link rel="icon" href="picture.png"/>
<!--rel:当前文档与被链接文档/资源之间的关系
href:图片地址-->
<meta name="keywords" content ="动漫 二次元 bilibili"/>
<!--设置搜索引擎关键字-->
<meta name="desprition" content="动画动漫">
<!--搜索引擎关键字描述-->
<!--<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>-->
<!--跳转到另一个网页-->
</head>
<body>
</body>
</html>
<DOCTYPE html>html5标记，告诉浏览器把当前文档解释为html格式 <div>容器是块级元素，显示时独占一行 <hr/>也是块级元素
<html>与</html>之间的文本描述网页 <body>与</body>之间的文本是可见的页面内容 <h>与</h>之间的文本被显示为标题 <p>与</p>之间的文本被显示为段落 ##1.4 html标记 定义：html命令记为标记 作用：用于控制html内容和外观 分类：
- 双标签
- 单标签 属性 作用：修饰（颜色、对齐等） ###body标签 属性： ####定义背景颜色
<body bgcolor="red">三种颜色： 1.web颜色是十六进制RGB颜色,#FF0000 2.六位颜色,两两相邻时可以缩写为#F00 3.常量形式 red,green 设置背景颜色<body bgcolor=#F00>图片地址<body style="background:url(图片地址)">图片是否重复<body style="background-repeat:no-repeat">背景图片大小<body style="background-size:100%">text属性，改变文字颜色<body text="red">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bilibili</title>
</head>
<body bgcolor="blue" style="background: url(picture.png);background-repeat: no-repeat;background-size: 100%" text="orange"><!--背景颜色、背景图片、图片重复、文字颜色-->
<a href="https://www.bilibili.com/">bilibili</a><!--链接-->
<img src="picture.png" width=50px height=50px/><!--图片-->
<p>I'm an orange</p>
</body>
</html>
左边距leftmargin <body leftmargin=120> 上边距topmargin <body topmargin=120> 分隔线属性 <hr size=粗细 width=宽度 align=对齐方式 color=颜色/> 对齐方式可以是,left：左对齐,right:右对齐,justfy:两端对齐,center:居中 <h>属性 <h style="text-align:center">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body leftmargin=50px topmargin=50px><!--左边距、上边距-->
<p>hello world</p>
<hr size="10" width="1500" align="center" color="black" /><!--分隔线标签属性-->
<h1 style="text-align:center"> hello world hello world hello world hello world</h1><!--h
属性-->
</body>
</html>
##1.5 一些特殊标签 段落标签<p></p> 换行 <br/> 快捷键shift+ctrl 加粗 <b></b> 和<strong></strong> 斜体<i></i> 删除<s></s> 下标<sub></sub> 上标<sup></sup> 下划线<u></u>
1.6 路径
相对路径：根据其自身为参照点寻找其他位置 background=../1.png ../表示寻找上级文件 ../../寻找上上级文件，以此类推 绝对路径：目标文件的完整路径，网页图片url https://www.baidu.com/img/bd_logo1.png
物理路径：某台计算机本地存储的路径 file:///e/1.png ##1.7 特殊符号 空格   大于号> > 小于号< < 引号 " @ © ##1.8 插入图片 <img/>图片格式：JPG、GIF、PNG、BMP 作用：显示图片 属性：src 声明图片路径 alt 图片无法显示时的替代信息 title 提示信息（光标放在图上） width：宽 height:高 align:周伟文本对齐方式（bottom默认、middle、top、left(图文)、right(文图)） hspace=像素:图片左右侧的空白 vspace=像素：图片上下的空白
##1.9标签
- 无序标签
<ul><li>段落1</li><li>段落2</li></ul>例：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body>
<h>hello html!</h>
<p>This is a text.</p>
<ul> <!--无序标签-->
<li>1.abc</li>
<li>2.abc</li>
<li>3.abc</li>
</ul>
</body>
</html>