HTML学习(一)

一、什么是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、如果某个表格内容为空，使用 &nbsp 进行站位；
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](https://img.haomeiwen.com/i2362554/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>