HTML概述

创建test.html文件

  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  6. <meta charset="UTF-8"/>
  7. <title>test</title>
  8. </head>
  10. <body>html</body>
  12. </html>

注释方式括号内填写注释的内容

标签

1、常见的双标签

  1. <html></html>
  2. <head></head>
  3. <title></title>
  4. <body></body>
  5. <h1></h1>
  6. <p></p>
  7. <div></div>
  8. <span></span>
  9. <a></a>
  10. <ul></ul>
  12. 例子：<a href="https://www.lanqiao.cn">实验楼</a>

2、常见的单标签

  1. <br />
  2. <!--换行-->
  3. <hr />
  4. <!--水平分隔线-->
  5. <meta />
  6. <img />

3、标签的关系
嵌套关系：

  1. <head>
  2.   <title> </title>
  3. </head>

并列关系：

  1. <head></head>
  2. <body></body>

标题标签

h1~h6

  1.     <h1>我是一级标题</h1>
  2.     <h2>我是二级标题</h2>
  3.     <h3>我是三级标题</h3>
  4.     <h4>我是四级标题</h4>
  5.     <h5>我是五级标题</h5>
  6.     <h6>我是六级标题</h6>

p标签-文本标签

p 标签是我们的文本标签。

  1. <p>我是第一段文字，实验楼，做实验，学编程</p>
  2. <p>我是第二段文字，实验楼，做实验，学编程</p>

图片标签

HTML 的图像是通过标签 HTML-蓝桥 - 图1 来定义的。 语法: HTML-蓝桥 - 图2 。

  1. <p>实验楼图片：</p>
  2. <img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

a标签-超链接标签

标签是超链接标签，意思就是我们点击它可以跳转到一个网页

  1. <a href="https://www.lanqiao.cn/">实验楼</a>

div标签-块元素

标签是一个块级元素，块级元素占据其父元素（容器）的整个空间，你可以把它想成一个盒子。
能够设置其宽高.

  1. <!--长宽均为200像素的粉色一块区域-->
  2. <div style="width:200px;height:200px;background:pink">块级元素</div>

换行标签
空格标签 &nbsp

  1. <body>
  2.   <p>这是一段文字 前面有很多空格但是只显示一个</p>
  3.   <p>这是一段文字&nbsp;&nbsp;&nbsp;&nbsp;用了空格字符</p>
  4.   <br />
  5.   <p>上面是换行符</p>
  6. </body>

水平分割线标签-

  1. <body>
  2.   <hr />
  3.   <hr />
  4.   <hr />
  5. </body>

容器标签div与span

div标签
标签

可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在
和
所标记的区域前后自动放置一个换行符。

span标签
标签 通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，他与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <style>
  6.       #box {
  7.         width: 200px;
  8.         height: 200px;
  9.         background: red;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div id="box">这是div标签，自动换行</div>
  15.     <input type="text" /><span>这是span标签，不自动换行</span>
  16.   </body>
  17. </html>

HTML列表

列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。

无序列表与有序列表

无序列表是一个项目的列表，此列项目使用实心圆、空心圆、方块进行标记，无序列表使用

    标签。同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于
      标签。每个列表项始于
    1. 标签。

      1. <p>无序列表</p>
      2. <ul>
      3.   <li>列表项1</li>
      4.   <li>列表项2</li>
      5. </ul>
      7. <p>有序列表</p>
      8. <ol>
      9.   <li>列表项1</li>
      10.   <li>列表项2</li>
      11. </ol>

      HTML-蓝桥 - 图3

      无序列表和有序列表的 type 属性

        标签的 type 属性：
        image.png
          标签的 type 属性：
          image.png

          1. <p>无序列表</p>
          2. <ul type="circle">
          3.   <li>空心圆列表项1</li>
          4.   <li>空心圆列表项2</li>
          5. </ul>
          7. <p>有序列表</p>
          8. <ol type="A">
          9.   <li>列表项1</li>
          10.   <li>列表项2</li>
          11. </ol>

          HTML-蓝桥 - 图6

          自定义列表dl

          定义：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以

          标签开始。每个自定义列表项以
          开始。每个自定义列表项的定义以
          开始。自定义列表的列表项前没有任何项目符号。
          语法格式：

          1. <dl>
          2.   <dt>名词1</dt>
          3.   <dd>名词1解释1</dd>
          4.   ...
          5.   <dt>名词2</dt>
          6.   <dd>名词2解释1</dd>
          7.   ...
          8. </dl>

          例子

          1. <h2>一个自定义列表：</h2>
          2. <dl>
          3.   <dt>春天</dt>
          4.   <dd>是万物复苏，百花争艳的季节</dd>
          5.   <dt>夏天</dt>
          6.   <dd>是夏日绵绵，烈日炎炎的季节</dd>
          7. </dl>

          HTML-蓝桥 - 图7

          HTML样式

          背景颜色

          1. <html>
          2.   <body>
          3.     <p style="background-color:red">实验楼</p>
          4.   </body>
          5. </html>

          HTML-蓝桥 - 图8

          字体、颜色和尺寸

          通过对 font-family 属性值的设置来设置字体，通过对 color 属性值的设置来设置颜色，通过对 font-size 属性值的设计来设计字体大小。

          1. <html>
          2.   <body>
          3.     <p style="font-family:arial;color:green;font-size:50px;">实验楼</p>
          4.   </body>
          5. </html>

          HTML-蓝桥 - 图9

          文本对齐

          文本相对于页面居中对齐

          1. <html>
          2.   <body>
          3.     <h1 style="text-align:center">实验楼</h1>
          4.   </body>
          5. </html>

          HTML-蓝桥 - 图10

          综合练习-绘制网页

          HTML-蓝桥 - 图11
          源码：

          1. <!DOCTYPE html>
          2. <html>
          3.   <head>
          4.     <meta charset="UTF-8" />
          5.     <title></title>
          6.   </head>
          7.   <body>
          8.     <div style="width:500px;height:300px;background-color:pink">
          9.       <h1 style="text-align:center">实验楼学习教程</h1>
          10.       <p style="text-align:center">
          11.         学习就上<a href="https://www.lanqiao.cn/">实验楼</a>
          12.       </p>
          13.       <hr />
          14.       <p>在实验楼你可以学习的课程有：</p>
          15.       <ul>
          16.         <li>HTML5 基础课程</li>
          17.         <li>CSS基础课程</li>
          18.         <li>Linux基础课程</li>
          19.         <li>...</li>
          20.       </ul>
          21.     </div>
          22.   </body>
          23. </html>

          表格

          在网页中插入表格可以使网页上的内容排列整齐，让浏览者对表格中表达的数据及其含义一目了然。div 是网页制作中用于定位元素或者布局的一种重要技术。本节将重点讲解 HTML 表格的相关内容，并比较 div 和表格哪一个更加灵活。

          表格由

          标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由
          标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

          创建表格

          1. <table>
          2.   <tr>
          3.     <td>第一行第一列</td>
          4.     <td>第一行第二列</td>
          5.   </tr>
          6.   <tr>
          7.     <td>第二行第一列</td>
          8.     <td>第二行第二列</td>
          9.   </tr>
          10. </table>

          HTML-蓝桥 - 图12
          添加边框border 属性

          1. <table border="1">
          2.   <tr>
          3.     <td>第一行第一列</td>
          4.     <td>第一行第二列</td>
          5.   </tr>
          6.   <tr>
          7.     <td>第二行第一列</td>
          8.     <td>第二行第二列</td>
          9.   </tr>
          10. </table>

          HTML-蓝桥 - 图13

          caption 元素定义表格标题

          1. <table border="1" width="300px" height="150px">
          2.   <caption>
          3.     表格标题
          4.   </caption>
          5.   <tr>
          6.     <td>第一行第一列</td>
          7.     <td>第一行第二列</td>
          8.   </tr>
          9.   <tr>
          10.     <td>第二行第一列</td>
          11.     <td>第二行第二列</td>
          12.   </tr>
          13. </table>

          HTML-蓝桥 - 图14

          给表格添加表头

          1. <table border="1" width="300px" height="150px">
          2.   <caption>
          3.     支出表
          4.   </caption>
          5.   <tr>
          6.     <th>支出</th>
          7.     <th>备注</th>
          8.   </tr>
          9.   <tr>
          10.     <td>32</td>
          11.     <td>买苹果</td>
          12.   </tr>
          13.   <tr>
          14.     <td>24</td>
          15.     <td>买饮料</td>
          16.   </tr>
          17. </table>

          HTML-蓝桥 - 图15

          表格与单元格的属性

          表格的其他属性：注意：其余属性的使用和 border 类似，只需要在 table 标签中添加属性即可
          image.png

          单元格跨行和跨列

          绘制表格的时候，我们常常需要合并单元格，而在 HTML 中提供了 colspan（合并列）和 rowspan（合并行）属性来帮助我们实现这一效果。
          colspan 又称跨列，rowspan 又称跨行

          1. <table border="1" width="300px" height="150px">
          2.   <h3>单元跨两列</h3>
          3.   <tr>
          4.     <th>姓名</th>
          5.     <th colspan="2">电话</th>
          6.   </tr>
          7.   <tr>
          8.     <td>张三</td>
          9.     <td>344 22 112</td>
          10.     <td>211 32 123</td>
          11.   </tr>
          12.   <tr>
          13.     <td>李四</td>
          14.     <td>433 31 212</td>
          15.     <td>234 21 654</td>
          16.   </tr>
          17. </table>
          19. <table border="1" cellspacing="0">
          20.   <h3>单元跨两行</h3>
          21.   <tr>
          22.     <th>姓名</th>
          23.     <td>张三</td>
          24.   </tr>
          25.   <tr>
          26.     <th rowspan="2">电话</th>
          27.     <td>344 22 112</td>
          28.   </tr>
          29.   <tr>
          30.     <td>234 21 654</td>
          31.   </tr>
          32. </table>

          HTML-蓝桥 - 图17
          注：设置 rowspan=”2” 表示合并该列上的两个单元格，同样的我们可以通过设置 colspan 来合并行。合并之前，我们可以如例子般，先把所有的单元格都写出来，然后找出哪些单元格需要合并的，在第一个单元格内设置 rowspan 或者 colspan，并将其他多余的单元格代码删除。

          div设置

          在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。
          语法：

          1. <div style="样式设置"><div></div></div>

          div 和 table 的区别

          div布局：

          1. <div style="width:100%;border:1px solid #d4d4d4">
          2.   <div style="background-color:pink">实验楼</div>
          3.   <div style="background-color:skyblue">实验楼</div>
          4. </div>

          table布局：

          1. <table style="width:100%;border:1px solid #d4d4d4">
          2.   <tr>
          3.     <td style="background-color:pink">实验楼</td>
          4.   </tr>
          5.   <tr>
          6.     <td style="background-color:skyblue">实验楼</td>
          7.   </tr>
          8. </table>

          两个布局的效果图：
          HTML-蓝桥 - 图18
          同样的效果，使用 div 布局能比表格更加灵活，需要根据不同的场景使用不同的布局方式。

          table 元素布局：

          • 优点：
          1. 理解比较简单。
          2. 不同的浏览器看到的效果一般相同。
          • 缺点：
          1. 显示样式和数据绑定在一起。
          2. 布局的时候灵活度不高。
          3. 一个页面可能会有大量的 table 元素，代码冗余度高。
          4. 增加带宽。
          5. 搜索引擎不喜欢这样的布局。

          div 元素布局：

          • 优点：
          1. 符合 W3C 标准。
          2. 搜索引擎更加友好。
          3. 样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
          4. 节省代宽，代码冗余度低。

          5. 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

            综合练习-课程表绘制

            HTML-蓝桥 - 图19
            源码：

            1. <!DOCTYPE html>
            2. <html lang="en">
            3. <head>
            4.  <meta charset="UTF-8" />
            5.  <title>课程表</title>
            6. </head>
            7. <body>
            8.  <table border="1" width="60%" bgcolor="pink" cellpadding="2">
            9.    <caption>
            10.      课程表
            11.    </caption>
            12.    <tr align="center">
            13.      <td colspan="2">时间\日期</td>
            14.      <td>一</td>
            15.      <td>二</td>
            16.      <td>三</td>
            17.      <td>四</td>
            18.      <td>五</td>
            19.    </tr>
            21.    <tr align="center">
            22.      <td rowspan="2">上午</td>
            23.      <td>9:30-10:15</td>
            24.      <td>语文</td>
            25.      <td>数学</td>
            26.      <td>外语</td>
            27.      <td>音乐</td>
            28.      <td>体育</td>
            29.    </tr>
            31.    <tr align="center">
            32.      <td>10:25-11:10</td>
            33.      <td>数学</td>
            34.      <td>数学</td>
            35.      <td>物理</td>
            36.      <td>化学</td>
            37.      <td>生物</td>
            38.    </tr>
            40.    <tr>
            41.      <td colspan="7">&nbsp;</td>
            42.    </tr>
            44.    <tr align="center">
            45.      <td rowspan="2">下午</td>
            46.      <td>14:30-15:15</td>
            47.      <td>体育</td>
            48.      <td>语文</td>
            49.      <td>历史</td>
            50.      <td>政治</td>
            51.      <td>化学</td>
            52.    </tr>
            54.    <tr align="center">
            55.      <td>15:25-16:10</td>
            56.      <td>音乐</td>
            57.      <td>语文</td>
            58.      <td>数学</td>
            59.      <td>美术</td>
            60.      <td>语文</td>
            61.    </tr>
            62.  </table>
            63. </body>
            64. </html>

            HTML表单

            HTML 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。表单是网页中提供的一种交互式手段操作，生活中我们很容易接触到表单，比如网上注册一个账号（实验楼账号，qq 账号等）或者银行开户让我们填的表。

          标签用于创建 HTML 表单，常见的表单格式为： html <form name="" method="" action=""></form> - name：定义表单的名字。 - method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get 。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。 - action：发送数据要去的地址。它的值必须是一个有效的 URL，可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者 action=”#”，则数据将被发送到包含表单的页面的 URL。 网页中的表单由许多不同的表单元素组成，这些表单元素包括文字字段、单选按钮、复选框、按钮等。 #### 文字字段 在网页中最常见的表单元素就是文字字段，用户可以在文字字段内输入字符或者单行文本。 语法： html <input type="text" name="控件名称" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数" /> 该语法包含了许多参数，除了 type 参数以外，其他的参数都是可选的，大家可以自行选择。举个例子： html <form name="formBox" method="post" action=""> 姓名：<input type="text" name="name" size="20" /><br /> 年龄:<input type="text" name="age" size="40" value="10" maxlength="3" /> </form> HTML-蓝桥 - 图20
          可以尝试给年龄输入值，如果文本字段长度超过了 3，就不能再输入了。 #### 密码输入框 密码输入框是一种特殊的文字字段，他的各个属性和文字字段是相同的，但是输入进密码输入框的字符全部是“”表示，保证周围人看不见输入的文本。 html <input type="password" name="pwd" /> #### 单选按钮 单选按钮可以使用户从选择列表中选择一个选项。 html <form name="formBox" method="post" action=""> <input type="radio" name="sex" value="male" checked />男<br /> <input type="radio" name="sex" value="female" />女 </form> 几个单选按钮可以连接在一起，只需要把它们的 name 值设置为相同的。同一组中只有一个按钮可以同时被选。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，且不会随表单提交。 可以尝试如果 name 不相同或者没有 name 会是什么情况。 #### 复选框 复选框可以让用户从一个选项列表中选择超出一个的选项。 html <form name="formBox" method="post" action=""> <input type="checkbox" name="music" checked />音乐<br /> <input type="checkbox" name="art" />美术<br /> <input type="checkbox" name="math" />数学<br /> </form> 复选框可以拥有自己的名字，并不需要属于一个组。 #### 按钮 HTML 表单中，有三种按钮：提交按钮，重置按钮，匿名按钮。我们可以使用