常用标签
基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用标签</title>
</head>
<body>
正本文本
<!--1、标题：加粗-->
<!--h1标签的语义：是该页面的主标题-->
<h1 title="这是一级标题">一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--2、段落: 自带换行，有段落间距-->
<p>段落标签</p>
<!--3、换行标签-->
正文文本1<br>
正文文本2<br>
<!--自带换行的文本标签：h1~h6 p -->
<!--4、文本类型标签：不自带换行的文本标签 - span i b -->
<span>一般用来嵌套其它文本类标签,上<sup>角标</sup>,下<sub>角标</sub></span><br>
<b>加粗标签</b><br>
<strong>以加粗作为强调的强调标签</strong><br>
<i>斜体标签</i><br>
<em>以斜体作为强调的强调标签</em><br>
<!--5、超链接标签,可以写相对路径或绝对路径-->
<a href="http://www.baidu.com" target="_self">百度一下</a><br> <!-- 在当前页面跳转链接，target="_self"可省略-->
<a href="http://www.baidu.com" target="_blank">百度一下</a><br> <!-- 新建空白页面跳转链接-->
<a href="http://www.baidu.com" title="点击一下，了解更多">百度一下</a><br> <!--鼠标移到该链接显示title-->
<a href="mailto:863652104@qq.com">发送邮件</a><br> <!--鼠标移到该链接显示title-->
<a href="#top">回到顶部</a>
<!--6、图片标签-->
<!--title:鼠标悬浮的文本提示，alt：img标签资源加载失败时显示-->
<img title="萌宠" alt="图片加载失败"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564997741&di=519b1746c53dc7cd2cc5bc0e59960ff6&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.51ztzj.com%2Fupload%2Fimage%2F20150213%2Fdn201502034005_670x419.jpg"><br>
<!--7、列表标签: 无序ul>li 有序ol>li 自定义dl>dt+dd-->
<!--ul>li{第$列}*5-->
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>自定义列表标题</dt>
<dd>自定义列表1</dd>
<dd>自定义列表2</dd>
<dd>自定义列表3</dd>
<dd>自定义列表4</dd>
</dl>
<!--8、表格标签 table>tr>th|td -->
<!--tr:行 th:标题单元格 td:普通单元格 -->
<!--border:边框-->
<!--cellspacing:单元格的间距，最小为0，但是单元格之间是两条线，可以用rules="all" 处理成一条线 -->
<!--cellpadding：单元格的内边距（文本与标签的间距）-->
<table border="1" width="500" height="300" rules="all" cellspacing="0" cellpadding="10">
<caption>表格标题</caption>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<!--(tr>td{单元格}*3)*2-->
<!--rowspan:合并行-->
<!--colspan:合并列-->
<td rowspan="2">001</td>
<td colspan="2">nick</td>
</tr>
<tr>
<td>002</td>
<td>jerry</td>
<td>123</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
</tr>
</tfoot>
</table>
<!--9、分割线 -->
<hr>
</body>
</html>
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--1、form的作用：完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
<form action="">
<!--lable作为input的文本解释标签，for绑定id-->
<!--value属性是表单标签的内容，就是提交给后台的-->
<!--name是提交给后台的key，value是值-->
<!--placeholder是文本占位符-->
<!--type是决定标签的类型本质(input|button)-->
<!--multiple,checked布尔类型属性，不需要写值，multiple多选，checked默认激活-->
<p>
<lable for="username">账号:</lable>
<input id="username" type="text" value="Owen" name="user">
</p>
<p>
<lable for="password">密码:</lable>
<input id="password" type="password" placeholder="请输入密码" name="pwd">
</p>
<p>
<input type="hidden" value="sdsad2323" name="pk">
</p>
<p>
<input type="file" name="file" multiple>
</p>
<p>
男 <input type="radio" value="male" name="hobby" checked>
女<input type="checkbox" value="female" name="hobby" checked>
哇塞<input type="checkbox" value="other" name="hobby">
</p>
<p>
<input type="button" value="按钮" />
<input type="reset" value="重置" />
<input type="submit" value="登录" />
</p>
<p>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</p>
<p>
<textarea cols="30" rows="10"></textarea>
</p>
</form>
</body>
</html>
标签的分类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签的分类</title>
</head>
<body>
<h1>标签的分类</h1>
<hr>
<!-- 1、是否自带换行 -->
<!--带换行：h1 p div table form tr ul li -->
<!--不带换行：span i b a img input button label textarea-->
<!-- 2、单双标签 -->
<!--单标签（主功能）：br hr input img link -->
<!--双标签（主内容）：html head body h1 p span div a label button -->
<!-- / 代表标签的结尾，但是单标签可以省略 -->
<div></div>
<hr />
<!--3、简单和组合标签-->
<!--组合：ul>li table>tr>td|th form>input -->
</body>
</html>
扫一扫
792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
