前端程序员《HTML》学习笔记（3）之标签学习

每天浪漫主义

提示：来自哔哩哔哩博主在想月儿

“莎士比亚的花园，盛放着浪漫主义的玫瑰”

计划：

一周把HTML复习一遍，并明确其含义并能够解释

学习笔记3

列表标签
- - 有序列表
  - 无序列表
  - 定义列表
表格标签
- - 表格的标题
  - 表格的结构标题（不怎么用）
  - 表格的边框
  - 单元格的合并
HTML表单：
标签
- - 表单控件

列表标签

HTML 列表（List）可以将若干条相关的内容整理起来，让内容看起来更加有条理。在列表内您可以放置文本、图像、链接等，也可以在一个列表中定义另一个列表（列表嵌套）。

HTML 为我们提供了三种不同形式的列表：

有序列表，使用

标签

无序列表，使用

标签
定义列表，使用
+
+
标签

有序列表

提示：在 HTML 中，

 标签用来表示有序列表。有序列表之间的内容有先后顺序之分，例如菜谱中的一系列步骤，这些步骤需要按顺序完成，这时就可以使用有序列表

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML有序列表title>
head>
<body>
    <p>关注张子枫微博的步骤：p>
    <ol>
        <li>拿起手机li>
        <li>打开微博li>
        <li>搜索张子枫li>
        <li>点击关注li>
    ol>
body>
html>

有序列表需要使用

标签：

2. 是 list item 的简称，表示列表的每一项，
  1. 就表示有多少条内容。列表项中可以包含文本、图片、链接等，甚至还可以是另外一个列表。

注意，
一般和
配合使用，不会单独出现，而且不建议在
中直接使用除
之外的其他标签。

无序列表

提示： HTML 使用

标签来表示无序列表。无序列表和有序列表类似，都是使用

 标签来表示列表的每一项，但是无序列表之间的内容没有顺序。例如，早饭的种类不需要表明顺序，这时就可以使用无序列表。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表title>
head>
<body>
    <p>今天早餐吃什么：p>
    <ul>
        <li>营养快线li>
        <li>伊利li>
        <li>安慕希li>
        <li>纯甄li>
    ul>
body>
html>

无序列表需要使用

标签：

一样，都表示列表中的每一项。默认情况下，无序列表的每一项都使用●符号表示。

注意，
一般和
配合使用，不会单独出现，而且不建议在
中直接使用除
之外的其他标签。

定义列表

提示：在 HTML 中，

 标签用于创建定义列表。定义列表由标题（术语）和描述两部分组成，描述是对标题的解释和说明，标题是对描述的总结和提炼。

<dl>
    <dt><dt>
    <dd><dd>
    <dt><dt>
    <dd><dd>
    <dt><dt>
    <dd><dd>
dl>

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML定义列表title>
head>
<body>
    <dl>
        <dt>HTMLdt>
        <dd>HTML 是一种专门用来开发网页的标记语言（结构）dd>
        <dt>CSSdt>
        <dd>CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页（表现）dd>
        <dt>JavaScriptdt>
        <dd>JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言（行为）dd>
    dl>
body>
html>

定义列表需要使用

和

标签：

是 definition list 的简称，表示定义列表。
是 definition term 的简称，表示定义术语，也就是我们说的标题。
是 definition description 的简称，表示定义描述。

可以认为

定义了一个概念，

用来对概念进行解释。从概念到解释。

表格标签

提示：在 HTML 中，我们使用

 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML定义列表title>
head>
<body>
    <table border="1">
        <tr>
          <th>名字th>
          <th>图片th>
          <th>图片th>
        tr>
        <tr>
          <td>张子枫微博入口td>
          <td><img src="https://wx4.sinaimg.cn/orj360/001tzwrBly1gxvoq3huahj62s0468kjp02.jpg" alt="">td>
          <td>链接td>
        tr>
         <tr>
          <td>谭松韵微博入口td>
          <td><img src="https://wx3.sinaimg.cn/orj360/001qtNoPly1gzpko8wc2jj636u4s91l502.jpg" alt="">td>
          <td>链接td>
          tr>
        <tr>
           <td>成果微博入口td>
          <td><img src="https://wx1.sinaimg.cn/orj360/72e05ae2ly1gztg8h085qj21vl2t14qr.jpg" alt="">td>
           <td>链接td>
         tr>
     table>
body>
html>