18910140161

详解HTML编程的标记与文档结构,是HTML入门学习中的基础知识

顺晟科技

2021-06-16 10:59:03

159

用HTML标记内容的目的是给网页赋予语义。换句话说,有必要给你的网页内容赋予某种用户代理能够理解的含义。

HTML指定了一组标记,用于不同地标记内容。每个标签都是对其内容的描述。最常用的HTML描述标题、段落、链接、图片。目前HTML中有114个标签,但是按照80/20的原则,使用25个左右的标签就可以满足80%的标签需求。

HTML的最新版本HTML5也规定了一些结构化标签,用来对相关内容的标签进行分组,以便更好地规范网页的整体结构。新标签包括标题、导航、文章、章节、侧边和页脚。

1.标签的闭合

对于每个有内容的元素(如标题、段落、图片),根据其包含的内容是否为文本,有两种不同的标注方式,一种是使用封闭标注,另一种是使用非封闭标注。

1.1 文本用闭合标签

例子:h1Hello,CSS!/h11.2 引用内容用自闭合标签

例如:img src=' images/dog.jpg' alt='这是我的狗'

提示:

对于自结束标签,XHTML要求必须编写如下:

XML/HTML代码将内容复制到剪贴板

img src=' images/dog . jpg ' alt=' thismydog。'/

在HTML5中,表示结束的最后一个斜线可以省略,写成:

XML/HTML代码将内容复制到剪贴板

img src=' images/dog . jpg ' alt=' thismydog。'

2.属性

提示:视障用户使用的屏幕阅读器会大声读出alt属性的内容,所以一定要给标签

这个alt属性增加了人们一眼就能看懂的东西。

3.标题和段落

4.复合元素

HTML不仅指定了标题、图片、段落等基本内容标签,还指定了用于创建列表的内容标签,

复杂用户界面模块的标记,如表格和表单,是所谓的复合元素,也就是说,它们由许多

一个标签在一起。

5.嵌套标签

简单来说就是把一个标签嵌套在另一个里面。6.HTML5 模板

XML/HTML代码将内容复制到剪贴板

!DOCTYPEhtml

超文本标记语言

metacharset='utf-8'/

标题文本/标题

/head

身体

!-这是网页的内容-

/body

/html

7.块级元素和行内元素

文档流效果:HTML元素将按照它们在标签中出现的顺序从页面顶部流向底部。

几乎所有HTML元素的显示属性要么是块,要么是内嵌。最明显的例外是table元素,它有自己的显示值。

标题和段落等块级元素堆叠在一起,并沿页面向下排列,每个元素都在自己的行上。另一方面,线内元素(如链接、图片)会相互并置,没有足够的空间并置时才会折叠到下一行。

不管你想知道哪个HTML元素,首先要问的问题是:它是块级元素还是内联元素?知道了这一点,你就可以在编写标签的时候预见到一个元素在初始状态下会如何定位,这样你就可以进一步思考以后如何用CSS重新定位它。

有两件事要知道:

块级元素框扩展到与父元素相同的宽度。

内嵌元素盒会尽可能地收缩和包装它们的内容。

201581172030371.png  (301×322)

7.嵌套的元素

HTML标签嵌套在标签中,而方框嵌套在屏幕上。8.文档对象模型

文档对象模型(DOM)是通过从浏览器的角度观察页面中的元素和每个元素的属性而得到的这些元素的家谱。通过DOM,可以确定元素之间的关系。在CSS中引用DOM

您可以选择相应的HTML元素并修改它们的样式属性。

CSS操作DOM的过程是先选择一个或者一组元素,然后修改这些元素的属性。通过CSS修改元素后,比如修改宽度或者在标签中插入一个伪元素,这些变化会立即在DOM中发生,并在页面上反映出来。

简而言之,DOM是通过HTML标签构建的,然后在次加载页面,用户与页面交互时,使用CSS来修改DOM。

我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航