美文网首页
基础(四)--创建语义化界面(一)

基础(四)--创建语义化界面(一)

作者: Caesar_emperor | 来源:发表于2020-04-24 22:51 被阅读0次

为了方便爬虫解析和计算机更明白,语义化十分重要,即见名知意
一、结构化语句

div:Division(分隔),双标签。在文档内定义一块区域,即包含框
span:Span(范围),双标签。在文档内定义一块区域,即包含框
被 <span> 元素包含的文本,您可以使用 CSS 对它定义样式
del:Deleted Text(删除的文本),双标签。定义删除的文本
ins:Inserted Text(插入的文本),双标签。定义插入的文本(会生成下划线)
hr:水平线,双标签

二、内容语句

abbr:Abbreviation(定义缩写词),鼠标滑上去,显示title的值

<abbr title="People's Republic of China">PRC</abbr>

acronym:Acronym(取首字母的缩写词),鼠标滑上去,显示title的值

<acronym title="World Wide Web">WWW</acronym>

address:Address(地址)
<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

--用于区别输入文本方式的标签--

dfn:Defines为Definition Term(定义条目)

<dfn>定义项目</dfn>

kbd:Keyboard Text(定义键盘文本,表示从键盘输入的文本),用法同dfn
samp:Sample(示例),定义样本,用法同dfn
tt:Teletype Text(打印机文本),定义打印机文本,用法同dfn
code:Code Text(定义计算机源代码),用法同dfn

var:定义变量,您可以将此标签与 <pre> 及 <code> 标签配合使用,双标签。

--几种引用--

blockquote:Block Quotation(区块引用语),<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。
cite:Citation(引用),双标签。定义引文,作品标签。可以单用(定义文本,显示斜体),也可以用在blockquote,ins中,作为属性指定引用的来源
q:Quotation(引用语),引用短语,使用后会加上双引号

<q>This is a short quotation</q>

**区别样式的和引用我们看到的只是字体样式的改变,以此区别功能,不同的标签告知计算机是何种功能

三、键盘属性

accesskey, 定义访问某元素的键盘快捷键,必须用在a标签内(可以用Alt+字母使用,火狐使用shift+alt+key但有时候还需要回车键确认)

<a href="http://www.baidu.com" accesskey="a">和无色</a>

tabindex,定义元素的tab键索引编号, tab按tabindex的number顺序移动

<a href="http://www.baidu.com" tabindex="1">和无色</a>
<a href="http://www.baidu.com" tabindex="2">和</a>

四、内容属性

datetime

<time datetime="YYYY-MM-DDThh:mm:ssTZD">
描述
YYYY-MM-DDThh:mm:ssTZD 日期或时间。下面解释了其中的成分:
  • nbsp - YYYY - 年 (例如 2011)
  • MM - 月 (例如 01 表示 January)
  • DD - 天 (例如 08)
  • T - 必需的分隔符,若规定时间的话
  • hh - 时 (例如 22 表示 10.00pm)
  • mm - 分 (例如 55)
  • ss - 秒 (例如 03)
  • TZD - 时区标识符 (Z 表示祖鲁,也称为格林威治时间)|

五、其他属性

rel:定义当前页面和其他页面的关系(从源文档到目标文档的关系)

rev:反向链接,定义其他页面与当前页面的链接关系(从目标文档到源文档的关系)
**源文档指超链接所在的当前文档,目标文档是超链接将要打开的文档,一定要使用了a标签才能使用上面两个标签.两个标签只表明文档间关系,不会对链接有影响

1.表格table

  • cellspacing:单元格与单元格之间的空间距离(默认不是0)
  • cellpadding:每个单元格内容与它的边沿之前的距离
  • caption: <caption>表格标题</caption>表格标题放在table内部
<table border="1" cellpadding="5" cellspacing="0" width="400" align="center">
       <caption><h3>小说排行榜</h3></caption>
       <tr>
           <td>11</td>
           <td>22</td>
       </tr>
</table>

相关文章

  • 基础(四)--创建语义化界面(一)

    为了方便爬虫解析和计算机更明白,语义化十分重要,即见名知意一、结构化语句 div:Division(分隔),双标签...

  • 基础(四)--创建语义化界面(二)

    一、表格 单元格合并: 合并顺序:从上往下,从左至右 跨行合并:rowspan="合并的单元格的格子" 跨列合并:...

  • 标签语义化整理

    我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总结了一些常用的语义化标签,有...

  • 好程序员web前端培训分享常见html5语义化标签

    好程序员web前端培训分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了...

  • HTML: 标签语义化的理解

    一. 什么是 HTML 语义化 二. HTML 语义化网页的好处 三. 如何进行 HTML 语义化 四. 语义化标...

  • 2019-10-31

    # HTML5+CSS基础总结 1.语义化 语义化是什么?为什么要语义化?为页面添加一个元素,我们应该考虑这个元素...

  • web前端工程师面试题2021(一)

    一、什么是 标签语义化? 答:指的是用富有语义化的标签来创建网页结构,如:header,section,foote...

  • 前端基础知识整理(html篇)

    HTML是前端技术中基础的基础,虽然很简单,但是前端写的好坏区别在于是否充分理解了语义化。 语义化: 说的通俗点就...

  • day02前端基础table

    标签的语义化优先选用有语义标签 table:快速创建表格:table>tr*n>td*n 表格头部/主体/底部 一...

  • Semantic UI 使用小记

    Semantic UI Semantic UI—完全语义化的前端界面开发框架。 作为一个 C# Desktop 程...

网友评论

      本文标题:基础(四)--创建语义化界面(一)

      本文链接:https://www.haomeiwen.com/subject/nhwaihtx.html