Web前端开发【三】HTML总结

1. HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。

2. 前端的学习路线：
HTML——CSS——JavaScript——jQuery——CSS3——HTML5——Vue.js

3. 什么是HTML？
HTML全称是Hyper Text Markup Language（超文本标记语言 ），它是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。

4. 基本标签：
（1）HTML基本结构 ：

说明 ：一个页面是由四个部分组成的，一个文档声明 、一个html标签对 、一个head标签对 、一个body标签对 。

（2） head标签的“内部标签”

（3）meta标签 的http-equiv属性只有两个重要作用：

• 定义网页所使用的编码（防止页面出现乱码 ）；
  <meta charset="utf-8"/>

• 定义网页自动刷新跳转。
  <meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>

（4）head标签和body标签的区别：

• head标签 内定义的内容是给“搜素引擎 ”看的；
• body标签 内定义的内容是给“用户 ”看的。

5. HTML注释：
<!--注释的内容-->

6. 文本：
（1）文章标签 ：

（2）文本标签 ：

（3） 一般标签与自闭合标签的区别 ：

• 一般标签有开始符号和结束符号，而自闭合标签只有开始符号；
• 一般标签可以在内部插入文字或其他标签，而自闭合标签不可以。

（4）块元素与行内元素 ：
常见的块元素 有h1~h6、p、div、hr、ol、ul 等，块元素具有以下两个特点：

• 独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行；
• 块元素内部可以容纳其他块元素和行内元素。

常见的行内元素 有strong、em、a、span 等，行内元素具有以下两个特点：

• 可以与其他行内元素位于同一行；
• 块内元素内部可以容纳其他行内元素，但不可以容纳块元素。

（5）空格的代码： 

7.不是”会动“的页面就叫动态页面，静态页面和动态页面的区别在于：是否与服务器进行数据交互

8. 列表：
（1）3种列表 ：

（2） 有序列表语法：

    <ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    </ol>
    
    
      
      
      
      
      
    
    AI写代码

type属性取值：1（默认）、a、A、i、I

（3）无序列表语法：

    <ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    </ul>
    
    
      
      
      
      
      
    
    AI写代码

type属性取值：disc（默认）、circle、square

（4）HTML语义化
学习HTML目的在于：在需要的地方，用正确的标签。（语义化）

9. 表格：
（1）表格的基本结构 ：
在HTML中，一个表格一般由三个部分组成，表格：table 标签、行：tr 标签、单元格：td 标签。

（2）表格语义化语法 ：

    <table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
            <td>表行单元格3</td>
            <td>表行单元格4</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>表行单元格5</td>
            <td>表行单元格6</td>
        </tr>
    </tfoot>
    </table>
    
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

（3）合并行(rowspan)与合并列(colspan)：

<td rowspan = "跨越的行数"></td>

<td colspan = "跨越的列数"></td>

10. 图片：
（1）图片语法 ：
<img src="图片路径" alt="图片描述(供搜索引擎看)" title="图片描述(供用户看)" />
说明 ：对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。

（2）绝对路径与相对路径 ：

• 绝对路径，指的是图片在你电脑中的完整路径。
• 相对路径，指的是图片相对当前页面的位置。 ”…/“表示上一级目录。
  说明 ：在实际开发中，站内文件不管是图片还是超链接等，我们都是使用相对路径 ，几乎不会用绝对路径。

（3）图片格式 ：

• 在网页中，图片格式有两种：一种是”位图 “，组成单位是”像素“；另外一种是”矢量图 “，组成单位是”数学向量“。
• 在实际开发中，最常见位图的图片格式有3种：.jpg 、.png 、.gif

（4）.jpg、.png、.gif的区别 ：

• .jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片 ，如照片、高清图片等。此外，jpg体积较大，并且不支持透明 。
• .png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明 ，不过不适合存储颜色丰富的图片。
• .gif图片效果最差，不过它适合制作动画 。实际上，小伙伴们经常在QQ发的动图都是gif格式的。

11. 超链接：
（1）语法 ：
<a href="链接地址" target="_blank">文字或图片</a>
说明 ：对于target属性，我们只需要掌握“_blank”这一个就可以了。

（2） 超链接类型 ：
分为 两种，一种是“外部链接”，另外一种是“内部链接”。

• 外部链接 指向的是”外部网站的页面“；
• 内部链接 指向的是”自身网站的页面“。

（3） 锚点链接 ：

• 在HTML中，锚点链接其实是一种特殊的内部链接，它链接地址（也就是href）指向的是当前页面的某个部分。
• 锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到“当前页面 ”的某一部分。
• 想要实现锚点链接，需要定义两个：
  i.目标元素的id
  ii.a标签的href属性指向该id

12.表单：
（1） 常见表单标签 有5种：form 、input 、textarea 、select 和option

（2） 我们常说的表单 ，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。
说明 ：在HTML中，所有表单标签（input、textarea、select、option）都必须放在form标签 内部。

13.input标签：
语法：<input type="表单类型" />
（1）单行文本框：<input type="text" />

（2）密码文本框：<input type="password />

单行文本框与密码文本框的常见属性 ：

说明 ：在单行文本框 中输入的字符可见 ，而在密码文本框 中输入的字符不可见 。

（3）单选框：
<input type="radio" name="组名" value="取值" checked />

（4）复选框：
<input type="checkbox" name="组名" value="取值" checked/>

单选框与复选框的常见属性 ：

• name属性表示单\复选框所在的组名 （忽略点）
• value属性表示单\复选框的取值
• checked属性表示选中某一个选项

（5）按钮：
在HTML中，常见的按钮有三种：普通按钮button ，提交按钮submit ，重置按钮reset 。

• 普通按钮 ：<input type="button" value="取值" />
• 提交按钮 ：<input type="submit" value="取值" />
• 重置按钮 ：<input type="reset" value="取值" />
  说明 ：value取值是按钮上的名字。

普通按钮、提交按钮、重置按钮的区别 ：

• 普通按钮 一般情况下都是配合JavaScript来进行各种操作的。
• 提交按钮 一般都是用来给服务器提交数据的。
• 重置按钮 一般用来清除用户在表单中输入的内容。

（6）文件上传：
<input type="file" />

14. textarea标签：
在HTML中，多行文本框 使用的是textarea标签，而不是input标签。
语法：
<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

文本框总结 ：

• HTML有三种文本框：单行文本框、多行文本框、多行文本框。
• 单行文本框和密码文本框使用的都是input标签 ，多行文本框使用的都是textarea标签 。

15.select标签与option标签：
在HTML中，下拉列表 由select和option这两个标签配合使用来表示的。
语法：

    <select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
    </select>
    
    
      
      
      
      
      
    
    AI写代码

16. 框架
在HTML中，我们可以使用iframe标签 来实现一个内嵌框架。
语法：

<iframe src="链接地址" width="数值" height="数值"></iframe>