您的位置：首页 > 编程技术 > html  >  详解HTML编程的标记与文档结构

详解HTML编程的标记与文档结构

 更新时间：2015年12月16日 00:37  点击：1410

    用HTML标记内容的目的是为了赋予网页语义（semantic）。换句话说，就是要给你的网页内容赋予某些用户代理（user agent）能够理解的含义。

    HTML 规定了一组标签，用来给内容打上不同的标记。每个标签都是对它所包含内容的一种描述。最常用的HTML描述的是标题、段落、链接和图片。目前，HTML一共有114个标签，但按照 80/20 原则，使用其中25个左右的标签就可以满足80%的标记需要。

    HTML 最新的版本 HTML5，又新规定了一批结构化标签，用于对相关内容的标签进行分组，从而更好地规范网页的整体结构。这些新标签包括<header>、<nav>（即 navigation，导航）、<article>、<section>、<aside>和<footer>。

1.标签的闭合

    对于每个包含内容的元素（比如标题、段落和图片），根据它所包含的内容是不是文本，有两种不同的方式给它们加标签，一种是使用闭合标签，另一种是使用非闭合标签。

1.1 文本用闭合标签

示例：<h1>Hello, CSS!</h1>
1.2 引用内容用自闭合标签

示例：<img src="images/dog.jpg" alt="This is my dog." >

    提示：
    对于自闭合标签，XHTML 要求必须这样写：

XML/HTML Code复制内容到剪贴板
  1. <img src="images/dog.jpg" alt="This is my dog." />  

    而在 HTML5 中，可以省略最后那个表示关闭的斜杠，写成：
   

XML/HTML Code复制内容到剪贴板
  1. <img src="images/dog.jpg" alt="This is my dog." >  

2.属性

    提示：视障用户使用的屏幕阅读器会大声读出 alt 属性的内容，因此一定要给标签的
    这个 alt 属性添加让人一听（或一看）就能明白的内容。

3.标题与段落
4.复合元素

    HTML 不仅规定了标题、图片和段落等基本的内容标记，还规定了用于创建列表、
    表格和表单等复杂用户界面组件的标记，这些就是所谓的复合元素，即它们是由多
    个标签共同构成的。

5.嵌套标签

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.  <meta charset="utf-8" />  
  5.  <title>An HTML Template</title>  
  6.  </head>  
  7.  <body>  
  8.  <!-- 这里是网页内容 -->  
  9.  </body>  
  10. </html>  

7.块级元素和行内元素

文档流效果：HTML 元素会按照它们各自在标记中出现的先后顺序，依次从页面上方流向下方。

    几乎所有HTML 元素的 display 属性要么为 block，要么为 inline。最明显的一个例外是 table 元素，它有自己特俗的 display 值。

    块级元素（比如标题和段落）会相互堆叠在一起沿页面向下排列，每个元素分别占一行。而行内元素（比如链接和图片）则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。

    无论你想了解哪个 HTML 元素，第一个要问的问题都应该是：它是块级元素，还是行内元素？知道了这一点之后，就可以在编写标记的时候，预想到某个元素在初始状态下是如何定位的，这样才能进一步想好将来怎么用 CSS 重新定位它。

有两点要知道的：

    块级元素盒子会扩展到与父元素同宽。

    行内元素盒子会 收缩包裹 其内容，并且会尽可能包紧。
201581172030371.png (301×322)

7.嵌套的元素

在标记中嵌套的是HTML标签，而在屏幕上嵌套的则是一个个的盒子。
8.文档对象模型

文档对象模型（简称 DOM）是从浏览器的视角来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。通过DOM，可以确定元素之间的相互关系。在 CSS 中引用 DOM
中特定的位置，就可以选中相应的 HTML 元素，并修改其样式属性。

CSS 操作 DOM 的过程是先选择一个或一组元素，然后再修改这些元素的属性。通过 CSS 修改了元素后，比如修改了宽度或者在标记里插入了一个伪元素，这些变化会立即在 DOM 中发生，并体现在页面上。

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

[!--infotagslink--]

相关文章

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02

  • IE6-IE9中tbody的innerHTML不能赋值的解决方法

    IE6-IE9中tbody的innerHTML不能赋值，重现代码如下 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </head> <body style="height:3...2014-06-07

  • XML、HTML、CSS与JS的区别整理

    在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会，下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别，需要的朋友参考下...2016-02-21

  • Angular.js中下拉框实现渲染html的方法

    这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来学习学习吧。...2017-06-24

  • angularjs中ng-bind-html的用法总结

    这篇文章主要介绍了angularjs中ng-bind-html的用法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-05-27

  • PHP正则表达式过滤html标签属性(DEMO)

    这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容，实用性非常，感兴趣的朋友参考下吧...2016-05-06

  • C#使用正则表达式过滤html标签

    最近在开发一个项目，其中有需求要求我们把一段html转换为一般文本返回，使用正则表达式是明智的选择，下面小编给介绍下C#使用正则表达式过滤html标签，需要的朋友参考下...2020-06-25

  • C# 使用 WebBrowser 实现 HTML 转图片功能的示例代码

    这篇文章主要介绍了C# 如何使用 WebBrowser 实现 HTML 转图片功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-11-03

  • js innerHTML 改变div内容

    在做ajax无刷新时,我想很多朋友都会知道js innerHTML来更改 div 或table里面的值哦. JavaScript的innerHTML 永远不知道你可以改变的内容，一个HTML元素？也许你要...2016-09-20

  • IE6-IE9使用JSON、table.innerHTML所引发的问题

    这篇文章主要介绍了IE6-IE9使用JSON、table.innerHTML所引发的问题 ,需要的朋友可以参考下...2015-12-24

  • JS实现pasteHTML兼容ie,firefox,chrome的方法

    这篇文章主要介绍了JS实现pasteHTML兼容ie,firefox,chrome的方法,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-06-24

  • html中MIME介绍及用途说明

    MIME表示多用途Internet邮件扩允协议。多用途互联网邮件扩展类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使...2016-09-20

  • Razor TagHelper实现Markdown转HTML的方法

    下面小编就为大家分享一篇Razor TagHelper实现Markdown转HTML的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22

  • IE下select标签innerHTML插入option的BUG

    调用方法 addOption(sltObj, '<option>a</option>'); 代码如下 var sltObj=document.getElementById('xx');//获取select对象，这里只是给个例子，可以按自己习惯来获...2016-09-20

  • React html中使用react的两种方式

    这篇文章主要介绍了React html中使用react的两种方式,本文给大家提到了React pwa的配置代码，给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-04-06

  • JS中innerHTML和pasteHTML的区别实例分析

    这篇文章主要介绍了JS中innerHTML和pasteHTML的区别,结合实例形式较为详细的分析了innerHTML和pasteHTML的具体功能与使用区别,需要的朋友可以参考下...2016-06-24

  • Python下利用BeautifulSoup解析HTML的实现

    这篇文章主要介绍了Python下利用BeautifulSoup解析HTML的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-27

  • ASP.NET过滤HTML字符串方法总结

    这篇文章主要介绍了ASP.NET过滤HTML字符串方法总结,需要的朋友可以参考下...2021-09-22

  • HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

    这篇文章主要介绍了HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-08-25

  • C#实现HTML和UBB互相转换的方法

    这篇文章主要介绍了C#实现HTML和UBB互相转换的方法,通过两个自定义函数DoHtmlToUB与ubbtohtml来实现HTML代码与ubb代码间的相互转换,是非常实用的技巧,需要的朋友可以参考下...2020-06-25