• HTML基础入门

    目录

    前言

    1、什么是HTML？

    2、开发工具选择

    3、Head头部

    3.1、网页结构

    3.2、ico图标

    ​编辑

    3.3、面页倒计时

    4、HTML常用标签

    4.1、标题标签

    4.2、段落&换行标签

    4.3、水平线标签

    4.4、字体标签

    4.5、列表标签

    4.6、图片标签

    4.7、超链接标签

    4.8、table表格

    4.9、form表单

    4.10、表单中的其他标签

    4.11、Label标签

    4.12、iframe标签

    4.13、标签划分及嵌套规则

    4.14、音频&视频

    4.15、input正则效验

    前言

    在Java后端学习过程中，HTML、CSS、JS等前端知识也需要去学习，不过学习的内容肯定没有前端专业的深入，这里只是去简单了解，搞懂会用就可以了，如果是前端学习者，那么可以把这篇文章当作巩固基础知识，复习一下也是不错的。

    1、什么是HTML？

    HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言；即除了文字之外还可以有视频、音频等内容。

    2、开发工具选择

    工具名称工具logo下载地址
    Sublime TextDownload - Sublime Text
    HBuilderhttps://www.dcloud.io/hbuilderx.html
    VS codeDownload Visual Studio Code - Mac, Linux, Windows
    WebStormDownload WebStorm: The Smartest JavaScript IDE by JetBrains

    我使用的是HBuilder X开发工具，这四款软件都是可以的，目前来说用的相对多的就是VS code和HBuilder。

    注意：这里推荐大家安装一个Chrome浏览器，开发会很简洁方便。 

    3、Head头部

    3.1、网页结构

    1. <html>
    2.   
    3.   <head>
    4.     
    5.     <meta charset='utf-8'/>
    6.     
    7.     <title>第一个网页title>
    8.   head>
    9.   <body>
    10.     
    11.    Hello HTML！
    12.   body>
    13. html>

    网页结构想要在浏览器上打开并被浏览器解析，需要文件的后缀为.html或.html。

    3.2、ico图标

    ico图标指的是网页主题左边有个图标，这个图标默认在不同浏览器上是不同的，如图在谷歌浏览器上默认是个地球。那么如何去改变这个图标呢，那就要用到ico图标。

    改变ico图标的话就需要用到一个在线转ico格式的网站，如下：制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net轻松制作ico图标,在线提供ico图标转换工具,可以将jpg、jpeg、gif、png等图像转换成ico图像,方便浏览器制作并生成favicon.ico图标,提供ico图标下载,png to ico,jpg to ico,gif to icohttp://www.bitbug.net/

    进入以后，选择文件，选择自己需要改变为ico格式的图片，然后点击生成ico图标。

     生成完以后，把ico图片文件放到项目下的img包中。

    在html中头部敲下这段代码

    1. 	<head>
    2. 		<meta charset="utf-8" />
    3. 		<title>标题title>
    4.          
    5. 		<link rel="shortcut icon" type="image/x-icon" href="img/01.ico" media="screen" />
    6. 	head>

    运行，然后就可以看到ico图标添加到了网页标签上了。 

    3.3、面页倒计时

    有时想要让网页在多少秒之后进行跳转到另一个网页，那么就可以添加一个网页倒计时，就在head中添加meta标签，http-equiv属性填写refresh，content属性中先写秒数用；分隔，后面就是网页地址，这里我以跳转百度为例。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5.          
    6. 		<meta http-equiv="refresh" content="10;https://www.baidu.com">
    7. 		<title> 倒记时 title>
    8. 	head>
    9. 	<body>
    10.          
    11. 		<script type="text/javascript">
    12. 			var time = 9;
    13. 			window.onload = function(){
    14. 				window.setInterval("showTime()", 1000);
    15. 			}
    16. 			function showTime(){
    17. 				document.getElementById("s").innerHTML = time;
    18. 				time--;
    19. 			}
    20. 		script>
    21.  
    22. 		<font class=p2>    无法访问<span id="s" style="color: orange;font-size: 28px;">10span>秒后跳到<a href="https://www.baidu.com">百度a>
    23.  
    24. 	body>
    25. html>

    4、HTML常用标签

    4.1、标题标签

    标题标签默认具有加粗效果，最小字体是16像素，最大是42像素

    1. this is a normal text!
    4. <h1>一级标题标签，有加粗效果，字体比较大h1>
    5. <h2>二级标题标签，有加粗效果，字体比一级的小h2>
    6. <h3>三级标题标签，有加粗效果，字体比二级的再小点h3>
    7. <h4>四级标题标签，有加粗效果，字体比三级的再小点h4>
    8. <h5>五级标题标签，有加粗效果，字体比四级的再小点h5>
    9. <h6>六级标题标签，有加粗效果，字体比五级的再小点h6>
    10. <h7>没有该标签，但是浏览器依然可以解析，因为其符合标签的格式。所以不会报错，只是没有任何的效果h7>
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>标题标签title>
    6. 	head>
    7. 	<body>
    8. 		<h1>再别康桥h1>
    9. 		<h2>再别康桥h2>
    10. 		<h3>再别康桥h3>
    11. 		<h4>再别康桥h4>
    12. 		<h5>再别康桥h5>
    13. 		<h6>再别康桥h6>
    14. 	body>
    15. html>

    4.2、段落&换行标签

    段落标签包裹的内容代表是一个段落，但是，该段落没有任何的形式上的效果和语文中段落不一样，它仅仅只是有这么一个段落的含义而已。段落标签独占一行。

    1.         <h1>再别康桥h1>
    2. 		<h2>再别康桥h2>
    3. 		<h3>再别康桥h3>
    4. 		<h4>再别康桥h4>
    5. 		<h5>再别康桥h5>
    6. 		<h6>再别康桥h6>
    7.         <p>轻轻的我走了,p>
    8. 		<p>正如我轻轻的来；p>
    9. 		<p>我轻轻的招手，p>
    10. 		<p>作别西天的云彩p>

    4.3、水平线标签

    标签在 HTML 页面中创建一条水平线。

    1. <body>
    2.     
    3.     <hr />
    4. body>
    属性名描述取值
    color颜色单词、RGB、6位16进制的颜色值
    size大小取值1~7
    width宽度数值px、 数值%         
    align对齐方式center：居中 、left：左对齐、right：右对齐
    1. <body>
    2.     
    3.     <hr />
    4.     <hr  width="100px" size="7" align="center" color="red"/>
    5.     <hr  width="50%" size="7" align="left" color="#EFEFF4"/>
    6. body>

    4.4、字体标签

    font标签属性：

    属性名描述
    color设置字体颜色
    size设置字体大小

    strong标签: 字体加粗
    em标签: 斜体     

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>徐志摩诗词title>
    6. 	head>
    7. 	<body>
    8. 		<h2 align="center"><font color="red">再别康桥font>h3>
    9. 		<hr width="100px" size="2" color="green">
    10. 		<div align="center">
    11. 			<p>轻轻的我走了,p>
    12. 			<p><font size="5" color="yellow">正如我轻轻的来；font>p>
    13. 			<p><strong>我轻轻的招手，strong>p>
    14. 			<p><em>作别西天的云彩em>p>
    15. 		div>
    16. 		
    17. 	body>
    18. html>

    4.5、列表标签

    将内容以列表的形式按从上往下进行排列，以及自定义样式。

    ul：无序列表，没有顺序，ul只是语义上表示其是一个列表标签，但是里面是没有内容的，内容要通过li标签来书写。

    ol：有序列表，带有顺序，type指定排序类型，start指定开始的位置。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<h2>无序列表h2>
    9. 		<ul type="disc">
    10. 			<li>水杯li>
    11. 			<li>竹子li>
    12. 			<li>文具li>
    13. 			<li>沙发li>
    14. 			<li>凳子li>
    15. 		ul>
    16. 		<h2>有序列表h2>
    17. 		<ol type="A" start="3">
    18. 			<li>水杯li>
    19. 			<li>竹子li>
    20. 			<li>文具li>
    21. 			<li>沙发li>
    22. 			<li>凳子li>
    23. 		ol>
    24.         
    25. 		<dl>
    26. 			<dt>新冠疫情dt>
    27. 			<dd>1、成都出现新冠疫情dd>
    28. 			<dd>2、出现疫情后所有相关人员已经进行了隔离及检测dd>
    29. 		dl>
    30. 	body>
    31. html>

    4.6、图片标签

    img标签：

    src：引入的图片的路径。
    width：设置图片的大小，一般只设置width自动匹配高（px是一个固定的像素 %随着浏览器大小而定）。
    title：当你鼠标悬浮图片时要显示的内容。
    alt：表示当前图片加载不到或者丢失，提示显示内容。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<img src="img/02.jpg" title="理想老婆"  alt="对不起，图片崩溃了">
    9. 	body>
    10. html>

    4.7、超链接标签

    超链接就是网页中常用的用于页面跳转的标签，还可以用于锚点，例如：网页中常见的返回顶部效果。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		
    9. 		<a href="https://www.baidu.com">百度一下，你就知道a>
    10. 		<br>
    11. 		
    12. 		<a href="https://www.baidu.com"><img src="img/01.ico" alt="对不起，出错了">a>
    13. 		<br>
    14. 		
    15. 		<a href="mailto:812449131@qq.com">发生emaila>
    16. 		<br>
    17. 		
    18. 		<a href="javascript:void(0)">取消链接a>
    19. 		
    20. 	body>
    21. html>

    锚点

    锚点的使用需要满足两个点：一是要有跳转的标记点，二是可以进行跳转。例如：网页中常见的返回顶部功能。

    需要使用id属性设置超链接标签一个名字，头部超链接href中写#尾部超链接标签名，尾部超链接href写#头部超链接id名。

    同时也可以进行页面跳转，需要在超链接写另一个页面名+#另一个页面中超链接id名

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<a id="top" href="#button">
    9. 			跳转到尾部
    10. 		a>
    11. 		<p>内容内容内容内容内容内容内容内容p>
    12. 		<p>内容内容内容内容内容内容内容内容p>
    13. 		<p>内容内容内容内容内容内容内容内容p>
    14. 		<p>内容内容内容内容内容内容内容内容p>
    15. 		<p>内容内容内容内容内容内容内容内容p>
    16. 		<p>内容内容内容内容内容内容内容内容p>
    17. 		<p>内容内容内容内容内容内容内容内容p>
    18. 		<p>内容内容内容内容内容内容内容内容p>
    19. 		<p>内容内容内容内容内容内容内容内容p>
    20. 		<p>内容内容内容内容内容内容内容内容p>
    21. 		<p>内容内容内容内容内容内容内容内容p>
    22. 		<p>内容内容内容内容内容内容内容内容p>
    23. 		<p>内容内容内容内容内容内容内容内容p>
    24. 		<p>内容内容内容内容内容内容内容内容p>
    25. 		<p>内容内容内容内容内容内容内容内容p>
    26. 		<p>内容内容内容内容内容内容内容内容p>
    27. 		<p>内容内容内容内容内容内容内容内容p>
    28. 		<p>内容内容内容内容内容内容内容内容p>
    29. 		<p>内容内容内容内容内容内容内容内容p>
    30. 		<p>内容内容内容内容内容内容内容内容p>
    31. 		<p>内容内容内容内容内容内容内容内容p>
    32. 		<p>内容内容内容内容内容内容内容内容p>
    33. 		<p>内容内容内容内容内容内容内容内容p>
    34. 		<p>内容内容内容内容内容内容内容内容p>
    35. 		<p>内容内容内容内容内容内容内容内容p>
    36. 		<p>内容内容内容内容内容内容内容内容p>
    37. 		<p>内容内容内容内容内容内容内容内容p>
    38. 		<p>内容内容内容内容内容内容内容内容p>	
    39. 		<a id="button" href="#top">跳转到头部a>
    40. 		<br>
    41. 		<a href="A.html#a_id">跳转到A页面中的指定位置a>
    42. 	body>
    43. html>
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<a id="a_id">a>
    9. 		<h1>我是A页面h1>
    10. 		
    11. 	body>
    12. html>

    4.8、table表格

    和办公软件Excel表格是类似的，都有行（tr）和列（td），行及列都可以进行合并操作

    table:定义表格。
    tr:定义行。
    td:定义列。
    th:定义表格中头部（加粗）。
    border: 边框大小。
    bordercolor:连框的颜色。
    cellpadding：内容与单元格之间距离。
    cellspacing：单元格与单元格之间距离 。

    1. <body>
    2. 		<h1 align="center">员工表h1>
    3. 		<hr width="90px" color="red" />
    4. 		<table border="1px" align="center" bordercolor="blue" cellpadding="20px" cellspacing="0px">
    5. 			<tr>
    6. 				<th>姓名th>
    7. 				<th>性别th>
    8. 				<th>工作th>
    9. 				<th>薪资th>
    10. 				<th>操作th>
    11. 			tr>
    12. 			<tr>
    13. 				<td>jacktd>
    14. 				<td>男td>
    15. 				<td>后端开发td>
    16. 				<td>8000td>
    17. 				<td><a href="#">删除a>td>
    18. 			tr>
    19. 			<tr>
    20. 				<td>rosetd>
    21. 				<td>女td>
    22. 				<td>前端开发td>
    23. 				<td>7000td>
    24. 				<td><a href="#">删除a>td>
    25. 			tr>
    26. 		table>
    27. 	body>

    表格的跨行跨列 

    rowspan跨行

    colspan跨列

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		
    9. 		<table border="1px" align="center" cellspacing="0px" cellpadding="20px">
    10. 			<tr>
    11. 				<th>姓名th>
    12. 				<th>联系方式th>
    13. 			tr>
    14. 			<tr>
    15. 				<td rowspan="2">jacktd>
    16. 				<td>0371-6666td>
    17. 			tr>
    18. 			<tr>
    19. 				<td>0371-6666td>
    20. 			tr>
    21. 		table>
    22.  
    23.         
    24. 		<table border="1px" align="center" cellspacing="0px" cellpadding="20px">
    25. 			<tr>
    26. 				<th>姓名th>
    27. 				<th colspan="2">联系方式th>
    28. 			tr>
    29. 			<tr>
    30. 				<td>李四td>
    31. 				<td>0371-6666td>
    32. 				<td>0371-8888td>
    33. 			tr>
    34. 		table>
    35. 	body>
    36. html>

    结构区分

    表格通常会有对应的头部信息、具体的内容信息、还有一些底部的备注，此时就需要考虑一个问题 如果不同区域中的位置因为跨行或跨列被占据了，那么整个表格都会发生错乱；为了避免出现跨行或跨列超出区域的问题，提供了区域划分的标签：thead、tbody、tfooter，内容默认都在tbody中。

    1. <table border="1px" cellpadding="0" cellspacing="0" align="center" width="50%">
    2. 			
    3. 			<thead>
    4. 				<tr>
    5. 					<th>姓名th>
    6. 					<th>性别th>
    7. 				tr>
    8. 			thead>
    9. 			
    10. 			
    11. 			<tbody>
    12. 				<tr>
    13. 					<td>jacktd>
    14. 					<td>男td>
    15. 				tr>
    16. 			tbody>
    17. 			
    18. 			
    19. 			<tfoot>
    20.                 	<tr>
    21. 					<td>rosetd>
    22. 					<td>女td>
    23. 				tr>
    24. 			tfoot>
    25. table>

    表格的优缺点

    优点

    1.布局简单（因为就是纯表格的区域划分）

    2.样式统一（只要确认好第一行的样式，后面的都会跟着变）

    缺点

    维护的时候超级麻烦（表格中有跨行和跨列的操作，一旦需要添加或者删除某一行或某一列的时候，相关联的所有的合并操作都需要重来）

    应用场景

    布局简单，变动的可能性比较小的情况下考虑使用表格。

    例如：登录、注册页，百度新闻的热搜新闻词模块，查询数据，用于数据展示。

    4.9、form表单

    表单通常用于让用户能够进行输入操作使用的，例如常见的登录、搜索、注册、图片上传等等。

    action：指定服务器地址。

    method：指定表单数据的提交方式。

    get：默认的提交方式，get方式提交的数据会在地址栏中显示出来，很不安全，所能提交的数据量比较小，效率高。

    post：效率低，安全，携带大量的数据，不会在地址栏中显示。

    注意：表单中的数据想要提交，一定要有name属性存在 表单中所有的内容都是通过以下三个标签组成的： input、textarea、select  

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<form action="" method="post">
    9. 			<table align="center">
    10. 				<tr>
    11. 					<td>账号：td>
    12. 					<td><input 
    13. 					type="text" 
    14. 					name="username" 
    15. 					placeholder="请输入账号"
    16. 					title="请输入账号"
    17. 					autocomplete="off"
    18. 					maxlength="15"
    19. 					value="小米"
    20. 					readonly="readonly"
    21. 					disabled="disabled"
    22. 					
    23. 					>td>
    24. 				tr>
    25. 				<tr>
    26. 					<td>密码：td>
    27. 					<td><input type="password" name="pwd" placeholder="请输入密码">td>
    28. 				tr>
    29. 				<tr>
    30. 					<td>
    31. 						<input type="submit" value="登录">
    32. 						<input type="reset">
    33. 					td>
    34. 						
    35. 				tr>
    36. 			table>
    37. 		form>
    38. 	body>
    39. html>

    4.10、表单中的其他标签

    1. <form action="" method="">
    2. 			文本输入框:<input type="text" name="username" /><br>
    3. 			密码输入框:<input type="password" name="pwd" /><br>
    4. 			日期:<input type="date" name="date" /><br>
    5. 			月：<input type="month" name="month"/><br>
    6. 			日期日分秒：<input type="datetime-local" name="local" /><br>
    7. 			数据：<input type="number" name="number"/> <br>
    8. 			多选框：
    9. 				<input type="checkbox" name="box" value="吃饭"/>吃饭
    10. 				<input type="checkbox" name="box" value="睡觉"/>睡觉
    11. 				<input type="checkbox" name="box" value="打豆豆"/>打豆豆
    12. 				<input type="checkbox" name="box" value="敲代码"  checked="checked"/>敲代码<br>
    13. 			单选框：
    14. 				<input type="radio" name="sex" value="男" checked="checked" />男
    15. 				<input type="radio" name="sex" value="女" />女
    16. 				<input type="radio" name="sex" value="人妖" />人妖<br>
    17. 			文件上传：<input type="file" name="file"/><br>
    18. 			提交按钮：<input type="submit" value="登录"/><br>
    19. 			重置按钮：<input type="reset" /><br>
    20. 			按钮:<input type="button" id="button" value="点我啊"/>
    21. 				 <button>我是一个buttonbutton><br>
    22. 			隐藏域：<input type="hidden" name="hidden" /><br>
    23. 			下拉框：
    24. 				<select>
    25. 					<option value="北京">北京option>
    26. 					<option value="上海">上海option>
    27. 					<option value="郑州" selected="selected">郑州option>
    28. 					<option value="杭州">杭州option>
    29. 				select><br>
    30. 			文本域：<textarea rows="10" cols="30">textarea>
    31. 		form>

    4.11、Label标签

    为了解决单选或者多选时只能通过点击选择框才能勾选上的问题，加入Label标签，点击相对应的文字就可以勾选。注意：label里的for属性填写对应input标签里的id名，这样才能绑定勾选框，点击文字就可以勾选。

    1. <input type="checkbox" name="box" value="吃饭" id="a"/> <label for="a">吃饭label>
    2. <input type="checkbox" name="box" value="睡觉" id="b"/> <label for="b">睡觉label>
    3. <input type="checkbox" name="box" value="打豆豆"/>打豆豆
    4. <input type="checkbox" name="box" value="敲代码"  checked="checked"/>敲代码<br>

    4.12、iframe标签

    后台管理的前台门户通常都是以单页面为主实现的，此时需要进行页面内容的嵌套，iframe标签可以在一个页面中嵌套其他页面的内容。

    frameborder：控制是否显示边框线 1显示 0不显示。
    scrolling：控制是否显示滚动条 yes显示 no不显示 auto根据页面大小浏览器自动控制。

    aaa.html

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<h1>学生信息表h1>
    9. 	body>
    10. html>

    bbb.html

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8.        <h1>教师信息表h1>
    9. 	body>
    10. html>

    ccc.html

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		 <h1>后勤员工信息表h1>
    9. 	body>
    10. html>

    main.html 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			a{
    8. 				text-decoration:none;
    9. 			}
    10. 			li{
    11. 				padding: 30px;
    12. 				width: 180px;
    13. 				text-align: center;
    14. 				margin-left: -40px;
    15. 			}
    16. 		
    17. 		style>
    18. 	head>
    19. 	<body>
    20. 		<div style="width:250px; height: 680px; position: absolute; background-color: aquamarine;">
    21. 			<ul style="list-style-type: none;">
    22. 				<li><a href="aaa.html" target="myiframe">学生信息表a>li>
    23. 				<li><a href="bbb.html" target="myiframe">教师信息表a>li>
    24. 				<li><a href="ccc.html" target="myiframe">后勤员工信息表a>li>
    25. 			ul>
    26. 			
    27. 		div>
    28. 		 
    29. 		  <iframe src="xxx.html" name="myiframe" frameborder="1" width="1250px" height="680px" style="margin-left: 250px;">iframe>
    30. 	body>
    31. html>

    xxx.html

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<h1>校园信息管理系统h1>
    9. 	body>
    10. html>

    4.13、标签划分及嵌套规则

    从行业的官方规范来讲，对标签的划分分两种

    块元素：单独占整行（自带换行符），可以设置宽高属性的。

    行元素：可以在同一行显示，设置宽高不生效。

    目前行业中的程序员喜欢的划分，分三种

    块元素：单独占整行（自带换行符），可以设置宽高属性的。

    行元素：可以在同一行显示，设置宽高不生效。

    行内块元素：既可以设置宽高，也可以在同一行显示（img-本身自带了宽高属性，display属性控制）。

    嵌套规则   

    1、行元素之间可以互相嵌套，行元素中不能嵌套块元素（html中是可以的，但是理论上来讲是不允许的）。

    2、块元素中可以嵌套任意的行元素，块元素之间也可以互相嵌套，但是有两种标签需要注意 p标签中是不允许嵌套其他任意的块元素 h系列的标签是不能互相嵌套（因为每个h标签都有默认的字体大小）。

    4.14、音频&视频

    加入背景音乐

    在项目下创建一个mp3包，里面存放下载好的MP3格式音乐，在代码中导入

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<embed src="mp3/施雨凡 - 成都（女声）.mp3" hidden="true">
    7. 		
    8. 	head>
    9. 	<body>
    10. 		<audio controls="controls">
    11. 			<source src="mp3/施雨凡 - 成都（女声）.mp3" type="audio/mp3">
    12. 		audio>
    13.         
    14. 		<marquee direction="right">成都.mp3marquee>
    15. 	body>
    16. html>

    4.15、input正则效验

    required属性是指必须书写，pattern里面书写正则表达式。

    1. <form action="" method="">
    2. 	用户名：<input type="text" name="phoneNum" required="required" pattern="^1[356789]\d{9}$"/>
    3. 		   <input type="submit" value="提交"/>
    4. form>

  • 相关阅读:
    docker启动mysql8目录挂载改动
    玉米社：如何做好企业SEM竞价推广？数据分析不能少
    GBase 8c分布式核心技术—在线扩容
    MySQL学习（六）——视图和触发器
    Redux——详解
    java八股文面试[数据库]——MySQL中事务的特性
    C++语法基础(二)
    小程序中Java后台调用接口（getAccessToken）获取调用凭据，调用接口（msgSecCheck）检测文本内容是否安全--最终版
    2311rust,到66版本更新
    leetcode-22. 括号生成
  • 原文地址：https://blog.csdn.net/select_myname/article/details/126279978