<!-- ???????a: ???????????????(1)超链接 ????????????????href 超链接的地址 ????????????????target: _self 默认 在当前中打开链接地址 ????????????????????????_blank ?在空白的页面打开连接地址 ???????????????(2)标签内部跳转 ????????????????锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。 ????????????????如果有href = # 表示返回置当前页页首,相当于刷新,编写时应避免,应该使用 javascript:void(0) ???????img ???????????src:连接的图片资源 ???????????alt:图片资源加载失败。显示的文本 ???????a 标签与img标签连用 实现图片点击跳转页面 ???????????标签可以装 img 但会出问题 即 a标签会出现在图片下边一行空行 所以只有将a标签设置于图片一样大小才不会出问题。先把a标签变成行内块 才能设置大小 ???????ul: unordered list 无序列表 ul下的子元素只能是li ???可设计多级列表 默认变成不同心(用处很广泛 将来去除列表的标志可以做很多事情) ???????????li ???????????????type=‘circle‘ 圆心 ???????????????type=‘square‘ 方块 ???????ol: ???????????ordered list ???????????只能是li ???????dl:定义列表 ???????????dt:定义标题 ???????????dd:定义描述 在标题后有缩进--><!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>标签的使用</title> ???<style type="text/css"> ???????a{ ???????????display:inline-block; ???????????width = 300px; ???????????height = 300px; ???????} ???</style></head><body> ???<!--a 标签可以装 img 但会出问题 即 a标签会出现在图片下边一行空行 所以只有将a标签设置于图片一样大小才不会出问题--> ???<!--先把a标签变成行内块 才能设置大小--> ???<a href="https://www.baidu.com/"> ???????<img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" alt="图片加载失败显示文字" width="300" height="300"> ???</a> ???<!--锚点 ?这种写法尽量避免--> ???<a href="#">点击刷新 返回顶部</a> ???<!-- hash值 锚点 默认有点击行为 javascript:void(0);阻止a标签的默认点击行为--> ???<a href="javascript:void(0);">阻止a标签的默认点击行为</a> ???<!--ul + li 列表标签ul只能装li ?type="circle" 圆心 type="square"方心 --> ???<ul> ???????<li type="circle">一级列表</li> ???????<li type="square">一级列表</li> ???????<li>一级列表 ???????????<ul> ???????????????<li>二级列表</li> ???????????????<li>二级列表 ???????????????????<ul> ???????????????????<li>三级列表</li> ???????????????????</ul> ???????????????</li> ???????????</ul> ???????</li> ???</ul> ???<!--ol + li ?默认显示 1 1 1 1编号--> ???<ol> ???????<li>ol一级 ???????????<ol> ???????????????<li>二级</li> ???????????</ol> ???????</li> ???</ol> ???<!--ol + li 显示编号形式type 选择编号格式 ?start设置开始编号默认从1开始--> ???<ol type="i" start="3"> ???????<li>ol一级 ???????????<ol type="1" start="1"> ???????????????<li>二级</li> ???????????</ol> ???????</li> ???</ol> ???<!--dl + dt + dd ?这表示dt的作为标题 --> ???<dl> ???????<dt>dl+dt表格标签一</dt> ???????<dd>dl+dt表格标签二</dd> ???????<dd>dl+dt表格标签三</dd> ???????<dd>dl+dt表格标签四</dd> ???</dl></body></html>
html-2, a img ?ul li ?ol dl dt dd 标签与列表标签的简单使用
原文地址:https://www.cnblogs.com/Mr-wangxd/p/9662907.html