Markup Language-phrase element _ HTML/Xhtml _ webpage Creation

Click here to return to the webpage tutorial section HTML. above: Markup Language-Source of the form source Chapter6 & lt; strong & gt;, & lt; em & gt; and other phrase elements in the introduction and previous sections, I have mentioned the concept of semantic tag a little. Use tag to identify the meaning of a file, rather than simply set the display effect by TAG. after the design, in the introduction and the previous sections, the concept of semantic tag has been slightly mentioned, and the tag is used to identify the meaning of the file, rather than simply setting the display effect with the tag. designing a webpage that fully uses semantic tags is a good idea. however, I think this goal is too idealistic. of course, failing to fully achieve the goal does not mean that the effort is meaningless. at least it is very valuable to work toward this goal.
In reality, it is often necessary to add non-semantic tags to achieve specific design goals, mainly because the famous browsers cannot fully support the standard. some CSS rules cannot display the correct results in some browsers. Unfortunately, we must use additional labels to achieve certain design goals.
There is an important concept that must be taken into consideration: trying to write Semantic Structures will bring practical benefits. at the same time, although the standard support does not reach, it has crossed the critical point so that we can now use methods that comply with network standards to write web pages. sometimes it is necessary to make some sacrifices, but the more labels that meet the standards, the easier it will be to work in the future. display Effect VS structure label
This chapter will discuss the differences between the Display Effect and the structure label. More specifically, it is about the use Replace, And useReplaceDifferences. Later in this chapter, we will also discuss several other phrase elements and their importance in the standard-compliant, structured tag syntax.
You may have heard that some people suggest using the bold textReplaceBut he didn't tell you why you need such a replacement. without knowing "why", it is hard to expect other web designers to change their label usage habits just because they have heard of the need to do so. why?AndRatioAndOK?
RemoveAndTag, replaceAndWhat are the advantages? In fact, all this is to express the meaning and structure, rather than simply display the results. All examples in this book also strive to follow this concept. Let's see what experts say.
First, let's take a look at how W3C describes the phrase element specification in HTML4.01.And
The phrase element can contain structure information in the text fragment. Common phrase elements have the following meanings:
Representative stressed
More intense emphasis
So here we will discuss two different levels of emphasis. for example, it is a single word or phrase. It should be loud, with a higher tone, faster reading, or... well, it is more important than general text content.
W3C also describes the following content:
The Display Effect of the phrase element varies with the browser. Generally, the visual browser should display the expression in italic.In bold.The speech synthesis software can work with the content to change the synthesis parameters, such as the volume, tone, and speed.
Aha! The last sentence is particularly interesting. It is indeed a good thing that speech synthesis software (previously called screen reader) will correctly process the words that must be emphasized.
In contrast,OrThis is just a simple display effect label. If our goal is to separate the structure from the display effect, useAndIt is the right choice. You just need to display the bold text and the italic text in css. This chapter will discuss more examples later.
Next, let's look at two identification examples to help us understand their differences. Method
Your order number for future reference is:6474-82071. Method B
Your order number for future reference is:6474-82071. Bold and beautiful
In this caseRatioThe perfect example is to make the specific text in the sentence more important. in addition to the order numbers in bold, we also want screen readers to change the way they express the content: increase the volume, change the tone or speed. method B can achieve both goals at the same time.What about it?
SimilarlyReplaceTo express importance at the same time, rather than simply displaying text content in italic. Let's take A look at these two examples: Method
It took me notone,ThreeHours to shovel my driveway this morning. Method B
It took me notone,ThreeHours to shovel my driveway this morning. Emphasize tone
In the previous example (the actual situation in this book), my goal is to enable the word "three" to emphasize the tone, as if I read this word out loud, visually, method B is displayed in italics in most browsers, and screen readers adjust the tone, speed, or volume. only bold or italic words are required.
Note that in many cases, you only need to visually display the text effects in bold and italic. In other words, assume that your Sidebar contains a list of links, and you like to display all links with the same effect: Bold (-1)

In addition to visual features, we do not intend to emphasize the link content, which is a good place to change the Display Effect of the link with CSS, so that they will not be particularly emphasized by screen readers and other non-visual browsers.
For example, do you really want to make the bold link read faster, louder, and more vocal? Probably not. The bold text here only shows the effect. font-weight is equivalent to bold.
To achieve the Display Effect of-1, let's assume that the chain bar is placed in the id set to sidebar

In this way, we can use CSS to specify the # sidebar link to be displayed in bold:
# Sidebar {
Font-weight: bold;
}
It is extremely simple and I think it is a bit ridiculous to mention it, but it is indeed a good way to help separate the structure and display effect. It is bold!
Similarly, when thinking about italic text, you can also apply similar ideas. when you just want to show text in italic text that you don't want to emphasize, you can use the font-style attribute again to process these situations through CSS.
Let's use the same # sidebar as an example. For example, if you want to make all the links in # sidebar appear in italic, you can write as follows:
# Sidebar {
Font-style: italic;
}
It is a simple concept, but in the field of structured markup syntax, I think it is very important to discuss these situations-use CSS to process CCTV, instead of Display Effect labels. in some cases, the simplest solution is easily ignored. share bold and italic
When I plan to display text in both bold and italic words, I think it is necessary to think about the question first. To what extent do you want to emphasize it? Based on the answer to this question, I will select the appropriate Tag:(Emphasis) or(More intense), and then mark the text with the selected tag.
For example, the following example shows that "fun" is displayed in bold and italic at the same time.To emphasize this word.
Building sites with web standards can beFun!
Most browsers only display this word in italics. To use both bold and italics, we have several options. Oh, I really want you to agree to the above sentence.
One of the methods is to use a common package outside of "fun", and specify the CSS ruleThe. Mark syntax in bold appears as follows:
Building sites with web standards can beFun!
CSS looks like this:
Em span {
Font-weight: bold;
}
Obviously, the semantic part is not good, because we add additional labels, but this method is still useful for everyone.
The other method isThe tag specifies a class and adds the BOLD effect to CSS. The markup syntax looks like this:
Building sites with web standards can beFun!
CSS looks like this:
Em. bold {
Font-weight: bold;
}
UseThe ITALIC effect can be achieved (and the text content is emphasized in semantics), and adding bold class to it will makeText in bold.
Similar methods can also be used to modifyAt this time, we can design italic class with italic effects and match them with the emphasis on a paragraph of text.Original bold effects.
The markup language looks like this:
Building sites with web standards can beFun!
CSS is like this:
Strong. italic {
Font-style: italic;
}
# P # OVERVIEW
I want to discuss this topic as necessary, so this is a good example of one of the core topics of this book: separating content from presentation results is very important and advantageous:AndChanging a tag to a structure equivalent tag (when the content is emphasized) is a simple method to help achieve this type of separation goal.
So next time you hear someone say "yes, you should always useReplace"You have enough reason to support this argument.
In most casesOrEmphasize tone, and when you only want to pursue the visual bold and italic effects, use CSS to extend it.
So far, this chapter has focused onAndThe two are only part of what W3C calls "phrase elements". Here we will look at some phrase elements and their relationships with standards. phrase Elements
BesidesAndIn addition, the complete list of phrase elements in W3C HTML 4.01 specifications also includes:: Contains other references. Refer to the source information.: Represents an example of a noun definition.: Represents a piece of code: Represents a program, script output demonstration: Indicates the text to be entered by the user.: Program variables: stands for short nouns (such as WWW, HTML, URL, Mass.): stands for short terms (such as WAC and radar)
Let's look at several labels in depth, first fromStart
# P #Design
It is an interesting element worth discussing. You can simply replace it with a designated display effect.Tags are especially important.The purpose is to reference the Source: identify the author or publication. Historically, designers may useThe title of the book is displayed in italics, but we learned earlier in this chapter that CSS is the best tool to specify the display effect.
You may suggest usingIt indicates the title of a publication, But When referencing a book or other publication, we do not intend to emphasize it, that is, to display the title of the book in italic (it is also often used in printing, but this will obviously be confused with the link ).
As a result, it was created for this workload.Tags, which are displayed in italics by most browsers or even presets.Content in the tag. We can also add CSS rules to achieve the same purpose. Specification
W3CThe tag specification is a bit simple. It is simply mentioned in the HTML 4.01 specification.
: Contains other references. Refer to the source information.
This is something we can understand, but we do not know what types of information can be stored inBut from the perspective of "Source", we can at least include the author and publications.
Let's take a lookUsage:
The novel,The Scarlet LetterIs set in Puritan Boston and like this book, was written in Salem, mascript usetts.
UsedAfter The label, The title of The Scarlet Letter is displayed in italics in most browsers. We will add The following simple CSS rules so that The browser can display The correct results without preset settings.
Cite {
Font-style: italic;
}
Let's review the title book and the title of other publications.Replace tagsIn most browsers, the Italic display effect is still available, and the page content becomes structured and semantic again. Of course, this structure can make full use of CSS, so let's take a look at it and change it.Style
In the process of constructing the page content by structure and semantics, we also make it easier for the page to specify styles (and modify styles) with CSS.For example, if we use this tag to tag a publication, we can have a full grasp of the actual style and easily modify it whenever necessary.
Assume that the entire website is usedTag the reference materials of the book and the title of the publication. We add global CSS rules to display allElement, but a few months later, we hope not only to show the book publishing in italic, but also to use bold, red text gray background.
Of course, you can use several CSS rules to quickly complete this task and immediately change the previousThe title of all referenced materials. If you useOrThe object cannot be explicitly specified.
Cite {
Font-style: italic;
Font-weight: bold;
Color: red;
Background-color: # ddd;
}
-2 make the Display Effect of most browsers. This is another good example of writing a structured mark first, so that you can easily modify the design style of the whole site later.

-2.Tag, use CSS styles to exert the potential of the Structure
In addition to easy-to-use styles, structured tags also facilitate the processing of server-side software, bringing interesting applications.
For example, Mark pilgrim, an easy-to-use proponent, used a lot on his personal website "Dive into mark ".Label.Tag tags reference any publication, so Mark can write a program, parse all articles, create a database, and then classify (http://www.peintomark.com/archives/citations/) based on reference sources)
6-3: search for my own results. Two related articles can be found in Mark's blog.Marked with "Dan cederhoma.

-3 results of "posts by citation" produced by Mark Pilgrim in "Dive into mark" (http://www.peintomark.org/archives/citations/dan_cederholm)
# P # And
I also want to propose two phrase elements, namely (abbreviation) and (abbreviation). Using these tags can provide definitions for abbreviations, so that all users can understand the content and improve the ease of use of the web page.
Let's take a look at the W3C Definition and purpose in the HTML4.01 specification: stands for abbreviations (such as WWW, HTTP, URL, Mass., etc.) to represent vertices (such as WAC and radar)
With the appropriate title attribute, these elements can help users who do not know specific terms. For example, when identifying the "XHTML" abbreviation, we can use tags like this:
XHTML
The use here will make the screen reader spell out the abbreviation content (X-H-T-M-L), instead of reading the complete content, relative, use will let him read the complete content, rather than the abbreviation.
An example of using tags is as follows:
NATO
We can also use two auditory CSS rules to emphasize these differences again:
Abbr {
Speak: spell-out;
}

Acronym {
Speak: normal;
}
The auditory style allows the author to specify the reading mode for the screen reader, which can modify the page's auditory expression, guide the tag structure, change the tone, tone, and so on, make the page reading effect more consistent with the visual effect. define once
Many people recommend that you define the abbreviations that appear repeatedly on the page only once. In short, they think that repeated definitions of nouns are too wasteful, however, it is best to add the title attribute only when it appears for the first time. I think there is some reason for this. Although when a user is directed to a specific section on the page, it may be because he does not see the header to expand the abbreviation, therefore, it cannot be profited from the definition.
Use your judgment to determine when (and how frequently) the nouns placed in and are defined.
To attract readers visually, Some browsers Add a 1-pixel dot bottom edge to the bottom of the browser by default, to lure users to move the mouse over the abbreviation noun, a short name above, when the mouse moves above, the browser displays the definition content provided by the title attribute in the form of "tooltip.
For browsers that do not display dot bottom edges by default, the same effect can be achieved by defining CSS.
Abbr, acronym {
Border-bottom: 1px dotted;
Cursor: help;
}
We also add additional rules to convert the cursor to "help" (supported by most browsers) to help users see that this is not a link to be clicked, the definition content displayed in "tooltip" (Mark Newhouse, "Real World Style: CSS Help ").
-4 is the Browser display effect. Extend "XHTML" to define text and dot bottom edges:

-4. compatibility issues with examples displayed by browsers
It is worth mentioning that at the time of writing this book, Internet Explorer for windows does not support specifying styles for tags and displaying tooltip. IE/Win supports tags to encourage some designers to use only abbreviated and abbreviated terms.
This may be attractive, but it is not a good thing to use the wrong elements to solve the real problem. For this particular problem, I prefer to express the term according to the standard, let the correct supported browsers process the tag style. let's take a quick look at a few phrase elements that haven't been mentioned.
# P #
The element is designed to display sample code on the XHTML page. For example, if you want to share a CSS section, you can write it as follows:

#content {
width: 80%;
padding: 20px;
background: blue;
}

In general, visualized browsers are displayed in a fixed-width serif font.The content in the tag. Of course, we can also add CSS rules to specify the display method we like.
Code {
Font-family: Courier, serif;
Color: red;
}
In this way,The content will become a red Courier font.
The element is used to identify the sample output of a program and a script. For example, if I want to discuss the output of a compiled Perl script, I may integrate it like this:


When the script has executed, at the command line you will see the message script was successful!.

Here I useEnclose the output sample of the script. At the same time, we can also set a unique style for the output sample of the program based on CSS rules, just likeSame.
AndRelated,It is used to mark program variables and references. For example, if we are discussing XSLT style sheets, I can write down:

I'm going to pass the parameterLastUpdatedTo my main. xsl file.

Many browsers are displayed in italics.Label content, but you can write a simple rule to remove the default value. If you do not like italic, we can use the font-style attribute of CSS to change the display effect:
Var {
Font-style: normal;
Font-family: Courier, serif;
Color: purple;
}
Finally, let's take a look.Complete the part of the phrase element.
The element can be used to mark the text to be entered by the user. For example, if I am explaining how to use the specified accesskey to switch the cursor to the search box, I may write like this:

To quickly change focus to the search input field, Mac users typeCommand 9.

You probably guess what I want to say next. That's right. You can adjust allThe style of the element, just like other phrase elements. Conclusion
Let's review what we have seen in this chapter. First, we will discussAndBetter than the same Display EffectAndAt the same time, it also studies how to simply set the bold or italic display effect, CSS is the correct method.
Other phrase elements are also discussedMark characters, the beginning of the publication, and prove the advantages of structured markup syntax for display effect and data parsing.
It also demonstrates how to use appropriate elements to mark abbreviations and abbreviations to improve the ease of use of web pages. At the same time, it also uses additional CSS display and voice rules to enhance definition content. finally, we can see the remaining phrase elements. Each element has a different preset style of general text, but we can quickly design simple CSS rules for a single page or the entire website, specify the desired display style for these elements.
This chapter shows some labels that are quite unfamiliar to many people. Standardization is sadly misinterpreted as p css after it is launched in China. I really don't know what to say, people who want to see it can correctly recognize the roadmap of standardization-semantic documents