html文档结构和基本标签
1.html基本结构
第一个html
<!DOCTYPE html> <!-- ！表示声明 这一行代码表示 下面的文档标签将以html5规范去解析-->
<html>
<!-- html头部 ，主要用来完成一个网页的相关设置-->
<head>
<!-- meta:元，主要用来完成对应设置的-->
<meta charset="utf-8" /> <!-- 汉字编码 -->
<meta name="keywords" content="" /> <!-- 设置一个网站的搜索关键字-->
<meta name="description" content="" /> <!-- 网站的描述内容 -->
<title>我的第一个html网页</title> <!-- 标题-->
<!-- 设置网站小标题 -->
<link rel="shortcut icon" href="img/mypic.png" />
<style>
/* 书写样式的地方 */
</style>
<!--用来引入外部样式 -->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<!-- 用来书写js -->
<script type="text/javascript" src="index.js"></script>
</head>
<!-- html主体部分-->
<body>
<h1>hello world!</h1>
<p>第一个段落</p>
</body>
</html>
2.html标签
<!DOCTYPE html>声明为 HTML5 文档<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。<title>元素描述了文档的标题<body>元素包含了可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落
3.基本标签
(1) div
- 它是可用于组合其他HTML元素的容器
- 用于对大的内容块设置样式属性
- 文档布局。它取代使用表格定义布局的老式方法
<!-- 1. div 用来布局的，没有具体含义 。层 -->
<div>
<div>123</div>
<div>abc</div>
</div>
(2) h1-h6
- hx html标题标签只作用于标题，不要为了仅仅是为了生成粗体或者大号的文本而使用标题
- htm提供的标题有六种 分别是 h1 h2 h3 h4 h5 h6
- < h1 > 定义字号最大的标题，代表大标题，一般一个页面只用一次
- < h6 > 定义字号最小的标题。
<!-- 2. h1-h6 标题，从1级到6级，1级标题最大，6级最小，会自动加粗，有默认字号 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
(3) p
- p元素会自动在其前后创建一些空白。浏览器会自动添加这些空间
<!-- 3.p 表示段落 相当于一个回车 -->
<p>网页制作是web1.0时代的产物，那个时候的网页主要是静态网页，
所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，例如一篇QQ日志、一篇 博文等展示性文章。
在web 1.0时代，用户能做的唯一一件事就是浏览这个网站的文字图片内容，
这时用户也不能像现在在大多数网站都可以评论交流（缺乏交互性）。
现在大多数人都听过“网页三剑客Dreamweaver+Fireworks+Flash”吧，
这个组合就是web 1.0时代的产物。</p>
(4) br
- br 元素会在浏览器插入一个简单的换行符
<!-- 4. br：生成换行符 单标签 -->
<p>从2005年开始，互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。 <br />
在web 2.0时代，网页有静态网页和动态网页。 <br />
所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。 <br />
举个例子，你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。<br />
web2.0时代的网页不仅包含炫丽的动画、音频和视频，还可以让用户在网页中进行评论交流、上传和下载文件等（交互性）。这个时代的网页，如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的，那是远远不能满足需求。 <br />
现在网站开发无论是开发难度，还是开发方式上，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“web前端开发”。</p>
(5) hr
- hr 标签 定义html页面中的主题变化（比如话题的转移），并显示为一条水平线。
<!-- 5 hr:生成一条水平线，主要起装饰的作用。单标签 -->
<hr />
<hr width="80%" height="2px" align="center" color="#007AFF" />
(6) a
- a 标签 用来设置超文本链接。超链接 可以是一个字，一个词，或者一组词，也可以是一副图像，你可以点击这些内容来跳转到新的文档或者当前文档的某个部分。
- title属性：提示文字
- href属性：描述了链接的目标URL
- target属性： 设置链接跳转方式
- 有4个保留的目标名称用于特殊的文档重定向的操作 target属性
| 属性 | 功能 |
|---|---|
| _blank | 浏览器总在一个新打开，未命名的窗口载入目标文档。 |
| _self | 这个目标的值对所有没有指定目标的 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。 |
| _parent | 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。 |
| _top | 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。 |
<!-- a 实现网页的跳转 target：_blank/_self/_parent-->
<a href="https://www.baidu.com/" title="百度">百度</a>
<a href="https://www.w3school.com.cn/" target="_self">w3school</a>
<a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
(7) img
- 用于申明图像的插入
- src属性：规定显示图像的 URL，也就是引用该图像的文件的的绝对路径或相对路径。
- alt属性：规定图像的替代文本
- title属性：定义图片的标题，鼠标移动到图片出现。
<!--7. img 用来加载外部图片，图像. src:表示用来设定加载的图片或者图像的路径， alt：当图像加载不成功时，将显示其内容，否则不会显示。-->
<img loading="lazy" src="../img/html.jpeg" width="258" height="39" title="测试" alt="我的图片" />
(8) span
- span 用来组合文档中的行内元素，可用作文本的容器。span元素 没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。
<!--8 span: 作用与div一样，都是用来布局的，不同的是div会单独占一行，而span不会 -->
<span>abc</span>
(9) ul
- ul标签作为无序列表，它是一个项目的列表，此列表项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表始于
- 标签，每个标签项始于
- 标签
<!--9 ul列表：无序列表 ， 列表内容用的li标签 通常表示菜单、目录等-->
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
(10) ol
- 有序列表也是以列项目，列表项目使用数字进行标记。有序列表始于
- 标签，每个列表项始于
- 标签。
<!--10 ul列表：有序列表， 列表内容用的li标签 ol>li{li$}*3-->
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
（11）注释
- 注释标签 用于源代码中插入注释。注释不会显示在浏览器中。可使用注释对代码进行解释，这样有助于在以后的时间对代码的修改，当编写大量代码很有用。
<!-- 注释的快捷键 Ctrl+Shift
复制的快捷键 Ctrl + D
浏览器不会解析注释 -->
