网页基本信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="java">
<meta name="description" content="java学习">
<title>第一个标题</title>
</head>
<body>
</body>
</html>
网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>明月几时有，把酒问青天。</p>
<p>不知天上宫阙，今夕是何年？</p>
<p>我欲乘风归去，又恐琼楼玉宇，</p>
<p>高处不胜寒。</p>
<p>起舞弄清影，何似在人间！</p>
<p></p>
<p>转朱阁，低绮户，照无眠。</p>
<p>不应有恨，何事长向别时圆？</p>
<p>人有悲欢离合，月有阴晴圆缺，</p>
<p>此事古难全。</p>
<p>但愿人长久，千里共婵娟</p>
明月几时有，把酒问青天。<br>
不知天上宫阙，今夕是何年？<br>
我欲乘风归去，又恐琼楼玉宇，<br>
高处不胜寒。<br>
起舞弄清影，何似在人间！<br>
转朱阁，低绮户，照无眠。<br>
不应有恨，何事长向别时圆？<br>
人有悲欢离合，月有阴晴圆缺，<br>
此事古难全。<br>
但愿人长久，千里共婵娟<br>
<h1>字体标签样式</h1>
<strong>粗体</strong>
<em>斜体</em>
<br>
空 格
<br>
>
<br>
<
©版权所有
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../resources/image/img.png" alt="小葵" title="悬停文字" width="300">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="top"></a>
<a href="demo1.html">页面一</a>
<a href="https://www.baidu.com">百度</a>
<a href="#top">到顶部</a>
<a href="mailto:123123123@qq.com">点击联系我</a>
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>java</li>
<li>sss</li>
<li>ddd</li>
<li>ddd</li>
<li>aaa</li>
</ol>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>445</li>
<li>55</li>
</ul>
<dl>
<dt>11</dt>
<dd>aa</dd>
<dd>aa</dd>
<dd>aa</dd>
<dd>aa</dd>
<dd>aa</dd>
</dl>
</body>
</html>
表格应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="4">11</td>
</tr>
<tr>
<td rowspan="2">11</td>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video src="mda-nbedg0chqg93cj48.mp4" controls autoplay></video>
<audio src="95144018(95144018)_20211106153910.mp3" controls autoplay></audio>
</body>
</html>
页面结构分析
- header 标题头部区域的内容(用于页面或页面中的一块区域)
- footer 标记脚步区域的内容(用于整个页面或页面的一块区域)
- section Web页面中的一块独立区域
- article 独立的文章内容
- aside 相关内容或应用(常用于侧边栏)
- nav 导航类辅助内容
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="get">
<input type="text" name="username"><br>
<input type="password" name="pwd">
<p>
<input type="submit">
<input type="reset">
</p>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>
邮箱：
<input type="email" name="email">
</p>
<p>
url:
<input type="url" name="url">
</p>
<p>
数字：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<p>
滑块：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>
搜索：
<input type="search" name="search">
</p>
</form>
</body>
</html>
表单初级验证
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
7156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
