getting started with html

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/QingyingLiu/article/details/81592895

Getting started with html

What is html?

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

the explanation of html

Anatomy of an HTML element

Anatomy of an HTML element

元素的主要部分是:

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

Nesting elements

你可以嵌套元素,比如:

<p>My cat is <strong>very</strong> grumpy.</p>

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

<p>My cat is <strong>very grumpy.</p></strong>

Attributes

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

attribute show

属性的内容可能涉及到了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>

这里有:

  1. <!DOCTYPE html>:这个是声明了html的版本——html5。我们写html的时候最好还是加上,避免不必要的问题
  2. <html></html>:这个元素包围了整个页面的内容,有时也被叫做根元素(root element)
  3. <head></head>:这个元素就像是一个容器一样,可以放着我们的title,charset,keyworddescription,当然还可以声明引入的css和js文件。
  4. <meta charset="utf-8">:声明字符集:UTF-8,不然的话可能会乱码。
  5. <title></title>:文档的标题
  6. <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的乐趣。

猜你喜欢

转载自blog.csdn.net/QingyingLiu/article/details/81592895