本文出自 http://blog.csdn.net/shuangde800
------------------------------------------------------------------------------------------------
HTML:HyperText Markup Language (超文本标记语言)
- Hypertext(超文本)means "text with links in it."
- Amarkup 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. 标签
- 两个尖括号
<xxx>括起来的叫做tags（标签）.
- Tags总是成对出现： 一个opening tag（开口标签）and aclosing tag（闭合标签）.
- Example ofopening tag:
<html>
- Example ofclosing tag:
</html>
可以把标签看作是括号匹配的形式，每当你有一个开口标签，一定要有一个对应的闭合标签。标签也可以嵌套，应该按正确的形式进行嵌套：一个闭合标签应和它左边最近的一个开口标签匹配。例如，
合法的：<firsttag><secondtag>Some
text!</secondtag></firsttag>
不合法的：<firsttag><secondtag>Some
text!</firsttag></secondtag>
<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 =<openingtag>+ content
+<closingtag>
在<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用来说明跳转到何处
<ahref="http://www.codecademy.com">Learn
to code!</a>
如果要设置点击图片，然后跳转，那么可以把图片放在<a href = "url"> img </a>中。
分享到：
相关推荐
修复了CodeCademy问答论坛中的面包屑。 修复了错误的CodeCademy Q＆A论坛，这些论坛缺乏正确指示当前的问答和一节和练习。 当Q＆A问题通过AJAX加载时可能无法工作，在这种情况下，只需刷新Q＆A问题“页面视图，它...
【标题】"codecademy_projects-boredless_tourist：Codecademy的项目"是一个学习平台Codecademy上的编程挑战，旨在帮助用户构建一个旅游推荐引擎。这个项目使用Python编程语言，让学生通过实践来增强其Python技能，...
40相 Codecademy的幻想式404页。用法在npm上安装40phaser软件包： npm i 40phaser由于此程序包需要图像资产，因此您需要使用捆绑程序（例如或来编译您在网站上使用的脚本。 此回购中包含使用汇总进行设置的示例，该...
在Codecademy问答论坛中修复面包屑。 修复了有问题的Codecademy问答论坛，该论坛缺少当前问答部分和正在查看的练习的正确指示。 通过AJAX加载问答问题时可能无法正常工作，在这种情况下，只需刷新问答问题页面视图...
在Codecademy的这个项目中，你将实践这些基本概念，通过编写HTML代码来创建一个个人备忘单，从而加深对HTML结构和语义的理解。这不仅有助于构建静态网页，也为进一步学习CSS和JavaScript打下坚实基础。
在Codecademy的CSS课程中，你会学习选择器的概念，如何根据元素类型、类名或ID应用样式，以及如何使用`display`属性控制元素的布局。还将涉及颜色、字体、背景、边框、盒模型、定位和响应式设计等基础知识。通过CSS...
Codecademy HTML 和 CSS 项目。 百老汇： : 创新云： : 移动： : 红眼摄影： : 快门： : 最佳比特： : 交界处： : 采用： : 头条新闻： http : //www.codecademy.com/snr/codebits/6mPekI 游览： http : //...
Codecademy的“学校目录”项目是一个用于学习和实践JavaScript编程技能的实际应用。在这个项目中，学生将构建一个交互式的学校课程目录，该目录能够展示课程信息，包括课程名称、描述、学分以及课程是否可用。这个...
在这个“codecademy-ang-directives-generalizations”项目中，你将深入学习如何创建和使用通用化的AngularJS指令。AngularJS是Google维护的一个强大的前端JavaScript框架，它极大地简化了开发和测试单页应用程序...
zh-TW translation of 's ... Neither the contributors of this repository nor the SITCON team is affiliated or received any official approval from Codecademy. If this is considered a copyright violation, p
Codecademy学习CSS-3-基于事实的新闻的终端源 在本课程中，我们介绍了Box模型的四个属性：高度和宽度，填充，边框和边距。 了解盒子模型是学习更高级HTML和CSS主题的重要一步。 让我们花一点时间回顾一下您学到的...
例如，可以通过在线编程教育平台（如Codecademy、Udemy等）学习CSS课程，还可以通过阅读专业书籍和参与开源项目来提升自己的实践能力。 总结来说，CSS是网页制作中不可或缺的一部分，通过学习CSS可以实现网页的美化...
本项目“html-css-cheatsheet-starting”是一个Codecademy的全栈工程师学习路径中的实践项目，旨在提供一个快速参考的HTML和CSS基础知识指南。 在“基本信息”部分，你将学习到HTML的基本元素和属性，如`<html>`、`...
这是我的第一个网页。 </html> ``` - `<!DOCTYPE html>`：声明文档类型为HTML5。 - `<html>`：根元素，包含整个HTML文档。 - `<head>`：包含文档的元数据，如字符集、视口设置、标题等。 - `...
html-css-social_media 这是社交媒体的结构基础.. 仅由html-css 制作.. 我制作此主页只是为了向初学者展示我的项目作为帮助模型.. 希望对您有所帮助。 对观众有用的链接 • HTML-CSS-simple-calculator： : • 测试...
在本项目"codecademy_excursion"中，我们聚焦于学习和实践基本的语义HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）。这两个核心技术是构建和设计网页的基础，HTML负责结构化内容，而CSS则负责...
【标题】"dasmotos-arts-and-crafts：CodeCademy CSS项目"是一个学习和实践CSS技术的项目，源自知名在线编程学习平台CodeCademy。这个项目旨在帮助初学者通过实际操作，掌握CSS（层叠样式表）的基础知识，从而能够...
### 一、网站题目 该网站的主题聚焦于“抗击疫情致敬逆行者”的感人题材，旨在通过网站设计向那些在疫情期间勇敢站出来的人们致敬。这种类型的网站非常适合大学生作为期末作业或个人项目来进行实践，它不仅能够让...
《Web编程入门经典——HTML、XHTML和CSS（第2版）》这本书是学习Web开发的基础教程，旨在为初学者提供全面深入的HTML、XHTML和CSS知识，帮助读者掌握构建网页的基本技能。下面，我们将深入探讨这些核心知识点，以便...
babel预设码课程在Codecademy使用的Babel插件和预设的集合安装$ npm install --save-dev babel-preset-codecademy用法通过.babelrc （推荐） .babelrc { " presets " : [ " codecademy " ]}通过CLI $ babel script....