Shulou(Shulou.com)06/01 Report--

This article mainly introduces "HTML text tags, lists and text formatting methods". In daily operation, I believe many people have doubts about HTML text tags, lists and text formatting methods. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "HTML text tags, lists and text formatting methods". Next, please follow the editor to study!

I. text label

Em: used to express the focus and tone emphasis of a paragraph. Generally displayed in italics

I: it is shown in italics, which is the same as that of em. H6 stipulates that there is no need to focus on the content, but simply bold or italic can be used I or b. Don't use much.

Strong: used to indicate the importance of a content. It is generally shown in bold. It can be used alone or in conjunction with em.

B: bold display, the same as strong display.

Small: the content in the tag will be a little smaller than that in its parent element. Express some of the details in H6, such as version statement, contract terms.

Big: no semantics, rarely used.

Cite: all titles on a web page can be labeled with cite tags to indicate reference content. Such as the title of the book, the title of the movie, etc.

Q: indicates a short reference (used within the line), automatically enclosed in quotation marks. It is automatically added through before and after of css. The style is hardly used.

Blockquote: represents a long reference (block-level reference). Block element, with an exclusive line. B is often used in.

Sup: set the content to superscript display. For example, symbols in mathematics. Or add hyperlinks in the superscript, such as papers, Baidu encyclopedia. Abbreviation for supremum

Sub: set the content to be displayed in the following table. For example, the molecular formula in chemistry. Subtitle subtitle, meaning below

Del: add a bar to the middle of the content, often used to change the original price. It is commonly used in shopping websites, such as when Taobao is on sale.

Ins: add a line under the content to insert a content. The effect of filling in the blanks, English insert

Pre: pre-formatted tags, save the format in the code, will not be displayed in a line, will not ignore spaces, how the source code is written, the web page will be displayed. It is commonly used in technical blogs.

Code: specifically used to represent code, but does not retain formatting. Often end-of-use, commonly used in technical blogs.

Lists (both unordered and ordered lists can be nested with each other)

1. Unordered list (using ul-li tags, ul and li are both block elements)

There is a small dot in front of the default, that is, an unordered list of items. The front dot can be modified through the type property.

Disc: default value, solid dot; square: solid square; circle: hollow circle. Almost none. Remove the bullets and use css. If you need to set the symbol, you can set the background picture for li.

2. Ordered list (using ol-li tags, which are also block elements)

The default is preceded by a project number similar to 1, 2, 3. The default value can be changed through the type property.

Optional: Arabic numeral 1, default; uppercase A; lowercase a; Roman I; as the beginning

3. Definition list (dl-dt/dd,dt defined content, dd interprets the content, or can be nested with each other)

Used to define words or content. Display effect, dt line, dd line, preceded by a space

III. Text formatting

1. Unit

Pixel

Unit of length: px (pixel) one pixel is equivalent to a small dot (square) on the screen, and the screen is made up of pixels. Pixel things cannot be recognized with the naked eye because they are too small.

Resolution: 1366 to 768 the size of a pixel on different monitors is also different. if the display effect is good, the pixel is small. One pixel in a computer is about four times that in a mobile phone. But the mobile browser is displayed by default multiplied by 4x, so there will be no problem.

Percentage

It can also be set to a percentage, which the browser calculates based on the style of the parent element.

The advantage is that when the attribute value of the parent element changes, the child element also changes. Create adaptive pages and use this frequently.

Em

Similar to the percentage, it is calculated based on the font size of the current element. 1em=1font-size (font size). Font-size changes, em changes. When setting font-related styles, use em.

Color (color selection tool: FastStone)

1. Use the words of color to represent color.

2. Use RGB values to represent colors. Refers to the three primary colors of art: Red, Green, Blue (red, green, blue), through the different concentrations of the three primary colors to express different colors.

For example: rgb (red concentration, green concentration, blue concentration), the color concentration needs a value between 0255and 255mm. Use the screenshot tool to see the deployment of concentration, rgb (255250232) bean paste green

The concentration can also be expressed as a percentage, and the percentage can eventually be converted to a value between 0 and 255.

3. Use hexadecimal RGB values to represent colors. Three sets of two-bit hexadecimal to represent color, # red, green and blue, range # 000000 (black)-# FFFFFF (white), FF converted to decimal is 255i

Every two repetitions can be abbreviated: for example, # ff0000 (red) is abbreviated to # f00. # bfa bean paste green

2. Font

The default font size in the browser is 16px. Font-size does not set the size of the text itself. Each text on the page is in an invisible grid. The font-size we set is the height of the grid. In general,

The lower text is smaller and sometimes larger than this grid. The effect is different according to the font (Microsoft Yahi, Song style, etc.).

Font-family: you can specify the type of font displayed in the browser. When a font is used, it will be used if the browser supports it, and the default font will be used if it is not supported (such as using an English font to set Chinese characters). This style can be the same as

Specify multiple fonts, font-family:arial, Microsoft Yahei. Browsers give priority to the front, if there is no front, use the next, and have not yet used the default.

The fonts used in browsers use fonts that have been installed on the computer. If you don't have them, don't use them. Too few fonts are used in development, try not to use them. It is possible that it is not in the user's computer.

Font classification: serif serif fonts; sans-serif sans serif fonts; monospace equal width fonts; cursive cursive fonts; fantasy illusory fonts.

We can set the font to a large category. Large categories will be Microsoft Yahi, Song style and other specific categories. When set to a large category, the browser automatically selects a font to use.

Font-style: you can set the italics of text.

None: text display normally; italic: text italics display; oblique: text tilt display. Most browsers will not make a distinction, the difference effect is not big, the human eye can not see the difference. The second one is usually used.

Font-weight: sets the thickness of the text.

Bold: bold text display; normal: normal display; you can also set nine values of the nine levels of the number 100,900, but the user's computer does not have so many levels of fonts, can not achieve the effect. That is, 200 may be thicker than 100.

It could be the same. It's basically useless.

Font-variant: sets the uppercase display of lowercase letters, showing all letters in uppercase, but lowercase letters are a little smaller than uppercase letters

Normal: normal display; small-caps: text is displayed in small uppercase letters.

3. Case

Text-transform can change the letters in an element according to style.

All uppercase letters are capitalized; lowercase is all lowercase; capitalize: the first letter uppercase none, normal display, clear case. Browsers recognize words by spaces.

4. Text modification

Text-decoration embellishes the text by adding lines above, below, and in the middle of the text.

Below underline, underline; above overline; middle of line-through, delete line; none display normally.

The hyperlink comes with an underscore, because its text-decoration default value is underline, which can be changed by itself, such as setting it to none and removing the underscore.

5. Spacing

Letter-spacing sets the spacing between characters

Word-spacing sets the spacing between words. Actually set the space size between words, but Chinese words are connected, have no meaning and do not work.

6. Align the text

Text-align: setting text alignment Schem

Left: left alignment, default; right right alignment; justify alignment, which is achieved by adjusting the size of spaces between text; center center alignment

7. Indent the first line

Text-indent is used to set the first line indentation. When the default font size is taken, setting it to 32px indicates the position of 2 characters left in the first line.

Text-indent:2em means that the position of 2 characters will always be vacated as the font changes.

When given a positive number, it means to move the specified pixel to the right, and a negative number means to move the specified pixel to the left (this can hide some characters and do not want the user to see it, but the search engine can see it).

8. Row height

The way to set row spacing is not directly provided in css, but can be set by setting row height.

Line-height: sets the row height. The line height is similar to the single line book at school, the line book is one line, the distance between the lines is the line height, and the Chinese character of the web page is also displayed between two lines, which is displayed vertically by default.

So line spacing (line spacing between text) = line height-font size. From top to bottom: the horizontal line of the line-the distance between the line and the first line text-the distance between the first line text and the first line text-the horizontal line of the line-the distance between the line and the second line text-line 2

Text-the spacing between the line and the second line-the horizontal line of the line. Line height refers to the distance between two horizontal lines, and line spacing refers to the distance between two lines of text.

The row height can accept one pixel or a percentage. The percentage is calculated relative to the size of the font

The line height can also be specified by the number n, and the line height sets n times the font size.

For single-line text, you can set the line height the same as the parent element, so that it can be centered vertically on the parent element. The principle is that the text is centered vertically by default between two lines.

How to write: font:30px/30px represents the font 30px, line height 30px, if not specified, there is a default value

At this point, the study of "HTML text tags, lists and text formatting methods" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.