前端从哪里开始的3?

399 阅读2分钟

3 从标签开始之 复杂标签

3-1 复杂列表标签

3.1 无序列表

没有顺序的列表标签,一般用于普通的没有先后顺序的列表,比如菜单列表,城市列表,产品列表等

在HTML中用,ul标签表示 无序列表,li代表 列表项。

Demo及页面效果:


3.2 有序列表

Demo及页面效果:

3.3 自定义列表

Demo及页面效果:

注:<dt> </dt> 代表 define title


3.4 列表嵌套

列表和列表中可以嵌套, 但不能胡乱嵌套

li 中可以嵌套其他的 子 ulolli

自定义列表中的 dd 中也可以嵌套uldlol

Demo及页面效果:


3-2 常见的文档标签

h1 - h6 标题标签, 常用的有H1 H2 H3

段落标签 p

注释标签 <!-- -->

换行标签 br

水平线标签 hr


3-3 表格标签

  • 表格标签:table
  • 行标签:tr
  • 行头:th
  • 单元格:td
  • 表格头部:thead
  • 表格身体:tbody
  • table的属性,横跨列: colspan
  • table的属性,横跨行: rowspan
  • 显示单元格:border

Demo及页面效果:


3-4 超级链接标签

超级链接标签:a

  1. a 标签是 帮助我们网页进行相互链接跳转的标签
<a href="http://www.baidu.com">这里是超级链接内容</a>

浏览器展示效果 如下:

注: 点击链接 即可跳转百度搜索页面

注:href 属性,指向跳转的地址

  1. target:用于指定链接页面的打开方式, 其取值有_self_blank两种,其中_self为默认值,_blank为新窗口打开方式

参考代码:

  # 在新窗口打开
  <a target="_blank" href="http://www.baidu.com">百度</a>
  # 默认打开
  <a target="_self" href="http://www.tmall.com">天猫</a>
  # 默认打开
  <a href="http://www.sina.com.cn">新浪</a>
  
  1. 空连接:JavaScript:0时 什么都不操作
 <a href="javascrift:;">弹出对话框</a>
 # 一般指向javascript协议
 # 不给任何代码, 代表执行js协议,空
 # 不会有任何影响
 # 页面不会跳转

好啦,今天的内容有点点多,快点消化吧~~

谢谢阅读!

明日分享:HTML补充