HTML Anatomy
elements
body
<body>
</body>
Only content inside the opening and closing body tags can be displayed to the screen.
structure
<body>
<p>This paragraph is a child of the body</p>
</body>
the <p>
element is nested inside the <body>
element.The <p>
element is considered a child of the <body>
element, the parent.
headings标题
In HTML, there are six different headings, or heading elements.
headings elements ordered from largest to smallest in size.<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Divs
<divs>
is short for "division"
Remember to always add two spaces of indentation when you nest elements inside of <div>
s for better readability.
attributes
Attributes are made up of the following two parts:
The name of the attribute
The value of the attribute
Dispalying text
Paragraphs (<p>
) contain a block of plain text.
<span>
contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content.
Styling text
The <em>
tag emphasizes text, while the <strong>
tag highlights important text.
The <em>
tag will generally render as italic emphasis.
The <strong>
will generally render as bold emphasis.
Line breaks
<br>
only is composed of starting tag.
Unordered lists
unordered list tagul
<ul>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li>
</ul>
Ordered list
<ol>
<li>Preheat the oven to 350 degrees.</li>
<li>Mix whole wheat flour, baking soda, and salt.</li>
<li>Cream the butter, sugar in separate bowl.</li>
<li>Add eggs and vanilla extract to bowl.</li>
</ol>
Images
<img src="image-location.jpg />
The <img>
tag has a required attribute called src
. The src
attribute must be set to the image's source, or the location of the image. In this case, the value of src
must be the uniform resource locator (URL) of the image. A URL is the web address or local address where a file is stored.
Image Atls
<img src="#" alt="A field of yellow sunflowers" />
Videos
the <video>
tag requires a src
attribute with a link to the video source.
<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>