本文出自 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-School-Catalogue-Project:Codecademy“学校目录”项目JavaScript
修复了CodeCademy问答论坛中的面包屑。 修复了错误的CodeCademy Q&A论坛,这些论坛缺乏正确指示当前的问答和一节和练习。 当Q&A问题通过AJAX加载时可能无法工作,在这种情况下,只需刷新Q&A问题“页面视图,它...
游览Codecademy HTML,CSS和命令行项目
40相 Codecademy的幻想式404页。用法在npm上安装40phaser软件包: npm i 40phaser由于此程序包需要图像资产,因此您需要使用捆绑程序(例如或来编译您在网站上使用的脚本。 此回购中包含使用汇总进行设置的示例,该...
在Codecademy问答论坛中修复面包屑。 修复了有问题的Codecademy问答论坛,该论坛缺少当前问答部分和正在查看的练习的正确指示。 通过AJAX加载问答问题时可能无法正常工作,在这种情况下,只需刷新问答问题页面视图...
Codecademy HTML 和 CSS 项目。 百老汇: : 创新云: : 移动: : 红眼摄影: : 快门: : 最佳比特: : 交界处: : 采用: : 头条新闻: http : //www.codecademy.com/snr/codebits/6mPekI 游览: http : //...
codecademy_projects-boredless_tourist 从Codecademy构建旅游推荐引擎项目
指令一般化 Codecademy的AngularJS项目
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作弊表项目Codecademy Web开发基础-建立自己的备忘单
Codecademy学习CSS-3-基于事实的新闻的终端源 在本课程中,我们介绍了Box模型的四个属性:高度和宽度,填充,边框和边距。 了解盒子模型是学习更高级HTML和CSS主题的重要一步。 让我们花一点时间回顾一下您学到的...
html-css-social_media 这是社交媒体的结构基础.. 仅由html-css 制作.. 我制作此主页只是为了向初学者展示我的项目作为帮助模型.. 希望对您有所帮助。 对观众有用的链接 • HTML-CSS-simple-calculator: : • 测试...
HTML-CSS-备忘单 全栈工程师之路的Codecademy项目 目录 基本信息 CSS网格备忘单 技术领域 HTML和CSS 状态 进行中
关于 这是一个用于学习基本语义HTML和CSS的简单Codecademy项目。 您可以在以下查看该网页: :
jquery-checkers Codecademy 的 jQuery 检查器 来自: : 作者 Louis Soubel
babel预设码课程在Codecademy使用的Babel插件和预设的集合安装$ npm install --save-dev babel-preset-codecademy用法通过.babelrc (推荐) .babelrc { " presets " : [ " codecademy " ]}通过CLI $ babel script....
codecademy:来自codecademy的任务
游览 目录 基本信息 来自Codecademy.comHTML和CSS项目| 全栈工程师专业版路径 ... 利用这些资源,我使用HTML和CSS构建了一个静态站点。 技术领域 HTML5 CSS3 项目状态 mp4自动播放循环出现问题,但已完成。 发射
dasmotos-arts-and-crafts:CodeCademy CSS项目
在Codecademy的Web开发职业道路中,给出了一个规范,以HTML和CSS创建网页。 根据此规范,我创建了网页。 这是成品: 我决定对设计进行的一项更改是将图像浮动在产品说明的左侧。 这样可以改善网页的感觉。