您的位置：首页 > Web前端

前端学习日记（二）：html中列表、超链接、图片、表格、H5新增标签的简单应用

2020-03-11 12:20 666 查看

一、列表
(1)、有序列表ol（子元素 li，序号默认从1 开始）
代码如下：

<body>
<h3>有序列表</h3>
<ol>
<li>苹果</li>
<li>橘子</li>
<li>圣女果</li>
<li>薯片</li>
</ol>
</body>

预览效果如下：

(2)、有序列表ol（子元素 li ）
代码如下：

<h3>无序列表</h3>
<ul>
<li>橘子</li>
<li>苹果</li>
<li>香蕉</li>
<li>薯片</li>
</ul>

预览效果如下：

(3)、自定义列表dl （子元素 dt：标题 子元素dd:列表项 ）
代码如下：

<h3>自定义列表</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Marup Language</dd>
<dt>HTML</dt>
<dd>HyperText Marup Language</dd>
<dt>HTML</dt>
<dd>HyperText Marup Language</dd>
<dt>HTML</dt>
<dd>HyperText Marup Language</dd>
</dl>

预览效果如下：

二、超链接（超链接可以允许我们从当前文档链接到任意其他文档（其他资源），也可以链接 到文档的某个特定部分。 ）

(1)href 表示跳转的目的地，取值如下

  1. ID值
    用于锚点跳转
  2. URL
    URL使用path来定位文件path又分为相对路径和绝对路径
  3. email
    <a href=“mailto:邮件地址”>Send email to nowhere</a>

(2)target 规定在何处打开链接文档

  1. _blank ：在新窗口打开页面
  2. _self ：在当前窗口打开页面
  3. _parent ：在父窗口打开页面
  4. _top：打开的页面占据了整个页面

三、图片
（1）在Html文档中代表图片。
<img src= " images/phone.jpg " alt= “图片找不到了…” width= ”200px" >

  1. src 表示图片的URL地址（必须）
  2. alt 表示替换图片的文本内容，当url地址出错时，将会显示alt的内容
  3. width 设置图片的宽度，单位为px
  4. height 设置图片的高度，单位为px

四、表格 ( <table>在Html文档中代表表格，通过二维数据表表示数据。 )
<table>在Html文档中代表表格，通过二维数据表表示数据。 Table标签经常需要配合caption thead tfoot tbody tr td th col colgroup一起使用

（1）table属性

  1. •align 表格应该如何在文档中对齐，可以取值： left,center,right •border 设定表格边框特性，取整数为值，单位为px
  2. •cellpadding 设定内容与单元格之间的距离
  3. •cellspacing 设定单元格与单元格之间的距离
  4. •width 设定表格的宽度
  5. •bgcolor 设定表格的背景色

（2）表格结构

  1. thead 表示表头，包含了<tr>以及<td>
  2. tfoot 表示表脚，包含了对表的总结信息。
  3. tbody 表示表格的表体，包含了很多<tr>
  4. caption 表示表格的标题信息
  5. tr 表示表格的行，可以包含<td>,<th>元素.

（3）td/th属性（ 表示表格用来包含数据的单元格。<th>常用于表头 ）

  1. colspan 跨列
  2. rowspan 跨行数
  3. width 宽度，当宽度太窄以至于无法正确显示单元格内容时，在页面显示的 时候会适当的调整

（4）colgroup （定义一个表中的一组列， 只能作为table的子元素，位于 元素后，其他元素之前。 ）

（5） col （定义一个表中的列，并用于在所 有公共单元上定义通用语义，经常作 为元素的子元素。 ）

1.span 跨列数，即规定有几列可以作为同一 列

五、H5新增标签

（1）header【<header>是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面 内的一个内容区块的标题，但也可以包含搜索表单或logo。】

（2） nav 【<nav>是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页 面的其他部分。】

（3） article 【<article>代表文档，页面或应用程序中 独立的，完整的，可以独自被外部引用 的内容，也可以嵌套使用。可以是一篇 博客或者报刊中的文章，一篇论坛帖子 ，一段用户评论或者独立的插件，或其 他任和独立的内容。】
（4） section 【<section>作为Html文档独立的功能。】

（5） aside 【<aside>元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主 要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的 部分。 】

（6）footer【<footer>元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其 相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似， 一个页面中也未限定footer元素的个数。 】

（7）address【<address>元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他 们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所 有联系信息。】

（8）figure& figcaption 【figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独 立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素 所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件， 统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书 写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是 允许放置多个其他元素。】

（9） details 【details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。 details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供 的详细数据表格。 】

  1. open 当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false 时，其内部的子元素应该被收缩起来不显示。默认值为false

（10）summary【summary元素从属于details，用鼠标单击summary元素中的内容文字时，details 元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元 素，浏览器会提供默认文字(详细信息)以供单击。】

  • 点赞
  • 收藏
  • 分享
  • 文章举报
孤月儿 发布了13 篇原创文章 · 获赞 0 · 访问量 391 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航