HTML Basis

最新推荐文章于 2024-07-17 18:42:40 发布

zczyyds

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量46

点赞数

分类专栏： Interactive Media 文章标签： html javascript css

本文链接：https://blog.csdn.net/zczyyds/article/details/129251943

版权

Interactive Media 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML Document Structure

HTML documents have 2 sections:

Header: contains information about the document

e.x. <head> </head> element defines the information(style) of the head

Body: contains the actual contents of the document

<body> </body> element defines the body

Remember: HTML is not case sensitive, <HEAD> == </Head>

Elements

elements contain 3 parts: Begin tag, Contents, End tag

/* example */
<p id="intro">Welcome</p>

Most elements have 2 parts : opening and closing part

But some exceptions are without closing tags: <img>

We can categorize HTML elements as one of the following content types:

• Metadata

• Flow

• Sectioning

• Phrasing

• Heading

• Embedded • Interactive

A comment begins with <!-- Comments-->, in HTML, can be single or multiline. The following are some examples

<!--This is the format of the comments -->

Essential elements

Essential elements: a web page must have them to be valid:

Followings are some usefel elements:

HTML PARAGRAPHS

HTML Links

HTML Images:

An image can be included as content in a paragraph, so it is a type of phrasing content. For example, we could have inline images appear in the flow of a paragraph:

<p>Kittens are everywhere on the internet. The best thing about kittens is that 
they are cute. Look here's a kitten now: <img src="media/kitten.jpg" alt="A cute 
kitten">. See, cute isn't it?</p>

HTML TABLES:

HTML iframes:

An iframe is used to display a web page within a web page:

<iframe src="demo.html" height="100" width="200"> </iframe>

（for instance, display a google map in the webpage）

HTML Forms:

The HTML form element defines a form that is used to collect user input

<div>defines a section/container in a document block

<span>defines a section in a document (inline)

Attributes:

Always only used in the element begin tag.

The HTML Document

一个HTML文档代表了一个分层的树状结构，比较像一个家庭树。从一个根元素开始，一个元素和它的内容之间的关系可以被看作是父元素和子元素的关系。一个与另一个元素处于同一层次的元素可以被视为该元素的兄弟姐妹，我们可以把树的一个分支内的元素描述为祖先和后代。这种结构可以用树状图来表示，以便更好地了解元素之间的关系。

The Doctype Declaration

To let the browser, know which version of HTML to expect on our web page, we provide a doctype declaration. There are multiple versions of HTML and each version of HTML has a different declaration. If we are working with HTML5, the appropriate doctype is as follows:

<!DOCTYPE html>

METADATA

The following elements are considered metadata content: base, link, meta, noscript, script, style, and title.

The link element lets us determine the relationships between our document and external resources. A common use for this element is to link to an external style sheet.

base元素让你设置一个基本的URL。这将被用作HTML文档中所有相对URL的基础。例如，我们可以设置基础href，然后用一个相对的URL链接到一个样式表。

<base href="http://www.example.com">
<link rel="stylesheet" href="/mystyle.css">

This would result in our browser trying to download a style sheet from http://www. example.com/style.css.

The element is used to specify which character set is used, page description, keywords, author, and other metadata.

Following's an example:

<h1>Cook School</h1>
<article>
 <h2>Amazing Homemade Cupcakes</h2>
 <p>Here are the steps to serving up amazing cupcakes:</p>
 <ol>
 <li>Buy cupcakes from a shop</li>
 <li>Remove packaging</li>
 <li>Pretend you baked them</li>
 </ol>
</article>