4.2 HTML标签

  • 概念：是最基础的网页开发语言
  • Hyper Text Markup Language：超文本标记语言
    • 超文本：
      • 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
    • 标记语言：
      • 由标签构成的语言。<标签名称> 如 html，xml
      • 标记语言不是编程语言

4.2.1 快速入门

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

  • 代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
        <head>
            <title>title</title>
        </head>
        <body>
            <FONT color='red'>Hello World</font><br/>
            <font color='green'>Hello World</font>
        </body>
    </html>

4.2.2 标签学习

  1. 文件标签：构成html最基本的标签
    • html：html文档的根标签
    • head：头标签。用于指定html文档的一些属性。引入外部的资源
    • title：标题标签。
    • body：体标签
    • <!DOCTYPE html>：html5中定义该文档是html文档
  2. 文本标签：和文本有关的标签
    • 注释：```
    • <h1> to <h1>：标题标签
      • h1~h6：字体大小逐渐递减
    • <p>：段落标签
    • <br>：换行标签
    • <hr>：展示一条水平线
      • 属性：
        • color：颜色
        • width：宽度
        • size：高度
          • align：对其方式
          • center：居中
          • left：左对齐
          • right：右对齐
    • <b>：字体加粗
    • <i>：字体斜体
    • <font>：字体标签
    • <center>：文本居中
      • 属性：
        • color：颜色
        • size：大小
        • face：字体
    • 属性定义：
      • color：
        • 英文单词：red，green，blue
        • rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
        • #值1值2值3：值的范围：00~FF之间。如： #FF00FF
      • width：
        • 数值：width=’20’ ,数值的单位，默认是 px(像素)
        • 数值%：占比相对于父元素的比例
  3. 图片标签：
    • img：展示图片
      • 属性：
        • src：指定图片的位置
  4. 列表标签：
    • 有序列表：
      • ol：
      • li：
    • 无序列表：
      • ul：
      • li：
  5. 链接标签：
    • a：定义一个超链接
      • 属性：
        • href：指定访问资源的URL(统一资源定位符)
        • target：指定打开资源的方式
          • _self：默认值，在当前页面打开
          • _blank：在空白页面打开
  6. div和span：
    • div：每一个div占满一整行。块级标签
    • span：文本信息在一行展示，行内标签 内联标签
  7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
    • <header>：页眉
    • <footer>：页脚
  8. 表格标签：
    • table：定义表格
      • width：宽度
      • border：边框
      • cellpadding：定义内容和单元格的距离
      • cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
      • bgcolor：背景色
      • align：对齐方式
    • tr：定义行
      • bgcolor：背景色
      • align：对齐方式
    • td：定义单元格
      • colspan：合并列
      • rowspan：合并行
    • th：定义表头单元格
      • <caption>：表格标题
      • <thead>：表示表格的头部分
      • <tbody>：表示表格的体部分
      • <tfoot>：表示表格的脚部分