JavaScript Interview Memo

1. How to understand the semantics of web

Definition: Web semantics refers to the use of appropriate semantic HTML tags, class names and other content, so that the page has a good structure and meaning, so that people and machines can quickly understand the content of the Web page.

Purpose: Facilitates search engine optimization (SEO) IE seo

Realize:

A, HTML tag semantics

Classic page structure diagram:

　　　　

• Header: H1-h6, Hgroup, etc., which represent a title or subtitle, such as

  <Header>  <Hgroup>    <H1>Title</H1>    <H2>Subtitle</H2>  </Hgroup>  <P>Text or pictures</P></Header>

• Navigation Area: Page navigation ribbon, such as

  <nav>  <ul>    <Li><ahref="#">Home</a></Li>    <Li><ahref="#">About Us</a></Li>  </ul></nav>

• Article and sections: actual content and components of the page, such as

  <article>    < Section>Content</ Section>    < Section>Content</ Section></article>< Section>  <article>Content</article>  <article>Content</article></ Section>

• Figure Label: Contains images, charts, and photos. The figure tag can contain figcaption,figcaption that represent the corresponding description of the image, and the corresponding relationship to the picture. Such as

  < Figure>  <imgsrc= "/figure.jpg"width= "304"Height= "228"alt= "Picture">  <figcaption>Caption for the figure</figcaption></ Figure>

• Media Elements: Audio, video-audio zone, such as

   <  audio  id  = "Audioplay"  >  <  source  SRC  = "... /h5/music/act/iphonewx/shakeshake.mp3 "  type  = "Audio/mpeg"  >   </ audio  >  

• Aside area: Supplemental content that can be removed without affecting the information conveyed by the article, such as

  < aside >  < h4 > supplemental </h4>  <p> Supplemental Content  </p></aside>

• Footer, etc.

B, CSS naming semantics

CSS semantics are the semantics of class and ID naming. A good CSS naming method can reduce the cost of communication debugging, easy to understand, such as

<!--take the performance as the center -<Divclass= "ft margin10">    <span>Nickname:seg</span><Div><!--Information-centric -<Pclass= "User_info">    <em>Nickname:seg</em><P>

C, URL semantics

Enables a search engine or crawler to better understand the content of the directory in which the current URL is located, such as

https://www.taobao.com/index.php/category?id=10049&addr_code=440000,440100,440103https:// www.taobao.com/category?id=10049&addr_code=440000,440100,440103

These two URLs point to the same resource, but obviously the second URL is more user-friendly and search-engine-oriented.

　　

JavaScript Interview Memo