小白学编程之HTML/CSS Day002

作者: 简疏志 | 来源:发表于2016-12-23 11:09 被阅读118次

小白学编程之HTML/CSS Day 002

从此妈妈再也不用担心我不懂编程了

上期回顾

在上一篇学习笔记中,主要学习了以下内容,可以翻阅《小白学编程之HTML/CSS Day 001》 查看具体内容

1.01 What is HTML | 什么是HTML
1.02 HTML tags | HTML 标签
1.03 <h1>tag | 标题标签
1.04 <p> tag | 自然段标签
1.05 <ul><ol> tag | 列表标签

上篇文章发出来以后有两点需要补充如下

  1. 有人问需不需要Mac,答案windos和Mac都可以,事实上只要有个浏览器就OK了。
  2. 上次我推荐在txt记事本或者W3School的在线编辑器上进行HTML练习。有亲爱的读者朋友yarving推荐可以在 codeopen 或者是 jsfiddle 上进行练习,看了一下,很酷的两个网站。我自己比较喜欢codeopen,因为界面酷炫,不像jsfiddle需要点击“Run”才能显示效果。还有很重要的一点,codeopen的code需要一个字符一个字符敲,而jsfiddle有自动补全功能,个人认为对于初学小白还是一个字一个字敲比较好。所以这篇文章里将使用codeopen进行效果演示。

codeopen 截图如下:

codeopen截图

jsfiddle截图如下

jsfiddle截图

本期概览

这一篇是学习HTML/CSS的第二天,主要内容有

1.06 Nesting tags| 标签的嵌套关系
1.07 <body> tag | 包含一切的<body>标签
1.08 <head> tag | <head> 标签
1.09 <html> tag | <html> 标签
1.10 DOCTYPE | 设置HTML版本


1.06 Nesting tags| 标签的嵌套关系

HTML标签有时候会包含另外的标签,在这种情况下,包含其他标签的标签叫做parent(爹和妈),被包含的标签叫做children(娃)。

像之前在使用列表标签时,<li> </li>被包含在<ul> </ul> (无序列表)或<ol> </ol> (有序列表),这时候<ul> </ul><ol> </ol> 就被称为parent<li> </li>就被称为children,如下图所示:

6.nesting.png

1.07 <body> tag | 包含一切的<body>标签

既然娃有爹妈,那么爹妈也有爹妈;在HTML里,所有能通过网页显示(纯文字)内容的标签都要被嵌套在<body> </body>标签里。

7.bodytag.png

1.08 <head> tag | <head> 标签

既然任何网页显示的(文字)内容都需要放在<body></body>标签里。言外之意,就是<body></body>之外还有标签写的不是(纯文字)内容的显示,这就是<head></head>

8.headtag.png

1.09 <html> tag | <html>标签

HTML 当然少不了<html></html>标签,所有的HTML标签 都要放在<html></html>标签里面。

9.htmltag.png

1.11 DOCTYPE | 设置HTML版本

DOCTYPE 翻译为中文就是文件类型,这不是一个标签,所以不是成对出现,只有一个<!DOCTYPE html>,这个主要是用来指定HTML 版本。设定这个之后,浏览器可以知道如何更好的显示你的页面。

10.doctype.png

扩展阅读之,如果还想知道更多 请前往 <!DOCTYPE>声明

最后来总结一下
目前为止,学习了一份HTML文件包含四大类元素:DOCTYPE,<html>标签,<head>标签,<body>标签,每一类里面都需要填写不同的内容。层次结构如下图所示:

summary.png

贪多嚼不烂。建议一个字一个字敲,练习练习再练习。

用目前学到的试着敲一个作品吧!下面是我的“黯然销魂虾”哟。

sample销魂虾.png

下期预告

如何添加链接

欢迎来纠错,也欢迎提意见和任何问题~~~

相关文章

  • 小白学编程之HTML/CSS Day003

    小白学编程之HTML/CSS Day 003 往期回顾 小白学编程之HTML/CSS Day001小白学编程之HT...

  • 小白学编程之HTML/CSS Day004

    小白学编程之HTML/CSS Day 004 往期回顾 Level 1 HTML小白学编程之HTML/CSS Da...

  • 小白学编程之HTML/CSS Day005

    Hi 好久不见~ 往期回顾 Level 1 HTML小白学编程之HTML/CSS Day001小白学编程之HTML...

  • 小白学编程之HTML/CSS Day002

    小白学编程之HTML/CSS Day 002 上期回顾 在上一篇学习笔记中,主要学习了以下内容,可以翻阅《小白学编...

  • 小白学编程之HTML/CSS Day01

    写在前面的话 我本人是纯种文科生——中文系毕业。我对于编程就是纯种小白。 我的口号是人不折腾枉少年。 这个系列是我...

  • 小白学编程之HTML/CSS Day001

    版权声明本文无需授权即可转载转载时请务必注明作者及来源 写在前面的话 我本人是纯种文科生,纯度100%那种——中文...

  • JavaScript 中的 dom 操作

    页面加载,Html 会通过html 编译器,将HTML编译成DOM tree, Css 同样通过css 编...

  • 电商静态网页建设初探

    「web小白 」 诚心求各位大佬指点!!! 1.登录页面 html代码 css 2.注册页面 html代码 css

  • CSS小白教程

    关于HTML和CSS的关系,小白有在上一篇HTML教程中讲到过,就不赘述书面表达,用小白的话来讲,HTML像月饼盒...

  • Day01

    A:学的内容 1.什么是HTML和CSS html是用来写网页的结构,css是用来修饰html 2.常用的html...

网友评论

    本文标题:小白学编程之HTML/CSS Day002

    本文链接:https://www.haomeiwen.com/subject/mshkvttx.html