HTML
Hyper Text Markup Language
<!--使用规范-->
<!DOCTYPE html>
<html lang="en">
<!--头部标签-->
<head>
<!--meta标签，用来描述网站的一些信息，一般用来做SEO-->
<meta charset="UTF-8">
<!-- title网页标题 -->
<title>第一个HTML</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello, World!
</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>
<!--段落标签-->
<p>天门 中断 楚江开，碧水 东流 至此回。</p>
<p>两岸 青山 相对出，孤帆 一片 日边来。</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
天门 中断 楚江开，碧水 东流 至此回。</br>
两岸 青山 相对出，孤帆 一片 日边来。</br>
<h1>字体样式标签</h1>
粗体:<strong>I Love You</strong> </br>
斜体:<em>I Love You</em> </br>
<!--特殊符号-->
空 格 </br>
©版权所有杨润泽
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--图像标签-->
<!--src、alt为必须项（../为上一级目录）-->
<img src="../109951165325140747.jpg" alt="专辑图片" title="悬停文字" width="120" height="120">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--锚链接标志-->
<a name="top">顶部</a>
<!--href:必填，表示跳转网页-->
<a href="基本标签.html" target="_self">点击跳转到我的标签</a> </br>
<a href="https://www.baidu.com/" target="_blank">点击在新页面打开百度</a> </br>
<a href="https://www.baidu.com/"><img src="../109951165325140747.jpg" alt="专辑图片" title="悬停文字" width="120" height="120"></a> </br>
<!--锚链接-->
<a href="#top">回到顶部</a>
<!--邮件链接-->
<a href="mailto:1500200086@qq.com">点击联系我</a>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>C++</li>
</ol>
<hr/>
<!--无序列表(导航、侧边栏)-->
<ul>
<li>Java</li>
<li>Python</li>
<li>C++</li>
</ul>
<hr/>
<!--自定义列表(网站底部)-->
<!--dl：标签；dt：列表名称；dd列表内容-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C++</dd>
<dt>位置</dt>
<dd>新疆</dd>
<dd>杭州</dd>
<dd>青岛</dd>
</dl>
<hr/>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--tr:行 td:列-->
<table border="1px">
<tr>
<!--colspan跨列-->
<td colspan="3">1-1</td>
</tr>
<tr>
<!--rowspan跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--视频和音频-->
<video src="../1.mp4" controls autoplay></video>
<audio src="../2.mp3" controls autoplay></audio>
</body>
</html>
iframe内联框架
<iframe src="https://www.baidu.com/" frameborder="0" width="1300" height="1300"></iframe>
form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--action:表单提交位置，可以是网站，也可以是请求处理地址-->
<!--method:post(较安全，传输大文件),get(url中可以看见我们提交的信息，高效但不安全)-->
<form action="基本标签.html" method="get">
<p>用户名：<input type="text" name="username" value="admin" readonly></p>
<!--value="默认值";maxlength="8"最长能写几个字符;size="30"文本框长度-->
<p>密码：<input type="password" name="password" hidden></p>
<!--单选-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<p>按钮：
<input type="button" name="btn1" value="点击边长"/>
<!--图片也可以作为按钮-->
<input type="image" src="../109951165325140747.jpg">
</p>
<!--下拉框-->
<p>国家：
<select name="列表">
<option value="eth">瑞士</option>
<option value="Canada">加拿大</option>
<option value="China" selected>中国</option>
<option value="Japan">日本</option>
</select>
</p>
<!--文本域-->
<p>
<textarea name="textarea" cols="50" rows="10"></textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮箱验证-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量:
<input type="number" name="num" min="0" max="100" step="1">
</p>
<!--滑块-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表单初级验证
<form action="表单验证.html" method="get">
<!--提示信息-->
<p>用户名：<input type="text" name="username" placeholder="请输入用户名"></p>
<!--非空判断-->
<p>密码：<input type="password" name="password" hidden required></p>
<!--pattern 正则表达式-->
</form>
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
