本文出自   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创建与读取Excel

    主流的操作Excel的有两种方法,一种是通过poi包,另一种是通过jxl包.这里我主要讲解通过jxl包来读写Excel. 首先需要导入一个jxl.jar包. 下载地址:http://www.andyk ...

  2. IOS 新消息通知提示-声音、震动

    一.APNS 1.注册 [[UIApplication sharedApplication] registerForRemoteNotificationTypes:UIRemoteNotificati ...

  3. django局域网建一个网站

    之前总是运行的python manage.py runserver,用默认的在本机访问的127.0.0.1:8000,如果跟几个同学一起去开发一个网站来玩玩的话,可以这样: python manage ...

  4. 【译】在ASP.NET中创建PDF-iTextSharp起步

    原文 [译]在ASP.NET中创建PDF-iTextSharp起步 .Net framework 中自身并不包含可以和pdf打交道的方法.所以,当你需要你的ASP.Net Web应用程序中包含创建或与 ...

  5. Android圆形图片自定义控件

    Android圆形图片控件效果图如下: 代码如下: RoundImageView.java package com.dxd.roundimageview; import android.content ...

  6. MAMP：在 OSX 中搭建 Apache, MySQL, PHP 环境并本地安装、调试 WordPress

    MAMP 这个名字来源于 Macintosh Apache MySQL PHP,显然专门用来在 Mac 环境下搭建 Apache.MySQL.PHP 平台. 虽然 OSX 中已经预装了 Apache ...

  7. [教程]安装青鸟云Web服务器

    青鸟云Web服务器 支持的安装环境: Windows XP (32bit) Windows Server 2003/R2 (32bit) Windows 7 (32/64bit) Windows Se ...

  8. ESRI Shapefiles (SHP)

    ESRI Shapefiles (SHP) Also known as ESRI ArcView Shapefiles or ESRI Shapefiles. ESRI is the company ...

  9. 创建Activity

     创建Activity 创建 Activity 分为3个步骤: 1.创建一个扩展子Activity的class 2.创建一个Layout 3.在 AndroidMainfest 中 配置这个Activ ...

  10. wcf 出现 IsContentTypeSupported 错误

    查看添加的服务地址是不是https开头的,而 *.config 文件里面自动添加的链接变成了http,当前的bindbing类型为basicHttpBinding, 解决方法:在config文件里面手 ...