getting started with html

程序员文章站 2022-07-11 10:38:15

...

Getting started with html

What is html?

如果你在看这篇文章，我相信你应该知道html是用来做什么的——写网页。是的，但是我觉得不太准确，
因为只用html写网页是不太可能的，而它的用处就是用来表达内容和设计网页的结构。顺便附上wiki
的对html的定义，尤其是注意它的第一句话。

the explanation of html

Anatomy of an HTML element

getting started with html

元素的主要部分是：

开标签(the opening tag):用尖括号把元素名(in this case, p)括起来。
闭标签(the closing tag):跟开标签类似，只是在元素名前需要加多一个\
内容(content):这部分是写元素的内容
元素(element):开标签+内容+闭标签 = 元素

Nesting elements

你可以嵌套元素，比如：

My cat is very grumpy.

注意：标签可以嵌套但是不能交叉，上面的那个例子是嵌套，而下面的例子就是交叉了：

My cat is very grumpy.

Attributes

元素也是可以有属性(attribute)的,正如下图：

getting started with html

属性的内容可能涉及到了CSS，但是我们目前只要知道html的元素有属性，并且赋值的值用单引号或者双引号括起来(虽然不括起来也可能不会出错，但是为了以防万一，还是括起来好)

Anatomy of a HTML document

下面先看一份基本的html代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

这里有：

<!DOCTYPE html>:这个是声明了html的版本——html5。我们写html的时候最好还是加上，避免不必要的问题
<html></html>:这个元素包围了整个页面的内容，有时也被叫做根元素(root element)
<head></head>:这个元素就像是一个容器一样，可以放着我们的title,charset,keyword和description,当然还可以声明引入的css和js文件。
<meta charset="utf-8">:声明字符集：UTF-8，不然的话可能会乱码。
<title></title>:文档的标题
<body></body>:文档的主体，用于写html的内容和结构。

Whitespace in HTML

Whitespace 包括空格和换行。

默认情况下，无论你用了多少个whitespace，html会把它减少成一个空格。

例如：

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

HTML comments

使用的格式来进行注释。好的注释能让人看懂，
写注释是一个好的习惯。必要的时候记得加上注释。

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

Summary

读完了这篇文章，你应该对html有了大致的了解，接下来的文章将会阐述html的细节，比如常用的元素。
同时你也可以和css一起学习，因为html和css本身就是分不开的。还有就是，想要掌握好html，少不了自己多写几遍代码，同时你也会发现html的乐趣。

getting started with html