h is short for heading

<h1>Welcome to my Website!</h1>
<h2>Bonus: Optional Extra Credit</h2>
 
  <h1>This is a Heading 1</h1>
   <h2>This is a Heading 2</h2>
   <h3>This is a Heading 3</h3>
   <h6>Smallest Heading (6)</h6>

This is a Heading 1

This is a Heading 2

This is a Heading 3

Smallest Heading (6)


P is short for “paragraph”

<p>I'm excited to eventually learn Django!</p>



a is short for “anckor” 锚

href is short for “Hypertext Reference”

    <a href="https://www.djangoproject.com/">
      Here is a link to the official Django Website</a>



img is short for “image”, alt is short for “alternative text”

<img src="https://www.python.org/static/community_logos/python-logo-master-v3-TM.png" 
alt="missing file">


image link:

    <a href="https://www.djangoproject.com/">
      <img src="django.png">
    </a>

 



ol is short for “order list”

li is short for “list”

  <ol>
    <li>Ridiculously Fast</li>
    <li>Reassuringly Secure</li>
    <li>Exceedingly Scalable</li>
  </ol>



ul is short “unorder list”

<ul>
  <li>Some item</li>
  <li>Some other item</li>
  <li>Third bullet point</li>
</ul>


  • Some item
  • Some other item
  • Third bullet point

nested example:

   <ol>
      <li>Item One</li>
      <li>Item Two</li>
        <ul>
          <li>I'm nested inside</li>
          <li>Also nested!</li>
            <ol>
              <li>Woah! <strong>Really nested!</strong></li>
            </ol>
        </ul>
    </ol>
  • Item One
  • Item Two
    • I&apos;m nested inside
    • Also nested!
      • Woah! Really nested!

basic structure of html

<!DOCTYPE html>
<html>
  <head>
    <!--  The head contains Meta-data -->
    <!-- Use html+Tab to get the boilerplate  -->
    <!-- Use cmd+/ to get the html comment line -->
    <meta charset="utf-8">
    <title> This is the Title! </title>
  </head>
  <body>
    <!-- The body contains the actual content -->


  </body>
</html>

b is short for “bold”

i is short for “italic”

em is short for “emphasized”

<!--  Old Way-->
<p>This is text that in <b>bolded</b> and this is in <i>italic</i></p>


<!--  Newer Semantic Way-->
<p>New semantics: <strong>strong</strong> <em>emphasized</em></p>


This is text that in bolded and this is in italic

New semantics: strong emphasized


div is short for “document divisions”

<div class="">

  <h1>Some Header that I want to group with</h1>
    <p>
      Some text that I want to be grouped
      with the header above!
    </p>

</div>

 

Some Header that I want to group with

Some text that I want to be grouped with the header above!


You can use a span: inside of the span This works as a in-line container that only effect something in-line!

span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

inside of the span  example: 

<p>
  You can use a span: <span> inside of the span</span>
  This works as a in-line container that only effect something in-line!
</p>

You can use a span: inside of the span This works as a in-line container that only effect something in-line!

   


 




0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注