<!DOCTYPE html>
<html lang="en"> <!-- 整个网页 -->
<head> <!-- 网页头部，存放给浏览器看的代码，如css -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML常用标签</title> <!-- 网页标题 -->
</head>
<body> <!-- 网页主体，存放给用户看的代码，如图片、文字 -->
<article id="top"> <!-- 页面顶部,定义锚点top -->
<h1>一级标题</h1>
<hr> <!-- 水平线 -->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>
这是第一个段落
这是第一个段落 <br> <!-- 段内换行 -->
这是第一个段落
<br><br> <!-- 想加大间隙可多加几个 -->
这是第一个段落
</p>
<!-- 两个p之间换行且有空白间隙 -->
<p>这是二个段落，这是二个段落，这是二个段落，这是二个段落，这是二个段落，这是二个段落，这是二个段落</p>
<strong>加粗strong</strong>
<em>倾斜em</em>
<ins>下划线ins</ins>
<del>删除线del</del>
<br>
<!-- 相对路径找图片 -->
<!-- alt替换文本：照片无法显示时显示的文字，title提示文本：鼠标悬停在图片上时显示的文字，width图片宽度、height高度：值为数字没有单位 -->
<!-- 浏览器缩放图片默认是等比缩放 -->
<!-- figure标签能将图片与图片标题组合在一起，图片用img标签，图片标题用figcaption标签 -->
<figure>
<figcaption>卡卡瓦夏</figcaption>
<img src="../图片/卡卡瓦夏.jpg" alt="卡卡瓦夏图片" width="100" title="卡卡瓦夏"> <!-- ../返回上一文件夹 -->
</figure>
<img src="石心三人.jpg" alt="石心三人图片" width="150" height="150" title="石心三人"> <!-- 当前文件夹 -->
<img src="图片/合照.jpg" alt="合照图片" height="150" title="合照" > <!-- /进入某个文件夹里 -->
<br>
<!-- 超链接，target="_blank"新窗口 -->
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<!-- 开发初期，不知道超链接跳转地址，gref属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>
<!-- 跳转到当前页面的特定位置 -->
<p><a href="#top">返回顶部</a></p> <!-- 跳转到锚点top -->
<!-- ul无序列表,li列表项-->
<ul> <!-- ul标签只能包裹li标签 -->
<li><strong>列表项1</strong></li> <!-- li标签里可以包裹任何内容 -->
<li>列表项2</li>
<li>列表项3</li>
</ul>
<!-- ol有序列表,li列表项 -->
<ol> <!-- ul标签只能包裹li标签，li标签里可以包裹任何内容 -->
<li>步骤一</li>
<li>步骤二</li>
<li>步骤三</li>
</ol>
<!-- dl自定义列表,dt列表项，dd列表项的描述 -->
<dl> <!-- dl里只能包含dt和dd，dt和dd里可以包含任何内容 -->
<dt>服务中心</dt>
<dd>申请售后</dd>
<dd>订单查询</dd>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>公益基金会</dd>
</dl>
<!-- 表格table嵌套tr,tr嵌套td/th -->
<!-- 合并单元格不能跨结构标签 -->
<table border="1"> <!-- border属性，边框线，像素为1 -->
<caption>订单列表</caption> <!-- 标题 -->
<thead> <!-- 表格头部(结构标签) -->
<tr> <!-- 行 -->
<th>订单号</th> <!-- 表头单元格 -->
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody> <!-- 表格主体(结构标签) -->
<tr> <!-- 第一行 -->
<td>001</td> <!-- 数据单元格 -->
<td>图书</td>
<td rowspan="2">45</td><!-- rowspan跨行合并(纵向)，取值是数字，表示需要合并单元格的数量 -->
</tr>
<tr> <!-- 第二行 -->
<td>002</td>
<td>办公用品</td>
</tr>
</tbody>
<tfoot> <!-- 表格尾部(结构标签) -->
<tr>
<td colspan="2">总价</td><!-- colspan跨列合并(横向) -->
<td>97</td>
</tr>
</tfoot>
</table>
<!-- 表单 -->
<!-- form 表单区域 -->
<form action=""> <!-- action=""填发送数据的地址 -->
<!-- 文本框 -->
用户名<input type="text" placeholder="请输入用户名"> <!-- placeholder="提示信息"可在文本框和密码框使用 -->
<br>
<!-- 密码框 -->
密码<input type="password" placeholder="请输入密码">
<br>
<!-- 按钮 -->
<!-- 按钮必须在form里才能使用 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
<!-- 单选框 -->
性别 <!-- name相同为一组，只能选择一个 -->
<input type="radio" name="gender" checked>保密<!-- checked默认为选中状态 -->
<!-- lable标签:当用户在lable元素内单击文本，被包裹的表单元素会被触发单击事件-->
<!-- 写法一：lable标签只包裹内容，不包裹表单控件；设置lable标签的for属性和表单控件的id属性值相同 -->
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
<!-- 写法二：使用lable标签包裹文字和表单控件，不需要属性 -->
<label><input type="radio" name="gender" >男 </label>
<!-- 支持lable标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域... -->
<br>
<!-- 多选框 -->
兴趣
<input type="checkbox" checked>无 <!-- checked默认为选中状态 -->
<input type="checkbox" >画画
<input type="checkbox" >敲代码
<br>
<!-- 下拉列表 -->
地区
<select> <!-- select下拉列表整体 -->
<option>中国</option> <!-- option下拉列表每一项 -->
<option selected>北京</option> <!-- selected默认选择 -->
<option>广东</option>
<option>湖南</option>
</select>
<br>
<!-- 文本域 -->
<!-- 右下角有拖拽功能，一般都会禁用，并用css设计尺寸 -->
个人简介
<br>
<textarea >请输入个人简介</textarea>
<br>
<!-- 上传文件 -->
上传文件<input type="file" multiple> <!-- multiple属性可实现文件多选功能 -->
<!-- 无语义的布局标签 -->
<!-- div:大盒子 -->
<div>这是div标签</div> <!-- 独占一行 -->
<div>这是div标签</div>
<!-- span:小盒子 -->
<span>这是span标签</span> <!-- 不换行 -->
<span>这是span标签</span>
<br>
<!-- 字符实体 -->
<!-- 空格 -->
你 好 <!-- 在代码中敲键盘空格,网页只识别一个 -->
你 好
<!-- 尖括号 -->
<p>
</body>
</html>网页显示如下
扫一扫
2275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
