当前位置：网站首页>Structure of web pages

Structure of web pages

2022-07-22 06:21:00 【Dummerd】

Catalog

One . Web page structure

Two . Entity

3、 ... and .html The specification of

Four . Commonly used labels

5、 ... and . A block element , In line elements and in line block elements

notes : ctrl+/

  1. Comments cannot be nested
  2. Form the habit of commenting
  3. The notes should be simple and clear

One . Web page structure 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>

The document statement , Tell the browser , I'm following html Specification writing of ,

Prevent weird patterns during browser compilation , So there is garbled code .

<meta charset="UTF-8">

meta Set meta information , From the end tag , Auxiliary browser compiles code attribute , Attribute values are placed inside the tag

charset attribute , Character set

code ： Convert characters to binary

decode ： Convert binary to character

The statement ： The standards of encoding and decoding are different

UTF-8 Property value unicode

GB2312 China

GBK China extended version

<title>Document</title>

title By default, it appears in the title bar of the web page , Its most important role is to help the promotion department do SEO/SEM Optimize

<head></head>

head Save some meta information , The content in it will not appear in the web page , Help the browser parse the page

<body> </body>

body Writing web content

</html>

html Root element 、 Root tag , There is only one page html label , All contents should be written in html Inside

Two . Entity

1. What is an entity

There are some special characters in the browser , Such as ： Space , Greater than or less than , There is no way to write it directly ,  It must be represented by some extra characters .

2. The syntax of entities

 &+ The name of the entity +;          Such as ： Space &nbsp;    Less than no. &lt;      More than no. &gt;      Copyright symbols &copy;

3、 ... and .html The specification of

   1：html Case insensitive in , Generally, use lowercase

   2： Annotation symbols , Cannot nest implicitly , Form the habit of commenting

   3： The browser has the function of automatic error correction , But we must try our best to avoid affecting the performance of the website , And the correction is not necessarily what you want

   4： Labels must be standardized , Labels cannot be cross nested

Four . Commonly used labels

 1. Title Tag

   <h1> First level title </h1>

   <h2> Secondary title </h2>

   <h3> Three level title </h3>

   <h4> The fourth level title </h4>

   <h5> Five level titles </h5>

    <h6> Six level title </h6>

    h1——h6   It's an element , It's going to monopolize a line

    h1 Semantics is the most important ,h6 Semantic minimum , The title label is also used to assist the promotion department to promote

     h1 The importance of promotion is second only to title, General situation , A page only appears once h1

      Commonly used h1——h3

2. Paragraph Tags

P A block element , Is a special block element , Generally, it is only used to wrap pictures or words , There are default styles , There is a gap between paragraphs

3.hgroup Title Group

  <hgroup>

          <h1> De Chu Wang said </h1>    <h3> Wen honger Wang </h3>

  </hgroup>

 h1 and h3 It doesn't matter. , But put it in hgroup It shows that they are a group

 4. Emphasize labels

        em ,strong      Don't monopolize a line , It's an in-line element

   <em> Li renran .</em>     There will be italics   Strengthening of pronunciation and intonation

  <strong> The system is too good to be disassembled as if .</strong>     There will be thickening effect   Content enhancement

5.hr Split line

6.br Forced line wrap Line wrap label , From the end tag

Jian Erhe Jiu , It's time to take charge of the case of Pu Zhi in the law and disease Museum , <br> Businessmen and friends were born in Shuixian County in the rear , sharp .

<hr>

7.center In the middle

center><h3> My brother is old again , Don't let go .</h3></center>

8.del Delete line

9.div There's no semantics , Only one block element , For layout

10.span Without any semantics , Only one inline element , Usually used to wrap text

5、 ... and . A block element , In line elements and in line block elements

1. A block element

      Mainly used for layout   Such as ：div  p label  h1-h6  header  main   etc.

      It's going to monopolize a line , By default , The width of the block element is 100% of the parent element , Height is supported by content , If the width and height are set , Just listen wide and high

2. Inline elements

      Mainly used to wrap text   Such as ：SPan em strong a label   etc.

      Don't monopolize a line , Width and height cannot be set , The width and height of the elements in the line are supported by the content

3. Inline block element

       img Reference an external image to the page , Both block elements and in-line elements

原网站

版权声明
本文为[Dummerd]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211426212038.html

边栏推荐

猜你喜欢

随机推荐