HTML 学习 | 第一章
前言
小白开始干前端
生命不息,学习不止~~
以下内容源于黑马前端教程,纯属搬运工了
下篇:CSS 学习 | 第一章
一、概述
相关概念:
网站
:指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。
网页
:是网站中的 “一页”,通常是 HTML 格式的文件,它要通过游览器来阅读。网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常见以 .htm
或 .html
后缀结尾的文件,因此将其俗称为 html 文件
。
HTML
:指的是 超文本标记语言
(Hyper Text Markup Language
),它是用来描述网页的一种语言。所谓超文本,是因为该语言可以加入图片、声音、动画、多媒体等内容(超越了文本限制),其次是它还可以从一个文件跳转到另一个文件,与世界各地主机的文件链接(超级链接文本)。
网页时通过游览器来展示的,常用的游览器有 IE、火狐、谷歌、Safari 和 Opera 等,游览器内核(渲染引擎)能够读取网页内容,整理讯息,计算页面的显示方式并显示页面。同一个 html 文件在不同的游览器中展示的效果不一样,就是跟游览器的内核有关。
Web标准
:是由 W3C 组织和其他标准化组织指定的一系列标准的集合。
遵循 Web标准
除了可以让不同的开发人员写出的页面更标准,更统一外,还有以下优点:
- 让 Web 的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面游览速度
Web标准
主要包括 结构
、表现
和 行为
三个方面:
- 结构:结构用于对网页元素进行整理和分类,主要指 HTML
- 表现:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指 CSS
- 行为:行为是指网页模型的定义及交互的编写,主要指 Javascript、vue 等
Web标准提出的最佳体验方案:结构写道 HTML 文件中,表现写道 CSS 文件中,行为写到 JavaScript 文件中。
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
二、HTML 语法
1. 基本语法概述
- HTML 标签使由
尖括号包围的关键词
,例如<html>
- HTML 标签通常是成对出现的,例如
<html>
和</ html>
,称为双标签
,标签对中的第一个标签是开始标签,第二个标签是结束标签。 - 有些特殊的标签必须是单个标签,例如:
<br />
,称之为单标签
2. 标签关系
双标签关系可分为两类:包含关系
和 并列关系
包含关系:
<html>
<title></title>
</html>
并列关系:
<head></head>
<body></body>
3. 基本结构标签
每个网页都会有一个结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写的。
标签名 | 定义 | 说明 |
---|---|---|
<html></html> | HTML标签 | 页面中最大的标签,又称为 根标签 |
<head></head> | 文档的头部 | 注意在 head 标签中必须要设置的标签是 title |
<title></title> | 文档的标题 | 让页面有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容,页面内容基本都是放到 body 里面的 |
第一个页面编写:
<!DOCTYPE html>
<html lang="en">
<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>第一个页面</title>
</head>
<body>
众里寻他千百度,蓦然回首那人却在灯火阑珊处
</body>
</html>
文档类型声明标签
<!DOCTYPE>
文档类型声明,作用就是告诉游览器使用哪种 HTML 版本来显示网页。
<!DOCTYPE html>
上面的代码表示:当前页面采取的是 HTML5 版本来显示网页。
注意:
<!DOCTYPE>
声明位于文档中的最前面的位置,处于<html>
标签之前<!DOCTYPE>
不是一个 HTML 标签,它就是文档类型声明标签
lang 语言种类
用来定义当前文档显示的语言
- en 定义语言为英语
- zh-CN 定义语言为中文
简单来说,定义为 en 就是英文网页,定义为 zh-CN 就是中文网页,但是其实不管你定义的是中文网页还是英语网页,都可以去写其他语言内容的。这个属性对游览器和搜索引擎还是有作用的。在国内建议使用 zh-CN
。
字符集
字符集(Character set)是多个字符的集合,以便计算机能够识别和存储各种文字。
在 <head>
标签内,可以通过 <meta>
标签的 charset
属性来规定 HTML 文档应该使用哪种字符编码:
<meta charset="UTF-8">
charset 常用的值有:GB2312、BIG5、GBK 和 UTF-8,其中 UTF-8
也被称为 万国码
,基本包含了全世界所有国家需要用到的字符。
注意:上面语法是必须要写的代码,否则可能引起乱码的情况,一般情况下,统一使用 UTF-8
编码,尽量统一写成标准的 UTF-8
,而不是 utf8
或者 UTF8
。
4. 常用标签
4.1 标题标签
为了使网页更具有语义化,我们经常会在页面中用到 标题标签
,HTML 提供了 6 个等级的网页标签,即 <h1> - <h6>
,h
为单词 head
的缩写,意为头部、标题。
标签语义:作为标题使用,并且依据重要性递减。
特点:
- 加了标题的文字会变得加粗,字号也会依次变大。
- 一个标题独占一行。
语法:
<h1>一级标题</h1>
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>标题标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
保存,打开游览器,效果如下所示:
4.2 段落标签
在网页中,要把文字有条理的显示出来,就需要将这些文字分段显示,在 HTML 标签中,<p>
标签用于定义段落,它可以将整个网页分为若干个段落,p
为单词 paragraph
的缩写,意为段落。
标签语义:可以把 HTML 文档分割为若干段落。
特点:
- 文本在一个段落中会根据游览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
语法:
<p>一段内容</p>
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>段落标签</title>
</head>
<body>
<p>燕子去了,有再来的时候;杨柳枯了,有再青的时候;桃花谢了,有再开的时候。但是,聪明的,你告诉我,我们的日子为什么一去不复返呢?——是有人偷了他们罢:那是谁?又藏在何处呢?是他们自己逃走了罢:如今又到了哪里呢?</p>
<p>我不知道他们给了我多少日子,但我的手确乎是渐渐空虚了。在默默里算着,八千多日子已经从我手中溜去,像针尖上一滴水滴在大海里,我的日子滴在时间的流里,没有声音,也没有影子。我不禁头涔涔而泪潸潸了。</p>
</body>
保存,打开游览器,效果如下所示:
4.3 换行标签
在 HTML 中,一个段落中的文字会从左到右依次排列,直到游览器窗口的右端,然后才自动换行,如果希望某段文本强制换行显示,就需要使用换行标签 <br />
,b
对应单词 break
的缩写,意为打断、换行。
标签语义:强制换行。
特点:
- 它是一个
单标签
。 <br />
标签只是简单的开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
语法:
<br />
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>换行标签</title>
</head>
<body>
山客龙钟不解耕,开轩危坐看阴晴。<br />
前江后岭通云气,万壑千林送雨声。<br />
海压竹枝低复举,风吹山角晦还明。<br />
不嫌屋漏无乾处,正要群龙洗甲兵。<br />
</body>
保存,打开游览器,效果如下所示:
4.4 文本格式化标签
在网页中,有时需要为文字设置 粗体
、斜体
或 下划线
等效果,这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示。
标签语义:突出重要性,比普通文字更重要。
语义 | 标签 | 说明 |
---|---|---|
加粗 | <strong></strong> 或者 <b></b> | 更推荐使用 <strong> 标签加粗,语义更强烈 |
倾斜 | <em></em> 或者 <i></i> | 更推荐使用 <em> 标签倾斜,语义更强烈 |
删除线 | <del></del> 或者 <s></s> | 更推荐使用 <del> 标签删除线,语义更强烈 |
下划线 | <ins></ins> 或者 <u></u> | 更推荐使用 <ins> 标签下划线,语义更强烈 |
语法:
<strong>加粗</strong>
...
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>文本格式化标签</title>
</head>
<body>
我是<strong>加粗</strong>文字<br />
我是<em>倾斜</em>文字<br />
我是<del>删除线</del>文字<br />
我是<ins>下划线</ins>文字<br />
</body>
保存,打开游览器,效果如下所示:
4.5 容器标签
<div>
和 <span>
都是容器标签,它们是没有语义的,就是一个盒子,用来装内容的,div
是 division
的缩写,表示分割、分区,span
意为跨度、跨距。
特点:
<div>
标签用来布局,但是现在一行只能放一个<div>
,大盒子。<span>
标签用来布局,一行可以有多个<span>
,小盒子。
语法:
<div>这是头部</div>
<div>今日价格</div>
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>换行标签</title>
</head>
<body>
<div>div独占一行</div>
<div>div独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>
</body>
保存,打开游览器,效果如下所示:
4.6 图像标签
在 HTML 标签中,<img>
标签用于定义 HTML 页面中的图像,img
为单词 image
的缩写,意为图像,src
是 <img>
标签的必须属性
,它用于指定图像文件的路径和文件名
。
属性:简单理解就是属于这个图像标签的特性。
图像标签的其他属性:
属性 | 标签 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像不能显示的文字 |
title | 文本 | 提示文本,鼠标放到图像上,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点:
- 如果修改单一的
width
或者height
,会自动进行等比缩放 - 图像标签可以拥有多个属性,必须写在标签名的后面
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
- 属性采取键值对的格式,即 key=“value” 的格式,属性=“属性值”
语法:
<img src="图像url" />
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>图像标签</title>
</head>
<body>
<h4>替换文本:当图片显示不出来的时候显示的文字</h4>
<img src="2.png" alt="图片加载失败">
<h4>提示文本:鼠标放在图片上提示的文字</h4>
<img src="1.png" title="海贼王">
<h4>设置图片长宽、边框</h4>
<span>
<img src="1.png" width="180px" height="120px">
</span>
<span>
<img src="1.png" width="180px" border="12">
</span>
</body>
保存,打开游览器,效果如下所示:
图像标签有一个很重要的知识点就是 路径
(1)目录文件夹和根目录
实际工作中,我们的文件不能随便乱放,否则用起来很难快速找到他们,因此我们需要一个文件夹管理他们。
目录文件夹
:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html 文件、图片等。
根目录
:打开目录文件夹的第一层就是根目录。
(2)路径
页面中的图片会非常多,通常我们会新建一个文件夹存放这些图像文件(images),这时再查找图像,就需要采用 “ 路径 ” 的方式来指定图像文件的位置。
路径可以分为:
- 相对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。简单来说,就是图片相对于 HTML 页面的位置。
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图像文件位于 HTML 文件同一级,如 <image src="baidu.gif"> | |
下一级路径 | / | 图像文件位于 HTML 文件下一级,如 <image src="images/baidu.gif"> |
上一级路径 | …/ | 图像文件位于 HTML 文件上一级,如 <image src="../baidu.gif"> |
相对路径是从代码所在的这个文件出发,去寻找目标文件的,而这里所说的上一级、下一级和同一级就是图片相对于 HTML 页面的位置。
- 绝对路径
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。例如:D:\web\img\logo.gif
或完整的网络地址 https://img-blog.csdnimg.cn/55.png
4.7 超链接标签
在 HTML 标签中,<a>
标签用于定义超链接,作用是从一个页面链接到另一个页面。a
是单词 anchor
的缩写,意为:锚。
- 链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
两个属性的作用如下:
属性 | 作用 |
---|---|
href | 用于指定链接目标 url 地址,(必须属性)当为标签应用 href 属性时,他就有个超越链接的功能 |
target | 用于指定链接页面的打开方式,其中 _self 为默认值,_blank 为新窗口中打开方式 |
- 链接的分类
外部链接:例如 <a href="http://www.baidu.com" target="_self">百度</a>
,链接地址需要以 http://
开头。
内部链接:网站内部页面之间的相互链接,直接连接内部页面名称即可,例如 <a href="index.html">首页</a>
。
空链接:如果当时没有确定链接目标时,<a href="#">首页</a>
。
下载链接:地址链接是文件 .exe 或者是 .zip 等压缩形式文件时,会下载这个文件。
网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接:点击链接可以快速定位到页面中的某个位置。
- 在链接文本的 href 属性中,设置属性值为
#名字
的形式,如<a href="#two">第2集</a>
- 找到目标位置标签,里面添加一个 id 属性 = 刚才的名字,如
<h3 id="two">第2集介绍</h3>
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>链接标签标签</title>
</head>
<body>
<h3 id="baidu">百度一下,你就知道</h3>
<p>href:指定目标链接路径</p>
<p>target:打开窗口的方式,默认为 “_self” 当前窗口打开页面,“_blank” 为新窗口打开页面</p>
<h4>外部链接</h4>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="https://blog.csdn.net/xhmico?spm=1011.2124.3001.5343" target="_blank">我的个人主页</a>
<h4>内部链接:网站内部之间的相互链接</h4>
<a href="Untitled-2.html" target="_self">首页</a>
<h4>空链接</h4>
<a href="#" target="_blank">跳转到</a>
<h4>下载链接</h4>
<a href="1.zip">下载文件</a>
<h4>网页元素链接</h4>
<a href="http://www.baidu.com" target="_self">
<img src="1.png" width="200" />
</a>
<h4>锚点链接</h4>
<a href="#baidu">跳转到百度</a>
</body>
保存,打开游览器,效果如下所示:
4.8 注释标签
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要在页面中的注释文字,就需要使用注释标签,HTML 中注释以 <!--
开头,以 -->
结束。
注释标签中的内容是给程序员看的,这个代码是不执行不显示到页面中的。
添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的。
语法:
<!-- 注释 快捷键:ctrl + / -->
4.9 表格标签
表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
表格不是用来布局页面的,而是用来展示数据的。
表格属性:
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或 “ ” | 规定表格单元是否有边框,默认为 “ ” ,表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
语法:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<table> </table>
是用于定义表格的标签。<tr> </tr>
标签用于定义表格中的行,必须嵌套在<table> </table>
标签中。<td> </td>
用于定义表格中的单元格,必须嵌套在<tr></tr>
标签中。- 字母 td 指表格数据(table data),即数据单元格的内容。
表头单元格标签
表头单元格也是单元格,一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示,常用于表格第一行突出重要性,<th>
标签表示 HTML 表格的表头部分 (table head 的缩写)
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>表格标签</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="5" width="200" border="1">
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
</tr>
<tr>
<td>米大傻</td><td>男</td><td>18</td>
</tr>
<tr>
<td>曹大力</td><td>男</td><td>17</td>
</tr>
<tr>
<td>杨大宝</td><td>女</td><td>20</td>
</tr>
</table>
</body>
保存,打开游览器,效果如下所示:
表格结构标签
因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分。在表格标签中,分别用:<thead>
标签 表格的头部区域、<tbody>
标签 表格的主体区域,这样可以更好的分清表格结构。
<thead></thead>
:用于定义表格的头部。<thead>
内部必须拥有<tr>
标签。 一般是位于第一行。<tbody></tbody>
:用于定义表格的主体,主要用于放数据本体。- 以上标签都是放在
<table></table>
标签中。
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>表格结构标签</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="5" with="200" border="1">
<thead>
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>米大傻</td><td>男</td><td>18</td>
</tr>
<tr>
<td>曹大力</td><td>男</td><td>17</td>
</tr>
<tr>
<td>杨大宝</td><td>女</td><td>20</td>
</tr>
</tbody>
</table>
</body>
合并单元格
合并单元格的方式:
- 跨行合并:rowspan=“合并单元格的个数”
- 最上侧单元格为目标单元格, 写合并代码
- 跨列合并:colspan=“合并单元格的个数”
- 最左侧单元格为目标单元格, 写合并代码
基本步骤:
- 先确定是跨行还是跨列合并。
- 找到目标单元格,写上合并方式 = 合并的单元格数量。
- 删除多余的单元格。
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>合并单元格</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="20" width="500" border="1">
<thead>
<tr>
<th></th>
<th colspan="2"></th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
保存,打开游览器,效果如下所示:
4.10 列表标签
列表是用来布局的,列表最大的特点就是整齐、整洁、有序,所以它作为布局会更加自由和方便。
根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表
。
无序列表
<ul>
标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用 <li>
标签定义。无序列表的基本语法格式如下:
语法:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
...
</ul>
- 无序列表的各个列表项之间没有顺序级别之分,是并列的。
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的。<li>
与</li>
之间相当于一个容器,可以容纳所有元素。- 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。
有序列表
有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。在 HTML 标签中,<ol>
标签用于定义有序列表,列表排序以数字来显示,并且使用 <li>
标签来定义列表项。有序列表的基本语法格式如下:
语法:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
...
</ol>
<ol></ol>
中只能嵌套<li></li>
,直接在<ol></ol>
标签中输入其他标签或者文字的做法是不被允许的。<li>
与</li>
之间相当于一个容器,可以容纳所有元素。- 有序列表会带有自己样式属性,但在实际使用时,我们会使用 CSS 来设置。
自定义列表
自定义列表的使用场景:自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。在 HTML 标签中,<dl>
标签用于定义描述列表(或定义列表),该标签会与 <dt>
(定义项目/名字)和 <dd>
(描述每一个项目/名字)一起使用。语法如下:
语法:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
<dd>名词2解释3</dd>
...
</dl>
<dl></dl>
里面只能包含<dt>
和<dd>
。<dt>
和<dd>
个数没有限制,经常是一个<dt>
对应多个<dd>
。
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>列表标签</title>
</head>
<body>
<h4>无序列表</h4>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>...</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>...</li>
</ol>
<h4>自定义列表</h4>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方网站</dd>
<dd>联系我们</dd>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
</body>
保存,打开游览器,效果如下所示:
4.11 表单标签
使用表单目的是为了收集用户信息。在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时就需要表单。在 HTML 中,一个完整的表单通常由表单域
、表单控件(也称为表单元素)
和 提示信息
3个部分构成。
表单域
表单域是一个包含表单元素的区域。在 HTML 标签中,<form>
标签用于定义表单域,以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器
。
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的 url 地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为 get 或者 post |
name | 名称 | 用于指定表单的名称,以区分同一个页面的多个表单域 |
语法:
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
表单控件
(1)input 输入表单元素
在英文单词中,input
是输入的意思,而在表单元素中 <input>
标签用于收集用户信息。在 <input>
标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input />
标签为单标签。- type 属性设置不同的属性值用来指定不同的控件类型。
常用属性:
属性 | 属性值 | |
---|---|---|
type | 可参见以下 type 属性值 | 描述 |
name | 由用户自定义 | 定义 input 元素名称 |
value | 由用户自定义 | 规定 input 元素的值 |
checked | checked | 规定此 input 元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
- name 和 value 是每个表单元素都有的属性值,主要给后台人员使用
- name 表单元素的名称,要求
单选按钮和复选框要有相同的 name 值
- value 在文本框中能看到效果
- checked 属性主要争对单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素
- maxlength 是用户可以在表单元素输入的最大字符数,一般较少使用
type 属性的属性值及其描述如下:
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和 “游览” 按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段。该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符 |
语法:
<input type="属性值" />
label 标签
<label>
标签为 input 元素定义标注(标签)。
<label>
标签用于绑定一个表单元素,当点击<label>
标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心: <label>
标签的 for 属性
应当与相关元素的 id 属性
相同。
(2)select 下拉表单元素
使用场景: 在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>
标签控件定义下拉列表
。
<select>
中至少包含一对<option>
。- 在
<option>
中定义 selected = “selected” 时,当前项即为默认选中项。
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
(1)textarea 文本域元素
使用场景: 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 <textarea>
标签。在表单元素中,<textarea>
标签是用于定义多行文本输入的控件。使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
- 通过
<textarea>
标签可以轻松地创建多行文本输入框。 - cols=“每行中的字符数” ,rows=“显示的行数”,我们在实际开发中不会使用,都是用 CSS 来改变大小。
语法:
<textarea rows="3" cols="20">
文本内容
</textarea>
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>表单标签</title>
</head>
<body>
<form action="/user/save-user-info" method="post" name="saveUserInfo">
<!-- text 文本框,可输入任何文字 -->
<!-- 用户最多输入 20 个字符 -->
<label for="username.id">用户名:</label><input type="text" name="username" value="请输入用户名" maxlength="10" id="username.id"> <br>
<!-- password 密码框,该字段中的字符被掩码 -->
密 码:<input type="password" name="password"> <br>
<!-- radio 单选按钮,可以实现多选一 -->
<!-- name 是表单元素名字,这里性别单选按钮必须有相同的名字name,才可以实现多选1 -->
<!-- 单选按钮和多选框可以设置 checked 属性,当页面打开的时候就可以默认选中这个按钮 -->
性别:
<input type="radio" name="gender" value="1" checked="checked" id="man"><label for="man">男</label>
<input type="radio" name="gender" value="0" id="woman"><label for="woman">女</label> <br>
<!-- checkbox 多选按钮,可以实现多选多 -->
爱好:
<input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡觉
<input type="checkbox" name="hobby" value="touchFish" checked="checked">摸鱼 <br>
籍贯:
<select name="province">
<option>湖南省</option>
<option>湖北省</option>
<option>广东省</option>
<option>江西省</option>
<option>辽宁省</option>
</select>
<br>
备注:
<!-- 文本域:rows 多少行 cols 一行多少个字 -->
<textarea name="note" rows="3" cols="20">
这个人很懒,什么都没有留下~~
</textarea>
<br>
<!-- 文件域:上传文件使用的 -->
上传图片:<input type="file" name="uploadFile">
<br>
<!-- 点击提交按钮,表单域 form 里面的表单元素里面的值就会提交给后台服务器 -->
<input type="submit" value="提交" name="userSumbit" >
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="清空" name="userReset" >
<!-- 普通按钮 button -->
<input type="button" value="获取验证码" name="getCode"> <br>
</form>
</body>
保存,打开游览器,效果如下所示:
5. 特殊字符
在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。
更多常见字符可见以下链接:
HTML中常用特殊符号总汇
html中显示特殊符号(附带特殊字符对应表)
6. 综合案例
<!DOCTYPE html>
<html lang="zh-CN">
<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>免费注册</title>
</head>
<body>
<h4>填写用户信息</h4>
<table width="600">
<tr>
<td>用户名</td>
<td>
<input type="text" >
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="man"> 男
<input type="radio" name="gender" value="woman"> 女
</td>
</tr>
<tr>
<td>地址</td>
<td>
省
<select>
<option selected="selected">湖南省</option>
<option>广东省</option>
<option>山东省</option>
<option>四川省</option>
</select>
市
<select>
<option selected="selected">长沙市</option>
<option>广州市</option>
<option>石家庄市</option>
<option>成都市</option>
</select>
区
<select>
<option selected="selected">芙蓉区</option>
<option>天河区</option>
<option>栾城区</option>
<option>新都区</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<textarea cols="35">详细地址</textarea>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td>手机号码</td>
<td>
<input type="text" value="+86-">
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>备注</td>
<td>
<textarea cols="35">这个人很懒,没有留下什么~~</textarea>
</td>
</tr>
<tr>
<td>个人爱好</td>
<td>
<input type="checkbox" name="label" value="1"> 阅读
<input type="checkbox" name="label" value="2"> 运动
<input type="checkbox" name="label" value="3"> 睡觉
<input type="checkbox" name="label" value="4" checked="checker"> 摸鱼
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">阅读注册条款与会员标准</a>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="agree" value="1" checked="checked"> 我同意
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="注册">
</td>
</tr>
</table>
</body>
保存,打开游览器,效果如下所示:
7. 查阅文档
W3C:http://www.w3school.com.cn/
MDN:https://developer.mozilla.org/zh-CN/
下篇:CSS 学习 | 第一章