本文出自   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. Linux内核中的宏：__init and __exit

    ZZ FROM: http://blog.csdn.net/musein/article/details/742609 ======================================== ...

  2. 数论F - Strange Way to Express Integers（不互素的的中国剩余定理）

    F - Strange Way to Express Integers Time Limit:1000MS     Memory Limit:131072KB     64bit IO Format: ...

  3. c-大量经典的c算法---ShinePans

    经典的100个c算法 算法  题目:古典问题:有一对兔子.从出生后第3个月起每一个月都生一对兔子.小兔 子长到第三个月后每一个月又生一对兔子,假如兔子都不死,问每一个月的兔子总数 为多少? _____ ...

  4. ACM 做题过程中的一些小技巧。

    ACM做题过程中的一些小技巧. 1.一般用C语言节约空间,要用C++库函数或STL时才用C++; cout.cin和printf.scanf最好不要混用. 2.有时候int型不够用,可以用long l ...

  5. PAD会取代PC吗

    公司上了新的内部管理系统,上线一片混乱,群里也很热闹,从系统是否应该支持pad谈起 ,有技术大佬说5年内就是pad时代了,pad将完全取代pc.我不知道大佬从何得出这个结论,有和数据支撑.我的观点是, ...

  6. Java--CyclicBarrier使用简介

    CyclicBarrier介绍 (一)一 个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这些线程必须不时 ...

  7. JVM调优总结（七）-典型配置举例1

    以下配置主要针对分代垃圾回收算法而言. 堆大小设置 年轻代的设置很关键 JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理 ...

  8. Windows的TCP协议参数

    注册表编辑器:regedit 表项:HKEY_LOCAL_MACHINE\SYSTEM\CurentControlSet\Services\Tcpip\Parameters 窗口扩大因子 & ...

  9. 梳理一下uboot是如何从nandflash挂载文件系统的

    只是找到了比较一点点的线索, 如下: 首先要有的概念是,内核在挂载文件系统之前,自己会做一个虚拟fs. 1. Uboot:从flash启动set bootcmd nand read 0x3000000 ...

  10. python gzip 压缩文件

    压缩数据创建gzip文件 先看一个略麻烦的做法 ? 1 2 3 4 5 6 import StringIO,gzip content = 'Life is short.I use python' zb ...