关于HTML中一些知识点的思考(语义化,input和textarea的区别,用一个div模拟textarea的实现,移动设备忽略将页面中的数字识别为电话号码

451 阅读4分钟

HTML5-语义化

  • 语义化优点:

    • 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
    • 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
    • 方便其他设备解析,如盲人阅读器根据语义渲染网页
    • 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。
  • html5

    1、<header>

    定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

    在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

    2、<nav>

    描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

    在一个文档中,可定义多个<nav>元素。

    **3、

    定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

    需要注意的是在一个文档中不能出现多个<main>标签。

    4、<article>元素

    表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

    当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

    5、<aside> 元素

    表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

    6、<footer>

    定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

    使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。

    注意不能包含

    或者

    7、<section>

    表示文档中的一个区域(或节),比如,内容中的一个专题组。

    如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。 不要把 <section> 元素作为一个普通的容器来使用,特别是当<section>仅仅是为了美化样式或方便脚本使用的时候,应使用<div>。

    这几个标签,比较容易混淆的是<section>、<article>,所以这里特别说明:

    “Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

    通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境,是否完整、独立来判断。

input和textarea的区别

  • input
    1. text标签是单行文本框,不会换行。
    2. 通过size属性指定显示字符的长度,注意:当使用css限定了宽高,那么size属性就不再起作用。
    3. value属性指定初始值,Maxlength属性指定文本框可以输入的最长长度。
    4. 可以通过width和height设置宽高,但是也不会增加行数

    例子:

    <input type="text" style="width: 200px; height: 100px" value="我是设置过宽高的text">  
    

    img

  • textarea
    1. textarea是多行文本输入框,文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier),可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

      例子:

      <textarea rows="5" cols="5">我是通过cols和rows定的大小,我的cols是20,rows是10</textarea>
      

      img

      <textarea style="width: 200px; height: 100px">我是通过width和height定的大小,我的width是200px,heigh是100px</textarea>
      

      img

    简而言之,他们最大的区别就是text是单行文本框,textarea是多行文本框。

用一个div模拟textarea的实现

  • <div id="textarea" contenteditable="true"></div>
    
    #textarea {
         width:300px;
         border:1px solid #ccc;
         min-height:150px;
         max-height:300px;
         overflow: auto;
         font-size: 14px;
         outline: none; 
    }
    

移动设备忽略将页面中的数字识别为电话号码的方法

  • <meta name = "format-detection" content = "telephone=no">
    
      <meta name="format-detection" content="email=no">//告诉设备不识别邮箱,点击之后不自动发送
      <meta name="format-detection" content="adress=no">//adress=no禁止跳转至地图!
    
  • 综合
    <meta name="format-detection" content="telephone=no,email=no,adress=no">