文章目录

• HTML
• • 第1章 页的构成
  • • 1.1 概念：B/S 与 C/S
    • • 1.1.1 现在的软件开发的整体架构主要分为B/S架构与C/S架构：
      • 1.1.2 B/S 与 C/S优劣
      • 1.1.3 页
    • 1.2 页的构成
  • 第2章 HTML简介
  • 第3章 HTML语法
  • 第4章 HTML的常用标签
  • • 4.1 标题标签
    • 4.2 段落标签
    • 4.3 换行标签
    • 4.4 加粗标签
    • 4.5 无序列表
    • 4.6 有序列表
    • 4.7 图片标签
    • 4.8 超链接
    • 4.9 转义字符
    • 4.10 div标签
    • 4.11 内联框架(了解)
    • 4.12 其它标签
    • • 4.12.1 和标签 (了解)
      • 4.12.2 标签
      • 4.12.3 标签
      • 4.12.4 分割线标签
  • 第5章 HTML中的表格
  • • 5.1 HTML中的表格
  • 第6章 HTML中的表单
  • • 6.1 生活中的表单
    • 6.2 表单中的常用标签
    • • 1. 表单标签
      • 2. 文本输入框
      • 3. 密码输入框
      • 4. 单选框
      • 5. 复选框
      • 6. 下拉列表
      • 7. 重置按钮
      • 8. 提交按钮
  • 第7章 补充：标签的常用属性
  • • 7.1 常规属性
    • 7.2 事件属性

HTML

第1章 页的构成

1.1 概念：B/S 与 C/S

1.1.1 现在的软件开发的整体架构主要分为B/S架构与C/S架构：

• b/s：浏览器/服务器

• c/s：客户端/服务器

客户端：需要安装在系统里，才可使用

浏览器：浏览 页，读取HTML并显示

服务器：处理浏览器的请求

1.1.2 B/S 与 C/S优劣

• b/s只要能上 就能使用，因为基本每台电脑都会有浏览器，维护方便。

• c/s必须安装在系统中，安装成功才可使用。在新的系统中没有安装不能使用，便携性差，维护成本高。

1.1.3 页

浏览器中显示的内容，浏览器是 页的展示器。编写好的 页，放在浏览器中即可运行。编写 页我们使用的就是HTML语言。

1.2 页的构成

第2章 HTML简介

• HTML 是用来描述 页的一种语言。
• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• 超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)，由一组<>包围的关键字
• HTML 页的后缀名一般为.html
• HTML 使用标记标签来描述 页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-auqIiSTh-1637406366740)(尚硅谷_张春胜_HTML.assets/1556376652352.png)]

• HTML文件的结构
  • 为HTML页面中的根标签，所有的HTML 页中的标签都在中。

  • 这里标签用于定义文档的头部，它是所有头部元素的容器。头部元素有

第3章 HTML语法

• 标签的语法

  • 标签由英文尖括 < 和 > 括起来,如：
  • html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多一个 / ,;还有一些是自结束标签，如：
  • 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如： 里嵌套

    ，那么

    必须放在 的前面。如：

    …

  • 注释是不可以嵌套的,如：<!– –>
  • HTML标签不区分大小写,
    

    和

    是一样的,但万维 联盟（W3C）建议小写。

• 元素模型

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FbW1HQNN-1637406366747)(尚硅谷_张春胜_HTML.assets/1561373386238.png)]

第4章 HTML的常用标签

4.1 标题标签

• 默认占用浏览器的一整行，并且前后要空一行

4.2 段落标签

• 段落标签也会独占浏览器的一行，而且前后还会空出一行。
• 使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br />标签代替它！

4.3 换行标签

<br />：是个自结束标签

4.4 加粗标签

4.5 无序列表

4.6 有序列表

4.7 图片标签

• alt:图片无法显示时显示的描述性文字
• src:图片的地址（或路径）。这里分为相对路径和绝对路径。
• width和height:设置图片的宽度和高度
• (了解) title:鼠标放在图片上时显示的描述性文字

使用相对路径查找目标资源心得

• 目标文件与当前文件在同一目录下，直接查找使用。
• 目标文件与当前文件不在同一目录下，先找目标文件父包，再找目标文件
  • 如：父包也不与当前文件在同包下，将父包当成目标文件，继续找父包的父包。以此类推，找到WebContent根目录为止。

补充内容：html中的相对路径与绝对路径

4.8 超链接

• href:指向一个链接地址

• target:定义被链接的文档在何处显示。

  • 值为”_self”时在向当前窗口打开新的 页（默认）
  • 值为”_blank”时在新的窗口打开

4.9 转义字符

• 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。即，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
• 在 HTML 中不能使用小于 （<）和大于 （>），这是因为浏览器会误认为它们是标签。
• 如果想表示多个空格，需要使用如下的转义字符。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yJRr4SxT-1637406366749)(尚硅谷_张春胜_HTML.assets/1561359946737.png)]

说明1：如需显示小于 ，我们必须这样写：< 或 <

说明2：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

4.10 div标签

• div是html中最灵活最重要的元素，div就像一个容器，里面可以装很多内容。本身没有特殊的语义。

• 它是块级元素，会占用 页的一行。

• Div的主要作用：可以通过调整自己的样式来完成 页的复杂布局

• 它可以把一些独立的逻辑部分(如 页中独立的栏目版块)划分出来，如下图：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ps6obF0d-1637406366752)(./尚硅谷_张春胜_HTML.assets/1556376970318.png)]

4.11 内联框架(了解)

• src:一个 页的地址
• name: iframe的名字，当标签的target属性值为iframe的name时，超链接的目标页面会在iframe中打开

4.12 其它标签

4.12.1 <strong>和<em>标签 (了解)

• 两者在强调的语气上有区别: 表示强调， 表示更强烈的强调。并且在浏览器中 默认用 斜体 表示， 用 粗体 表示。

4.12.2 <span>标签

• 标签是是内联元素，没有语义的，它的作用就是为了设置单独的样式用的。有了它就可以对某段文字里的几个字单独设置样式了。

4.12.3 <font>标签

font 标签是字体标签，它可以简单的修改文本样式效果。但现在已经不建议使用了。

4.12.4 分割线标签

<hr /> 标签在 HTML 页面中创建水平分割线。用于分割内容、文章的小节。

补充说明：

**块级元素：**各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。width、height、padding、margin有效。

**内联元素：**在一条直线上排列，都是同一行的，水平方向排列。设置width、height、padding、margin无效。

第5章 HTML中的表格

5.1 HTML中的表格