本文出自   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. Nginx 因 Selinux 服务导致无法远程訪问

    文章来源:http://blog.csdn.net/johnnycode/article/details/41947581 2014-12-16日 昨天晚上处理好的网络訪问连接.早晨又訪问不到了. 现 ...

  2. 响应式设计：理解设备像素，CSS像素和屏幕分辨率

    概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...

  3. Android SurfaceView实战 带你玩转flabby bird （下）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43063331,本文出自:[张鸿洋的博客] 1.概述 在Android Surfa ...

  4. Google出品的自动Web安全扫描程序 Skipfish 下载及安装使用方法

    Skipfish是由google出品的一款自动化的网络安全扫描工具,该工具可以安装在linux.freebsd.MacOS X系统和windows(cygwin). 谷歌工程师Michal Zalew ...

  5. C++静态库中使用_declspec(dllexport) 不能导出函数的问题

    在某项目中,有一些静态库,这些静态库中有类型命名的函数GET_XXX.在一次项目结构调整的时候,我想将调用这静态库的代码编译成DLL,并且将这些Get函数导出,我就直接就这些函数前面添加了_decls ...

  6. WPF4字体改善

    原文 WPF4字体改善 WPF4对字体渲染做了很大的改善,增加了TextOptions属性,该属性可以设置TextFormattingMode,TextRenderingMode,TextHintin ...

  7. Spring Web MVC中的页面缓存支持 ——跟我学SpringMVC系列

    Spring Web MVC中的页面缓存支持 ——跟我学SpringMVC系列

  8. Jquery学习笔记：获取jquery对象的基本方法

    jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...

  9. Fix Windows 7 Msvcp71.dll And Msvcr71.dll Missing Error

    Fix Windows 7 Msvcp71.dll And Msvcr71.dll Missing Error Fix Msvcp71.dll And Msvcr71.dll Missing Erro ...

  10. Codeforces Round #272 (Div. 2)AK报告

    A. Dreamoon and Stairs time limit per test 1 second memory limit per test 256 megabytes input standa ...