超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言
您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析
超文本标记语言(第一版)在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准)
1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
1997年1月14日,W3C推荐标准
1997年12月18日,W3C推荐标准
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成
解决了跨浏览器问题
化繁为简
简化的DOCTYPE
强大的HTML5 API
以浏览器原生能力替代复杂的JavaScript代码
跨平台
功能强大,新增特性
支持本地存储、离线缓存、地理位置等
新增实用标签
支持绘制图形
支持播放视频和音频
W3C
World Wide Web Consortium(万维网联盟)
成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C官网
W3C中文官网
W3C标准包括
结构化标准语言(XHTML 、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript )
WebStorm 是最专业的的前端开发工具,但是由于版权原因这里不过多介绍
WebStorm 官网
详细安装教程请加文章封面联系方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页基本标签title>
head>
<body>
Change The Word!
body>
html>
标签 | 语义 | 说明 |
---|---|---|
|
文档类型声明 | 告诉浏览器使用规范为HTMl |
|
网页标签 | 标签位于HTML文档的最前面,用于标识HTML文档的开始和结尾 |
|
头部标签 | 用于定义HTML文档的头部,描述文档属性,包含一些辅助标签例如
|
|
网页标题 | 用来定义网页的标题名称 |
|
描述性标签 | 一般用来做SEO |
|
主体标题 | 用于定义HTML文档的主体内容 |
<head>
<title>title>
head>
<head>
head>
<body>
body>
HTML文档中的标签通常是成对出现,以
<>
开始,>
结束,也有部分标签不是成对出现,如等等
、
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础标签title>
head>
<body>
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
<hr>
<p>山园小梅·其一
[ 宋 ] 林逋
众芳摇落独暄妍,占尽风情向小园。
疏影横斜水清浅,暗香浮动月黄昏。
霜禽欲下先偷眼,粉蝶如知合断魂。
幸有微吟可相狎,不须檀板共金尊。p>
<hr>
<p>山园小梅·其一 <br>
[ 宋 ] 林逋<br>
众芳摇落独暄妍,占尽风情向小园。<br>
疏影横斜水清浅,暗香浮动月黄昏。<br>
霜禽欲下先偷眼,粉蝶如知合断魂。<br>
幸有微吟可相狎,不须檀板共金尊。p>
<hr>
<p>山园小梅·其一p>
<p> [ 宋 ] 林逋p>
<p> 众芳摇落独暄妍,占尽风情向小园。p>
<p> 疏影横斜水清浅,暗香浮动月黄昏。p>
<p> 霜禽欲下先偷眼,粉蝶如知合断魂。p>
<p> 幸有微吟可相狎,不须檀板共金尊。p>
<hr>
<strong>粗体strong>
<br>
<em>斜体em>
<br>
<strong><em>加粗斜体em>strong>
<hr>
<p>空 格p>
<p>空 格p>
<p>大于号:> >p>
<p>小于号:< <p>
<p>分号:"" ""p>
<p>版权符号:©p>
body>
html>
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题,即: 到
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
单词 head 的缩写,意为:头部、标题
一个标签独占一行
标签语义:作为标题使用,并且依据重要性递减
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示,在 HTML 标签中, 标签用于定义段落,它可以将整个网页分为若干个段落
<p>我是一个段落标签p>
单词 paragraph 的缩写,意为:段落
文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保有空隙
标签语义:可以把 HTML 文档分割为若干段落
在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签
<br>
单词 break 的缩写,意为:打断、换行
是个单标签
标签只是简单地开始新的一行,跟段落不一样,所以不会产生段间距
标签语义:强制换行
<hr>
在网页中,有时需要为文字设置粗体、斜体或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示
<strong>粗体strong>
<br>
<em>斜体em>
<br>
<strong><em>加粗斜体em>strong>
标签语义:突出重要性,比普通文字更重要
标签 | 语义 | 说明 |
---|---|---|
|
加粗 | |
|
倾斜 | |
|
删除线 | |
|
下划线 |
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的文字,就需要使用注释标签
HTML 中的注释以: 结尾
注释标签里面的内容是给程序员看的,这个代码是不执行不显示到页面中的
在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代
特殊字符 | 描述 | 字符的代码 |
---|---|---|
|
空格符 | |
< |
小于号 | < |
> |
大于号 | > |
& |
和号 | & |
± |
正负号 | ± |
× |
乘号 | × |
÷ |
除号 | ÷ |
© |
版权符号 | © |
² |
上标 |
|
₂ |
下标 |
|
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SJeTndll-1680851035990)(./assets/2.2.7.png)]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签title>
head>
<body>
<img alt="替换文本" height="500px" src="../../resources/image/玄子头像.png" title="标题" width="500px">
<img alt="替换文本" height="500" src="../resources/玄子头像.png" title="标题" width="500">
body>
html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1CHD06Yy-1680851035992)(./assets/2.3.png)]
在 HTML 标签中,
标签用于定义 HTML 页面中的图像
<img alt="替换文本" height="图像尺寸" src="图像URL" title="标题" width="500px">
单词 image 的缩写,意为图像
属性名 | 属性值 | 说明 |
---|---|---|
src |
图片路径 | 必须属性 |
alt |
文本 | 替换文本,图片无法显示时的替换文字 |
title |
文本 | 提示文本,鼠标悬浮到图像时显示文字 |
width |
尺寸 | 设置图像的宽度 |
height |
尺寸 | 设置图像的高度 |
border |
尺寸 | 设置图像的边框粗细 |
key="value"
格式,属性="属性值"
以引用文件所在位置为参考基础,而建立出目录路径
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | . |
|
下一级路径 | / |
|
上一级路径 | ../ |
|
指目录下的绝对位置,直接到达目的位置,通常是从盘符开始的路径
Windows 系统的绝对路径:
F:\html\img\logo.png
网络地址:
https://www.qijishow.com/
/
(正斜杆),绝对路径为 \
(反斜杆)/
正斜杆)DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签title>
head>
<body>
<a href="" name="xz">顶部a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题">点击在新窗口打开03a>
<br>
<a href="03_图像标签.html" target="_self" title="标题">点击在本窗口打开03a>
<hr>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"
src="../../resources/image/玄子头像.png" title="标题"
width="500px">a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"
src="../../resources/image/玄子头像.png" title="标题"
width="500px">a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"
src="../../resources/image/玄子头像.png" title="标题"
width="500px">a>
<br>
<hr>
<a href="#xz">点击跳转到顶部a>
<br>
<a href="mailto:[email protected]">点击邮箱联系a>
body>
html>
在 HTML 标签中, 标签用于定义超链接,作用是从一个页面链接到另一个页面
<a href="跳转目标" target="新窗口跳转方式">内容a>
单词 anchor 的缩写,意为:锚
属性 | 作用 |
---|---|
href |
用于指定链接目标的 URL 地址(必须属性) 当标签应用 href 属性时,它就具有了超链接的功能 |
target |
用于指定链接页面的打开方式_blank :新页面打开链接_self :此页面打开链接(默认值) |
奇迹秀
首页
首页"
,当用户点击链接时,网页不会任何效果.exe
、.zip
等),便会下载这个文件点击邮箱联系
直接打开本地默认邮箱软件DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素&块元素title>
head>
<body>
<a href="#">a标签a>
<a href="#">a标签a>
<img alt="" height="20px" src="../../resources/image/玄子头像.png" width="20px">
<img alt="" height="20px" src="../../resources/image/玄子头像.png" width="20px">
<hr>
<h3>标题标签h3>
<h4>标题标签h4>
<p>p标签p>
<p>p标签p>
body>
html>
块元素
、
-…
行内元素
、、…
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签title>
head>
<body>
<ol>
<li>JAVAli>
<li>HTMLli>
<li>CSSli>
<li>SQLli>
ol>
<hr>
<ul>
<li>JAVAli>
<li>HTMLli>
<li>CSSli>
<li>SQLli>
ul>
<hr>
<dl>
<dt>开发dt>
<dd>JAVAdd>
<dd>HTMLdd>
<dd>CSSdd>
<dd>SQLdd>
dl>
body>
html>
列表最大的特点就是:整齐、整洁、有序、它作为布局会更加自由和方便。在实际开发中凡是遇到排列整齐的简洁内容,都可以使用列表来进行布局
标签名 | 定义 | 使用场景 |
---|---|---|
|
无序标签 | 常用于显示网站导航、树形菜单、侧边栏新闻列表等内容 |
|
有序标签 | 常用于显示带有顺序编号的内容 |
|
自定义标签 | 常用于显示带有标题和标题解释性的内容 |
标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用 标签定义(开发中经常使用)
<ul>
<li>JAVAli>
<li>HTMLli>
<li>CSSli>
<li>SQLli>
ul>
,直接在
标签中输入其他标签或者文字的做法是不被允许的,列表中的任何内容都应该放在 li
中
与
附:去除 li 前符号的方法:
style="list-style: none;"
有序列表即为有序排列顺序的列表,其各个列表项会按照一定的顺序排列定义(开发中不太常用)
在 HTML 标签中,
标签用于定义有序列表,列表排序以数字来显示,并且使用 标签来定义列表项。
<ol>
<li>JAVAli>
<li>HTMLli>
<li>CSSli>
<li>SQLli>
ol>
中只能嵌套
标签中输入其他标签或者文字的做法是不被允许的
与
附:去除 li 前符号的方法:
style="list-style: none;"
自定义列表常用于对术语或名词进行解释、描述和展开,定义列表的列表项前没有任何项目符号(开发中常用)
在 HTML 标签中,
标签用于定义描述列表(或定义列表),该标签会与 (定义项目/名字)和
(描述每一个项目/名字)一起使用
<dl>
<dt>开发dt>
<dd>JAVAdd>
<dd>HTMLdd>
<dd>CSSdd>
<dd>SQLdd>
dl>
里面只包含
、
和
个数没有限制,经常是一个
对应多个
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签title>
head>
<body>
<table border="1px">
<tr>
<td>1-1td>
<td>1-2td>
<td>1-3td>
tr>
<tr>
<td>2-1td>
<td>2-2td>
<td>2-3td>
tr>
<tr>
<td>3-1td>
<td>3-2td>
<td>3-3td>
tr>
table>
<hr>
<table border="1px">
<tr>
<td colspan="3">学生成绩td>
tr>
<tr>
<td rowspan="2">玄子td>
<td>JAVAtd>
<td>100td>
tr>
<tr>
<td>HTMLtd>
<td>99td>
tr>
<tr>
<td rowspan="2">玉玉诏td>
<td>JAVAtd>
<td>90td>
tr>
<tr>
<td>HTMLtd>
<td>80td>
tr>
table>
body>
html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IYRjAxhc-1680851035993)(./assets/image-20220121161018164.png)]
为什么使用表格
简单通用
结构稳定
基本结构
行
列
单元格
表格不是用来布局页面的,而是用来展示数据的。表格常用于表单数据的 “布局”
<table>
<tr>
<td>单元格td>
tr>
table>
是用于定义表格的标签
用于定义表格中的行,必须嵌套在
标签中
用于定义表格中的单元格,必须嵌套在
标签中table data
一般表头单元格位于表格的第一行或第一列,作用是:突出重要性,表头单元格里面的文本内容默认加粗居中显示
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成:表格头部和表格主体两大部分 在表格标签中,分别用: 特殊情况下,可以把多个单元格合并为一个单元格,这里会最简单的合并单元格即可。 合并单元格的方式: 合并单元格三步曲: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m6Ohrn1s-1680851035993)(./assets/2.7.6.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UZByn07u-1680851035993)(./assets/2.7.7.png)] 浏览器不支持 浏览器不支持 使用表单的目的是收集用户信息。在网页中,需要跟用户进行交互,收集用户资料,此时就需要表单 注册 登录 调查问卷 填写订单 搜索框 …… 表单域是一个包含表单元素的区域。在 HTML 标签中, post 方式 不会改变浏览器地址栏状态 安全性高 常用于保存、修改、删除数据 get 方式 会改变浏览器地址栏状态 安全性低 常用于查询数据 在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件 用于定义接收单行文本信息的输入框,如账号、证件号码等 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0XAhVKmQ-1680851035994)(./assets/2.11.7-1671887485070-8.png)] 用于定义接收隐秘信息的输入文本框,如登录密码 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YGnRMVA7-1680851035994)(./assets/2.11.8.png)] 用于定义只能选中一个选项的选择性内容,如性别、单选题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y4CdOfLN-1680851035995)(./assets/2.11.9.png)] 用于定义可选择多个选项的选择性内容,如爱好、掌握的技能 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VOR2qWGu-1680851035995)(./assets/2.11.10.png)] HTML5中提供了三种按钮,用于处理不同场景下的点击事件 普通按钮:与点击事件配合使用,触发绑定的方法 提交按钮:用于提交表单信息 重置按钮:用于清除表单中已填的信息 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Md2Tzi9f-1680851035995)(./assets/2.11.7.png)] 用于实现文件上传功能 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-08d9OFtm-1680851035995)(./assets/2.11.12.png)] 专门用于输入邮箱地址的文本框,提交时自动验证邮箱格式是否正确 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yH70LXYg-1680851035996)(./assets/2.11.13.png)] 专门用于输入URL地址的文本框,提交时自动验证URL是否有效 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yxyjx27k-1680851035996)(./assets/2.11.14.png)] 专门用于输入数字的文本框,无法输入非数字内容 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3yVBCr2a-1680851035996)(./assets/2.11.15.png)] 用于定义滑动条样式的数字输入控件,实现与“数字”输入框相同效果的功能 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NegXKeEH-1680851035997)(./assets/2.11.16.png)] 专门用于输入搜索关键词,输入搜索的关键词后,搜索框后面会出现一个“×”按钮,单击“×”按钮可以清除输入的内容 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yi8Qy1lv-1680851035997)(./assets/2.11.17.png)] 用于定义一组可选择的数据项 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BSO1WZVY-1680851035997)(./assets/2.11.18.png)] 用于定义可以输入多行内容的文本域,如个人简介、发表的评论 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J96QeRL7-1680851035997)(./assets/2.11.19.png)] cols属性指定的是文本域的宽度,而不是列数,rows属性指定的则是行数 如果要禁止拉伸文本框大小,则设置: 隐藏域 只读 禁用 用于定义一些实际存在,但无需向用户显示的页面内容 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oe4jbBAY-1680851035998)(./assets/2.11.21.1.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-boClED1M-1680851035998)(./assets/2.11.21.2.png)] 在浏览器中看不到隐藏域,但是在提交表单时可以看到隐藏域的内容被提交至服务器 用于定义不允许用户修改的内容和符合一定条件后才可以点击的按钮 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BTeMZtDx-1680851035998)(./assets/2.11.22.png)] 在W3CHTML5标准中,规定对于布尔类型的属性,属性值可以省略。例如,列表框的默认选中,可以写为selected。同理,复选框的默认选中,可以写为checked,只读可以写为readonly,禁用可以写为disabled 为表单元素添加标注后,单击标注的文本内容,浏览器会自动将焦点转移到与该标注相关的表单元素上 placeholder required pattern 用于为 input 类型的文本框提供提示,如内容示例、数据类型等,适用的type类型:text、search、url、email 和 password [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XsvIO5Y1-1680851035999)(./assets/2.11.25.1.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZYz2fo3-1680851035999)(./assets/2.11.25.2.png)] 用于规定输入框填写的内容不能为空,适用的 type 类型:text、password、email、search、url、number、checkbox、radio 和 file 等类型 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WSJiK4VI-1680851035999)(./assets/2.11.26.png)] 用于验证用户输入的内容是否与所定义的正则表达式相匹配,适用的 type类型:text、password、email、search 和 url 等类型 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MQMFPcwD-1680851035999)(./assets/2.11.27.png)] 玄子Share-CSDN博客首页 https://blog.csdn.net/qq_62283694?spm=1000.2115.3001.5343 标签表示 HTML 表格的表头部分 table head
的缩写
<table>
<tr>
<th>姓名th>
<th>性别th>
<th>年龄th>
tr>
table>
2.7.4 表格属性
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240">
table>
属性名
属性值
描述
align
left
、center
、right
规定表格相对周围元素的对齐方式默认
left
border
1
或 ""
规定表格单元是否拥有边框,默认为"",表示没有边框
cellpadding
像素值
规定单元边沿与其内容之间的空白,默认1像素
cellspacing
像素值
规定单元格之间的空白,默认2像素
width
像素值 或 百分比
规定表格的宽度
height
像素值 或 百分比
规定表格的高度
2.7.5 表格结构标签
标签表示表格的头部区域,
标签表示表格的主体区域,这样可以更好的分清表格结构
:用于定义表格的头部, 内部必须拥有
标签,一般是位于第一行,且一般 标签中推荐放置 标签
:用于定义表格的主体,主要用于放数据本体
标签中
<table>
<thead>
<tr>
<th>姓名th>
<th>性别th>
<th>年龄th>
tr>
thead>
<tbody>
<tr>
<td>玄子td>
<td>男td>
<td>16td>
tr>
tbody>
table>
2.7.6 合并单元格
rowspan="合并单元格的个数"
colspan="合并单元格的个数"
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合并单元格title>
head>
<body>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td>td>
<td colspan="2">td>
tr>
<tr>
<td rowspan="2">td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
tr>
table>
body>
html>
2.7.7 综合案例
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例title>
head>
<body>
<table width="400px" height="200px" align="center" border="1" cellpadding="10" cellspacing="5">
<thead>
<tr>
<th>oneth>
<th>twoth>
<th>threeth>
<th>fourth>
tr>
thead>
<tbody>
<tr>
<td rowspan="3">1td>
<td colspan="3">234td>
tr>
<tr>
<td>2td>
<td>3td>
<td>4td>
tr>
<tr>
<td>2td>
<td>3td>
<td>4td>
tr>
tbody>
table>
body>
html>
2.8 音视频标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音视频标签title>
head>
<body>
<video autoplay controls src="../../resources/video/G.E.M.邓紫棋-GLORIA.mp4">video>
<audio autoplay controls src="../../resources/audio/G.E.M.邓紫棋-天空没有极限.flac">audio>
body>
html>
2.8.1 视频标签
<video src="视频路径" controls="controls">video>
属性名
属性值
描述
width
像素
设置视频播放器的宽度
height
像素
设置视频播放器的高度
src
URL
要播放的视频的 URL
controls
controls
显示控件:播放/暂停、进度条、时间、音量以及全屏等常用控件
autoplay
autoplay
视频就绪后马上播放
loop
loop
循环播放
<video src="video/video.mp4" controls="controls" >
你的浏览器不支持video标签
video>
标签时,将会显示标签中间的文字
2.8.2 音频标签
<audio src="音频路径" controls="controls">audio>
属性名
属性值
描述
src
URL
要播放的音频的 URL
controls
controls
显示控件:播放/暂停、音量等常用控件
autoplay
autoplay
音频就绪后马上播放
loop
loop
循环播放
<audio src="music/music.mp3" controls>你的浏览器不支持audio标签audio>
标签时,将会显示标签中间的文字
2.8.3 引入多条媒体源
标签用于引入多个不同格式的媒体<audio controls loop>
<source src="music/music.mp3"type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio标签
audio>
2.9 网页结构分类
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页结构分类title>
head>
<body>
<header>
<h1>网页头部h1>
header>
<section>
<h1>网页主体h1>
section>
<footer>
<h1>网页底部h1>
footer>
body>
html>
2.9.1 解释
名
说明
header
标题头部区域的内容(用于页面或页面中的一块区域)
footer
标记脚部区域的内容(用于整个页面或页面的一块区域)
section
Web页面中的一块独立区域
article
独立的文章内容
aside
相关内容或应用(常用于侧边栏)
nav
导航类辅助内容
2.10 内联框架标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联标签title>
head>
<body>
<iframe frameborder="1" height="500px" name="xz" src="01_网页基本标签.html" width="500px">iframe>
<br>
<a href="02_基础标签.html" target="xz">点击跳转02a>
<br>
<a href="03_图像标签.html" target="xz">点击跳转03a>
body>
html>
标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面
2.10.1 iframe 语法
<iframe src="页面地址" width="宽度" height="高度" name="名称">iframe>
属性名
属性值
src
嵌入页面的url地址
width
嵌入页面的宽度
height
嵌入页面的高度
name
嵌入页面的名称
2.10.2 隐藏 iframe 滚动条
<div style="width: 400px; overflow: hidden">
<iframe height="480" src="https://www.qijishow.com/" width="415">您的浏览器不支持iframe>
div>
2.11 表单标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签title>
head>
<body>
<form action="11_表单标签.html" method="get">
<p>用户名:<input name="admin" type="text">p>
<p>密 码:<input name="pwd" type="password">p>
<p>按钮:
<input type="button" value="按钮">
<input height="40px" name="img" src="../../resources/image/玄子头像.png" type="image" width="40px">
<input type="submit">
<input type="reset">
p>
<p>性别:
<input checked id="1" name="sex" type="radio" value="boy">男
<label for="0"><input id="0" name="sex" type="radio" value="girl">女label>
p>
<p>
爱好:
<input name="hobby" type="checkbox" value="Java">Java
<input checked name="hobby" type="checkbox" value="HTMl">HTMl
<input name="hobby" type="checkbox" value="CSS">CSS
<input name="hobby" type="checkbox" value="SQL">SQL
p>
<p>
提交文件:
<input name="fill" type="file">
p>
<p>
邮箱:
<input name="email" type="email">
p>
<p>
URL:
<input name="url" type="url">
p>
<p>
数字:
<input max="100" min="0" name="num" step="5" type="number" value="0">
p>
<p>
滑块:
<input max="100" min="0" name="range" step="10" type="range" value="50">
p>
<p>
搜索:
<input name="search" type="search">
p>
<p>
地区:
<select name="select">
<option value="hn">河南option>
<option value="hb">河北option>
<option selected value="hn">湖南option>
<option value="hb">湖北option>
select>
p>
<p>
反馈:
<textarea cols="20" name="txt" rows="4">textarea>
p>
<hr>
<p>表单应用p>
<p>
只读:
<input name="readonly" readonly type="text" value="你好!">
p>
<p>
禁用:
<input disabled name="disabled" type="reset" value="按钮">
p>
<p>
隐藏:
<input hidden name="hidden" type="text" value="你好!">
p>
<hr>
<p>表单初级验证p>
<p>
必填:
<input name="required" required type="text">
p>
<p>
提示:
<input name="placeholder" placeholder="请输入账号!" type="text">
p>
<p>
正则:
<input name="pattern" pattern="/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/" type="text">
p>
form>
body>
html>
2.11.1 为什么需要表单
2.11.2 使用场景
2.11.3 表单域
标签用于定义表单域,以实现用户信息的收集和传递
会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
form>
属性名
属性值
作用
action
url
地址用于指定接收并处理表单数据的服务器程序的 url 地址
method
get
/ post
用于设置表单数据的提交方式,其取值为 get 或 post
get:提交数据 url 栏可见
post:提交数据 url 栏不可见
name
名称
用于指定表单的名称,以区分同一个页面中的多个表单域
2.11.4 表单控件
<input type="text" name="fname" value="text"/>
2.11.5 Input 标签常用属性
属性名
描述
type
指定元素的类型
size
元素的初始宽度
maxlength
type 为 text 或 password 时,输入的最大字符数
checked
type 为 radio 或 checkbox 时,指定按钮是否是被中
name
定义 input 元素的名称
value
规定 input 元素的值,也就是提交到服务器的值
2.11.6 Type 常用属性
属性值
说明
text
定义单行的输入框,默认宽度为20个字符
password
定义密码框,该字段中的字符被掩码
radio
定义单选按钮,在一组单选按钮中,要求它们必须拥有相同的 name
checkbox
定义复选框,在一组多选中,要求它们必须拥有相同的 name
button
定义可点击按钮
submit
定义提交按钮,提交按钮会把表单数据发送到服务器
reset
定义重置按钮,重置按钮会清除表单中的所有数据
file
定义支持文件上传的“浏览”按钮
email
定义输入邮箱地址的文本框
url
定义输入URL地址的文本框
number
定义用于输入数字类型内容的文本框
range
定义用于输入包含一定范围内的数字值的文本框
search
定义用于输入搜索关键字的文本框
hidden
定义隐藏的输入字段
image
定义图像形式的提交按钮
2.11.7 普通文本框
属性名
说明
size
设置文本框长度
maxlength
指定输入的数据长度
value
属性指定默认值
<form>
<p>名字:<input maxlength="20" name="firstName" size="30" type="text">p>
<p>姓氏:<input name="lastName" type="text" value="王">p>
form>
2.11.8 密码框
<form>
<p>名字:<input maxlength="20" name="firstName" size="30" type="text">p>
<p>姓氏:<input name="lastName" type="text" value="玄子">p>
<p>密码:<input type="password">p>
form>
2.11.9 单选按钮
<form>
性别:
<input checked name="sex" type="radio" value="男"/> 男
<input name="sex" type="radio" value="女"/> 女
form>
2.11.10 复选框
<form>
请选择你会的语言:
<p><input checked name="language" type="checkbox" value="Chinese">中文p>
<p><input checked name="language" type="checkbox" value="English">英文p>
<p><input name="language" type="checkbox" value="Japanese">日文p>
<p><input name="language" type="checkbox" value="Espana">西班牙语p>
form>
2.11.11 按钮
<form>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input src="image/玄子头像.png" title="图片按钮" type="image" width="5%">
form>
2.11.12 文件域
<form>
<p><input type="file">p>
<p><input type="submit" value="上传">p>
form>
2.11.13 邮箱
<form>
<p>邮箱:<input type="email">p>
<p><input type="submit" value="提交">p>
form>
2.11.14 网址
<form>
<p>网址:<input type="url">p>
<p><input type="submit" value="提交">p>
form>
2.11.15 数字
属性
属性值
描述
max
number
规定允许的最大值
min
number
规定允许的最小值
value
number
规定的默认值
step
number
规定输入字段的合法数字间隔
<form>
<p>数字:<input max="100" min="10" step="2" type="number">p>
<p><input type="submit" value="提交">p>
form>
2.11.16 滑块
属性
属性值
描述
max
number
规定允许的最大值
min
number
规定允许的最小值
value
number
规定的默认值
step
number
规定输入字段的合法数字间隔
<form>
<p>滑块:<input max="100" min="10" step="10" type="range">p>
<p><input type="submit" value="提交">p>
form>
2.11.17 搜索框
<form>
<p>搜索框:<input type="search">p>
<p><input type="submit" value="提交">p>
form>
2.11.18 列表框
<form>
请选择你想去的城市:
<select name="city">
<option selected="selected" value="北京">北京option>
<option value="上海">上海option>
<option value="广州">广州option>
<option value="深圳">深圳option>
select>
form>
2.11.19 多行文本域
<form>
<h3>山园小梅·其一h3>
<textarea cols="50" name="textarea" rows="5">
山园小梅·其一
[ 宋 ] 林逋
众芳摇落独暄妍,占尽风情向小园。
疏影横斜水清浅,暗香浮动月黄昏。
霜禽欲下先偷眼,粉蝶如知合断魂。
幸有微吟可相狎,不须檀板共金尊。
textarea>
form>
style="resize: none"
2.11.20 表单的高级应用
2.11.21 隐藏域
<form method="get">
<p>账号:<input name="user" type="text">p>
<p>密码:<input name="pass" type="password">p>
<p><input name="userID" type="hidden" value="123">p>
<p><input type="submit" value="提交">p>
form>
2.11.22 只读与禁用
<form>
<p>账号:<input name="user" readonly type="text" value="XuanZi">p>
<p>密码:<input name="pass" type="password">p>
<p><input disabled type="submit" value="提交">p>
form>
2.11.23 标注
<form>
性别:
<label for="boy">男label>
<input id="boy" name="sex" type="radio">
<label for="girl">女label>
<input id="girl" name="sex" type="radio">
form>
标签的 for 属性应当与相关元素的 id 属性相同
2.11.24 表单验证属性
2.11.25 placeholder 属性
<form>
账号:<input placeholder="例如:张三、Marry" type="text">
form>
2.11.26 required 属性
<form>
<p>账号:<input required type="text">p>
<p><input type="submit" value="提交">p>
form>
2.11.27 pattern 属性
<form>
<p>请输入您的账号:
<input name="user" pattern="^[a-zA-Z0-9_-]{4,16}$" type="text"/>
4~16位(字母、数字、_、-)
p>
<p><input type="submit" value="提交">p>
form>
2.12 HTML 标签大全
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML总结title>
head>
<body>
<a href="https://blog.csdn.net/qq_62283694?spm=1000.2115.3001.5343">点击跳转CSDN博客a>
body>
html>