HTML的基本标签
1. html的基本框架
<!--DOCTYPE文档描述标签：告诉浏览器我们使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--meat：描述形标签，用来描述网站的一些信息-->
<meta charset="UTF-8">
<!--title：网页标题-->
<title>Title</title>
</head>
<body>
</body>
</html>
2. 标题标签
<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
3. 段落标签
<p>两只老虎</p>
<p>跑得快</p>
4. 水平线标签
<hr/>
5. 换行标签
<br/>
6. 粗体标签
<strong>文字变粗</strong>
7. 斜体标签
<em>文字变斜</em>
8. 特殊符号
空格：  ;
大于号：> ;
小于号：< ;
版权符号：© ;
9. 图片标签
<img src="" alt="找不到图片时代替消息" title="悬浮图片提示的文字消息" width="100" height="100">
10. 超链接标签
<p><a href="https:www.baidu.com" target="_blank">点我跳转到新页面访问百度</a></p>
<p><a href="https:www.baidu.com" target="_self">点我当前页面访问百度</a></p>
超链接中放入图片，可以实现点击图片跳转超链接预目标路径
<a href="https:www.xxx.com">
<img src="../resources/imgs/1.jpg" alt="一条消息通知" title="点我可以跳转百度！！" width="50" height="50">
</a>
<!--锚链接
1：定义一个锚<a name="top"></a>
2：<a href="#top">回到顶部</a>
-->
<!--
功能性链接
1：邮箱 mailto:xxx.com
2：QQ链接
-->
11. 无序标签
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
12. 有序标签
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
13. 自定义列表
<dl>
<dt>标题</dt>
<dd>哈</dd>
<dd>哈哈</dd>
<dd>哈哈哈</dd>
<dd>哈哈哈哈</dd>
<dd>哈哈哈哈哈</dd>
</dl>
14. 表格标签
<!--表格标签 跨列：colspan，跨行：rowspan-->
<table border="1px">
<tr>
<td colspan="3">1-1</td>
</tr>
<tr>
<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>
15. 视频标签
<!--视频标签 进度控制条：controls，自动播放：autoplay-->
<video src="xxx" controls autoplay></video>
16. 音频标签
<!--音频标签-->
<audio src="../resources/audio/萤火虫和你.mp3" controls autoplay></audio>
17. iframe嵌套
<!--iframe嵌套框架-->
<iframe src="https://www.bilibili.com" name="baidu"></iframe>
<!--超链接定向访问iframe嵌套-->
<a href="https://www.baidu.com/" target="baidu">点击会使target中目标name等于baidu的嵌套框架变成我超链接中href的路径</a>
18. form表单
<form action="www.baidu.com" method="get">
<!--文本框-->
<p>
<!--点击label可跳转for绑定的框-->
<label for="label">姓名：</label>
<input type="text" name="username" id="label" placeholder="请输入姓名" value="admin " maxlength="4" readonly>
</p>
<!--密码框-->
<p>密码：<input type="password" name="userpwd" placeholder="请输入密码" required></p>
<!--单选框-->
<p>性别：
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女
</p>
<!--多选框-->
<p>爱好：
<input type="checkbox" name="hobby" value="1" checked>LOL
<input type="checkbox" name="hobby" value="2">DTA
<input type="checkbox" name="hobby" value="3">CF
</p>
<!--下拉框-->
<p>
所属国家：
<select name="国家">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">法国</option>
<option value="4" selected>北京</option>
</select>
</p>
<!--文本域、多行文本 cols列宽、rows行高-->
备注：
<p>
<textarea name="" id="" cols="50" rows="5" placeholder="我这里可以写200个字！" maxlength="200"></textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
</p>
<!--邮箱-->
<p>邮箱：
<input type="email" name = "email">
</p>
<!--URL-->
<p>URL：
<input type="url" name = "url">
</p>
<!--数字-->
<p>数字：
<input type="number" name = "number" max="10" min="1">
</p>
<!--滑块-->
<p>滑块：
<input type="range" name = "range">
</p>
<!--搜索框-->
<p>搜索框：
<input type="search" name = "search">
</p>
<br>
<p>
<input type="submit" value="点击确认跳转">
<input type="reset" value="清空表单" disabled>
</p>
<!--按钮-->
<p><input type="button" value="我是一个按钮" name="btn1" hidden=""><br/></p>
<!--图片按钮-->
<p>点击图片也可以跳转action页面<input type="image" src="../resources/imgs/1.jpg" style="width: 50px; height: 50px"></p>
</form>
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
