The Document class represents the entire HTML, XML or SVG document. Conceptually, it is the root of the document tree and provides the primary access to the document’s data.
The EventTarget class is implemented by all Nodes in an implementation that supports the DOM Event Model. An EventTarget object represents a target to which an event can be dispatched when something has occurred.
The Attr class represents an attribute in an Element object. Typically the allowable values for the attribute are defined in a schema associated with the document.
HTML 文档由元素树组成。在源代码中，每个元素都由一个起始标记(如<body>)和一个结束标记(如"
")来表示。元素可以有属性，这些属性控制元素如何工作。Aspose.HTML for .NET API 支持 HTML 标准中定义的一系列 HTML 元素，以及关于如何嵌套元素的规则。
考虑创建和编辑 HTML 的简单步骤。文档将包含一个带有 id 属性的文本段落：
创建 HTML 文档实例
创建段落元素 <p>。
设置段落元素的 id 属性。
创建一个文本节点。
将文本添加到段落中。
将段落添加到文件正文中。
将 HTML 文档保存到文件中。
1// Edit HTML document using DOM Tree 2 3// Create an instance of an HTML document 4using(HTMLDocumentdocument=newHTMLDocument()) 5{ 6HTMLElementbody=document.Body; 7 8// Create a paragraph element 9HTMLParagraphElementp=(HTMLParagraphElement)document.CreateElement("p");1011// Set a custom attribute12p.SetAttribute("id","my-paragraph");1314// Create a text node15Texttext=document.CreateTextNode("my first paragraph");1617// Attach the text to the paragraph18p.AppendChild(text);1920// Attach the paragraph to the document body21body.AppendChild(p);2223// Save the HTML document to a file24document.Save(Path.Combine(OutputDir,"edit-document-tree.html"));25}
让我们来看看如何创建一个更复杂的 HTML 文档。每个 HTML 文档都以节点树的形式表示，树中的某些节点可以有子节点。下面的代码片段展示了如何使用 DOM 树和上述功能编辑 HTML 文档：
1// Create and add new HTML elements using C# 2 3// Create an instance of an HTML document 4using(HTMLDocumentdocument=newHTMLDocument()) 5{ 6// Create a <style> element and assign the green color for all elements with class-name equals 'gr'. 7Elementstyle=document.CreateElement("style"); 8style.TextContent=".gr { color: green }"; 910// Find the document <head> element and append the <style> element to it11Elementhead=document.GetElementsByTagName("head").First();12head.AppendChild(style);1314// Create a paragraph element with class-name 'gr'.15HTMLParagraphElementp=(HTMLParagraphElement)document.CreateElement("p");16p.ClassName="gr";1718// Create a text node19Texttext=document.CreateTextNode("Hello World!!");2021// Append the text node to the paragraph22p.AppendChild(text);2324// Append the paragraph to the document <body> element25document.Body.AppendChild(p);2627// Save the HTML document to a file 28document.Save(Path.Combine(OutputDir,"using-dom.html"));2930// Create an instance of the PDF output device and render the document into this device31using(PdfDevicedevice=newPdfDevice(Path.Combine(OutputDir,"using-dom.pdf")))32{33// Render HTML to PDF34document.RenderTo(device);35}36}
1// Edit HTML body content and get modified document as string 2 3// Create an instance of an HTML document 4using(HTMLDocumentdocument=newHTMLDocument()) 5{ 6// Write the content of the HTML document into the console output 7Console.WriteLine(document.DocumentElement.OuterHTML);// output: <html><head></head><body></body></html> 8 9// Set the content of the body element10document.Body.InnerHTML="<p>HTML is the standard markup language for Web pages.</p>";1112// Set an html variable for the document content viewing13stringhtml=document.DocumentElement.OuterHTML;1415// Write the content of the HTML document into the console output16Console.WriteLine(html);// output: <html><head></head><body><p>HTML is the standard markup language for Web pages.</p></body></html>17}
层叠样式表(CSS)是一种样式表语言，用于描述网页在浏览器中的外观。CSS 可以内联、内部和外部方式添加到 HTML 文档中。因此，您可以使用内联 CSS 为单个 HTML 元素设置独特的样式，也可以通过在单独的 .css 文件中指定相关 CSS 来共享多个网页的格式。Aspose.HTML 不仅支持开箱即用的 CSS，还提供了在将 HTML 文档转换为其他格式之前即时管理文档样式的工具，如下所示。
内联 CSS
在 HTML 标签内使用 style 属性编写 CSS 时，称为 “内联 CSS 样式”。内联 CSS 可让你一次对一个 HTML 元素应用一个单独的样式。您可以通过使用 style 属性为 HTML 元素设置 CSS，并在其中定义 CSS 属性。
在下面的代码片段中，你可以看到如何为 HTML <p>元素指定 CSS 样式属性。
1// How to set inline CSS styles in an HTML element using C# 2 3// Create an instance of an HTML document with specified content 4stringcontent="<p>InlineCSS </p>"; 5using(HTMLDocumentdocument=newHTMLDocument(content,".")) 6{ 7// Find the paragraph element to set a style 8HTMLElementparagraph=(HTMLElement)document.GetElementsByTagName("p").First(); 910// Set the style attribute11paragraph.SetAttribute("style","font-size:250%; font-family:verdana; color:#cd66aa");1213// Save the HTML document to a file 14document.Save(Path.Combine(OutputDir,"edit-inline-css.html"));1516// Create an instance of PDF output device and render the document into this device17using(PdfDevicedevice=newPdfDevice(Path.Combine(OutputDir,"edit-inline-css.pdf")))18{19// Render HTML to PDF20document.RenderTo(device);21}22}
内部 CSS 样式选项通过将所有样式封装在 HTML 文档的<head>中的<style>元素中，将属性应用于单个页面，因此很受欢迎。
1// Edit HTML with internal CSS using C# 2 3// Create an instance of an HTML document with specified content 4stringcontent="<div><p>Internal CSS</p><p>An internal CSS is used to define a style for a single HTML page</p></div>"; 5using(HTMLDocumentdocument=newHTMLDocument(content,".")) 6{ 7Elementstyle=document.CreateElement("style"); 8style.TextContent=".frame1 { margin-top:50px; margin-left:50px; padding:20px; width:360px; height:90px; background-color:#a52a2a; font-family:verdana; color:#FFF5EE;} \r\n"+ 9".frame2 { margin-top:-90px; margin-left:160px; text-align:center; padding:20px; width:360px; height:100px; background-color:#ADD8E6;}";1011// Find the document header element and append the style element to the header12Elementhead=document.GetElementsByTagName("head").First();13head.AppendChild(style);1415// Find the first paragraph element to inspect the styles16HTMLElementparagraph=(HTMLElement)document.GetElementsByTagName("p").First();17paragraph.ClassName="frame1";1819// Find the last paragraph element to inspect the styles20HTMLElementlastParagraph=(HTMLElement)document.GetElementsByTagName("p").Last();21lastParagraph.ClassName="frame2";2223// Set a color to the first paragraph24paragraph.Style.FontSize="250%";25paragraph.Style.TextAlign="center";2627// Set a font-size to the last paragraph28lastParagraph.Style.Color="#434343";29lastParagraph.Style.FontSize="150%";30lastParagraph.Style.FontFamily="verdana";3132// Save the HTML document to a file 33document.Save(Path.Combine(OutputDir,"edit-internal-css.html"));3435// Create the instance of the PDF output device and render the document into this device36using(PdfDevicedevice=newPdfDevice(Path.Combine(OutputDir,"edit-internal-css.pdf")))37{38// Render HTML to PDF39document.RenderTo(device);40}41}
1// How to use an external CSS file in HTML using Aspose.HTML for .NET 2 3// Create an instance of HTML document with specified content 4stringhtmlContent="<link rel=\"stylesheet\" href=\"https://docs.aspose.com/html/net/edit-html-document/external.css\" type=\"text/css\" />\r\n"+ 5"<div class=\"rect1\" ></div>\r\n"+ 6"<div class=\"rect2\" ></div>\r\n"+ 7"<div class=\"frame\">\r\n"+ 8"<p style=\"font-size:2.5em; color:#ae4566;\"> External CSS </p>\r\n"+ 9"<p class=\"rect3\"> An external CSS can be created once and applied to multiple web pages</p></div>\r\n";1011using(HTMLDocumentdocument=newHTMLDocument(htmlContent,"."))12{13// Save the HTML document to a file 14document.Save(Path.Combine(OutputDir,"external-css.html"));1516// Create the instance of the PDF output device and render the document into this device17using(PdfDevicedevice=newPdfDevice(Path.Combine(OutputDir,"external-css.pdf")))18{19// Render HTML to PDF20document.RenderTo(device);21}22}
