HTML 5 – the semantic

  • Semantic advantages:

    • Easy for the user to read, and allows for a clear structure when styles are lost.
    • SEO benefits. Search engines use tags to determine the context and weight of individual keywords.
    • Easy for other devices to parse, such as blind readers render web pages according to semantics
    • It is conducive to development and maintenance, more readable semantics, more maintainable code, and more harmonious relationship with CSS3.

  • 1, the < header >

    The header that defines a document or part of a document should be used as a container for introducing content or navigation links.

    You can define more than one <header> element in a single document, but note that a <header> element cannot be a child of a <address>, <footer>, or <header> element.

    2, < nav >

    Describes an area with multiple hyperlinks that contain a list of links to jump to other pages or to other parts within the page.

    Multiple <nav> elements can be defined in a single document.

    * * 3,

    Define the main content of the document, which should be unique within the document and not contain any content that is repeated in the document, such as sidebars, navigation links, copyright information, site logos, search boxes (unless the search box is the main function of the document).

    Note that you cannot have more than one <main> tag in a single document.

    element

    Represents a separate structure in a document, page, application, or website that is assignable and reusable. For example, in publishing, it could be a forum post, magazine or news article, blog, user-submitted comments, interactive component, or other separate content item.

    When the <article> element is nested, it represents the article associated with the outer element. For example, an <article> element that represents a blog comment can be nested within an <article> element that represents a blog post.

    5.

    Represents a part of the page that has little to do with the rest of the content, considered separate from that part of the content and can be split off separately without affecting the whole. This usually manifests as a sidebar or embedded content.

    6, < footer >

    Defines the footer of the most recent chapter content or root node element. A footer usually contains information about the chapter’s author, copyright data, or links related to the document.

    When using footer to insert contact information, use the <address> element within the footer element.

    Note cannot contain

    or

    7, < section >

    Represents an area (or section) in a document, for example, a topic group in content.

    Use <article> instead of <section> if the element content can be divided into several parts. Do not use the <section> element as a normal container, especially if the <section> element is just for styling or scripting purposes.

    <article> <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.”

    In plain English, <article> is more independent and complete than <section>. Can be judged by the content of the paragraph out of the context, whether complete, independent.

Difference between input and textarea

  • input
    1. A text tag is a single-line text box that does not wrap.
    2. Use the size attribute to specify the length of the displayed character. Note that when CSS is used to limit the width and height, the size attribute is no longer in effect.
    3. The value attribute specifies the initial value, and the Maxlength attribute specifies the maximum length that the text box can enter.
    4. You can set the width and height by width and height without increasing the number of lines

    Example:

    <input type="text" style="width: 200px; height: 100px" value="I'm setting text to be too wide and too high.">  
Copy the code

  • textarea

    1. A textarea is a multi-line text input field that can hold an unlimited amount of text. The default font for the text is a monospaced font (usually Courier). The size of the textarea can be specified using the COLs and Rows attributes. A better approach is to use the CSS height and width attributes.

      Example:

      <textarea rows="5" cols="5"</textarea> </textarea>Copy the code

      <textarea style="width: 200px; height: 100px"</textarea> </textarea>Copy the code

    In short, the biggest difference is that text is a single-line text box and textarea is a multi-line text box.

Simulate the implementation of a Textarea with a div

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

Mobile devices ignore methods that recognize numbers in a page as phone numbers

  • <meta name = "format-detection" content = "telephone=no">
Copy the code
      <meta name="format-detection" content="email=no"<meta name= <meta name= <meta name="format-detection" content="adress=no">//adress=noCopy the code
  • comprehensive 
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
Copy the code