前端小白一枚，现在在慢慢自学，身为大三的我，终于找到了努力的方向。虽然我来CSDN好久了 一直都没有好好利用它，冷落了它，从今天开始，好好宠幸它。直到今天才来写下我的第一篇博客。接下来写的一些内容个人认为是比较常用而且重要的一些知识点。仅代表个人观点，有不足的地方请多担待。
HTML 基础
任何一个html文件必须有文件说明即：
<!DOCTYPE html>
html文件的基本结构主要分为两大部分：头部和 主体。头部中主要是书写标题以及后期学习CSS时写style标签对其他标签进行修饰。主体部分是整个页面的灵魂，是整个页面的全体。在主体部分中可以任意使用标签。
在html中加注释用<!--注释内容 -->
<!DOCTYPE html>
<html lang="en">
<head> /*这是头部*/
<meta charset="UTF-8">
<title>Title</title>/*标题标签*/
</head>
<body>/*这是主体*/
</body>
</html>html文件中的标签一般均为成对出现，但也有单个出现的标签，例如：a标签 、br标签、img图像标签 。其他的遇到了再做讲解。
HTML中常用标签
h1-h6：标题标签 字体依次减小
p：段落标记
b和i：斜体字标签
em和strong：加粗字体标签
a：超链接标签。
br：换行标记
其中标题的标记 是自动换行的，在书写标题时 不用使用br标签。在使用p段落标签时 需要换行的可以使用br换行。
这里给出例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML+CSS基础</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>这是一个段落 <b>这是一个斜体段落</b> <br>换行了
这是一个段落
这是一个段落 <em>这是一个粗体段落</em> 这是一个段落
</p>
<a href="https://www.csdn.net/"> 这是一个连接</a>
</body>
</html>HTML中的列表
列表分为有序列表（ol）、无序列表（ul）、自定义列表（dl）。
有序列表：ol. 其中的列表项li表示。列表有一个type属性，它的值有：A i 1 a I。开始值不同，有序的顺序数据类型不同；ABCD.... 或者是 1 2 3 .... 或者是i ii iii..... 等。大家试一试就知道了。
无序列表：ul. ul中也有type属性，它的值不同体现在列表项前面的标志是圆形 、实心圆还是正方形。
自定义列表：dl. 这种类型的列表是很长见的。dt标签是定义一个事物；dd是对dt定义的事物的描述解说。
还有一点就是列表都是可以嵌套的，但是只有列表项（li）可以嵌套。
举个例子：ul中只能有li标签 不能有其他标签，但是li中可以嵌套ul列表、ol列表、dl列表。例子如下：
举例的源代码及运行效果
<h2>有序列表</h2>
<ol type="">
<li>苹果</li>
<li>香蕉</li>
<li>榴莲</li>
</ol>
<ol type="A">字母列表
<li>苹果</li>
<li>香蕉</li>
<li>榴莲</li>
</ol>
<h2>无序列表</h2>
<ul type="circle">我喜欢的城市
<li>北京
<ul>想去的景点
<li>颐和园</li>
<li>圆明园</li>
<li>鸟巢</li>
<li>东方明珠</li>
</ul>
</li>
<li>上海</li>
<li>广东</li>
<li>深圳</li>
</ul>
<h2>自定义列表</h2>
<dl>
<dt>电脑</dt>
<dd>是一种能够按照程序运行的电子设备</dd>
</dl>
HTML中的图像
图像在网页中是不可或缺的一个重要元素。
插入图像img标签。img标签中的src属性（后面紧跟着的是属性值）：
src：URL。要显示图像的URL 即存储图像的路径（此属性是必须的）
align：top、middle、bottom。三个值。此属性是设置图像与文本的对齐方向。
把图像设为网页背景 ：在body中添加background即可：body background=“图像路径”。放一张我随便设的（花痴了一下 哈哈阿哈）
HTML中的超链接
URL类型：
绝对URL超链接：简单说就是网络上一个站点、网页的完整路径。
相对URL超链接：如将自己网页上的某一段文字或标题连接到同以网站的其他网页上面。
书签超链接：即同一网页的超链接，又叫作书签。
常用的超链接一般都是第一种绝对URL超链接。
href：超链接href 的值是连接的路径。
文本连接：在a标签中添加描述性文本
图片连接：在标签中添加一个图片
在此只举一个图像超连接例子给大家参考。
HTML的表格和表单
表格：
创建表格时用的是table双标签，其中tr是创建表格的行，td是创建表格的一个单元格，th是创建表格的表头，caption是创建带有表头的表格，caption必须紧跟随table之后。其中td标签必须写在tr标签中。有关表格的标签均是双标签。表格的有很多属性，接下来为大家介绍一些常用的属性。table：创建一个表格
caption：创建表格的标题 必须紧跟table后
tr：创建表格中的行，有几个表格就有几行
th：创建表格的表头
td：创建表格中行的单元格 ，它只有rowspan和colspan两个属性
表格常用的属性
border：设置表格的边框，一般使用px为单位
bgcolor：为表格设置颜色
在表格中合并单元格无处不在、很常用的。表格中合并单元格分为合并行、合并列以及同时合并行和列。
合并行（上下单元格）：rowspan=“这里是跨行的个数”
合并列（左右单元格）：colspan=“这里是跨列的个数”
在合并的过程中，首先需要明确这几点：
1.合并的是哪些单元格
2.明确需要合并的单元格是跨行还是跨列，跨行使用rowspan属性并给其数值，跨列同理
3.把被合并的那个单元格删除或者备注掉
单元格内的文本问题，文本一般就是居中居左居右，这时就需要align这一属性
aglin：left/right/center三个属性值
下面给出例子：
<table border="1px" bgcolor="red">
<caption>English Table</caption>
<tr>
<th align="center">Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr bgcolor="#ffd700">
<td colspan="2">Apple Steven</td>
<!-- <td>Steven</td>-->
<td>USA</td>
</tr>
<tr>
<td rowspan="2">Baidu <br>Google</td>
<td>Li YanHong</td>
<td>China</td>
</tr>
<tr>
<!-- <td>Google</td>-->
<td>Larry Page</td>
<td>USA</td>
</tr>
<tr >
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>
<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>
<tr >
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>
</table> 
表单：
表单主要是收集网页上浏览者的相关信息，其标签是<form> < /form>
form的属性：action是最常用最重要的一个属性
action=‘url’：它可以是一个地址或者电子邮件地址
input标签 ：input是单标签
input标签有一些常用的属性：
type：表单元素的类型
表单有不同表单元素，不同的表单元素是因为表单中input标签中的type属性值的不同
type=“text”：文本框，可输入单行文本
type=“teatarea”：文本域，可输入多行文本；同时也可以设置文本的宽：cols；高：rows
type=“password”：密码域，输入秘密具有隐藏效果
type=“submit”：提交
type=“reset”：重置
type=“radio”：单选按钮。以组为单位使用：组必须相同，值域必须不同
type=“checkbox”：复选框。每一个复选框都是独立的一个元素，都必须有一个唯一的名称。
type=“button”：普通的按钮
name：定义元素的名称
value：定义元素的值或者是元素的初始值
id：元素的唯一标识，每个元素只有一个
select标签 是创建一个下拉列表 其中option是列表项
下面给出示例：
源代码：
<h2>这里是表单</h2>
<form action="https://www.csdn.net/">
<!-- 这里的placeholder属性是设置提示性文字的-->
文本框：<input type="text" placeholder="请输入您的账户"><br>
密码框：<input type="password" placeholder="请输入您的密码"><br>
单选按钮：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女"> 女<br>
复选框：<br> 喜欢的城市
<input type="checkbox" name="" value="box1">北京
<input type="checkbox" name="" value="box2">上海
<input type="checkbox" name="" value="box3">广东
<br>
下拉列表：<br>
<select name="fruit" multiple>/*这里的multiple表示用户可以多选*/
<option value="book1" selected>苹果</option>/*这里的selected表示这个元素被默认选中
<option value="book2">香蕉</option>
<option value="book3">榴莲</option>
<option value="book4">橘子</option>
<option value="book5">提子</option>
</select> <br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>显示效果：
HTML中的多媒体：音频与视频
还可以为视频或音频设置宽高，用width和height设置。我本人没有找视频跟音频来试验，看过的小伙伴可以自己找找相关的音视频试试。
<h2>这里是音频和视频</h2>
<!--loop 是循环播放. autoplay 是自动播放 通过source属性可以添加多个音频和视频-->
<audio controls="controls" loop >
<source src="song.mp3" type="audio/ogg">
<source src="sang.mp3" type="audio/mpeg">
</audio>
<video controls="controls" autoplay loop>
<source src="123.mp4" type="video/mp4">
</video>对于HTML，这些是基础，其中最重要的我想就是表单、表格以及我们的列表了，这些在网页的应用比较广泛，就要求我们要熟练掌握了阿。那就写到这里吧，我的第一篇博客，我写了两天了，今天是第二天，终于写完了。自己的表达能力不是很好，很多时候都不知道怎么表述，就按个人的思路写了下来。HTML暂时结束，下一步奔向CSS3！冲阿！！！！！！
