【HTML】Codecademy学习笔记

1. The <strong></strong> tags made our text bold!

    The <em></em> tags made our text italicize!

 

2.a Always put <!DOCTYPE html>on the first line. This tells the browser what language it's reading (in this case, HTML).
2.b Always put <html> on the next line. This starts the HTML document.
2.c Always put </html> on the last line. This ends the HTML document.

1 <!DOCTYPE html>
2 <html>
3     写在这里的文字会被网页显示。
4 </html>

 

3. the most recently opened tag should be the first one closed.

 1 HTML的标签不能嵌套。
 2 
 3 ---正确---
 4 <FirstTag>
 5     <SecondTag>
 6     </SecondTag>
 7 </FirstTag>
 8 ----------
 9 
10 ---错误---
11 <FirstTag>
12     <SecondTag>
13     </FirstTag>
14 </SecondTag>
15 ----------

 

4.a <head></head> has an opening and a closing tag.
4.b The head includes important information about the webpage, such as its title. 
4.c The title is the words we see in the tab(the title at the top of your browser window).

 

5. The content in the body is what will be visible on the actual page. The body goes inside the html tags, but not inside the head tags. Each paragraph requires opening and closing tags: <p> and </p>. We put content in between the tags, like this:

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <title>
 6             My Page just for Vivi!
 7         </title>
 8     </head>
 9     <body>
10         <p>
11             Vivi is my girl friend!
12         </p>
13         <p>
14             Yes, of course!
15         </p>
16     </body>
17 </html>

 

 

6. heading 和 paragraph 是不能嵌套的。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>
 5             Headings & Paragraphs
 6         </title>
 7     </head>
 8     <body>
 9         <h1>--The CEO--</h1>    
10         <h2>--VP of Fancy Towne--</h2>
11         <h3>--Director of Some Stuff--</h3>
12         <h4>--Middle management--</h4>
13         <h5>--Lowly assistant--</h5>
14         <h6>--Gets coffee for everyone else--</h6>
15         <p>The first paragraph!</p>
16         <p>The second paragraph!</p>
17     </body>
18 </html>

 

7. The <img> tag is a bit different from the others. Instead of putting the content between the tags, you tell the tag where to get the picture using src. It's also different because this tag self-closes: it doesn't have a separate tag to close it. Note the / in the tag to close it: <img src="url" />. Make sure it's before the closing <body> tag! 

    The <a> tag is the one used to make hyperlinks (or just links) on webpages. These are the words or images you click to go to a new page!

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title></title>
 5     </head>
 6     <body>
 7         <a href="www.cnblogs.com">
 8             <img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg"/>
 9         </a>
10         
11         <img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg">
12 
13         <a href="www.baidu.com">Click here to Baidu!</a>
14     </body>
15 </html>

 

8. Ordered lists and Unordered lists: The best thing about unordered lists is that they work exactly the same way as ordered lists. The only difference is that instead of using <ol>, we use <ul>. Everything else is the same! They can nested with each other!

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <title>Nested lists</title>
 5     </head>
 6     <body>
 7     <ol>
 8         <li>Dad's interests
 9         <ul>
10             <li>football</li>
11             <li>knitting</li>
12         </ul>
13         </li>
14         <li>Mom's interests
15             <ul>
16             <li>hating football</li>
17             <li>skydiving</li>
18             </ul>
19                 </li>
20     </ol>
21     <ul>
22             <li>Favorite Boys' Names</li>
23                 <ol>
24             <li>Boy1<li>
25             <li>Boy2<li>
26             <li>Boy3<li>
27         </ol>
28             <li>Favorite Girls' Names</li>
29          <ol>
30              <li>Girl1<li>
31              <li>Girl2<li>
32              <li>Girl3<li>
33          </ol>
34     </ul>
35     </body>
36 </html>

 

9. It's important to know that you can use the style attribute for paragraphs, headings, and even links! Remember: Dont nest any tags when you change styles!

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>Putting it all together</title>
5     </head>
6     <body>
7         <p style="font-size: 20px; color: blue; font-family: Garamond">A truly spectacular paragraph!</p>
8     </body>
9 </html>

 

10. Summary of styles!

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title></title>
 5     </head>
 6     <body style="background-color:yellow">
 7         <!-- Hello everyone, I'm the comments! -->
 8         <ol style="color:blue; font-size:16px; font-family:Courier New">
 9             <li style="text-align:center">I'm in <strong>ordered lists</strong>.</li>
10         </ol>
11         <ul style="color:green; font-size:20px; font-family:Verdana">
12             <li style="text-align:left">I'm in <em>unordered lists</em>.</li>
13             <li></li>
14         </ul>
15     </body>
16 </html>

 

 

posted @ 2013-12-13 16:45  SpongeHAO  阅读(326)  评论(0)  编辑  收藏  举报