本文出自   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. 手动制作rpm包

    制作RPM包的过程,简单的说,就是为制作过程提供一个“工作车间”,即一个目录,里面需要包含以下几个子目录: BUILD        ————编译相关源码包时的工作目录: RPMS         — ...

  2. android的事件分发机制理解

    android的事件分发机制理解 1.事件触发主要涉及到哪些层面的哪些函数(个人理解的顺序,可能在某一层会一次回调其它函数) activity中的dispatchTouchEvent .layout中 ...

  3. Python 第五篇(上)：算法、自定义模块、系统标准模块（time 、datetime 、random 、OS 、sys 、hashlib 、json和pickle）

    一:算法回顾: 冒泡算法,也叫冒泡排序,其特点如下: 1.比较相邻的元素.如果第一个比第二个大,就交换他们两个. 2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应 ...

  4. awk 工具简介NF-NR

    相较于 sed 常常作用于一整个行的处理, awk 则比较倾向于一行当中分成数个『字段』来处理. 因此,awk 相当的适合处理小型的数据数据处理呢!awk 通常运作的模式是这样的:[root@linu ...

  5. 使用Spring标签库

    A.Spring标签库 Web项目若使用Spring Web MVC并使用JSP作为表现的话.从Spring2.0版本开始提供一套标签库可供使用. 使用标签库无非是易于开发,维护之类云云.这里就不阐述 ...

  6. 如何在Windows上配置EBS R12.1.3的OAF开发环境

    1.找到想要开发的EBS OAF扩展对应的PATCH,可以参照下面的Note,因为我要做的是R12.1.3的开发,所以要下载p9879989_R12_GENERIC OA Framework - Ho ...

  7. PHP - 递归函数

    /** * factorial($num) 计算阶乘 * @param string $num * @return string $total */ function factorial($num) ...

  8. MFC 只启动一个程序实例

    问题描述: 我们开发过程中可能会经常遇到,只启动一个程序实例.即一个程序启动之后,如果再次执行该程序,将会恢复之前打开的程序,而不是打开一个新的程序. 实现原理:利用FindWindow/FindWi ...

  9. 关于如何实现程序一天只启动一次的想法(C++实现)

    问题描述: 我们在程序开发当中,经常会遇到某些子程序需要实现一天只启动一次的功能,该功能实现的方法有很多种,其原理都是通过记录标记为来实现的.本次要分享的也是利用程序标记为来实现的,而且只需要使用一个 ...

  10. 利用FFT 计算生成离散解析信号

    通常我们用到的信号都是实值信号,但是我们可以根据这个实信号构造出一个复信号,使得这个复信号只包含正频率部分,而且这个复信号的实部正好就是我们原来的实值信号.简单的推导可知,复信号的虚部是原信号的希尔伯 ...