正在加载今日诗词....

编程学习笔记-HTML基础

2014.06.30

从今天开始学习编程
网站:www.codecademy.com
第一个学习的是HTML。

HTML介绍:

HTML和CSS

HTML是网站的骨架,全称为HyperText Markup Language,CSS是网站的皮肤,全称是层叠样式表。
编程时(总是)第一行注明<!DOCTYPE html>,这是告诉浏览器你使用的是html语言
总是把html标签放在下面一行,这代表html文档开始
/html表示文档结束。
eg.
Image Title

基本术语

在<>中间的东西我们叫做标签tags
标签总是成对出现的,opening标签以及closing标签
比如html是opening标签,/html是closing标签
你可以把标签想象成括号,有开始就有结束
标签必须是一层一层的,比如说
Image Title

编写head部分

html文件中的任何东西都必须在opening html和closing /html之间
html文件总是被分为两部分,head和body,让我们从head开始吧。
head部分包含html文件的信息,比如标题,标题就是浏览器标题栏或者标签页上所显示的名称。
eg.标题为H webpage的网页
Image Title
结构为:
html标签开-head标签开-title标签开-title-title标签闭-head标签闭-html标签闭

编写body部分

body就是输入内容的部分,像是文字,图像或者链接。body部分的内容是可以在网页上被展现出来的。
body在html标签内,在head标签下
Image Title
body部分中的段落由p标签标识。
Image Title

Body元素

段落和标题

现在我们要给你的段落加一个标题,从h1标签开始吧,在h1标签中的文字是最大号的!
Image Title

更多的标题

事实上HTML给了我们多个尺码的标题大小,总共有六个,h1是老大而h6是小弟。

在你的网站上添加图片

中场小结

1.HTML被用来给网站一个骨架
2.我们使用浏览器打开html文件,浏览器向我们展示这个文件
3.HTML文件有头和身体两部分(就像你一样)
4.在头这个部分,我们有标题(title)标签用来标识这个网页的名称
5.怎么样去写标题(段落标题heading)和段落。
*标题title指网页标题。标题heading指段落标题。

你到地方了!

如果你想把你的读者带到你的网站的另一个地方,或者另一个网站,你应该使用超链接hyperlinks或者短链接。
1.首先,你应该输入一个a标签,a标签具有一个属性叫做href,href的值标识你会去到哪个地方,如http://www.baidu.com
2.然后你应该在a标签内描述这个链接,这个描述会在网页上展示出来。
Image Title
Image Title

添加图片

你可以在你的网站上添加图片让它看起来美观一些。
img是图片标签,这个标签和其他标签有一些区别,你要用src这个属性来使标签调用图片,同时img标签没有闭标签,它不是成对的,它直接使用/来标识结束。形似
Image Title
代码例子
Image Title
你在网页上应该可以看到一个橡皮鸭,观察跟在“src=”后面的URL,它告诉img标签图片从哪来。
网页上的每个图片都有它自己的URL,右键点击一张图片,选择复制图片链接即可得到“src=”后面的URL。

图片超链接

首先我们输入a标签,然后href值设定为http://www.baidu.com。但是这次我们不使用文字来描述a标签,我们使用一个img标签。最后,我们闭合a标签就可以了。
现在我们点击这张图片就会直接跳转到http://www.baidu.com上了。
把一个标签置于另一个标签内我们称之为“筑巢”(nesting)
Image Title

小结

Image Title

Comments
Write a Comment