Home > Developer > Web Develop
Basic structure of XHTML Mobile profile
<?xml version= "1.0" encoding= "Utf-8"?>
<! DOCTYPE HTML PUBLIC "-//wapforum//dtd XHTML Mobile 1.0//en"
"Http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
<meta http-equiv= "Content-type" content= "application/vnd.wap.xhtml+xml;charset= UTF-8"/>
<title> Chinese page </title>
<link rel= "stylesheet" href= "Http://simpleton.h.blog.163.com/blog/style.css" type= "Text/css"/>
<body>
<p>
Text
</p>
</body>
---------------------------------------------------
Define Style sheet CSS
The XHTML mobility Specification [XHTMLMP] stipulates that external style sheets are optional and can be defined for XHTML documents in one of the two ways
External style sheet:
An XML processing instruction that is defined in the XML declaration (<?xml>) instead of in the <?xml-stylesheet href= "Http://simpleton.h.blog.163.com/blog/mystylesheet.css" media= "handheld" type= "Text/css" ?>
By one or more of the <link> elements defined in the <link href= "Mystyle.css" type= "Text/css" rel= "stylesheet"/>
You can also create an internal style sheet by defining the style properties in the <style> element nested within the
Note that in addition to style sheets, you can use the property style to apply styles to individual elements. The order of precedence is:
1. First apply the browser's default style.
2. The external style sheet overrides the default style.
3. The style element in the document header element overrides the external style sheet.
4. Inline styles that are located in a label override all styles that were previously defined for the label.
---------------------------------------------------
<meta> elements
The <meta> element is part of the XHTML MP, but many browsers do not support meta functionality. Attribute HTTP-EQUIV is not supported in XHTML MP.
The,<body> element in the XHTML MP does not support the bgcolor, text, link properties. Same as other XHTML MP elements,<body> support class, ID, Style property to specify CSS attributes
All text in the XHTML MP must contain a <p> element or a different XHTML MP element (such as headers, lists, tables, and so on).
------------------------------------------------
List
<dl>
<dt>Atom</dt>
<dd>subject consists of atoms</dd>
<dt>Proton</dt>
<dd>constituent of the Atom</dd>
</dl>
<ol>
<li>the first</li>
<li>the second</li>
</ol>
<ul>
<li>Meat</li>
<li>Veggies</li>
</ul>
---------------------------------------------------
Formatting differences between XHTML Basic and XHTML MP
The following XHTML elements are not part of the XHTML Basic, but are added to the XHTML MP;
Note that in addition to the align= "Left|right|center" in HR, no attributes are supported in these elements.
Elements that are XHTML MP but are not part of XHTML basic
<b> <big> <i> <small>
---------------------------------------------------
Formatting restrictions on XHTML MP
In XHTML MP, attribute clear* is not supported for element <br/>.
Attribute align is not supported for elements <div>, The XHTML MP does not support element <blink>*.
Display the blinking text using the style attributes of the WAP CSS as shown below
<span style= "Text-decoration:blink" >this blinks</span>
Or use a better approach:
<span class= "Blink" >
Here, the following classes are defined with a <style> element or an external style sheet:
. Blink {Text-decoration:blink}
-----------------------------------------------------
Anchor (anchor) Element
In the XHTML MP, Element <a> supports all HTML attributes except Coords, button, name, shape, and target.
Nokia Mobile Browser supports the Name property to maintain compatibility with CHTML.
A segmented anchor similar to a WML card
XHTML MP supports links to "segment" anchors. You can see this in the Web, and when you click on a link, the page scrolls down to a section of the current page, but also the "back to Top" link:
<a href= "http://simpleton.h.blog.163.com/blog/#h" >Help</a>
...
<a name= "h" >help text</a>
The text is displayed in the Help section. When the link is selected, a document part containing an anchor named H is displayed. Only the anchor with the property name (without the attribute href) is underlined and cannot be selected as an invisible target with an anchor that has the attribute href= "http://simpleton.h.blog.163.com/blog/#anchor-name".
This is a reasonable way to produce a WML-like "multi-card" behavior the upper end of the XHTML page has a "" link that can be used to jump to sections of the page. For example, there may be help text at the bottom of the page, and users can quickly scroll to the bottom to get help text using the assist link. The back key enables the user to return to the position before scrolling, as in a Web browser.
The following program snippet example has an anchor element that defines the shortcut key 5 in this element and links it to a segment in the same document.
<a href= "http://simpleton.h.blog.163.com/blog/#h" accesskey= "5" >Help</a>
------------------------------------------------------
Initiating a phone call
To create an anchor that generates a voice call on the user's phone:
Call WMLScript library function WTAI://WP/MC; NNN, where NNN represents the called phone number that is composed of numbers.
<a href= "wtai://wp/mc;8005551212" >call info</a>
The anchor is displayed in the same way as the normal anchor. When the user selects the link, the user is given a prompt to confirm the call number, and the call will be dialed.
Many XHTML MP browsers also support I-mode Tel:scheme, which is an extension that can initiate phone calls. Optional attribute cti= "..." (if present) can dial the number and then send a DTMF "tone multi-frequency dial tone" with a pause (,) and wait for the user's confirmation (/). The properties in the <a> tag href= "Tel: ...", telbook= "..." or email= "..." can start the mobile phone book feature and also give the preset available data.
<a href= "tel:8005551234" telbook= "John Doe" email= "[email protected]" cti= "8005551234/123" >call john</a>
Executing the above statement will dial the number 8005551234, and then wait and prompt the user to press OK to send DTMF audio 123. In addition, the Phone Book option feature is activated, which saves the Tel:value (or CTI value, if the value is given) to the name John Doe in the phone book, and saves the e-mail address if the device supports an e-mail address in the phone book.
-------------------------------------------------------
Save to phone Book
To create an anchor that can hold names and numbers on the user's phone book:
Call WMLScript library function Wtai://wp/ap; NNN;AAA, where NNN represents an called phone number consisting of numbers, and AAA represents a name consisting of letters and numbers.
<a href= "wtai://wp/ap;8005551234; John Doe ">save John Doe</a>
-------------------------------------------------------
Send e-mail
Many devices that support sending e-mail (such as short message service [SMS], multimedia messaging service [MMS], or other formats) Support mailto: scenario an extension that can send an e-mail message:
<a href= "Mailto:[email protected]" >message to John</a>
You can also specify the default subject and/or body in the URL to get parameters:
<a href= "Mailto:[email protected]?subject=the%20subject&body=this%20is%20the%20message" >Message to John</a>
--------------------------------------------------------
Shortcut keys
The links on the device display make navigation fast, and they are even part of the navigation, especially if the document is long, and links can be used to jump to a portion of the document. However, even if you use a link, you need to scroll the page to the link location, so you need to press the button multiple times to reach the link location.
Shortcut keys enable users to activate visible links with a single keystroke without having to reach the link location. You can create a shortcut by adding the attribute accesskey to the <a> element. The property value is defined in order to activate the link the user must press the key.
However, to let the user know which key to press, it is necessary to use the text in the <p> element before the <a> element to describe the key number selected for the attribute accesskey. Adding a key value to the text ensures that the user sees the shortcut key value that is associated with the text that describes the anchor target. For example, define the following line in the content:
1 <a href= "http://simpleton.h.blog.163.com/blog/next.html" accesskey= "1" >Next</a>
Results in the following display:
1 Next
Example:
<?xml version= "1.0"? >
<! DOCTYPE HTML PUBLIC "-//wapforum//dtd XHTML Mobile 1.0//en" &NBSP;
"Http://www.wapforum.org/DTD/xhtml-mobile10.dtd ">&NBSP;
< title>xhtml 1</title>
<body>
<a Name= "Top"/>&NBSP;
<p>
< A href= "http://simpleton.h.blog.163.com/blog/#bottom" >BOTTOM</A><BR/>&NBSP;
1 <a href= "http://simpleton.h.blog.163.com/blog/file2.xhtml" accesskey= "1" >File</a><br/>
2 <a href= "wtai://wp/mc;8005551212" accesskey= "2" >call directory</a><br/> &NBSP
3 <a href= "mailto:[email protected"?
subject=the%20subject&
Body=this%20is%20the%20message "accesskey=" 3 ">
Email joe</a><br/>
<a href= "http://simpleton.h.blog.163.com/blog/#top" >Top</a><br/>
<a name= "Bottom"/>
</p>
</body>
--------------------------------------------------
Shortcut keys (access-key) options in the menu
In Nokia Mobile browser and Nokia Series 40 mobile devices, all link and submit buttons that contain attribute accesskey are automatically added to the Options menu. The label in the Options menu is the text of the element <a> (if element <a> contains only one image, the value of the IMG attribute alt) or the value of the Submit button. To match the menu, you need to short the text if necessary.
This feature ensures that users can always get the main navigation link quickly, regardless of where the current page is scrolled. This is the same as the elements <do> functionality in WML 1.x (and is simpler than <do>).
The anchor and submit buttons that contain the property accesskey are added to the Options menu in the order in which they appear in the document.
-------------------------------------------------
Forms form
Unlike WML, XHTML form is sent to the server using the Submit button, while WML takes advantage of an anchor with element Postfield.
You can use the CSS in the Form to provide element positioning with the padding and margin attributes. In addition, CSS boundaries are supported, but in Nokia browsers, CSS boundaries appear outside the black boundaries that already exist in element input, textarea, and select.
Form elements supported by XHTML MP:
Select TextArea optgroup option Form Input label
XHTML MP does not support the following:
Attributes of the <form> element accept-charset
Attributes of any element tabindex and label
Elements <fieldset>, <button> and <legend>
Type= "button" in the <input> element
-------------------------------------------------
Form element
The form element defines the action and method, both of which are used to send form data to the WEB server. The action defines the URL on the server to which the form data is sent. Method can be either get or post.
You can use method= "get" to send Form data as a query string value appended to the URL. For example:
<form method= "Get" action= "form-process.cgi" >
Name: <input type= "text" name= "uname"/><br/>
Password: <input type= "Password" name= "PW"/>
</form>
A page with the following URL will be requested:
Http://form-process.cgi?uname=Joe&pw=xyzzy
--------------------------------------------------
INPUT element
The input element is used to enter a short line of text) or a password. Users typically use input elements to enter user names, passwords, e-mail themes, phone numbers, and so on.
Types of input elements supported in XHTML MP
Text Password Checkbox Submit Radio Reset Image Hidden
HTML input attributes not supported in XHTML MP
Accept Align alt Disabled Ismap Readonly usemap
Example:
<form action= "form-process.xhtml" method= "Get" >
First Name:
<input type= "text" name= "fname" title= "First Name"
style= "-wap-input-format:ammmmmm"/> <br/>
<input type= "Submit"/>
</form>
---------------------------------------------------
check box checkbox
<input type= "checkbox" name= "..."/>
Use the attribute checked= "checked" to define the check box that is selected by default. Consider the target group of the service, decide which option is the most likely choice for most users, and then set the option to either checked or unchecked appropriately. (Note that in XHTML, each property must have a reference value, and the Boolean attribute in HTML can omit this value.) ）
---------------------------------------------------
Radio Button Radio
<input type= "Radio" name= "..."/>
In the same form, make sure that the Name property defined for each radio button is the same.
---------------------------------------------------
Submit or reset (reset) button
<input type= "Submit"/>
<input type= "Reset"/>
---------------------------------------------------
Text (TEXTAREA) elements
Avoid defining text that is larger than the content area, even if the required input length exceeds the size of the text area.
---------------------------------------------------
Selection (SELECT) element
If possible, define a default option (selected= "selected").
In a single-selection list (that is, without multiple= "multiple"), if the option element is not defined selected= "selected", the first option of the select list is first selected.
In the select list (multiple selection list) with the statement multiple= "multiple", if the option element does not contain selected= "selected", the selection list is initially empty.
Example:
<form action= "form-process.xhtml" method= "Get" >
<p>choose city:<br/>
<select name= "City" >
<option value= "Boston" >Boston</option>
<option value= "Dallas" >Dallas</option>
<option value= "SanFrancisco" >san francisco</option>
</select>
<br/>
<input type= "Submit" value= "Continue"/>
</p>
</form>
---------------------------------------------------
Hidden fields
<input type= "hidden"/>
If you find yourself creating multiple hidden values, you may have saved too many "states" in the XHTML page, which makes the page size and form request larger than necessary. You can use the "session" feature available in most Web servers to store user state in the session database on the server.
In the XHTML form, you can use a single hidden field to hold the session ID, which is sent with each form request. Some WEB server session tools use cookies to save the current session ID. The cookie value can be sent with each page request, which increases the size of all requests, while hidden values are only sent when the Form is submitted.
---------------------------------------------------
Form
The XHTML MP with WAP CSS gives the table a better layout than WML. For example, in WML, table boundaries cannot be modified and stripped, but it is possible in XHTML with WAP CSS.
Adding column headings (<th>) and table headings (<caption>) is a good idea. Avoid defining table cells that are larger than the display height.
Table properties not supported in XHTML MP
Align cellpadding cellspacing Border
The WAP CSS feature that is used with the XHTML MP allows you to design unit fills, margins, text alignment, and boundary styles, separating the controls on the left/right/top/bottom boundaries. The WAP CSS also controls the boundary width and color (in devices that support color).
in XHTML MP, Element <td> and <th> do not support attribute width or height.
---------------------------------------------------
Image
White pixels are added around the image to create a blank space, which prevents other images or surrounding text from sticking "on the edge of the image. This can be achieved through the property margin of the WAP CSS.
Explicitly define the height and width of the image in markup, which allows the browser to reserve the appropriate space for the image.
For example: .
Use the properties of the WAP CSS Float:left or float:right to make the text around an image that is less than half the width of the display. Text suspended text end user with new line starts less scrolling.
The text is not loaded in the element using the attribute ALT definition to replace the text, and most browsers will display it.
The, element in the XHTML MP does not support attributes align, border, hspace, Vspace, and Usemap.
---------------------------------------------------
Other knowledge about XHTML
Soft keys
On Nokia phones, soft keys are fixed and cannot be overwritten. The left soft key is labeled Options (OK in the input text), and the right soft key is labeled back (Clear when entering text).
During the browsing process, the options Soft key makes it easy for users to access all browser-related choices at all times. The back softkey returns the user to the previously visited XHTML page.
In Nokia Mobile browser, all links and submit buttons that contain attribute accesskey are automatically added to the Options menu.
Script
The script property of <script> elements and any elements is not supported in XHTML MP . XHTML MP contains elements <object> and <param>, but some mobile browsers may not support them.
Cookies
Nokia mobile Browser version 4.0 over the Nokia Activ Server gateway and other gateways support standard HTTP cookies.
Framework
frames are not supported in XHTML MP .
Extended
The Nokia mobile browser and many other XHTML MP browsers support the extension of the XHTML MP to maintain compatibility with cHTML:
<blink> <marquee> <u> <dir> <menu>
Tel:uri scheme, with CTI, Telbook, and email attributes
The differences between XHTML MP and WML 1.3 include:
XML namespaces are not used in WML 1.3, but are used in XHTML. The default namespace is XHTML.
In XHTML MP, the root element <wml> of WML is removed. As an alternative, the XHTML element
In the XHTML module, the following items are used: All elements in XHTML Basic, Element
In the XHTML MP, Element
In the XHTML MP, the WML element <template> has been removed.
In the XHTML MP, the WML element <card> has been removed and replaced with <body>. Unlike <card> in WML 1.x, there can be only one <body> element in a file.
The WML attribute ordered is removed from the XHTML MP.
WML events are not supported in XHTML MP, such as:<do>, <ontimer>, <onenterforward>, <onenterbackward>, <onevent> , <onpick>, <go>, <prev>, <noop>, and <postfield>.
WML element <do> cannot be used in XHTML MP.
The inline table (that is, the WML element <table> in the paragraph) is legal, but is illegal in standard XHTML. However, in order to support the conversion from WML 1.3 to WML 2.0, the inline table is allowed in the XHTML MP, which is supported by Nokia Mobile browser.
Element <pre> can contain form control elements <input> and <select>. This is illegal in XHTML. However, for the conversion from WML 1.3 to XHTML MP, the XHTML MP allows the use of form elements in <pre>, which is supported by the Nokia Mobile browser.
The input element does not support WML's attribute format, which controls the recognized input letter, and is substituted with the new CSS property,-wap-input-formal, which has the same syntax as the WML property format. Specific wording: style= "-wap-input-format:ammmmmm"
XHTML MP supports attribute accesskey in elements <a>, <input>, <label>, and <textarea>. Note, however, that accesskey may not be supported on all devices.
WML-formatted element <u>* is not supported in XHTML MP.
The recommended way to implement formatting in XHTML MP is to use CSS classes, which can be done by defining the following styles in an external style sheet:
. u {Text-decoration:underline}
Then use the span element with the class to set the style;
For example:
<span class= "U" >this is underlined</span>
Other WML 1.x elements are not supported in the XHTML MP. The WAP forum defines an extension to the XHTML MP, which is called WML 2.0. WML 2.0 contains "compatibility" Elements for WML 1.x (such as <wml:card>, <wml:do>, and so on) for automatic translation of WAP gateways from wml1.x to WML 2.0. Since Nokia Mobile browser originally held wml1.x, translation is not necessary, so Nokia Mobile browser does not support WML 2.0.
------------------------------------------------
WAP CSS
1 Introducing external files
<link rel= "stylesheet" href= "Http://simpleton.h.blog.163.com/blog/mydoc.css" type= "Text/css"/>
2 style elements in the document header
<style> p {Color:blue} </style>
3 using the XHTML style property
<p style= "color:red" >red</p>
4 using the XHTML class attribute
. Class1 {padding-bottom:4px}
<p class= "Class1" >this paragraph would have bottom padding.</p>
5 id attribute using XHTML
<style>
#myid {border-width:1; border:solid; Text-align:center}
<style>
<H1 id= "myID" >this heading has a solid border.
6 element div and span using XHTML
In addition to the discussion of applying styles defined by one or more elements to content, you can also use DIV elements to apply a style (defined in a style sheet or
<div class= "Test-case" >
<p>this paragraph is blue.</p>
<p>here is <span class= "Test-id" >test51 and test52</span> specs.</p>
</div>
-----------------------------------------
Matters to be avoided
Avoid making XHTML content not automatically wrapped. In other words, do not use the value nowrap in the property white-space.
Avoid removing the underline from the anchor (<a> element). In other words, do not use style text-decoration:none in anchors.
Avoid Text-decoration:underline in plain text properties.
Avoid using attributes Font-style and font-variant too much to emphasize text, especially in the same XHTML page.
Avoid using too many different font types (attribute font-family) and font sizes (attributes Font-weigh and font-size) in the same XHTML page. In an XHTML page, try to limit the font size and font type to 1 to 3 types.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
