HTML has been increasing, but it has never become small, because the new version must maintain backward compatibility. This situation will be changed. The first draft of XHTML 2.0 was released on August 5, 2002. A large news is to cancel backward compatibility; the language is finally developed. So what will you get as a developer? How is the robust form and incident? They are research that does not require a large number of JavaScript frameworks and even a better way to hierarchical menu. This article outlines new features in XHTML 2.0 and how might use it in the future. Readers should be familiar with HTML and / or XHTML 1.0. Cascading style Sheet (CSS) is helpful, but it is not required. Say goodbye to rear compatibility, introducing the structure section navigation list and menu link, the link is ubiquitous as the XFormsxml Events XFrames image as the object subsequent steps farewell to backward compatibility, the introduction structure When the World Wide Web Consortium (W3C)) in 2002 When I released the first working draft of XHTML 2.0 on August 5th, it was most surprisingly: Unlike their previous versions, it is not backward compatible. For the previous release, if you go from HTML 4.01 to XHTML 1.0 and later from XHTML 1.0 to Xthml 1.1, the change is added; you can read the browser of the XHTML 1.0 (transition) document can also understand the HTML 4.01 document. And XHTML 2.0 is not that. If you announce the HTML version that we will study today without an IMG tag or bold tag, most web developers will look at you with doubt. However, this is now. In addition to thorough replacement forms and frames, XHTML 2.0 removes B, I and IMG tags (and BIG, SMALL and TT), and even disapprove of using BR to remove it from future releases. But this is why? The reason is that most markers are expressed. The only purpose of their is to give the browser instruction, which specifies how the content should be displayed, but it does not provide information about what is the content. For example, consider the following two sentences:
Presentational Elements Are, for the MOST PART , gone .
with
Presentational Elements Are, for the MOST PART , gone .
In the absence of a style sheet, these two sentences look like in the browser, but only the second sentence provides information about the reason. In fact, from the beginning of EM (emphasis) and Strong markers, it appears in HTML, but the authors have basically ignored them for many years, but focus on performance form, which is expected at the expense of content. But this does not mean that as long as you want to make some content into bold or slope, you should hard to step into these two markers. Conversely, the entire object of removing the representative element is to try the original intention of the inventors of the CSS, that is, according to what the content is indicated, the style sheet should be used to beautify the content. For example, a list 1 uses a category (Class) to point out the content type. Listing 1. Use the category to specify the content type
Employee NOTICE </ TITLE> <style type = "text / css"></p>
<p>.duedate {color: RED;</p>
<p>Font-weight: bold;</p>
<p>.holiday {color: green;</p>
<p>Font-style: italic}</p>
<p></ style></p>
<p></ hEAD></p>
<p><body></p>
<p><H1> NOTICE </ H1></p>
<p><p> Employees SHOULD Take Note of The Following Important Dates: </ P></p>
<p><ul></p>
<p><li class = "duedate"> 8/28/2002 (Progress Reports Due) </ li></p>
<p><li class = "holiday"> 9/1/2002 (labor day) </ li></p>
<p><li class = "duedate"> 10/28/2002 (Final Reports Due) </ li></p>
<p></ ul></p>
<p></ body></p>
<p></ html></p>
<p>In this page, the date type can be confirmed by the content itself, the browser can use the category information to determine how to design the style, as shown in Figure 1. Figure 1. Category can determine which type of content displayed, the style sheet can be properly formatted. Use this view to study it: The purpose of disconnecting (Br) tag is not exactly to display because it does not have any content. XHTML 2.0 does not agree with the BR tag, and advocates using the LINE tag. LINE tag Specifies a special content: usually rendering a line or other content presenting in this way. For example, text:</p>
<p><p></p>
<p>Public class helloworld {<br /></p>
<p>Public static void main (string [] args) {<br /></p>
<p>System.out.println ("Hello World!"); <br /></p>
<p>} <br /></p>
<p>}</p>
<p></ p></p>
<p>become</p>
<p><p></p>
<p><line> public class helloworld {</ line></p>
<p><line> public static void main (string [] args) {</ line></p>
<p><line> system.out.println ("Hello World!"); </ line></p>
<p><line>} </ line></p>
<p><line>} </ line></p>
<p></ p></p>
<p>In this way, the document has an actual object that represents a row, similarly, segment (P) tag represents a segment. Why are all these important? Because web is not only a place where people communicate with people, but also become a place for communication between software applications (such as servers and search engine indexers). Moreover, everyone (or almost everyone) uses the same browser's era. Developers are constantly redesigned for different devices such as PDA and mobile phones. Voice-activated system is not far from us. The structural significance of the content is becoming almost as important as the content itself. So, XHTML 2.0 adds a section (Heading). HTML has always included the title - H1 to H6, until August 5, 2002, did not cancel it, but this is just a time problem. XHTML 2.0 uses universal titles and sections. For example, it can be nested to give title meanings. Document presented before the title title (Listing 2): Listing 2. The number title in the document <HTML></p>
<p><head> <title> adding sections </ title> </ head></p>
<p><body></p>
<p><H1> The Web's Future: XHTML 2.0 </ h1></p>
<p><p> by nicholas chase </ p></p>
<p><H2> Good-Bye Backward Compatibility, Hello Structure </ H2></p>
<p><p> why backward compatibility is over. </ p></p>
<p><h3> Presentation Versus Structure </ h3></p>
<p><P> Using Style Sheets Rather Than Presentational Elements. </ P></p>
<p><H3> Lines </ h3></p>
<p><p> line breaks area deprecated. </ p></p>
<p><H2> Sections </ h2></p>
<p><p> Creating More Reasonable Sections. </ P></p>
<p><H2> Navigation Lists and Menus </ h2></p>
<p><p> hierarchical menus. </ p></p>
<p><H2> LINKS, LINKS, EVERYWHERE </ H2></p>
<p><p> adding links. </ p></p>
<p></ body></p>
<p></ html></p>
<p>Can be used universal title and replacement (Listing 3): Listing 3. General Title and Section</p>
<p><html></p>
<p><head> <title> adding sections </ title> </ head></p>
<p><body></p>
<p><section></p>
<p><h> The Web's Future: XHTML 2.0 </ h></p>
<p><p> by nicholas chase </ p></p>
<p><section></p>
<p><H> Good-Bye Backward Compatibility, Hello Structure </ h> <p> why backward compatibility is over. </ p></p>
<p><section></p>
<p><h> presentation vs. structure </ h></p>
<p><P> Using Style Sheets Rather Than Presentational Elements. </ P></p>
<p></ section></p>
<p><section></p>
<p><h> line </ h></p>
<p><p> line breaks area deprecated. </ p></p>
<p></ section></p>
<p></ section></p>
<p><section></p>
<p><h> sections </ h></p>
<p><p> Creating More Reasonable Sections. </ P></p>
<p></ section></p>
<p><section></p>
<p><h> navigation lists and menus </ h></p>
<p><p> hierarchical menus. </ p></p>
<p></ section></p>
<p><section></p>
<p><H> Links, Links, Everywhere </ h></p>
<p><p> adding links. </ p></p>
<p></ section></p>
<p></ section></p>
<p></ body></p>
<p></ html></p>
<p>This structure has two advantages. First, the application (such as search engine crawler) can easily understand the relative importance of the content, followed by itself. In HTML, the section begins with its title, so there is no content (such as an introductory content) in front of the title. The section element cancels this constraint because any content inside is part of the section. The navigation list and menu add a structure that will greatly benefit the web developer, that is, the navigation list. The working principle of the navigation list specified by the NL mark is very similar to its "Relays" Order List (OL), and the Unquenced List (UL), but there is a little different: the navigation list is only appeared only when the list is activated. Therefore, the navigation list is very similar to the pop-up menu of the hierarchy, which is very popular because they offer many navigation information, and will not occupy too much screen space. For example, soap drama sites may have the following menu (Listing 4): Listing 4. List of navigation</p>
<p><nl></p>
<p><name> Character Options </ Name></p>
<p><li href = "stay.html"> stay </ li></p>
<p><nl></p>
<p><name> Leave </ name></p>
<p><li href = "newjob.html"> job transfert </ li></p>
<p><li href = "divorce.html"> Divorce </ li></p>
<p><li href = "fataldisease.html> Fatal Disease </ li></p>
<p></ nl></p>
<p><li href = "backburner.html"> Back Burner </ li> </ nl></p>
<p>When the user activates the name (Character Options), a list item appears. Regarding whether the user activates the primary list of the primary list (such as the Leave menu), it is not clear that the user must activate the sub-list item itself to make it appear. The ultimate authors may control this line through styles or events. In any case, when the input focus is removed from the main element, the list item disappears. Links, links are everywhere you may have noticed: even if you intend to use the previous example as a menu, it does not have an anchor (a) tag. The HREF attribute has been properly placed on the Li element. This is not the characteristics of the navigation list, but the new feature of XHTML 2.0. Properties related to hypertext (such as HREF, TARGET and AccessKey are now part of the common property set, including core properties (Class, ID, and Title), Internationalization Properties (XML: Lang, it replaces LANG in XHTML 1.1 and event properties, event properties come from XML Events Recommendation, as you will see below. This means that as long as the HREF attribute is added to any element, it can be converted into a link without having to surround a single element with anchor mark. Is this a four-year effort? XLINK has been used by XHTML 2.0? All in all, no. In fact, the differences between links specified in XLINK and XHTML 2.0 are the roots of arguments between developers who are engaged in their respective proposals, so they may be done between this initial public draft and the final proposal. change. At the same time, you can use this feature, navigation list, link element, and resource description framework (RDF)) to copy most of the features of XLINK. XForms is a proposal related to XML and is indeed part of XHTML 2.0. XForms XML form language (XML Forms Language (XForms)) is a new method for research forms - it is the same as the rest of XHTML - content, structure, and performance is completely independent. The XForms page specifies a model that has information about form itself, then distributes a form element around the page, not limited to a single form element. This means that you can even merge elements of different forms in the same area of the page. You can fill a form by an instance document, an instance document is referenced from the XPath expression from the form element. The form element itself also represents a special type of object instead of how they are displayed on the page. When updating data in the form element, the instance document is updated. When the user submits the form, the actually sent is an instance document. For example, use the following simple form (Listing 5): Listing 5. Simple HTML form</p>
<p><html xmlns = "http://www.w3.org/1999/xhtml"></p>
<p><HEAD></p>
<p><title> Preference Form </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><h1> preferences for </ h1></p>
<p><form action = "myFormProcessor.jsp"> <p></p>
<p>UserName: <input type = "text" name = "userid" /></p>
<p><br /></p>
<p>Password: <input type = "password" Name = "pass" /></p>
<p></ p></p>
<p><p></p>
<p>Area Preference:</p>
<p><select name = "seatingpreference"></p>
<p><Option value = "1"> one </ option></p>
<p><option value = "2"> Two </ option></p>
<p><Option value = "3"> Three </ option></p>
<p></ select></p>
<p></ p></p>
<p><p></p>
<p><Input Type = "Submit" /></p>
<p></ p></p>
<p></ form></p>
<p></ body></p>
<p></ html></p>
<p>Listing 6 shows a list of XForms versions: Listing 6. Form for XForms</p>
<p><html xmlns = "http://www.w3.org/1999/xhtml"</p>
<p>XMLns: XForms = "http://www.w3.org/2002/01/xforms"></p>
<p><HEAD></p>
<p><title> Preference Form </ Title></p>
<p><XForms: Model></p>
<p><XForms: SubmitInfo Method = "Postxml" /></p>
<p><XForms: Instance XMLns = ""></p>
<p><preferences></p>
<p><Person Userid = ""></p>
<p><Password> </ password></p>
<p></ persons></p>
<p><seatingpreference> </ seatingpreference></p>
<p></ preferences></p>
<p></ XForms: Instance></p>
<p></ XForms: Model></p>
<p></ hEAD></p>
<p><body></p>
<p><h1> preferences for </ h1></p>
<p><p></p>
<p><XForms: Input Ref = "Preferences / Person @ UserID"></p>
<p><XForms: Caption> UserName: </ XForms: CAPTION></p>
<p></ XForms: Input></p>
<p><br /></p>
<p><XForms: Secret Ref = "Preferences / Person / Password"></p>
<p><XForms: Caption> Password: </ XForms: Caption></p>
<p></ XForms: Secret></p>
<p></ p></p>
<p><p></p>
<p><XForms: Selectone Ref = "preferences / seatingpreference" selectui = "listbox"></p>
<p><XForms: Caption> Area Preference: </ XForms: CAPTION></p>
<p><XForms: Item></p>
<p><XForms: Value> 1 </ XFORMS: Value></p>
<p><XForms: CAPTION> One </ XForms: Caption></p>
<p></ XForms: item></p>
<p><XForms: Item></p>
<p><XForms: Value> 2 </ XForms: Value></p>
<p><XForms: Caption> Two </ XForms: CAPTION></p>
<p></ XForms: item></p>
<p><XForms: Item></p>
<p><XForms: Value> 3 </ XForms: Value></p>
<p><XForms: Caption> Three </ XForms: CAPTION></p>
<p></ XForms: item></p>
<p></ XForms: Selectone></p>
<p></ p></p>
<p><p></p>
<p><XForms: Submit></p>
<p><XForms: Caption> Submit Report </ XForms: CAPTION></p>
<p></ XForms: Submit></p>
<p></ p></p>
<p></ body></p>
<p></ html></p>
<p>Terminology Description: XFORMS Recommendation Special explanation of XFORMS in which there is no single form. It is a plurality of XFORMS pages, no longer a single XFORM page. Forms generally need to be verified. In other words, the data field must contain valid data. XFORMS uses XML mode to constrain the submitted data. In addition, the functionality of the XFORMS page can be further enhanced by adding XML Events (which also included in XHTML 2.0). XML Events You may be familiar with the use of events on the web page by adding events such as OnClick and OnMouseover. Will not have any more. These familiar properties have been replaced by the XML Events modules in XHTML 2.0. XML Events provides a generic approach to specify the operations that should be taken when the event occurs. Its advantage is that you are not limited to a predefined event such as a mouse click. Instead, you can define what you have any event and what happens when they trigger them. XML Events contains the following components. Events such as the mouse click can be used as a target. For example, in the page shown in Listing 7: Listing 7. To click on the page</p>
<p><html></p>
<p><head> <title> rides </ title> </ head></p>
<p><body></p>
<p><ul id = "ridelist"></p>
<p><li href = "monorail.html"> monorail </ li></p>
<p><li href = "matTerhorn.html"> Matterhorn </ li></p>
<p><li href = "coaster.html"> roller coaster </ li></p>
<p></ ul></p>
<p></ body></p>
<p></ html></p>
<p>Users may click on the second LI element Matterhorn. When this occurs, the mouse click event to go to the target (Li) from the document root and return it again. The order is:</p>
<p>(root) - HTML - BODY - UL - Li - UL - Body - HTML - (root)</p>
<p>Go to the downward to the target called the capture phase, and it is again called the bubbling phase (not all events will bubbber). At any time during travel, the event can pass objects that have been registered as the viewer (this means that it is observing a specific event), if it sees the event, perform a specific action. The listener creates a viewer. For example, in the following sequence: <ev: listener observer = "ridelist" Event = "mousedown" Handler = "# myscript" /></p>
<p>The listener makes the UL element (or more accurate, it is a list) becomes an observer, so when the user clicks on any list item, the viewer (but must determine the mechanism of calling any scrip) . XFrames is a widely accused framework is also replaced in XHTML 2.0. The first draft of Xframes debut in the first day of August 6, 2002, the previous day XHTML 2.0 announced that it will use XFrames and try to solve the problem of traditional HTML frameworks. Most issues are difficult to create bookmarks and refresh pages, as well as search engines that do not support the framework cannot index appropriate. In the xframes document, the URI containing the content is part of the entire document URI. For example, the page in the list 8 below may indicate the HTML page with three frames: List 8. Xframes page</p>
<p><html></p>
<p><head> <title> xframes </ title> </ head></p>
<p><body></p>
<p><ROW></p>
<p><frame id = "header" /></p>
<p><column></p>
<p><frame id = "menu" /></p>
<p><frame id = "content" /></p>
<p></ column></p>
<p></ row></p>
<p></ body></p>
<p></ html></p>
<p>Note that no URI of each frame is specified, but each framework has its own unique identifier. Therefore, the URI of this document may be:</p>
<p>Site.xfm # frame (header = header.xhtml, menu = menu.xhtml, content = main.xhtml)</p>
<p>The browser that understands XFrames is associated with the content of each frame with the appropriate URI. When the user clicks on the link and changing the content of the individual framework, the entire URI of the page will change, so it always displays the actual content, "Favorites" and "Back" buttons that the user is viewing. Image As the Object On August 5, 2002, the last major change of the draft Working includes the IMG mark and replaces it with the Object tag. The Object tag is actually appeared in HTML 4.01, but the developer mainly uses it to embed multimedia and Java Applet. However, it can support images. The main advantage of using the Object tag is that it is designed to link down. In other words, if the browser cannot display a specific object, it will display the content of the object. For example, a browser that encounters the following code snippet first tries to load a movie. If the movie fails, the image is loaded. If the image fails, it only displays the text.</p>
<p><object data = "rides.mpeg" type = "Application / MPEG"> <object data = "rollercoaster.jpg" TYPE = "image / jpg"></p>
<p>Jack Tries to Expand His Horizons on The Racing Coasters.</p>
<p></ Object></p>
<p></ Object></p>
<p>Subsequent steps on August 5, 2002 The only thing in the XHTML 2.0 draft Work is not to determine anything. During the current draft and the process of adopted as a proposal, it will certainly certainly change it in certain aspects, but the target and semantic goals are impossible to change. For this reason, it is best to study the page you now build and start developing the habit of proper use of structures and styles. Use the tag to specify what is something, rather than how to display them, and use CSS to complete the rest. Overall, more consideration of the structure of the document and what you want to do, without much consideration of how they will display. About the author Nicholas Chase has participated in many companies (such as Lucent Technologies, Sun Microsystems, Oracle and Tampa Bay Buccaneers, etc.). Nick is a high school physics teacher, a low-radiant waste equipment management personnel, online sci-fi magazine editor, multimedia engineer and Oracle lecturer. Recently, he became the CTO of Site Dynamics Interactive Communications (Clearwater in Florida), or three authors related to Web development books, including Java and XML from Scratch (QUE), and upcoming Primer Plus XML Programming (SAMS). He is willing to listen to the reader opinion, you can contact him through Nicholas@nicholaschase.com.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-66823.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="66823" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.040</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'cehni95m7W9iguuAREwDILDgDvbOKCUKMBxneP0mk2063zjPpej_2BO_2FkPfqusFf_2BU4OWEAxWwXeOaV9WP41ogfw_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
