一、什么是HTML?
HTML 是用来描述网页的一种语言。
1、HTML指的是超文本编辑语言;
2、HTML本身并不是一种编辑语言,而是一种标记语言(标记语言本事是用来被读取的,没有行为能力,是被动的;但是编程语言中有很多逻辑和行为能力的指令,是主动的);
3、标记语言是一套标记标签,HTML 使用标记标签来描述网页;
4、HTML文档包含 HTML标签和纯文本, 也被称为网页;
二、什么是HTML标签
1、HTML文档及HTML元素是通过HTML标签进行标记的。
2、标签由“开始标签”和“结束标签”组成;开始标签:是被括号包围的元素名;结束标签:是被括号包围的斜杠和元素名;
3、并不是所有的标签都有结束标签,
<br />就是没有关闭标签的空元素。(<br/>用来定义换行的标签);
空元素是在开始标签中关闭的;
三、常见的HTML标签
<!--标题 <h1> - <h6>-->
<h1>呵呵</h1>;<h2>呵呵</h2>
<h3>呵呵</h3>;<h4>呵呵</h4>
<h5>呵呵</h5>;<h6>呵呵</h6>
<!--链接 <a> -->
<a href="http://www.baidu.com/">百度</a>
<!--段落 <p> -->
<p> 夜色萦桐枝引凰 </p>
四、HTML元素
1、HTML元素:指的是从开始标签到结束标签之间的所有代码;
2、HTML元素语法:某些元素具有空内容,空元素在考试标签中进行关闭(以开始标签的结束而结束);
3、HTML元素的嵌套:即HTML元素内包含其它HTML元素。
4、希望大家养成使用结束标签的习惯,因为可能会产生不可预料的结果或错误;
五、现在分别介绍一下HTML 一些常用标签的使用
1、<hr /> 标签作用:在HTML页面中创建一个水平线;
2、在safari设置中查看网页源代码的方法:“鼠标右键”->"检查元素";
3、<br /> 标签作用:进行换行;它本身就是一个空的HTML元素;
4、文本格式化标签:
<b> :定义粗体文字; <i> : 定义斜体字;
<big> : 定义大号字体; <small> : 定义小号字体;
<em> : 定义着重文字; <strong> : 定义加重语气;
<sub> : 定义下标字; <sup> : 定义上标字;
<del> : 定义插入字; <ins> : 定义插入字;
5、链接使用 <a></a>
<a>被用来创建“锚”,href 属性用于定位需要链接的文档,
锚的开始标签和结束标签之间的文字被称为:超级链接;
例:<a href="http://www.baidu.com/">百度</a>
name属性:用于创建被命名的锚。使用被命名的锚,可以跳转到网页的指定位置;
例:<!--两处的名称必须一致-->
<a href="#top_flage">回到顶部</a>//点击这个位置;
<a name="top_flage">这里是顶部</a>//会直接跳转到该位置;
也可以实现不同界面的跳转:
<a href="second.html#fule">去第二个界面</a>
六、创建HTML表格
1、表格使用<table>标签定义,每个表格的若干行使用<tr>标签进行定义,每行被分为若干个单元格使用<td>标签定义;
<table>
<tr>
<td> 第一行第一列 </td>
<td> 第一行第二列 </td>
</tr>
<tr>
<td> 第二行第一列 </td>
<td> 第二行第二列</td>
</tr>
</table>
2、表格的边框修改:<table border="2">
3、如果某个表格内容为空,使用   进行站位;
4、使用 colspan 进行跨列的合并;rowspan 进行跨列合并;
七、创建HTML列表
1、<!--无序列表--> :无序列表开始于 <ul>标签,内容每项始于<li>;
<ul>
<li>小风扇</li>
<li>小水杯</li>
<li>大屏幕</li>
</ul>
2、<!--有序列表-->:有序列表开始于<ol>标签,内容每项始于<li>;
<!--type="I"类型-->:类型可选择
<ol type="I">
<li>小风扇</li>
<li>小水杯</li>
<li>大屏幕</li>
</ol>
3、<!--自定义列表-->:以<dl>标签开始,每个自定义的列表项为<dt>开始;
每个列表项的定义以<dd>开始;
<dl>
<dt>夜凰</dt>
<dd>夜色萦桐枝引凰</dd>
<dt>墨觞</dt>
<dd>墨泣如诉满卷觞</dd>
</dl>
八、创建HTML表单
HTML表单用于搜索不同类型的用户输入。
1、表单:是一个包含表单元素的区域;表单使用表单标签<form>定义;
2、输入:多数情况下,被用到的表单标签是输入标签<input>定义。输入的类型是由<type>定义的,
例:<!--表单-->
<form method="get" action="http://www.baidu.com/">
账号:<input type="text" name="account" width="150px" /><br />
密码:<input type="password" name="password" width="150px" /><br />
性别:男<input type="radio" name="sex" value="man"/> 女<input type="radio" name="sex" value="woman"/><br />
体育爱好:
篮球<input type="checkbox" name="PE" value="篮球" />
足球<input type="checkbox" name="PE" value="足球" />
橄榄球<input type="checkbox" name="PE" value="橄榄球" />
乒乓球<input type="checkbox" name="PE" value="乒乓球" /><br />
上传头像:
<input type="file" name="phtot" /><br />
确定: <input type="submit" value="提交" />
<br />
<!--测试元素-->
谁:
<select name="teacher">
<option value="shui">谁</option>
<option value="shui">who</option>
<option value="shui">where</option>
</select>
</form>
效果:
![屏幕快照 2016-07-06 下午7.47.58.png](http://upload-images.jianshu.io/upload_images/2362554-0b01c4604ca3196b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
九、创建HTML图像
1、图像标签<img> 和 源属性(Src) ;
<img>为空标签,只包含属性,没有闭合标签,想要在页面上显示图像,需要使用源属性(Src):
定义语法:<img src="img/1.png"/>,参数为图像所在位置;
十、HTML媒体
1、音频:以<audio>标签开始。
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
</audio>
2、视频 :以<video>标签开始。
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>