catalogue
5. Superscript: sup and subscript: sub
7. Strikethrough s, italic i, bold b
5. Picture suspended text: title
6. Picture specifying alternate text attribute: alt
6. Picture text alignment: align
This is the seventh article. Some attributes are mentioned in the table details in the previous section, such as align, color and border. Some attributes are also found in text or pictures. You can contact the table attributes to learn the following text and picture attributes.
1, Text attribute < font >
1. Alignment attribute: align
The text alignment attribute is the same as the table alignment attribute. Set the horizontal alignment of the table in the web page. The common attribute values are left, right and center
Syntax: < p align = "center" > this is a paragraph of text with center alignment < / font ></p>
< p align = "left" > this is a text centered on left < / font ></p>
< p align = "right" > this is a text centered on right < / font ></p>
2. font label
The face attribute is used to set all font attributes. The attributes set are in order: "font style font variant font weight font size / line height font family"
The values of font size and font family are required. If other values are missing, they will be inserted into the default value.
| Attribute name | effect | Default value | Common values |
|---|---|---|---|
| variant | Convert all lowercase letters to uppercase and reduce the font size | normal | small-caps inherit inheritance |
| weight | Sets the thickness of the text | normal (400) | bold(700),bolder,lighter |
| size | Set font size | medium | Absolute size: (x-/xx -) samll, smaller, medium, (x-/xx -) larger, larger, integer px, 0 decimal em, 80% |
| line-hight | Sets the row height in percent | normal | number |
| color | Set text color | red, #000000 (HEX), rgb (255255255) | |
| family | Sets the font of the specified element | normal | times,courier,arial |
Font attribute: face
Face is a text font attribute. The value of the face attribute can save several font names as alternatives. Put the most desired font at the first of the font list. When the first font is unavailable, the browser will use the alternative font at the back. A generic font should be placed last (serif, sans serif, monospace, cursive, or fantasy) so that browsers can find it in the generic font library when none of the previously listed fonts are available.
Syntax: < font face = "official script" >
To specify the priority of several fonts, use commas to separate font names
For example: < font face = "Verdana, Arial, sans serif" >
5. Superscript: sup and subscript: sub
< sup > label defines superscript text. The superscript text will be displayed above the baseline with half of the character height in the current text, which is the same as the font and size of the text in the current text stream. Superscript text can be used to add footnotes.
< sub > label defines the subscript text. The subscript text will be displayed below the baseline with half of the character height in the current text stream, which is the same as the font and size of the text in the current text stream. Subscript text can be used to represent chemical formulas.
Syntax:
<p>The text in this paragraph contains < sup > superscript < / sup > text</ p>
<p>The text in this paragraph contains < sub > subscript < / sub > text</ p>
7. Strikethrough s, italic i, bold b
<s> Tags are used to define incorrect text.
<i> Tags are used to define parts different from the rest of the text (e.g. special nouns, idioms, etc.) and present this part of the text as italic text.
<b>The label defines bold text. Can be used to highlight
Syntax:
(1) <p><s>give me a red envelope </s></p>
<p>Happy New Year</p>
(2) < p > I wish China's < / I > Olympic athletes a good performance in the Winter Olympics. Come on! Come on</ p>
(3) < p > this is normal text < b > this is bold emphasized text < / b > this is normal text</p>
10. nobr: no line breaks
The nobr tag indicates that there is no line break and prevents the text from automatically splitting into new lines, so it is displayed as a long line and may need to scroll. This tag is not standard HTML and is not recommended. You can learn css later and use the} attribute white space
Example:
<nobr>
This is a line of text that does not wrap. There will be a slider at the bottom of the screen. This is a line of text that does not wrap. There will be a slider at the bottom of the screen. This is a line of text that does not wrap. There will be a slider at the bottom of the screen. This is a line of text that does not wrap. There will be a slider at the bottom of the screen. This is a line of text that does not wrap. There will be a slider at the bottom of the screen. This is a line of text that does not wrap. There will be a slider at the bottom of the screen.
</nobr>
2, Picture properties < img >
Picture label img Basics:
The < img > tag defines the image in the HTML page< IMG > tag must have two attributes, src and alt. Note: the image is not inserted into the HTML page, but linked to the HTML page< The IMG > tag is used to create placeholders for referenced images. Add a link to an image to another document by nesting < img > tags within < a > tags.
1. width and height
The width property specifies the width of the image in pixels.
The height property specifies the width of the image in pixels.
It should be a good habit to specify the height and width attributes of images. If the width and height properties are set, you can reserve space for the image when the page is loaded. Without these attributes, the browser cannot understand the image size and reserve appropriate space for the image. When the image is loaded, the layout of the page will change. Before using the image on the web page, the image should be processed to the appropriate size through software.
Example: an image with a height and width of 33 pixels:
<img src="./img/1.jpeg" height="33" width="33">
2. Borders: border
The border property specifies the width of the border around the image. Note: the default image has no borders (unless the image is inside the < a > element). HTML5 does not support the < img > border attribute. CSS should be used instead.
Example: picture with border 9 < img SRC = ". / img / 1. Bullet. png" border = 9 >
3. Horizontal spacing: hspace
The hspace attribute specifies the left and right margins of the image
Syntax: < img SRC = ". / img / 1. JPEG" hspace = "22" width = "33" height = "33" >
4. Vertical spacing: vspace
The hvspace property specifies the left and right margins of the image
Syntax: < img SRC = ". / img / 1. JPEG" vSpace = "22" width = "33" height = "33" >
5. Picture suspended text: title
The title attribute adds floating text to the text of the HTML page. When the mouse hovers over the picture, the page will appear our defined text in a floating way above the picture, which plays a role of prompt.
Example: < img title = "this is a star chart" width = "55" height = "55" SRC = ". / img / 1. JPEG" >
6. Picture specifying alternate text attribute: alt
The alt attribute is a required attribute that specifies alternative text when the image cannot be displayed. Assuming that the user cannot view the image due to some reasons (such as too slow internet speed, error in src attribute, browser disabling image, and user using screen reader), alt attribute can provide alternative information for the image. When the user moves the mouse over the img element, the browser displays the value of the alt attribute as a tooltip.
Example: < img SRC = ". / img / 12. JPEG" ALT = "Star" width = "33" height = "33" >
6. Picture text alignment: align
The align attribute specifies the alignment of the image with respect to the surrounding elements. As mentioned in the IMG introduction above, < img > elements are inline elements (new lines are not inserted on the page), which means that text and other elements can be surrounded by them. Therefore, the align attribute can help us specify the alignment of the image relative to the surrounding elements.
Syntax:
Default aligned picture (align="bottom")
<p>These are some text < img SRC = ". / img / 1. JPEG" ALT = "Star" width = "55" height = "55" > these are some text</ p>
Align in the middle of the picture:
< p > these are some texts< IMG SRC = ". / img / 1. JPEG" ALT = "Star" width = "55" height = "55" align = "middle" > these are some text</ p>
Picture top alignment:
< p > these are some texts< IMG SRC = ". / img / 1. JPEG" ALT = "Star" width = "55" height = "55" align = "top" > these are some text</ p>
The above code is as follows, which can be copied. After running, we can further understand each attribute in combination with the running results and code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>
<font color="blue">
1, Text properties
</font>
</h4>
<hr>
<!--align Align Attribute ---------------------------------------------->
<h4><font color="blue">Align Attribute </font></h4>
<p align="center">
<font face="official script">
This is a paragraph aligned as center Centered text
</font>
</p>
<hr>
<!--font label face Font properties --------------------------------------->
<h4><font color="blue">face Font properties </font></h4>
<p>
<font face="official script">Text with official script font</font><br>
<font face="Chinese regular script">Chinese characters in regular script are used</font><br>
<font face="Fangzheng shutI">The text of founder shutI is used</font>
</p>
<hr>
<!--font label size,color,weight Font properties---------------------------------------->
<h4><font color="blue">style Font properties </font></h4>
<font face="official script" size="5" color="red" weight="700">
This is a text with "official script" font, size 5, red and text thickness of 700
</font>
<br>
<font>This is a normal contrast text (no font operation)</font>
<hr>
<!--Superscript sup & subscript sub---------------------------------------->
<h4><font color="blue">Superscript sup & subscript sub</font></h4>
<p>The text in this paragraph contains <sup>Superscript</sup> Text.</p>
<p>The text in this paragraph contains <sub>subscript</sub>Text.</p>
<hr>
<!--Delete line s,Italics i,Bold b---------------------------------------->
<h4><font color="blue">Delete line s,Italics i,Bold b</font></h4>
<p>
This is plain text<s>This is text with a strikeout</s><i>This is italic text</i><b>This is bold text</b>
</p>
<hr>
<!--Non wrapping label: nobr---------------------------------------->
<h4><font color="blue">Non wrapping label: nobr</font></h4>
<nobr>
This is a line of text that does not wrap. There will be a slider at the bottom of the screen. This is a line of text that does not wrap. There will be a slider at the bottom of the screen. This is a line of text that does not wrap. There will be a slider at the bottom of the screen. This is a line of text that does not wrap. There will be a slider at the bottom of the screen. This is a line of text that does not wrap. There will be a slider at the bottom of the screen. This is a line of text that does not wrap. There will be a slider at the bottom of the screen.
</nobr>
<hr>
<h4><font color="blue">Picture properties</font></h4>
<!--width & height Picture width and height properties------------------------------>
<h4><font color="blue">width & height Picture width and height properties</font></h4>
<img src="./img/1.jpeg" height="33" width="33">
<img src="./img/1.jpeg" height="66" width="66">
<hr>
<!--border Picture border properties------------------------------------------>
<h4><font color="blue">border Picture border properties</font></h4>
<img src="./img/1.bullet.png" border=9 height="33" width="33">
<hr>
<!--hspace Horizontal spacing attribute------------------------------------------>
<h4><font color="blue">hspace Horizontal spacing attribute</font></h4>
<p><img src="./img/1.jpeg" width="33" height="33">Pictures without horizontal spacing</p>
<p><img src="./img/1.jpeg" width="33" height="33" hspace="20">Pictures with reserved horizontal spacing</p>
<hr>
<!--vspace Vertical spacing attribute------------------------------------------>
<h4><font color="blue">vspace Vertical spacing attribute</font></h4>
<h4>Pictures without reserved vertical spacing</h4>
<p><img src="./img/1.jpeg" width="33" height="33"></p>
<h4>Pictures with reserved vertical spacing</h4>
<p><img src="./img/1.jpeg" width="33" height="33" vspace="22"><br></p>
<hr>
<h4><font color="blue">vspace Vertical spacing and hspace Horizontal spacing combination</font></h4>
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/bullet.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/bullet.png">
<hr>
<!--Picture text: title------------------------------------------>
<h4><font color="blue">Picture text: title</font></h4>
<img title="This is a map of the starry sky" width="55" height="55" src="./img/1.jpeg">
<hr>
<!--Specify alternate text properties for pictures: alt------------------------------------------>
<h4><font color="blue">Specify alternate text properties for pictures: alt</font></h4>
<img src="./img/12.jpeg" alt="star">
<hr>
<!--Picture text alignment: align------------------------------------------>
<h4><font color="blue">Picture text alignment: align</font></h4>
<h4>Default aligned picture (align="bottom"):</h4>
<p>These are some texts<img src="./img/1.jpeg" alt="Star" width="55" height="55"> Here are some texts.</p>
<h4>Picture use align="middle":</h4>
<p>Here are some texts. <img src="./img/1.jpeg" alt="Star" width="55" height="55" align="middle"> Here are some texts.</p>
<h4>Picture use align="top":</h4>
<p>Here are some texts.<img src="./img/1.jpeg" alt="Star" width="55" height="55" align="top"> Here are some texts.</p>
</body>
</html>Reference: rookie tutorial& [first stage of front-end employment course] HTML5 zero foundation to actual combat (VII) detailed explanation of words and pictures_ 1_bit blog - CSDN blog