本文出自   http://blog.csdn.net/shuangde800

------------------------------------------------------------------------------------------------


HTML: HyperText Markup Language (超文本标记语言)


  • Hypertext(超文本) means "text with links in it."
  • A markup language（标记语言） is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more.
HTML可以看作每个网页的骨架，组成了网页的结构。



CSS: Cascading Style Sheets(级联样式表)



CSS让网页更加漂亮，比如它可以给网页设置皮肤。



HTML基本结构


<!DOCTYPE html>   // 总是在第一行，告诉浏览器在读什么语言
<html>                      // HTML文档的开始部分

</html>                    //  HTML文档的结束部分


基本术语


1. 标签

  1. 两个尖括号<xxx>括起来的叫做tags（标签）.
  2. Tags总是成对出现： 一个opening tag（开口标签） and a closing tag（闭合标签）.
  3. Example of opening tag: <html>
  4. Example of closing tag: </html>
可以把标签看作是括号匹配的形式，每当你有一个开口标签，一定要有一个对应的闭合标签。标签也可以嵌套，应该按正确的形式进行嵌套：一个闭合标签应和它左边最近的一个开口标签匹配。例如，
合法的：<first tag><second tag> Some text! </second tag></first tag>
不合法的：<first tag><second tag>Some text!</first tag></second tag>

<strong> </strong>粗体字
 


head（头部）


整个html文件的内容都在<html> </html>之内

There are always two parts to the file: the head and body

a. It has an opening and a closing tag.  
    head有开口标签和闭合标签
b. The head includes important information about the webpage, such as its title. 
    head包含网页的重要信息，比如标题
c. The title is the words we see in the tab (for example, the title of this page is "Introduction to HTML").
    标题就是我们在tab栏看到的字



Body（主体）内的段落


我们把一对标签和标签里的内容叫做element（元素）
element = <opening tag> + content + <closing tag>

在<body>标签里的内容是在网页中的真正的可视部分

<html>
    <head></head>
    <body></body>
</html>


1. 在title标签内，是你页面的名字，可以是任何东西。
2. 在title标签下，是body标签
3. 在body标签内，我们可以创建段落，<p> content </p>


Paragraphs and headings（段落和标题）


我们已经学习了：
1. 创建一个有标签的html文件
2. 在<head>中创建标题（title）
3. 在<body>中创建段落（p）

接下来，我们还可以给我们的段落创建标题，<h1>是最大的标题

HTML给了我们很多种标题尺寸，<h1>是最大的，<h6>是最小的标题
  • <h1> - The CEO
  • <h2> - VP of Fancy Towne
  • <h3> - Director of Some Stuff
  • <h4> - Middle management
  • <h5> - Lowly assistant
  • <h6> - Gets coffee for everyone else


Mid-lesson breather中途小结


1. HTML是用来给网页做结构的
2. 我们用浏览器来打开html文件，并且浏览器展示文件内容给我们
3. html有一个<head>和一个<body>标签
4. 在head中，我们有<title>文档标题，用这个来表示页面的名字
5. 怎样制作段落(p)和段落的标题(h1,h2...h6)


Adding images（添加图片）


可以在网站中添加图片使得网页更加漂亮！只要一个标签：<img>.
这个标签和其它有些不一样，它并不是把内容放在开口标签和闭合标签之间，而是用src告诉标签图片在哪里！
同时，这个标签不同之处还在于它使用的闭合方式是self-closes，即<imgsrc="url" />

每个图片在网络中都有它的url，我们只要直接引用url就可以了，例如：
<img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />


Click that image（点击图片）


可以设置点击图片，然后跳转到另一个页面

<a>标签是用来设置超链接（hyperlinks）的，就像<img>的src属性一样，<a>也有它的属性href用来说明跳转到何处
<a href="http://www.codecademy.com">Learn to code!</a>

如果要设置点击图片，然后跳转，那么可以把图片放在<a href = "url">  img </a>中。



[Codecademy] HTML&CSS 第一课：HTML Basic的更多相关文章

  1. 妙味课堂——HTML+CSS(第一课)

    一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...

  2. 2、第2节课html教程客户端控件/css第一课/20150917

    1.<form> 标签 提交 <form action="http://www.baidu.com" method="post'> </fo ...

  3. [Codecademy] HTML&CSS 第三课：HTML Basic II

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  4. [Codecademy] HTML&CSS第八课：Design a Button for Your Webwite

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  5. [Codecademy] HTML&CSS 第七课：CSS: An Overview

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  6. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

  7. 互联网金融爬虫怎么写－第一课 p2p网贷爬虫（XPath入门）

    版权声明:本文为博主原创文章,未经博主允许不得转载. 相关教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...

  8. javascript第一课练习

    <!doctype html> <html lang="en">  <head>   <meta charset="UTF-8& ...

  9. ChartControl第一课简短的控件初步设计

    WinForms Controls >Controls > Chart Control > Getting Started This document gives you a qui ...

随机推荐

  1. Android 实现在线程中联网

    其实我们要牢记的是,对数据流的操作都是阻塞的,在一般情况下,我们是不需要考虑这个问题的,但是在Android 实现联网的时候,我们必须考虑到这个问题.比如:从网络上下载一张图片: Java代码: pu ...

  2. 动态规划之插头DP入门

    基于联通性的状态压缩动态规划是一类非常典型的状态压缩动态规划问题,由于其压缩的本质并不像是普通的状态压缩动态规划那样用0或者1来表示未使用.使用两种状态,而是使用数字来表示类似插头的状态,因此.它又被 ...

  3. Sort List 分类： leetcode 算法 2015-07-10 15:35 1人阅读 评论(0) 收藏

    对链表进行排序,要求时间复杂度为O(n log n) ,不使用额外的空间. 我一开始的想法是借助quicksort的思想,代码如下: # time O(nlog(n)) # Definition fo ...

  4. C#中调用Windows API时的数据类型对应关系

    原文 C#中调用Windows API时的数据类型对应关系 BOOL=System.Int32 BOOLEAN=System.Int32 BYTE=System.UInt16 CHAR=System. ...

  5. hdu 4614 Vases and Flowers （二分 线段树）

    题目大意:爱丽丝有N个花瓶,每个花瓶最多放一朵花.然后又如下两个操作. 1:A B    从第A个花瓶开始,往后依次插B朵花,直到不能插为止.如果一朵花都不能插入就输出“can.....”,否则输出第 ...

  6. android模拟器 一个错误：X Error of failed request: BadRequest (invalid request code or no such operation)

    最近ubuntu12.04学习python,python2.7 python3.2所不同的是还是蛮大的.学习思考的新 升级后 结果显示 输入方法不显示   update-manager 和  add- ...

  7. 基于visual Studio2013解决C语言竞赛题之1024求和

          题目 解决代码及点评 /* 已知有N个无规律的正整数,请编程序求出其中的素数并打印出能被5整除的数之积. */ #include <stdio.h> # ...

  8. QNX简介<转载>

     QNX QNX是由QNX软件系统有限公司开发的实时操作系统. http://blog.csdn.net/happyhell/article/details/7087199 基本特征 * QNX是一个 ...

  9. linux shell种类

    1.shell 种类 目前我们的 Linux (以 CentOS 5.x 为例) 有多少我们可以使用的 shells 呢? 你可以检查一下 /etc/shells 这个文件,至少就有底下这几个可以用的 ...

  10. Eclipse用法和技巧十四：自动生成的TODO注释2

    前面介绍了自动生成的TODO注释含义,配置以及如何去除的方法,这里介绍下TODO常见的用途.工作中经常会遇到写代码写到一半,被叫过去开会推动沟通.o(╯□╰)o 一般都有写代码停下来一段时间,再回来就 ...