Web front-end HTML common label text formatting label image label

Text formatting tags

In web pages, sometimes it is necessary to set bold, italic or underline effects for text, which requires the use of text formatting tags in HTML to display text in a special way.

Label semantics: highlight importance, more important than ordinary text

semantics Label illustrate
bold <strong></strong>or <b></b> It is more recommended to use bold <strong> tags, with stronger semantics
tilt        <em></em>或者<i></i> It is more recommended to use bold <em> tags, with stronger semantics
strikethrough <del></del>或者<s></s> It is more recommended to use the <del> tag to be bold, with stronger semantics
underscore <ins></ins>或者<u></u> It is more recommended to use the bold <ins> tag, with stronger semantics

<div> tags and <span> tags

<div> and <span> have no semantics, they are just a box for holding content.

<div>这是头部,大盒子</div>
<span>今日价格,小盒子</span>

Div is the abbreviation of division, which means division and division. span means span, span.

 

Features:

1. The <div> tag is used for layout, but now only one <div> can be placed on a line, a large box. The content of a label exists on one line.

2. The <span> tag is used for layout, and one line can have multiple <span>s. Small box, multiple <span> contents can exist in one line.

 Image labels and paths (emphasis)

<img src="图片的地址" />

 The <img /> image tag is a single tag, and all image attributes can be added to <img (any image attributes can be added) />

 src is a required attribute of the <img /> tag, indicating the address of the image, otherwise the image cannot be displayed

Image properties:

Attributes attribute value illustrate
src image path required attribute
alt text Replace text, display text when image cannot be displayed
title text Prompt text, mouse over the image to display the text
width pixel set the width of the image
height pixel set the height of the image
border pixel Set the border thickness of the image

 Modify the alt text and prompt text of an image

<body>
    <h4> 图像标签的使用:</h4 >
        <img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" />
    <h4> alt替换文本 图像显示不出来的时候用文字替换:</h4 >
        <img src="图片存放\派大星.jpg" alt="派大星的照片" />
    <h4> title 提示文本 鼠标放在图片上会显示文字:</h4 >
        <img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" alt="派大星的照片" title="我叫派大星"/>
</body>

 

 Modify the width and height of the image:

<h4> title 提示文本 鼠标放在图片上会显示文字:</h4 >
    <img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" width="500"/>   
<h4> title 提示文本 鼠标放在图片上会显示文字:</h4 >
    <img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" height="100"/><h4> title 提示文本 鼠标放在图片上会显示文字:</h4 >
    <img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" width="500" height="100"/>

 

 

 As shown in the figure, if you want to keep the original image size after modifying the picture, it is recommended to modify only one attribute, only the width or only the height. If only one attribute is modified, the other attribute will be automatically modified proportionally. If both properties are manually modified, the image is easily modified and unbalanced, resulting in distortion of the image.

Modify the border of the picture:

<border="Write the desired border pixel size">

<img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" width="300" border="15"/>

 

Hit the point again:

image properties

Attributes attribute value illustrate
src image path required attribute
alt text Replace text, display text when image cannot be displayed
title text Prompt text, mouse over the image to display the text
width pixel set the width of the image
height pixel set the height of the image
border pixel Set the border thickness of the image

 Note on image tag attributes:

1. Image tags can have multiple attributes, but they must be written after the tag name, that is, after img.

Example: <img (write image attribute, src="" in image attribute must be written, image path)/>

2. Part of the sequence between attributes, tag names and attributes, attributes and attributes are separated by spaces

3. The attribute adopts the format of key-value pair, that is, the format of key="value", and the attribute="attribute value"

The key points are:

The src attribute must be written, and the image path must be written to display the image

The alt attribute is to display the text when the image cannot be displayed

The title attribute is to display the text when the mouse is placed on the image

Guess you like

Origin blog.csdn.net/weixin_53466908/article/details/123718543