HTML document basics_html/css_WEB-ITnose-HTML Tutorial-php.cn

1. HTML (Hyper Text Markup Language) is a simple markup language used to create hypertext documents. HTML writes various tags in the text of the text and compiles them through a web browser. and execution to display correctly. This article mainly introduces the basics of HTML documents and common tags. The content framework of this article is as follows, but only the basics of HTML documents are introduced first:

The above picture is among the common tags of HTML documents. I missed one multimedia mark, please forgive me!

1. HTML document basics:

1.1 HTML markup: HTML is Hypertext Markup Language. It mainly consists of two parts: text and markup. HTML tags usually consist of "<", ">" and the tag elements contained therein. For example: is a pair of tags. This tag is called a body tag and is used to indicate the main content of the document.

(1). In HTML hypertext markup language, most tags appear in pairs, generally consisting of a start tag and an end tag, where the start tag tells the web browser to start from here Begins the function represented by the tag, and the end tag tells the web browser to end the function here. This type of tag is called "double tag", and its syntax format is as follows:

Content

The "content" part is to be marked by this pair The functional part, such as outputting the square of y on the page, can be achieved through the tag.

(2). Then attach an example of "double markup", start the Dreamweaver CS5 tool, you can also use other tools to write web pages, select HTML in the create new project, and write in the "Code" window The following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>输出y的平方</title></head><body>输出y的平方：y<sup>2</sup></body></html>

Copy after login

Then create a new site, click the site on the toolbar, and then select:

Then save this web page to this site and change the name to sup .html, the operation effect is as follows:

(3). Although most tags in HTML hypertext markup language are "double tags", some exist in separate forms. tags, such tags are called "single tags". This type of tag can fully express its meaning when used alone. The syntax format is:

In HTML hypertext markup language, the most commonly used "single tag" is
, this mark is a newline mark. In fact, writing
can also achieve the effect of line break.

(4). Next is an example of "single markup". Usually, one line is used to display a paragraph of text on the page. Since this line of text is too long, the page looks very unsightly. In this case, a single markup can be used.
This text is divided into two lines to display. The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>单标记</title></head><body>梦想遥不可及，但是不可放弃<br>只要再坚持一下，成功的路就在脚下！</body></html>

Copy after login

Then save it to the JavaScript site and change it to br.html. After running, it is as follows:

(5). Some attributes can usually be included in the start tag using most single tags and double tags. The syntax format is:

In the above syntax, all attributes must be written in the angle brackets "<" of the start tag. Each attribute is separated by spaces. There is no order of priority. The attributes can also be omitted (that is, take their default value). Attribute values need to be marked with English half-width double quotes ("").

(6). Next, attach an example of tags with attributes. Use the single tag

to draw a horizontal line on the page, and set its size attribute, noshade attribute, width attribute and color attribute. , the code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>绘制一条水平线</title></head><body><hr size="6" noshade="noshade" width="70%" color="#CCFF55"></body></html>

Copy after login

The size attribute in the code represents the thickness of the horizontal line, the noshade attribute represents removing the shadow of the horizontal line, the horizontal line defaults to a hollow three-dimensional effect with shadow, and the width attribute represents the width of the horizontal line. The color attribute represents the color of the horizontal line.

Save this file to the site and change the file name to br.html. The running effect is as follows:

1.2 Basic structure of HTML document: A hypertext file written in HTML language is called an HTML file. You can manually write HTML files directly in a text editor under Windows, or you can use visual editing software such as FrontPage and Dreamweaver to write HTML documents.

(1). In HTML hypertext markup language, three tags are defined to describe the basic structure of the page. The basic structure in HTML is as follows:

<html><head>...头部信息<body>...主体内容</body></head></html>

Copy after login

(2). The functions and usage of various tags are introduced in detail below:

? ... Tag: The first tag in an HTML document. This tag is used to indicate that the document is an HTML document. When the browser encounters the tag, it will interpret the text according to HTML standards. The closing tag appears at the end of the HTML document.

? ...标记：此标记出现在标记内起始的部分，此标记称为头部标记。头部标记用于提供与Web页面有关的各种信息。在头部标记中，可以使用标记模拟HTTP协议的响应头报文，用于鉴别作者、标注内容提要和关键字、设定页面字符集、刷新页面等，在HTML头部可以包括任意数量的标记；使用...标记来指定网页的标题；使用标记来定义CSS样式表；使用<script>...</script>标记来插入脚本语言等。一般来说，位于头部标记中的内容都不会在网页上直接显示。

? ...标记：此标记称为主体标记，在头部标记之后。它定义了HTML文件显示的主要内容和显示格式。作为网页的主体部分，此标记有很多内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等。

(3).接下来附上一个使用...标记的例子，标记应用于HTML文件的主体标记与之间，并且只影响它所标识的文字。

这里例子通过标记的face属性定义字体为“黑体”，通过size属性定义大小为“16px”，通过color定义颜色为蓝色，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>定义文字字体</title></head><body>应用&lt;font&gt;标记来定义文字字体：<br><font face="黑体,宋体" size="16px" color="#3399FF">蓝色的天空下，让我们一起飞翔！</font></body></html>

Copy after login

保存此文件为font.html到站点下，运行后如下：

这个例子中，使用了<和>来输出"<"和">"这些符号，即在HTML中为一些特殊的字符设置了特殊的代码。字符的实体名称都以一个“&”符号开始，以一个“;”符号结束。在这个例子代码中，，特殊符号“<”用<标记表示，特殊符号“>”用>标记表示。其中还有很多特殊的代码，如代表空格，"代表英文半角的""双引号等等。

二.此篇文章介绍了HTML文档的基础，HTML文档的常用标记下次再介绍了，以上内容仅供大家学习参考，写得不好，请见谅，如有错误，请指出，谢谢！