HTML

前言-基础班学习路线

基础班目标

  • 目标：基础班主要学习 PC 端网站布局。

  • 最终网站：品优购静态网站。

  • 目的： 精通网页布局，也是我们前端人员的必备技能。为后面学习 JavaScript 打下坚实基础。

基础班学习路线

image-20220125131616374

Web 标准与 W3C

为什么需要 Web 标准

  • Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

  • 因为浏览器不同，如果不遵循 Web 标准,浏览器显示页面或者排版就有差异。

  • 遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

    • 1) 让 Web 的发展前景更广阔。
    • 2) 内容能被更广泛的设备访问。
    • 3) 更容易被搜寻引擎搜索。
    • 4) 降低网站流量费用。
    • 5) 使网站更易于维护。
    • 6) 提高页面浏览速度。

Web 标准的构成

  • 主要包括结构（Structure） 、表现（Presentation）和行为（Behavior）三个方面。

  • Web 标准提出的最佳体验方案：结构、样式、行为相分离。

  • 简单理解： 结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript 文件中。

image-20220125133257922

W3C 简介

  • W3C 是英文 World Wide Web Consortium 的缩写， 翻译过来就是 W3C 理事会或万维网联盟, W3C 是全球互联网最具权威的技术标准化组织.
  • W3C 于 1994 年 10 月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者 Tim Berners-Lee
  • W3C 负责 web 方面标准的制定，像 HTML、XHTML、CSS、XML 的标准就是由 W3C 来定制的。

HTML 简介

HTML 简介

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)。
  • 标记语言是一套标记标签 (markup tag)
    • 由无数个标记（标签、tag)组成；
    • 是对某些内容进行特殊的标记，以供其他解释器识别处理；
    • 比如使用<h2></h2>标记的文本会被识别为“标题”进行加粗、文字放大显示；
    • 由标签和内容组成的称为元素（element）
  • 所谓超文本，有 2 层含义：
    • 表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
    • 还可以表示超链接（HyperLink），从一个网页跳转到另一个网页；与世界各地主机的文件连接（超级链接文本 ）。

HTML 语法规范

    1. HTML 标签是由尖括号包围的关键词。
    1. HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
    1. 有些特殊的标签必须是单个标签（极少情况），例如单标签: <br />
    1. 标签的作用: 是用来告诉浏览器, 给指定的内容添加语义的

网页基本机构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--文档类型声明-->
<!DOCTYPE html>
<!--定义当前文档显示的语言-->
<html lang="en">
  <head>
    <!--字符集:规定 HTML 文档应该使用哪种字符编码。-->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--网页标题-->
    <title>Document</title>
  </head>
  <body></body>
</html>

文档类型声明

1
2
<!DOCTYPE html>
<!--文档类型声明-->

  • 由于 HTML 有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的 编译/解析/渲染 我们的网页, 我们需要在 HTML 文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的 HTML 规范来编写的,让浏览器用 HTML5 的标准去解析识别内容；浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够正确的 编译/解析/渲染我们的网页

  • 不是一个 HTML 标签，它就是 文档类型声明

  • 必须放在 HTML 文档的最前面，不能省略，省略了会出现兼容性问题；

  • HTML 的 DTD 文档声明和 XHTML 的 DTD 文档声明有何区别?

  • XHTML 本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等, 而 HTML 会更加松散,没有这么严格

  • HTML 4.01 中的严格模式 :

  • Strict 表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些标签不能使用

  • 例如 font 标签 / u 标签等

    • font 标签可以修改一个文本的字号、颜色、字体,但这和 HTML 的本质有冲突,因为 HTML 只能负责语义,不能负责样式,而 font 标签是用于修改样式的,所以在 Strict 中是不能使用 font 标签
    • u 标签可以给一个文本添加 下划线,但这和 HTML 的本质有冲突,因为 HTML 只能负责语义,不能负责样式,而 u 标签添加的下划线是样式.所以在 Strict 中是不能使用 u 标签

lang 语言种类

  • W3C 标准建议为 html 元素增加一个 lang 属性 ：

    • lang=“en” 表示这个 HTML 文档的语言是英文；
    • lang=“zh-CN” 表示这个 HTML 文档的语言是中文；

  • 作用 ：

    • 用来定义当前文档显示的语言。
    • 帮助语音合成工具确定要使用的发音;
    • 帮助翻译工具确定要使用的翻译规则;

  • 简单来说,定义为 en 就是英文网页, 定义为 zh-CN 就是中文网页

  • 其实对于文档显示来说，定义成 en 的文档也可以显示中文，定义成 zh-CN 的文档也可以显示英文

    • 这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的

字符集

    1. 字符集 (Character set) 就是字符的集合。以便计算机能够识别和存储各种文字。
    • 在 HTML 文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
    • 所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题
    1. 在 head 标签内，可以通过 meta 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
1
<meta charset=" UTF-8" />
    1. charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.
    1. 注意：上面语法是必须要写的代码，否则可能引起乱码的情况。
    • 一般情况下，尽量统一写成标准的 **”UTF-8”**，不要写成 “utf8” 或 “UTF8”。
    1. GBK(GB2312) 和 UTF-8 区别:
    • GBK(GB2312) 里面存储的字符比较少, 仅仅存储了汉字和一些常用外文
      • 体积比较小
    • UTF-8 里面存储的世界上所有的文字
      • 体积比较大
    1. 那么在企业开发中我们应该使用 GBK(GB2312) 还是 UTF-8 呢?
    • 如果你的网站仅仅包含中文, 那么推荐使用 GB2312, 因为它的体积更小, 访问速度更快
    • 如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用 UTF-8
    • 懒人推荐: 不管三七二十一, 一律写 UTF-8 即可

总结

  • 以上三个代码 vscode 自动生成,基本不需要我们重写.
  • <!DOCTYPE html> 文档类型声明,告诉浏览器这个页面采取 html5 版本来显示页面.
  • <html lang="en"> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
  • <meta charset="UTF-8"> 必须写. 采取 UTF-8 来保存文字. 如果不写就会乱码.具体原理后面分析.

keywords 关键字

  • 作用: 告诉搜索引擎当前网页的关键词, 在 SEO 中非常重要, 能够提高搜索命中率, 让别人更容易找到你
  • 格式:
1
<meta name="keywords" content="IT前言技术、iOS技术、HTML5技术、Android技术" />

Description 描述

  • 作用: 告诉搜索引擎当前网页的主要内容, 在 SEO 中非常重要, 当别人在搜索引擎中搜索到你的网站时,会自动将你网站的描述信息展示给用户, 能够提高搜索命中率, 让别人更容易找到你
  • 格式:
1
<meta name="description" content="江哥热爱于IT技术、iOS技术、HTML5技术、Android技术研究" />

Refresh

  • 作用: 告诉浏览器多久自动刷新一次页面并指向新页面, 常用于新老域名交替时, 访问老域名自动跳转到新域名, 或用于一些需要定时刷新的聊天室等.
  • 格式:
1
<meta http-equiv="Refresh" content="2；URL=http://www.baidu.com/" />

HTML 标签结构

单/双标签元素

  • 双标签元素：我们会发现前面大部分看到的元素都是双标签的；
    • html、body、head、h2、p、a 元素；
  • 单标签元素：也有一些元素是只有一个标签；
    • br、img、hr、meta、input；
  • HTML 元素不区分大小写，但是推荐使用小写

标签关系

  • 双标签关系可以分为两类：包含关系和并列关系。
  • 包含关系:
1
2
3
<head>
  <title> </title>
</head>
  • 并列关系:
1
2
<head> </head>
<body></body>

HTML 基本结构

  • 每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

  • HTML 页面也称为 HTML 文档.

  • HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

  • 此时，用浏览器打开这个网页，我们就可以预览我们写的第一个 HTML 文件了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--文档类型声明-->
<!DOCTYPE html>
<!--定义当前文档显示的语言-->
<html lang="en">
  <head>
    <!--字符集:规定 HTML 文档应该使用哪种字符编码。-->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--网页标题-->
    <title>Document</title>
  </head>
  <body></body>
</html>

常用的结构标签

html 标签

  • 作用:
    • 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。
    • 用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个 HTML 文档
  • 注意点:
    • 其它所有的标签都必须写在 html 标签里面, 所有其他元素必须是此元素的后代 ，也就是写在 html 开始标签和结束标签中间 (文档类型声明除外)

head 标签

作用:

  • 规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。
    • 什么是元数据（meta data），是描述数据的数据；
    • 这里我们可以理解成对整个页面的配置：
    • 一般会至少包含如下 2 个设置。
      • 网页的标题：title 元素
      • 网页的编码：meta 元素
        • 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；
        • 一般都使用 utf-8 编码，涵盖了世界上几乎所有的文字；
1
<meta charset="UTF-8" />

例如:

  • 指定网站的标题 / 指定网站的小图片 ( 比如指定网站的 favicon 图标 )
  • 添加网站的 SEO 相关的信息 (添加网站的 关键字 和 描述信息)
  • 外挂一些外部的 css/js 文件
  • 添加一些浏览器适配相关的内容

注意点:

  • 一般情况下, 写在 head 标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在 head 标签内部的内容,大部分我们都看不到
  • link 元素是外部资源链接元素，规范了文档与外部资源的关系
    • link 元素通常是在 head 元素中
  • 最常用的链接是样式表（CSS）；
    • 此外也可以被用来创建站点图标（比如 “favicon” 图标）；
  • link 元素常见的属性： 
1
2
3
4
5
6
7
8
9
10
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <!-- 引入 icon 图标-->
  <link rel="stylesheet" href="style.css" />
  <!-- 引入外部样式表 -->
</head>

title 标签

  • 作用:
    • 用于指定网站的标题, 并且这个标题, 会作为用户保存网站的默认标题
  • 注意点:
    • title 标签必须写在 head 标签里面

body 标签

作用:

  • 用于定义 HTML 文档中需要显示给用户查看的内容(文字/图片/音频/视频)
    • body 元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。
    • 之后学习的大部分 HTML 元素都是在 body 中编写呈现的；
1
2
3
4
5
6
7
<body>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
  </ul>
</body>

注意点:

  • 虽然说有时候你可能将内容写到了别的地方,在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在 body 中
  • 一对 html 标签中(一个 html 开始标签和一个 html 结束标签) 只能有一对 body 标签

基本结构标签总结

image-20220125133942216

认识 HTML 元素

认识元素

  • 我们会发现HTML 本质上是由一系列的元素（Element）构成的；
  • 什么是元素（Element）呢？
    • 元素是网页的一部分；
    • 一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含；
  • 那么 HTML 有哪些元素呢？

元素的组成

1670147270058

  • 这个元素的主要部分有：

    • 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用 ——在本例中即段落由此开始。

    • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。

    • 内容（Content）：元素的内容，本例中就是所输入的文本本身。

    • 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素的属性

1670147351861

  • 属性包含元素的额外信息，这些信息不会出现在实际的内容中。
  • 一个属性必须包含如下内容：
    • 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
    • 属性名称，后面跟着一个等于号。
    • 一个属性值，由一对引号“ ”引起来。

属性的分类

  • 有些属性是公共的，所有 HTML 都可以设置和拥有 , 称之为 全局属性
    • id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。
    • class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者 DOM 方法来选择和访问特定的元素；
    • style：给元素添加内联样式；
    • title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的。
  • 有些属性是元素特有的，不是每一个元素都可以设置
    • 比如 meta 元素的 charset 属性、img 元素的 alt 属性等

常用 HTML 标签

常用的 HTML 标签

  • 常用的元素（暂时掌握下面几个就够了，90%时间都在写这几个）：
    • p 元素、h 元素；
    • img 元素、a 元素、iframe 元素；
    • div 元素、span 元素；
  • 下阶段学习的元素：
    • ul、ol、li 元素；
    • button 元素、input 元素；
    • table、thead、tbody、thead、th、tr、td；
  • HTML5 新增元素（后续学习）

标签语义

  • 学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。
  • 根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
  • 用正确的元素做正确的事情。
  • 标签语义化的好处 :
    • 方便代码维护；
    • 减少让开发者之间的沟通成本；
    • 能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
    • 有利于 SEO；
    • ……

image-20220125135848686

h 标题标签

  • 为了使网页更具有语义化，我们经常会在页面将一些比较重要的文字作为标题，这个时候我们可以使用 h 元素。HTML 提供了 6 个等级的网页标题，即 h1 - h6 。

  • 单词 head 的缩写，意为头部、标题。

  • 标签语义：作为标题使用，用于给文本添加标题语义,并且依据重要性递减。<h1> 级别最高，而<h6>级别最低。

1
2
3
4
5
6
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

  • 特点：

    • 加了标题的文字会变的加粗，字号也会变大。
    • 一个标题独占一行。

  • 注意点:

    • H 标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
    • H 标签一共有 6 个, 从 H1~H6, 最多就只能到 6, 超过 6 则无效
    • 被 H 系列标签包裹的内容会独占一行
    • 在 H 系列的标签中, H1 最大, H6 最小
    • 在企业开发中, 一定要慎用 H 系列的标签, 特别是 H1 标签. 在企业开发中一般情况下,一个界面中只能出现一个 H1 标签(和 SEO 有关)

p 段落标签

  • 在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，p 标签用于定义段落，它可以将整个网页分为若干个段落。

  • 单词 paragraph [ˈpærəgræf] 的缩写，意为段落。

  • 标签语义：可以把 HTML 文档分割为若干段落。

1
<p>我是一个段落标签</p>

特点：

  • 文本在一个段落中会根据浏览器窗口的大小自动换行。

  • 在浏览器中会单独占一行

  • 段落和段落之间会有空隙。

注意点:

  • p 标签中不要嵌套 块级标签 ,否则页面布局可能会出现错乱
  • 特别是 p 标签中不能嵌套 div 标签

br 换行标签

  • 在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 br

  • 单词 break 的缩写，意为打断、换行。

1
2
3
4
5
6
7
<br />

<!--
    特点：
      1.<br /> 是个单标签。
      2.<br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
-->
  • 标签语义：强制换行。开发中已经不再使用
  • 注意点:
    • br 的意思是不另起一个段落进行强制换行, 而网页中 99.99% 需要换行时都是因为另起了一个段落, 所以应该用 p 来做

image-20220125140816205

hr 标签

  • 标签语义:在浏览器上显示一条分割线

  • 格式:

    • <hr/>

  • 注意点:

    • 在浏览器中会单独占一行
    • 通过我的观察发现, HR 标签可以写/,也可以不写/, 如果不写/那么就是按照 HTML 的规范来编写, 如果写上/那么就是按照 XHTML 的规范来编写.
    • 但是在 HTML5 中, 由于 HTML5 兼容 HTML 和 XHTML ,所以写不写都可以. 那么以后我们在做前端开发时, 要将标签闭合
    • 由于 hr 标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用 CSS 盒子来做

文本格式化标签

  • 在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

  • 标签语义: 突出重要性, 比普通文字更重要.

image-20220125140910359

div 和 span 标签

div 和 span 的历史

  • 在 HTML 中有两个特殊的元素 div 元素、span 元素：
    • div 元素：division，分开、分配的意思；
    • span 元素：跨域、涵盖的意思；
  • 这两个元素有什么作用呢？无所用、无所不用。
  • 产生的历史：
    • 网页的发展早期是没有 css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
    • 后来出现了 css，结构和样式需要分离，这个时候 html 只需要负责结构即可；
    • 比如 h1 元素可以是一段普通的文本+CSS 修饰样式；
    • 这个时候就出现了 div、span 来编写 HTML 结构所有的结构，样式都交给 css 来处理；
  • 所以，理论上来说：
    • 我们的页面可以没有 div、span；
    • 我们的页面也可以全部都是 div、span；

div 和 span 的区别

  • div 和 span 是没有语义的，它们就是一个盒子，用来装内容的。
    • div 标签用来布局，但是现在一行只能放一个 div。 大盒子
      • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
      • 用于把网页分割为多个独立的部分
    • span 标签用来布局，一行上可以放多个 span。小盒子
      • 默认情况下，跟普通文本几乎没差别
      • 用于区分特殊文本和普通文本，比如用来显示一些关键字
1
2
<div>这是头部</div>
<span> 今日价格 </span>

img 图像标签

  • 在 HTML 标签中，img 标签用于定义 HTML 页面中的图像。img 元素可以将一份图像嵌入 HTML 文档

  • 单词 image 的缩写，意为图像。

1
2
3
4
<body>
  <img src="./images/24.jpg" alt="占位字符串" title="提示字符串" width="400px" />
  <img src="./images/26.jpg" alt="占位字符串" title="提示字符串" width="400px" />
</body>

image-20220125142015659

  • src 是 img 标签的必须属性,用于指定图像文件的路径和文件名
  • 所谓属性：简单理解就是属于这个图像标签的特性。

image-20220125142322960

  • 标签的属性

    • 写在标签中 key=”value” 这种格式的文本我们称之为标签属性
    • src: src 是英文 source 的缩写, 是 img 标签的必须属性 , 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片
      • 网络图片：一个在线 URL 地址；
        • 网络图片的设置非常简单，给一个地址即可；
      • 本地图片：本地电脑上的图片，后续会和 html 一起部署到服务；
    • alt: 规定图像的替代文本
      • alt 属性不是强制性的，有两个作用
        • 作用一：只有在 src 指定的路径下加载不到图片（错误的地址或者图片资源不存在），那么会显示 alt 指定的文本；
        • 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；
    • title: 悬停文本 (介绍这张图片, 只有在鼠标移动到图片上时才会显示)
    • width: 设置图片显示的宽度,高度和宽度只设置一个,图片就能等比例拉伸 , 不再使用,而是通过后面的 CSS 控制
    • height: 设置图片显示的高度 , 不再使用,而是通过后面的 CSS 控制

  • 图像标签属性注意点：

    • 图像标签可以拥有多个属性，必须写在标签名的后面。
    • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以 空格 分开。
    • 属性采取键值对的格式，即 key=”value” 的格式，属性 =“属性值”。
    • img 标签添加的图片默认不是占一整行空间
    • 如果想让图片等比拉伸, 只写高度或者宽度其中一个属性即可

a 标签

  • 在 HTML 标签中，a 标签用于定义超链接，作用是从一个页面链接到另一个页面。

超链接语法格式

  • 单词 anchor [ˈæŋkə(r)] 的缩写，意为：锚。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 外部链接  外部链接要写 http:// -->
<a href="http://www.baidu.com" target="_self">百度一下</a>

<!-- 内部链接 -->
<a href="./home.html" target="_blank">首页</a>

<!-- 空链接,不跳转页面,会跳回到网页顶部 -->
<a href="#">首页</a>
<!-- 空链接,不跳转页面,不会跳回到网页顶部 -->
<a href="JavaScript:;">首页</a>

<!-- img链接 -->
<a href="http://www.taobao.com">
  <img src="./taobao.jpg" alt="淘宝" title="淘宝" />
</a>

a 标签的属性:

  • href (hypertext reference): 指定跳转的目标地址 , 也可以是一个本地地址
  • target : 告诉浏览器是否保留原始界面,
    • _blank保留原页面,在新页面打开
    • _self不保留原页面,在当前页面打开(默认)
    • _top : 不保留原页面,在当前页面打开
  • title : 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)

image-20220125143031583

外部链接

  • 例如 <a href="http://www.baidu.com"> 百度</a >。跳转到外部链接
  • 例如 <a href="mailto:12345@qq.com">发邮件到12345邮箱</a> . 给指定邮箱发邮件

内部链接

  • 网站内部页面之间的相互链接. 直接在 href 属性中写内部页面的路径即可，例如 <a href="./index.html">首页</a>。

图片链接

  • 在很多网站我们会发现图片也是可以点击进行跳转的
    • img 元素跟 a 元素一起使用，可以实现图片链接；
  • 实现思路：
    • a 元素中不存放文字，而是存放一个 img 元素；
    • 也就是 img 元素是 a 元素的内容；
1
2
3
4
5
<body>
  <a href="http://www.xiaomi.com">
    <img src="./xiaomi14.jpg" alt="444" />
  </a>
</body>

空链接

  • 本质是跳转到当前页面)

  • 存在的意义: 在企业开发前期,其它界面都没有写出来，那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替.当项目后期其它界面都已经完成时再将假链接替换为真链接

  • 格式<a href="#">江哥博客</a>

  • 格式<a href="javascript:;">江哥博客</a>

  • 两者的区别:

    • # 会回到网页的顶部
    • javascript:; 不会回到网页的顶部

锚链接

  • 用于跳转到当前页面的指定位置**(锚链接)**

    • 格式 <a href="#location">跳转到指定位置</a>

  • 在页面的指定位置给任意标签添加一个 id 属性

    • 例如 <p id="location">这个是目标</p>

  • 没有过渡动画

  • 跳转到指定页面的指定位置**(锚链接)**

  • 格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>

  • 只需要在01-锚点链接.html页面添加一个 id 位置即可: <p id="location">这个是目标</p>

  • 下载(极力不推荐使用)

  • 例如 <a href="girl.zip">下载福利资源<a/>

base 标签的使用

  • base 标签和 a 标签结合使用

    • 如果每个 a 标签都想在新页面中打开,那么逐个设置 a 标签的 target 属性比较麻烦, 这时我们可以使用 base 和 a 标签结合的方式,一次性设置所有 a 标签都在新页面中打开
    • 格式: <base target="_blank" />

  • 注意事项:

    • base 必须嵌套在 head 标签里面
    • 如果标签上指定了 target , base 中也指定了 target ,那么会按照标签上指定的来执行

HTML 注释

什么需要注释

  • 程序员才懂的冷笑话:
    • 在我写这段代码的时候, 只有我和上帝知道这段代码是什么意思.
    • 一段时间之后, 只有上帝知道是什么意思了.
  • 为什么会出现这样的情况呢?
    • 随着学习的深入, 你的一个程序不再是几行代码就可以搞定的了.
    • 可能我们需要写出有上千行, 甚至上万行的程序.
    • 某些代码完成某个功能后, 你写的时候思路很清晰, 但是过段时间会出现忘记为什么这样写的情况, 这很正常.
  • 和同时协同开发
    • 在实际工作中, 一个项目通常是多人协作完成的. 可能是几个或者十几个等等.
    • 这个时候, 你可能需要使用别人写出的代码功能, 别人也可能使用你的代码功能.
    • p 如果你的代码自己都看不懂了, 更何况你的同事呢?

什么是注释

  • 简单来说，注释就是一段代码说明

  • <!-- 注释内容 -->

  • 注释是只给开发者看的，浏览器并不会把注释显示给用户看

  • 如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

  • HTML 中的注释以<!--开头，以 -->结束。

  • 一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行,不显示到页面中的.

注释的意义:

  • 添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。
  • 帮助我们自己理清代码的思路, 方便以后进行查阅.
  • 与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)
  • 开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)
  • 可以临时注释掉一段代码, 方便调试.

image-20220125143927369

HTML 实体标签

  • 我们想在页面上输出<h1>这些字符，但是 HTML 认为这是一个标签, 所以如果需要输出一些特殊的字符需要通过字符实体来实现

  • HTML 实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）：

  • 实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）；

  • 你也可以用实体来代替其他难以用标准键盘键入的字符；

    • &lt;是英语 less than 小于的意思, 可以在页面上输出一个小于符号"<"
    • &gt;是英语 greater than 大于的意思, 可以在页面上输出一个大于符号">"
    • html 中对空格，缩进，换行不敏感，如果同时出现多个空格缩进或者执行，页面只会把它们当作一个空格来解析。
      • 所以想要在 html 中输出空格必须使用&nbsp;来实现, 一个&nbsp;就代表一个空格
      • html 对中文空格敏感, 也就是说可以显示中文空格, 但是不推荐这样使用
      • &nbsp;是英语 non-breaking spacing, 翻译为 不打断 / 空格 的意思
    • 在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
    • 常见的字符实体 :

    1670210216510

1
2
3
4
<body>
  <h1>1 &lt; 2</h1>
  <!--  1 < 2  -->
</body>

其他不常用标签

  • 由于 HTML 现在只负责语义而不负责样式.但是 HTML 一开始有一部分标签连样式也包揽了, 所以这部分标签都被废弃了

  • b、u、i、s

  • 以上标签自己带有样式, 有浓厚的样式作用, 今后一般都只作为 CSS 钩子使用

  • 原则: 不到万不得已,切记不要使用如上标签. 大家可以到 BAT 的网站查看源代码, 几乎看不到以上标签

    • b(Bold)作用: 将文本字体加粗
      • 格式:<b>将文本字体加粗</b>
    • u(Underlined)作用: 为文本添加下划线
      • 格式:<u>为文本添加下划线</u>
    • i(Italic)作用: 显示斜体文本效果,多用于字体图标
      • 格式:<i>显示斜体文本效果</i>
    • s(Strikethrough)作用: 为文本添加删除线
      • 格式:<s>为文本添加删除线</s>

  • 为了弥补 b、u、i、s 标签的不足, W3C 又推出了一组新的标签, 这些标签在显示上看似和 b u i s 标签没什么区别, 但是在语义上却有重大区别

    • strong 作用: 着重内容
      • 格式:<strong>着重内容</strong>
    • ins(Inserted)作用: 新插入的文本
      • 格式:<ins>新插入的文本<ins>
    • em(Emphasized)作用:强调内容
      • 格式:<em>强调内容<em>
    • del(Deleted)作用: 已删除的文本
      • 格式:<del>已删除的文本</del>

路径

路径

  • 页面中的图片会非常多， 通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

  • 路径可以分为：

    • 相对路径
    • 绝对路径

相对路径

  • 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
  • 这里简单来说，图片相对于 HTML 页面的位置
  • 相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置。
    • 对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \

image-20220125142827136

绝对路径

  • 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

  • 例如，D:\web\img\logo.gif 或 完整的网络地址 http://www.itcast.cn/./images/logo.gif。

表格标签

表格的主要作用

  • 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。

  • 一个清爽简约的表格能够把繁杂的数据表现得很有条理。

  • Pink 老师总结: 表格不是用来布局页面的,而是用来展示数据的.

image-20220125144508564

table 表格的基本语法

  • table 是用于定义表格的标签。

  • tr 标签用于定义表格中的行，必须嵌套在 table 标签中。

  • td 用于定义表格中的单元格，必须嵌套在 tr 标签中。

    • td 指表格数据（table data），即数据单元格的内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table border="1" width="400" height="200" cellspacing="0" cellpadding="0">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>苏摹</td>
    <td>22</td>
    <td>男</td>
  </tr>
  <tr>
    <td>白璎</td>
    <td>20</td>
    <td>女</td>
  </tr>
</table>

image-20220125145322577

表格的属性

image-20220125145601613

  • border: 默认情况下表格的边框宽度为 0 看不到, 通过 border 属性给表格指定边框宽度

  • width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过 width 属性指定表格的宽度,可以给 table 标签和 td 标签使用

  • height: 默认情况下表格的高度是由内容自动计算出来的, 可以通过 height 属性指定表格的高度,可以给 table 标签和 td 标签使用

    • 如果给 td 标签设置 widht/height 属性，会修改当前单元格的宽度和高度，不会影响整个表格的宽度和高度

  • cellspacing: 外边距. 默认情况下单元格之间有 2 个像素的间隙, 可以通过 cellpadding 指定表格之间的间隙,只能给 table 标签使用

  • cellpadding: 内边距. 默认情况下单元格边缘距离内容有 1 个像素的内边距, 可以通过 cellpadding 属性指定单元格边缘和内容之间的内边距,只能给 table 标签使用

  • align: 规定表格相对周围元素的水平对齐方式, 它的取值有center、left、right, 水平对齐可以给 table 标签和 tr 标签和 td 标签使用

    • 给 table 设置 align 属性, 是让表格在浏览器中 居左/居右/居中
    • 给 tr 设置 align 属性, 是让当前行中所有内容居左/居右/居中
    • 给 td 设置 align 属性,是让当前单元格中所有内容居左/居右/居中
    • 该属性仅仅作为了解, 企业开发中用 css 代替, 因为 HTML 仅仅用于说明语义
    • 如果 td 中设置了 align 属性, tr 中也设置了 align 属性, 那么单元格中的内容会按照 td 中设置的来对齐

  • valign: 规定表格相对周围元素的垂直对齐方式, 它的取值有 top/middle/bottom , 垂直对齐只能给 tr 标签和 td 标签使用

    • 给 table 设置 valign 属性, 无效
    • 给 tr 设置 valign 属性, 是让当前行中所有内容居上/居中/居下
    • 给 td 设置 valign 属性,是让当前单元格中所有内容居上/居中/居下
    • 如果 td 中设置了 valign 属性, tr 中也设置了 valign 属性, 那么单元格中的内容会按照 td 中设置的来对齐

  • bgcolor:规定表格的背景颜色

    • 给 table 设置 bgcolor 属性, 是给整个表格设置背景颜色
    • 给 tr 设置 bgcolor 属性, 是给当前行设置背景颜色
    • 给 td 设置 bgcolor 属性, 是给当前单元格设置背景颜色
    • 该属性仅仅作为了解, 企业开发中用 css 代替, 因为 HTML 仅仅用于说明语义

th 表头单元格

  • 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

  • th 标签表示 HTML 表格的表头部分(table head 的缩写)

小说排行榜案例

  • 案例分析:

    • 01 先制作表格的结构.

      • 1 第一行里面是 th 表头单元格

      • 2 第二行开始里面是 td 普通单元格

      • 3 单元格里面可以放任何元素,文字,链接,图片等都可以

    • 02 书写表格属性.

      • 1 用到宽度高度边框 cellpadding 和 cellspacing

      • 2 表格浏览器中对齐 align

image-20220125145909556

1
<!--...-->

表格结构标签

  • 使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分.
  • 在表格标签中，分别用：thead 标签表示表格的头部区域、tbody 标签表示表格的主体区域. 这样可以更好的分清表格结构。
    • 01 thead 用于定义表格的头部。thead 内部必须拥有 tr 标签。 一般是位于第一行。
    • 02 tbody 用于定义表格的主体，主要用于放数据本体 。
    • 03 tfoot 用于定义表格的底部
    • 04 以上标签都是放在 table 标签中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
  <table border="1" width="400" height="200" align="center" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>苏摹</td>
        <td>22</td>
        <td>男</td>
      </tr>
      <tr>
        <td>白璎</td>
        <td>20</td>
        <td>女</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>电视剧:镜双城</td>
      </tr>
    </tfoot>
  </table>
</body>

合并单元格

image-20220125150348729

  • 特殊情况下,可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可.

  • 01 合并单元格方式

    • 跨行合并：rowspan=”合并单元格的个数”
    • 跨列合并：colspan=”合并单元格的个数”

image-20220125150450192

  • 02 目标单元格

    • 跨行：最上侧单元格为目标单元格, 写合并代码
    • 跨列：最左侧单元格为目标单元格, 写合并代码

  • 03 合并单元格的步骤

    • 01 先确定是跨行还是跨列合并。
    • 02 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan="2"></td>。
    • 03 删除多余的单元格。

表格的细线边框

  • border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
1
border-collapse: collapse;

  • collapse 单词是合并的意思

  • border-collapse: collapse; 表示相邻边框合并在一起

列表标签

  • 表格是用来显示数据的，那么列表就是给一堆数据添加列表语义，也就是告诉搜索引擎,告诉浏览器这一堆数据是一个整体,也可以用来布局。

  • 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

  • 根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

image-20220125150739397

ul 无序列表

  • ul 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 li 标签定义。

image-20220125151040931

  • 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  • ul 标签中只能嵌套 li 标签，直接在 ul 标签中输入其他标签或者文字的做法是不被允许的。
  • li 标签相当于一个容器，可以容纳所有任意元素。
  • 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。
  • 注意点:
    • 浏览器会给无需列表自动添加先导符号, 一定要记住 ul 标签是用来给一堆数据添加列表语义的,而不是用来给他们添加小圆点的
    • ul 标签和 li 标签是一个整体，是一个组合.所以一般情况下 ul 标签和 li 标签都是一起出现，都是结合在一起使用, 不会单个出现.也就是说不会单独使用一个 ul 标签或者单独使用一个 li 标签，
    • 由于 ul 和 li 是一个整体, 所以 ul 里面不推荐包裹其它标签, 永远记住 ul 里面最好只写 li 标签
    • 虽然 ul 中推荐只能写 li 标签, 但是 li 标签是一个容器标签, li 标签中可以添加任意标签, 甚至可以添加 ul 标签
    • 其实 ul 还有一个 type 属性, 可以修改先导符号的样式, 取值有disc、square、circle几种**(不推荐使用)**
  • ul 应用场景:
    • 导航条
    • 商品列表等
    • 新闻列表

ol 有序列表

  • 有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

  • 在 HTML 标签中，ol 标签用于定义有序列表，列表排序以数字来显示，并且使用 li 标签来定义列表项。

image-20220125151153327

  • ol 中只能嵌套 li，直接在 ol 标签中输入其他标签或者文字的做法是不被允许的。
  • li 标签相当于一个容器，可以容纳所有元素。
  • 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。
  • ol 应用场景:
    • xxx 排行榜
    • 其实 ol 应用场景并不多, 因为能用 ol 做的, 用 ul 都能做

dl 定义列表

  • 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

image-20220125151233337

  • 在 HTML 标签中，dl 标签用于定义描述列表（或定义列表），该标签会与 dt（定义项目/名字）和 dd（描述每一个项目/名字）一起使用。

  • dl 里面只能包含 dt 和 dd。

  • dt 和 dd 个数没有限制，经常是一个 dt 对应多个 dd。

image-20220125151402895

  • dl 应用场景:

    • 网站底部相关信息
    • 但凡看到一堆内容都是用于描述某一个内容的时候就要想到 dl

  • 注意事项:

    • dl 是一个组标签, 一定是一坨一坨的出现, 也就是说 dt 和 dd 标签不能单独存在, 必须包裹在 dl 里面
    • 由于 dl 和 dt、dd 是一个整体, 所以 dl 里面不推荐包裹其它标签,推荐一个 dt 对应多个 dd,其他标签嵌套在 dd 中
    • dd 和 dt 和 li 标签一样是容器标签, 里面可以添加任意标签
    • 定义列表非常灵活, 可以给一个 dt 配置多个 dd, 但是最好不要出现多个 dt 对应一个 dd, dd 的语义是描述离它最近的一个 dt, 所以其它 dt 相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
    • 定义列表非常灵活, 可以将多个 dt+dd 组合拆分为多个 dl

列表总结

image-20220125151445426

  • 学会什么时候用无序列表， 什么时候用自定义列表。

  • 无序列表和自定义列表代码怎么写？

  • 列表布局在学习完 CSS 后再来完成。

表单标签

表单标签的作用

  • 使用表单目的是为了收集用户信息。

  • 在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

表单的组成

  • 在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息 3 个部分构成。

image-20220125151628382

表单域

  • 表单域是一个包含表单元素的区域。

  • 在 HTML 标签中， form 标签用于定义表单域,用以实现用户信息的收集和传递。

  • form 会把它范围内的表单元素信息提交给服务器.

  • 基础班来说,我们暂时不用表单域提交数据,只需要写上 form 标签即可. 就业班等学习服务器编程阶段会重新讲解.

  • 这里只需要记住两点:

    • 在我们写表单元素之前,应该有个表单域把他们进行包含.
    • 表单域是 form 标签.

image-20220125151733433

image-20220125152240262

  • 请求方式的对比 :

1670252590678

1670252606919

表单控件

  • 在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

input 表单元素

  • 在英文单词中，input 是输入的意思，而在表单元素中, input 标签用于收集用户信息。

  • 在 input 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

1
<input type="属性值" />
  • input 标签为单标签

input 的 type 属性

  • 通过 type 属性设置不同的属性值用来指定不同的控件类型 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form action="#">
  <!-- 文本框 type="text" -->
  用户名:<input type="text" /><br /><br />

  <!-- 密码框 type="password" -->
  密码:<input type="password" /><br /><br />

  <!-- 单选框 type="radio" name值相同单选框互斥 label包裹则文字与表单控件关联(写法一) checked="checked"默认选中-->
  姓名:
  <label><input type="radio" name="sex" checked="checked" />男</label>
  <label><input type="radio" name="sex" />女</label><br /><br />

  <!-- 复选框 type="checkbox" 虽原本已经互斥,但也要有相同name值 label包裹则文字与表单控件关联(写法二) checked="checked"默认选中-->
  爱好:
  <label for="sleep">睡觉</label><input type="checkbox" name="happy" id="sleep" checked="checked" /> <label for="eat">吃饭</label><input type="checkbox" name="happy" id="eat" /> <label for="run">跑步</label><input type="checkbox" name="happy" id="run" /><br /><br />

  <!-- 按钮 type="button|submit|reset" 普通按钮|提交按钮|重置按钮 提交和重置要放在form中功能才生效-->
  <input type="button" value="按钮" />
  <input type="submit" value="提交" />
  <input type="reset" value="重置" /><br /><br />

  <!-- 图片提交按钮 type="image" -->
  <input type="image" src="./images/24.jpg" width="200" /><br /><br />

  <!-- 文件域 type="file" -->
  <input type="file" />
</form>

input 的其他属性

  • 除 type 属性外，input 标签还有其他很多属性，其常用属性如下：

image-20220125154606654

  • name 和 value 是每个表单元素都有的属性值,主要给后台人员使用.

  • name 表单元素的名字, 要求 单选按钮和复选框要有相同的 name 值.

  • checked 属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.

  • maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

常用的几个功能

    1. 有些表单元素想刚打开页面就默认显示几个文字怎么做?
    • 答: 可以给这些表单元素设置 value 属性=“值”
1
用户名: <input type="text" value="请输入用户名" />
    1. 页面中的表单元素很多，如何区别不同的表单元素?
    • 答: name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多，name 的主要作用就是用于区别不同的表单。
1
用户名: <input type="text" value="请输入用户名" name="username" />
    1. 如果页面一打开就让某个单选按钮或者复选框是选中状态?
    • 答: checked 属性：表示默认选中状态。用于单选按钮和复选按钮。
1
性 别: <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女
    1. 如何让 input 表单元素展示不同的形态? 比如单选按钮或者文本框
    • 答: type 属性：type 属性可以让 input 表单元素设置不同的形态
1
<input type="radio" name="sex" value="男" checked="checked" />男 <input type="text" value="“请输入用户名”" />

label 标签

  • label 标签为 input 元素定义标注（标签）。

  • label 标签用于绑定一个表单元素, 当点击 label 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

1
<label for="sex">男</label> <input type="radio" name="sex" id="sex" />

  • 核心： label 标签的 for 属性值要与相关元素的 id 属性值相同。

  • 该功能的另一种写法:

1
2
3
4
<!-- 单选框 type="radio" name值相同单选框互斥 文字与表单控件关联 checked="checked"默认选中-->
姓名:
<label><input type="radio" name="sex" checked="checked" />男</label>
<label><input type="radio" name="sex" />女</label><br /><br />
1
2
3
<!--给多选框添加绑定-->
<input type="checkbox" id="basketball" />
<label for="basketball">篮球</label>

select 下拉框

  • 使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 select 标签控件定义下拉列表。
  • select 中至少包含一对 option 。
  • 在 option 中定义 selected =“ selected “ 时，当前项即为默认选中项。
  • ◼ select 常用属性
    • multiple：可以多选
    • size：显示多少项
1
2
3
4
5
6
7
8
<!-- selet下拉框 selected="selected"默认选中-->
<select name="city" id="">
  <option value="桂林">桂林</option>
  <option value="柳州">柳州</option>
  <option value="北海" selected="selected">北海</option>
  <option value="贺州">贺州</option>
  <option value="梧州">梧州</option>
</select>
  • 对下拉列表进行分组
1
2
3
4
5
6
7
8
9
10
11
12
<select>
  <optgroup label="北京">
    <option>朝阳区</option>
    <option>昌平区</option>
    <option>通州区</option>
  </optgroup>
  <optgroup label="广州">
    <option>天河区</option>
    <option>越秀区</option>
    <option>黄浦区</option>
  </optgroup>
</select>

textarea 文本域

  • 使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 textarea 标签。

  • 在表单元素中，textarea 标签是用于定义多行文本输入的控件。

  • 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

    • 通过 textarea 标签可以轻松地创建多行文本输入框。

    • cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

1
2
3
<textarea rows="3" cols="20" name="message">
	文本内容
</textarea>

  • ◼ 缩放的 CSS 设置

    •  禁止缩放：resize: none;
    •  水平缩放：resize: horizontal;
    •  垂直缩放：resize: vertical;
    •  水平垂直缩放：resize: both;

  • 禁止文本域拖拽大小

1
2
3
textarea {
  resize: none;
}

普通按钮

  • 作用: 定义可点击按钮（多数情况下，用于通过配合 JavaScript 启动脚本）
  • <input type="button" value="我是按钮"/>

图片按钮

  • 作用:定义图像形式的提交按钮

  • <input type="image" src="./1.jpg"/>

重置按钮

  • 作用: 定义重置按钮。重置按钮会清除表单中的所有数据

  • <input type="reset"/>

    注意事项:

    • 这个按钮不需要写 value 自动就有 “重置” 文字
    • reset 只对 form 表单中表单项有效果

提交按钮

  • 作用:定义提交按钮。提交按钮会把表单数据发送到 action 属性指定的地址

  • <input type="submit"/>

  • 注意事项:

    • 这个按钮不需要写 value 自动就有 “提交” 文字
    • 要想通过 submit 提交数据到服务器, 被提交的表单项都必须设置 name 属性
    • 默认明文传输 (GET) 不安全, 可以将 method 属性设置为 POST 改为非明文传输(学到 Ajax 再理解)

datalist 列表标签

  • 作用: 给输入框绑定待选项
  • 格式:
1
2
3
<datalist>
  <option>待选项内容</option>
</datalist>
  • 如何给输入框绑定待选列表
    • 搞一个输入框
    • 搞一个 datalist 列表
    • 给 datalist 列表标签添加一个 id
    • 给输入框添加一个 list 属性,将 datalist 的 id 对应的值赋值给 list 属性即可
1
2
3
4
5
6
7
8
请输入你的车型: <input type="text" list="cars" />
<datalist id="cars">
  <option>奔驰</option>
  <option>宝马</option>
  <option>奥迪</option>
  <option>路虎</option>
  <option>宾利</option>
</datalist>

表单控件总结

  • 01 表单元素我们学习了三大组: input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.

  • 02 这三组表单元素都应该包含在 form 表单域里面,并且有 name 属性.

  • 03 有三个名字非常相似的标签:

      1. 表单域 form 使用场景: 提交区域内表单元素给后台服务器
      1. 文件域 file 是 input type 属性值, 使用场景: 上传文件
      1. 文本域 textarea 使用场景: 可以输入多行文字, 比如 留言板 网站介绍等…

  • 04 我们当前阶段不需要提交表单元素,所以我们只负责表单元素的外观形态即可.