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

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

作者: 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>
    

    相关文章

      网友评论

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

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