1.网页的概念
网页的来源
网页的本质类似于txt文档一样，我们可以给这里面放入文字、图片和链接等元素。
如果没有浏览器那么我们在文档中写什么内容就会看到什么内容，和txt文档一样，但是如果通过浏览器打开以后它就是网页了
可以看到浏览器中展示的文档内容和普通的文档打开并不一样，这是因为浏览器会解析文档中的内容，对这些内容进行渲染
因此网页就相当于是浏览器解析文档后显示出来的内容
浏览器
既然是对文档结构进行解析，那么解析方法就会有多种，解析的方式不同，展示的内容也会有所差别，这样就形成了同一份文档被解析为多种风格。
浏览器中主要是依靠内核对文档进行解析，根据内核的不同浏览器主要分为以下种类：IE、chrome、oprea、firefox、safari
剩余的其他浏览器如uc、qq等基本都是基于这些内核定制出来的
web标准
因为存在多种浏览器对同一份文档解析后出现不同的内容，对开发造成了很大的困扰，因此出现了W3C标准化组织，他们负责制定标准，然后各种浏览器实现这些标准，这样开发者只需要掌握这些标准即可适配所有浏览器了
其中标准主要由html、css和javascript三部分组成
2.网页的编写方式
固定格式
如果直接在文档中写入内容，浏览器也是可以直接解析的，这是因为浏览器会自动为这些内容添加固定格式
<meta charset="UTF-8">
<title>Document</title>
整个网页由html标签开头和结尾，分为head和body两部分，通过声明这是html5页面，head标签内指明页面的一些元信息，body中就是在浏览器中展示的内容
html中标签分为两种：双标签和单标签，双标签如,中间可以插入其他内容，单标签的中间则不允许再插入其他内容，比如
标签之间的关系也分为两种：并列和包含
包含：
<meta charset="UTF-8">
<title>Document</title>
并列：
<meta charset="UTF-8">
<title>Document</title>
一般一个网页由html或htm结尾
常用的一些标签
h系列标签
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
h标签一般用于标题，字体大小逐级递减，每个h标签都会独占浏览器一行
段落p标签
<p>段落1</p><p>段落2</p>
<p>段落3</p><p>段落4</p>
p标签用于分割每段话，使页面结构更加美观，每个p标签也会独占一行，并不会按照文档中写的样子展示
换行br标签
<p>段<br>落3</p><p>段落4</p>
br标签会强制将内容进行换行显示
文本格式化标签
<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>
格式化标签并不会导致换行
盒子标签
<div>div标签1</div><div>div标签2</div>
<span>span标签1</span><span>span标签2</span>
div和span标签的作用是为样式服务的，最明显的特点就是div是独占一行，span并不会
图像img标签
网络路径：<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
当前文件所在目录下：<img src="bd.png">
其他目录下：<img src="otherdir/bd.png">
img标签不会独占一行，src中可以填入网络路径，也可以直接使用项目中的图片
其中图片的路径分为相对路径和绝对路径，相对指的是相对于当前文件所在路径，绝对路径则是从项目根目录开始计算
超链接a标签
<a href="https://www.baidu.com">百度一下</a>
点击以后跳转到百度页面，herf除了可以指定网络地址外，还可以指定页面中的某个锚点，或者是某个页面，它的作用就是在当前窗口中打开href指定的内容
表格table标签
<table>
<thead>
<tr><th>tilte1</th>
<th>title2</th>
</tr></thead>
<tbody>
<tr><td>content1</td>
<td>content2</td>
</tr></tbody>
</table>
table标签也独占一行，目前展示的都是标签的默认样式，具体美化方式需通过css操作，单元格中可以放其他的标签
列表ul、ol、dl标签
无序列表：
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
有序列表：
<ol>
11
<li>order list1</li>
<li>order list2</li>
<li>order list3</li>
<li>order list4</li>
</ol>
自定义列表：
<dl>
<dt>tilte</dt>
<dd>define list1</dd>
<dd>define list2</dd>
<dd>define list3</dd>
<dd>define list4</dd>
</dl>
表单form标签
表单中主要分为input、select、textarea三个标签
<form>
input系列:<br>
普通输入框：<input type="text"><br>
单选框：<input type="radio">男<input type="radio">女<br>
多选框：<input type="checkbox">爱好1<input type="checkbox">爱好2<br>
提交按钮：<input type="submit"><br>
重置按钮: <input type="reset"><br>
select系列:<br>
下拉框: <select><option>选项1</option><option>选项2</option></select><br>
textarea系列:<br>
文本框: <textarea></textarea>
</form>
input系列中还有许多其他类型的标签，用法基本是一样的
3.总结
页面中的标签基本种类并不多，但是可以很好的满足日常需求，就是这些标签组成了丰富多彩的网页，这些标签的默认样式有时并不能满足人们对界面美感的追求，因此需要通过css对这些标签进行重新布局，定位等等
如果记不住这么多的标签，那么只需要掌握div一个标签即可，因为通过css可以将div模拟成其他的任何标签
