1. 概念： 最基础的网页开发语言 Hyper Text Markup Language 超文本标记语言 超文本:

    • 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.

    标记语言:

    • 由标签构成的语言。 <标签名称>
    • 标记语言不是编程语言

  2. 快速入门： 语法：

    1.   1. html文档后缀名** ****.html **或者** .htm**
    2.   1. 标签分为
    3.      -  **围堵标签**
    4.         - 有开始标签和结束标签。
    5.            - 如<html> </html>
    6.      - **自闭和标签**
    7.         - 开始标签和结束标签在一起。
    8.            - 如 <br/>
    9.   3. 标签可以嵌套：
    10.      - 需要正确嵌套，不能你中有我，我中有你
    11.         - 错误：<a><b></a></b>
    12.         - 正确：<a><b></b></a>
    13.   4. 在开始标签中可以定义属性。
    14.      - 属性是由键值对构成，值需要用引号 ( **单双都可 **) 引起来
    15.   5. html的标签不区分大小写，但是**建议使用小写**。

HTML的代码结构

  1. <!DOCTYPE html>
  2. <html lang="ch">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>title</title>
  6. </head>
  7. <body>
  8.                 Hello World!
  9. </body>
  10. </html>

HTML的标签

标签学习

  1. 文件标签：构成html最基本的标签
    • html:html
      • 文档的根标签
    • head：
      • 头标签。
        • 作用：指定html文档的一些属性。引入外部的资源
    • title：
      • 标题标签。
    • body：
      • 体标签
    • <!DOCTYPE html>
      • html5中定义该文档是html文档
  2. 文本标签：和文本有关的标签
    • 注释
      • <!— 注释内容 —>

    • to

      • 标题标签
        • h1~h6：字体大小逐渐递减

      • 段落标签

      • 换行标签
      • 展示一条水平线
      • 属性：
        • color：颜色
        • width：宽度
        • size：高度
        • align：对其方式
        • center：居中
        • left：左对齐
        • right：右对齐
      • 字体加粗
      • 字体斜体
      • 字体标签
      • 文本居中
      • 属性
        • color：颜色
        • size：大小
        • face：字体
    • 属性定义：
      • color：
        1. 英文单词：red,green,blue
        2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)

        3. 值1值2值3：值的范围：00~FF之间。如： #FF00FF

      • width：
        1. 数值：width=’20’ ,数值的单位，默认是 px ( 像素 )
        2. 数值%：占比相对于父元素的比例
  3. 图片标签：
    • img：展示图片
      • 属性：
        • src：指定图片的位置
      • 相对路径 [ 以 . 开头的路径 ]
        • ./ **：**代表当前目录
        • ../ ** ：**代表上一级目录
          1. <img src="./image/image_1.jpg">        <!--当前目录下的image文件中的image_1-->
          2. <img src="../image/image_2.jpg">    <!--上级目录下的image文件中的image_2-->
  4. 列表标签：
    • 有序列表：
      • ol
      • li
    • 无序列表：
      • ul
      • li
  5. 链接标签：
    • a：超链接
      • 属性：
        • href：指定访问资源的URL (统一资源定位符)
        • target：指定打开资源的方式
        • _self：默认值，在当前页面打开
        • _blank：在空白页面打开
          1. <a href="http://www.baidu.com">链接</a>                                                                                 <!--普通的超链接-->
          2. <a href="http://www.baidu.com" target="_self">链接</a>                                             <!--当前页面打开-->
          3. <a href="http://www.baidu.com" target="_blank">链接</a>                                            <!--空白页面打开-->
          4. <a href="http://www.baidu.com"> <img src="./image/image_1.jpg"> </a>                  <!--图片接超链接-->
  6. div和span：
    • div：每一个div占满一整行。块级标签
    • span：文本信息在一行展示，行内标签 内联标签 ```html //HTML文件中

      提示：

//CSS文件中 p.tip span {color:#ff9955;}

  1. > 
  2. > 7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
  3. >    - <header>：页眉
  4. >    - <footer>：页脚
  5. > 8. 表格标签：
  6. >    - table：定义表格
  7. >       - width：宽度
  8. >       - border：边框
  9. >       - cellpadding：定义内容和单元格的距离
  10. >       - cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
  11. >       - bgcolor：背景色
  12. >       - align：对齐方式
  13. >    - tr：定义行
  14. >       - bgcolor：背景色
  15. >       - align：对齐方式
  16. >    - td：定义单元格
  17. >       - colspan：合并列
  18. >       - rowspan：合并行
  19. >    - th：定义表头单元格
  20. >    - <caption>：表格标题
  21. >    - <thead>：表示表格的头部分
  22. >    - <tbody>：表示表格的体部分
  23. >    - <tfoot>：表示表格的脚部分
  24. > ```html
  25.  <!--确定使用table来完成布局-->
  26.  <!--一行只有一个单元格-->
  27. <tr><td></td></tr>
  28.  <!--一行有多个单元格-->
  29.     <tr>
  30.         <td>
  31.             <table></table>
  32.         </td>
  33.     </tr>