HTML5基础

学习&实践爱好者

已于 2023-04-17 17:41:47 修改

阅读量1.2k

点赞数

分类专栏： HTML5与CSS3 文章标签： html5 前端服务器

于 2021-02-14 08:55:09 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/113805616

版权

HTML5与CSS3 专栏收录该内容

76 篇文章 14 订阅

订阅专栏

HTML5基础

HTML指的是超文本标记语言(Hyper Text Markup Language)，是用来描述网页的一种语言，由HTML标记和纯文本构成文本文件。当浏览器打开网页时，会对网页中的HTML代码进行解释，最终显示为我们看到的前端页面。

HTML是标准通用标记语言(Standard Generalized Markup Language，SGML)下的一个应用，也是一种标准规范。

统一资源定位符URL（uniform resource locator）

URL俗称为网址，格式为：<协议>://<域名或IP>:<端口>/<路径>。<协议>://<域名或IP>是必需的，<端口>/<路径>有时可省略。

【一个完整的URL包括以下几部分：

scheme://host.domain[:port]/path/filename [? parameters][#hash]

1. scheme，协议部分：该URL的协议部分为“http（超文本传输协议）”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，HTTPS（超文本传输安全协议），FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符。

2. host，主机名：可以向浏览器提供文件站点的名称。www 是我们常见的主机名，例如百度的网址 https://www.baidu.com/、淘宝的网址 https://www.taobao.com/ 使用的都是 www 的主机名。除此之外，还有很多网站使用的是其它主机名。网易云音乐的网址 https://music.163.com/ 的主机名是 music。

3 .domain，域名部分：域名和主机名一起使用，被用来定义服务器的地址。域名中的

.com 供商用的国际域名

.cn 供商用的中国域名

.net 用于网络供应服务商(系统类的经常使用NET域名)

.org 用于官方组织

.edu 用于教育院校

.gov 用于政府机构

也可以使用IP地址作为域名使用。

4. port，端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口。

HTTP => 默认端口号80

HTTPS => 默认端口号443

FTP => 默认端口号21

5. path，目录（路径）部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”。

6. filename，文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。一般首页（也叫导航页）都命名为index.html，文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名。

7. parameters，参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。如： http://www.baidu.com/index.html?name=mo&age=25#dowel中的name=mo&age=25。

8. hash，哈希值部分：锚点定位：从“#”开始到最后。不是一个URL必须的部分。

参见 https://blog.csdn.net/Geezer_007/article/details/100524922

一文看懂：网址，URL，域名，IP地址，DNS，域名解析_开源Linux的博客-CSDN博客】

HTML文档结构

一个HTML文档（也称为HTML文件）主要由html、head、body部分组成，分别用<html>…</html>、<head>… </head>、<body>…</body>三组标签组成，一个简单的HTML文档（HTML网页）结构如下：

说明：

1. <!DOCTYPE HTML>是HTML文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

2.<head>… </head>、<body>…</body> 标签要嵌套在<html>…</html>标签内部，其中<head>… </head>和<body>…</body>处于同一层级。

3.<html></html> 称为HTML根标签，所有的网页标签都在<html></html>中。

4.<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签。

5.在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容最终会在浏览器中显示出来。换句话说，网页中所显示的文字、图像、链接等内容绝大多数都要通过在body部分嵌入各个标签进行描述。

6.大多数HTML标签以一对尖括号“< >”作为起始标签，以“</>”作为结束标签。比如<body>…</body>，其中<body>叫做起始标签，</body>叫做结束标签。<body>和</body>标签中包含的内容，用来描述网页的主体。

7.标签不一定成对儿出现，部分标签是单一的，也可以完成特定的功能，比如<br/>，即可以完成强制换行功能。

8.HTML中标签书写大小写无关，HTML不区分大小写，比如<head>和<HEAD>尽管大小写不同，但是表达的含义一样。

上面的代码用浏览器打开时中文可能显示为乱码，为让让浏览器正常显示中文可在在<head>里面加上<meta>标签，如 <meta charset="utf-8">

下面是加入<meta>标签后的代码：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>标题内容</title>
    </head>
    <body>
        页面内容
    </body>
</html>

保存为文件名Demo1.html，用浏览器打开显示如下：

关于如何编辑运行HTML网页文件，参见如何编辑运行HTML网页文件（HTML编辑工具使用介绍）https://blog.csdn.net/cnds123/article/details/113831256

初学者解惑1：严格来说元素和标签不是一回事，但是许多资料，除非特别强调，并不严格区分，如将<title>标签（tag) 称为<title>元素（element）。详见https://blog.csdn.net/cnds123/article/details/125745562

初学者解惑2：HTML之<title>与<h1>~<h6>标签

title和heading在中文里都翻译为标题，仅看中文容易混淆，在HTML中两者是有区别的：

<title>标签：定义文档的标题（title），写在网页的head标签部分，作为网页的标题，可以用于添加到浏览器的收藏夹，而不出现在页面内容里面。

<h1>~<h6>标签：写在文章正文的标题（heading）部分，是展示给用户看的。<h>标签从<h1>到<h6>共6级，其中<h1>是最高级别的标题，<h6>是最低级别的标题。<h1>标签一般作为网页文章的标题。一般出现在body标签部分，有次序的使用它们，可以提高文章表达层次。

下面给出<title>与<h1>使用示例源码：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
    </head>
    <body>
        <h1>文章h1级标题</h1>
        <h3>文章h3级标题</h3>
        这里是文章内容
    </body>
</html>

保存为文件名DemoA.html，用浏览器打开显示如下：

HTML之注释

注释标签  用于在 HTML 插入注释。例如：

<!DOCTYPE html>

<!-- html中的标签都是闭合标签闭合标签包含双闭合和单闭合
双闭合有:<html></html>

单闭合有:<meta> 或者这样写<meta/>也可以
-->

这是我们的文档
</body>

</html>

HTML属性

HTML属性一般都出现在起始标签内部（如果是单一标签则出现在单一标签内部），有时候一个标签内部可以拥有多个属性，用来描述标签括起来的内容的某些方面的特征，比如修饰字体大小、颜色等等。关于HTML属性书写有以下语法要求：

1．每个属性都会有一个值，称为属性值。

2．该值要用双引号括起来（输入法半角状态下输入的双引号）。

3．属性与属性之间要有至少一个空格的分隔距离。

4．属性名与属性值要成对出现，缺一不可。

使用属性的语法格式如下：

<标签名属性1="属性值" 属性2="属性值"…属性n="属性值">内容</标签名>

属性应用实例

上述代码中的<font>标签是字体标签，在该标签内部分别使用了size、color和face三个属性修饰<font>标签所作用的文字的大小、颜色和字体。

保存为文件名Demo2.html，用浏览器打开显示如下：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>标题内容</title>
    </head>
    <body>
        <font  size=“+6” color=“#FF0000” face=“宋体”>页面内容</font>
    </body>
</html>

保存为文件名Demo2.html，用浏览器打开显示如下：

HTML代码书写规范

HTML代码包含很多标签、属性，在书写HTML代码时要遵循以下规范：

1.标签可以嵌套使用，但主要标签间的前后匹配，避免引起交叉而出现语法错误。

2.HTML代码不区分大小写，但在一个项目中尽量使用同一种风格，即选择大写或小写模式中的一种。

3.标签中的属性都会有其属性值，属性值用""括起来。

4.编写代码时，为了便于阅读和理解网页结构，一般采用缩进风格。不同级的标签可以通过缩进显示其对应关系。

5.HTML文件的类型名可以是.htm或者.html，一般采用.html作为扩展名。

6.网站中的首页名一般是index.html或者default.html。

网页文字

字体标签font

设置文字的字体、字号、颜色等属性，基本语法

标题文字格式

<h#>标题文字</h#>

符号#用来指定标题文字大小，取1~6的整数值。数字越小标题字越大。

align属性，定义标题对齐方式

对齐方式:left、center、right、justify

也可以使用CSS样式来定义对齐方式

在HTML文件中，添加空格需要使用代码“ ”

“nbsp”是指Non Breaking Space，空格数量与“ ”个数相同。

特殊符号表

特殊符号	符号代码	说明	特殊符号	符号代码	说明
<	<	小于	®	®	注册商标
>	>	大于	TM	™	商标
╳	×	乘号	£	£	镑
÷	÷	除号	¥	¥	人民币/日元
&	&	和号	€	€	欧元
“	"	引号	§	§	小节
©	©	版权

文本格式化标签

b、i、u用来设置文本粗体、斜体、下划线

基本语法

<b>加粗的文字</b>

<u>添加下划线的文字</u>

说明

以上基本语法都是属于HTML标记的方法。

1）成对的<b></b>标记表示加粗文字显示。

2）成对的<i></i>标记表示斜体文字显示。

3）成对的<u></u>标记表示给文字添加下划线。

在HTML文件中，成对的<sup></sup>标记表示上标，成对的<sub></sub>标记表示下标。

文本格式化的例子

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>文本格式化</title>
    </head>
    <body>
        <b>加粗文本</b><br><br>
        <i>斜体文本</i><br><br>
        这是 <sub> 下标</sub> 和 <sup> 上标</sup>
    </body>
</html>

保存为文件名Demo3.html，用浏览器打开显示如下：

由<p>标记所标识的文字代表同一个段落的文字，浏览器会自动地在段落的前后添加空行。基本语法

说明

利用该标记可以对网页中的文本信息进行段落定义

但不能进行段落格式的定义

<p> 是块级元素

<p></p>是成对使用的

标记<br/>起到了换行的作用;

标记<nobr>表示强制不换行

基本语法

<br/>

说明

<br/>是单标记，一次换行使用一个<br/>，多次换行可以使用多个<br/>。

<nobr>…</nobr>之间的内容不换行。

<hr/>标记可以插入水平分隔线

滚动字幕标签marquee

<marquee>和</marquee>之间的内容就是滚动内容。基本语法：

说明

<marquee>属性：

behavior属性:参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次。

direction属性:文字滚动的方向，参数值有down、left、right、up，分别代表滚动方向向下、向左、向右、向上。

loop属性:loop属性决定滚动文字的滚动次数，缺省是无限循环。参数值可以是任意的正整数，如果设置参数值为-1或infinite时将无限循环。

scrollamount和scrolldelay属性:决定文字滚动的速度(scrollamount)和延时(scrolldelay)，参数值都是正整数。

bgcolor设定活动字幕的背景颜色。如：

<marquee bgcolor="#006699">设定活动字幕的背景颜色</marquee>

<marquee bgcolor="red">设定活动字幕的背景颜色</marquee>

滚动字幕例子

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>文本滚动</title>
    </head>
    <body>
        <marquee behavior="alternate" loop="2" bgcolor="red"  >
            提示：<br>
           ·早晨好啊！<br>
           ·空气好清新啊
        </marquee>
    </body>
</html>

保存为文件名Demo4.html，用浏览器打开显示如下：

列表

列表在HTML文档中应用的目的是将一系列文字信息或者图片信息集合在一起，进行有序或无序地罗列展示。这样做有助于将不同的内容分类呈现，条例清晰。在Web前端开发中，列表经常用于导航菜单的设计。

HTML中列表有三种形式：无序列表、有序列表和自定义列表。

无序列表

无序列表中各列表项没有先后次序的要求，列表项之间是并列关系。无序列表中要在各列表项前加上项目符号，以表示列表项的分类关系。

基本语法

…

</ul>

说明

无序列表用<ul>和<li>两组标签共同表示，其中<ul>…</ul>标签用来产生列表，<li>…</li>标签用来表示无序列表中的列表项。

无序列表中列表项前的项目通过type属性来表示，type取值的不同决定了项目符号的样式，type属性的值与项目符号样式的对应如下：

（1）disc：项目符号为实心圆点（默认值）。

（2）circle：项目符号为空心圆点。

（3）square：项目符号为实心方块。

无序列表的例子

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>无序列表</title>
    </head>
    <body>
        <h4>Disc 项目符号列表：</h4>
        <ul type="disc">
            <li>苹果</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ul>  

        <h4>Circle 项目符号列表：</h4>
        <ul type="circle">
            <li>苹果</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ul>  
    </body>
</html>

保存为文件名Demo5.html，用浏览器打开显示如下：

有序列表

有序列表中的各列表项有先后顺序之分，在设计列表时，列表项前加上序号（例如阿拉伯数字或罗马数字等），有序列表经常用来描述一个有先后顺序的流程。

基本语法

…

</ol>

语法说明

一个有序列表的实现要通过<ol>和<li>两组标签来实现，其中<ol>…</ol>标签的作用是产生列表，<li>…</li>标签用来显示列表中的列表项。

有序列表中列表项的序号样式由type属性的值决定，type属性的值与列表项序号样式的对应如下：

1：项目序号为阿拉伯数字（默认值）。

i：项目序号为小写罗马数字。

I：项目序号为大写罗马数字。

a：项目序号为小写英文字母。

A：项目序号为大写英文字母。

通常有序列表的项目序号的起始值都是从1、i、I、a、A开始（根据type属性的值），如果想改变项目需要的起始值，可以通过指定start属性的值即可。

有序列表的例子

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>有序列表</title>
    </head>
    <body>
        <h4>数字列表：</h4>
        <ol>
            <li>苹果</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ol>  

        <h4>字母列表：</h4>
        <ol type="A">
            <li>苹果</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ol>  
    </body>
</html>

保存为文件名Demo5B.html，用浏览器打开显示如下：

自定义列表

相对于无序列表和有序列表的，自定义列表是指列表中的列表项没有任何形式的项目符号和序号，列表项通过缩进来显示内容的层次。

基本语法

<dl>

…

…

</dl>

语法说明

自定义列表由<dl>…</dl>、<dt>…</dt>和<dd>…</dd>三组标签组成，三组标签的含义如下：

（1）<dl>…</dl>标签用来创建自定义列表。

（2）<dt>…</dt>标签用来创建自定义列表中的顶层列表项。

（3）<dd>…</dd>标签用来创建由<dt>…</dt>标签所创建的顶层列表项下的二级列表项。相对于顶层列表项，二级列表项会有一定距离的左缩进，以显示二级列表项与顶层列表项层次的不同。

自自定义列表的例子

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>自定义列表</title>
    </head>
    <body>
        <h4>一个自定义列表：</h4>
        <dl>
            <dt>计算机</dt>
            <dd>- 用来计算的仪器</dd>
            <dt>显示器</dt>
            <dd>- 以视觉方式显示信息的装置</dd>
         </dl>
    </body>
</html>

保存为文件名Demo5C.html，用浏览器打开显示如下：

列表的嵌套

在HTML文件中，对于内容层次较多的情况可以使用列表的嵌套来实现。列表的嵌套是指在一个列表中还可以再插入列表。

列表的嵌套使用不仅能够解决单一列表无法表达内容层次的问题，还使内容的显示美观、清晰。

列表的嵌套可以是有序列表的嵌套，也可以是无序列表的嵌套，还可以是有序列表和无序列表混合嵌套，嵌套的层次也可根据内容情况嵌套多层。

注意：

（1）列表嵌套过程中一定要注意标签的配对问题，否则内容的显示层次可能达不到要求。

（2）每个嵌套的列表都会以进行左缩进显示。

（3）列表的嵌套深度不宜过大（一般2到3层为宜），否则浏览器显示会出现混乱。

列表的嵌套的例子

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>嵌套列表</title>
    </head>
    <body>
        <h4>一个嵌套列表：</h4>
        <ul>
            <li>咖啡</li>
            <li>茶
                <ul>
                    <li>红茶</li>
                    <li>绿茶</li>
                </ul>
           </li>
          <li>牛奶</li>
       </ul>
    </body>
</html>

保存为文件名Demo5D.html，用浏览器打开显示如下：

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

简单的表格的例子

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>简单的表格</title>
    </head>
    <body>
       <p>每个表格由 table 标签开始。</p>
       <p>每个表格行由 tr 标签开始。</p>
       <p>每个表格数据由 td 标签开始。</p>

       <h4>两行三列：</h4>
       <table border="1">
       <tr>
           <td>100</td>
           <td>200</td>
          <td>300</td>
       </tr>
       <tr>
          <td>400</td>
          <td>500</td>
          <td>600</td>
       </tr>
       </table>
    </body>
</html>

保存为文件名Demo6.html，用浏览器打开显示如下：

表单

表单可用于搜集不同类型的用户输入。<form> 元素定义 HTML 表单，表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本(text)、单选框(radio)、复选框(checkbox) 、提交按钮（submit）、重置按钮（reset）、密码域（password）等等。

input 标签（表单元素）语法基本格式：

其中：

type属性指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 、button等等，默认为 text。

name属性指定表单元素的名称。

HTML5中存在多种不同的输入框和按钮，通过设置input元素的type属性来实现。type为text表示input元素为一个单行文本框，是input元素的默认表现形式。

表单元素常见的属性：name属性指定表单元素的名称；maxlength属性设定用户能够输入的字符的最大数目；size属性设定了文本框能够显示的字符数目；value属性可以为输入框指定一个默认值；placeholder属性可以设置一段提示文字；readonly属性表示文本框只读；disabled属性表示不可编辑并显示为灰色；属性password用于输入密码，用户输入的字符在密码框中显示为"*"，但需要注意，在提交表单时，服务器收到的是明文密码，对于安全至关重要的网站和应用系统，应该考虑使用SSL/HTTPS对浏览器和服务器之间的通信内容加密。

type属性设置为submit、reset和button则会生成类似button元素那样的按钮。

1）submit：生成提交表单的按钮，支持属性：formaction、formenctype、formmethod、formtarget和formnovalidate，这些属性和button元素的同名属性用法相同，参考这里；

2）reset：生成重设表单的按钮；

3）button：生成普通按钮，无任何操作。

按钮上的说明文字都通过value属性指定。

简单的表单的例子

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>简单的表单</title>
    </head>
    <body>
       <form>
           姓名:
           <input type="text" name="name" maxlenth="10">
           <br>
           电话:
           <input type="text" name="phone">
           <br>
           <button type="submit">提交</button>
       </form>
       <p>请注意表单本身是不可见的。</p>
       <p>同时请注意文本字段的默认宽度是 20 个字符。</p>
    </body>
</html>

保存为文件名Demo7.html，用浏览器打开显示如下：

HTML5表单验证功能

表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。HTML5中提供基本的表单验证的方法。

HTML5 表单增加了许多内置的控件和控件属性。

HTML5新增的控件类型：

email输入类型：<input type="email" name="email" /> 要求输入格式正确的 email 地址，否则浏览器不允许提交，同时会提示错误信息

url输入类型：<input type="url" />

要求输入格式正确的 URL 地址，Opera 中会自动在开始处添加 http://

日期时间相关输入类型：

number输入类型：<input type="number" /> 要求输入格式正确的数字

range类型：<input type="range" step="2" min="0" max="10" value="2" /> 显示一个可拖动的滑块条，通过设定 max/min/step 值限定拖动范围，拖动时会反馈给value一个值。

search输入类型：<input type="search" /> 输入一个搜索关键字，通过 results=s 可显示一个搜索小图标。

tel输入类型：<input type="tel" /> 要求输入一个电话号码，但实际上并没有特殊的验证，与 text 类型没什么区别。

color输入类型：<input type="color" /> 可让用户通过颜色选择器选择一个颜色值，并反馈到value中

HTML5新增的表单属性：

placeholder属性：<input type="text" placeholder="点击我会清除" /> 实现点击清除表单初始值，MS 除了 Firefox，其他标准浏览器都能很好的支持。

require/pattern属性：

<input type="text" name="require2" pattern="^[1-9]\d{5}$" /> 表单验证属性require 类型时，若输入值为空，则拒绝提交并出现提示，注意在 Opera 中必须指定 name 值，否则无效果。

autofocus属性：<input type="text" autofocus="true" /> 默认聚焦属性，可在页面加载时聚焦到一个表单控件，类似于 JS 的 focus()。

list属性：需要与datalist属性共用，datalist是对选择框的记忆，而list属性可以为选择框自定义记忆的内容

</datalist>

</input>

max/min/step属性：<input type="range" max="100" min="1" step="20" /> 限制值的输入范围，以及值的输入渐进程度，比如可在 number 设定输入最大值最小值，或在 range 中设定拖动阶梯。

autocomplete属性：<input type="text" autocomplete="on" /> 此属性是为表单提供自动完成功能，如果该属性为打开状态可很好地自动完成，一般来说，此属性必须启动浏览器的自动完成功能。

data属性：<select data="http://XX.com/"></select> HTML5 支持 data 属性，为 select 控件外联数据源，可以在 select 下拉别表动态的添加来自数据库的各组选项，比如说国家、省市列表等等。

XML Submission编码格式：常见的是 Web Form 的编码格式是 application/x-www-form-urlencoded。这种格式将数据送到服务器端，可以方便的存取。HTML5 提供一种新的数据格式：XML Submission，即 application/x-www-form+xml。简单的举例说，服务器端将直接接收到 XML 形式的表单数据。

通常HTML5和CSS、JS（JavaScript）等结合使用，【关于CSS和JS本文不介绍，可参见他文】

表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。HTML5中提供基本的表单验证的方法，还可以使用Javascript来验证。

下面给出一个javascript表单验证的简单例子

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>简单的表单</title>
     <script>
        function myFunction()
        {
            var x=document.getElementById("demo").value;
            if(x==""){
                alert("输入不能为空");
                return;
            }
            if(isNaN(x)){
                alert("请输入数字");
                return;
            }
            if(x.length!=6){
                alert("请输入6位数字");
                return;
            }
        }
     </script>
</head>
<body>
      <h3>javascript表单验证简单例子</h3>
      <p>请输入6位数字。如果输入值不是数字或不是6位数字，浏览器会弹出提示框。</p>
      <input id="demo" type="text">
      <button type="button" onclick="myFunction()">点击验证</button>
</body>
</html>

保存为文件名Demo8.html，用浏览器打开显示如下：

下面出一个用CSS和JS实现简单的增加删除功能的例子

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>JS实现简单的增加删除功能</title>
        <style type="text/css">
            *{
            	margin: 0;
            	padding: 0;
            }
            div{
            	width: 80%;
            	margin: 20px auto;
            	text-align: center;
            }
            table{
            	margin-top: 30px;
            	border-collapse: collapse;
            }
            tr td,tr th{
            	border: 1px solid gray;
            	width: 300px;
            	line-height: 35px;
            	text-align: center;
            }
          </style>
    </head>
    <body>
         <div>
              <label for="">编号：</label><input type="text" id="txt1">
              <label for="">姓名：</label><input type="text" id="txt2">
              <label for="">住址：</label><input type="text" id="txt3">
              <button id="btn">添加</button>
              <table>
                    <tbody id="body">
                           <tr>
                                 <th>编号</th>
                                 <th>姓名</th>
                                 <th>住址</th>
                                 <th>操作</th>
                           </tr>
                    </tbody>
                </table>
         </div>
         <script>
                var id = document.getElementById('txt1');                //编号
                var xname = document.getElementById('txt2');        //姓名
                var address = document.getElementById('txt3');      //地址
                var btn = document.getElementById('btn');              //添加按钮
                var tbody = document.getElementById('body');
                //添加点击事件
                btn.onclick = function () {
                      var tr = createTr();
                     tbody.appendChild(tr);
                };
                function createTr() {
                    var tr = document.createElement('tr');
                    var td1 = createCell(id.value,false);
                    var td2 = createCell(xname.value,false);
                    var td3 = createCell(address.value,false);
                    var td4 = createCell("删除",true);
                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    tr.appendChild(td4);
                    return tr;
                }
                function createCell(value,isLink) {
                    var cell = document.createElement('td');
                    if(isLink){
                         var link = document.createElement('a');
                         link.href = '#';
                         link.innerHTML = value;
                         cell.appendChild(link);
                         //点击删除时，删除一行
                         link.onclick = function () {
                             var tr = this.parentNode.parentNode;
                             tr.parentNode.removeChild(tr);
                         }
                    }else{
                          cell.innerHTML = value;
                    }
                    return cell;
                }
         </script>
    </body>
</html>

保存为文件名Demo9.html，用浏览器打开显示如下：

当我们点击添加的时候向里面添加一行信息。

HTML表单是与用户交互的强大工具，显然不是一篇短文能介绍周全的，请参见HTML表单指南 Web 表单指南 - 学习 Web 开发 | MDN

附录

HTML 教程 (w3schools.cn)HTML标签参考HTML 教程 (w3schools.cn)

学习&实践爱好者

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML5基础

HTML5基础HTML指的是超文本标记语言(Hyper Text Markup Language)，是用来描述网页的一种语言，由HTML标记和纯文本构成文本文件。当浏览器打开网页时，会对网页中的HTML代码进行解释，最终显示为我们看到的前端页面。HTML是标准通用标记语言(Standard Generalized Markup Language，SGML)下的一个应用，也是一种标准规范。统一资源定位符URL（uniform resource locator）一般由协议[名]、服务..
复制链接

扫一扫