Xiaobai front-end learning diary series
Xiaobai front-end learning diary (1) know the front-end
Xiaobai front-end learning diary (2) HTML basic grammar and tags 1
HTML basic syntax and tags
HTML basic syntax and tags
This time, the content is mainly list tags and multimedia tags. These tags are also indispensable and important knowledge in the production of web pages.
One, list label
1. Unordered list
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
The actual effect is shown in the figure below. The meaning of an unordered list is that the list items have no order (the leading symbols are all the same).
The unordered list label is the <ul></ul>parent label, and must <li></li>appear at the same time as the child label list item label , and <ul></ul>the child label of the label must be a <li></li>label. Pay attention to the indentation of the nesting relationship.
The list item tag <li></li>cannot be used alone, it must be used in <ul></ul>or <ol></ol>(ordered list tag). <li></li>Internal labels can put any other labels, such as <p></p>, <span></span>, <h3></h3>, or even recapture a list of tags <ul></ul>. Of course, the nesting relationship should pay attention to indentation .
We can see that the front of the list item is a small solid dot, which is called the leading symbol. Once, the type attribute of an unordered list can define the style of the leading symbol:
| type value | effect |
|---|---|
| disc | Filled circle, which is also the default value |
| circle | Hollow circle |
| square | Solid square |
Since this attribute is deprecated in HTML5 , we can use CSS to change the style of the leading symbol.
2. Ordered list
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
The actual effect is shown in the figure below. An ordered list is a deliberately ordered list, that is, a list with an orderly distinguished prefix number.
Same as unordered list, ordered list label is the <ol></ol>parent label, and must <li></li>appear at the same time as the sub-label list item label , and <ol></ol>the sub-label of the label must be a <li></li>label, and the nesting relationship should pay attention to indentation.
The type attribute of an ordered list can define the type of number:
| type value | significance |
|---|---|
| 1 | Number number (default) |
| a | Lowercase English letter number |
| A | Capital English letter number |
| i | Lowercase Roman numerals |
| I | Uppercase roman numeral number |
<ol></ol>The tag also has a start attribute, which specifies the starting value of the list number. No matter what type of number is set in the type attribute, the value of the start attribute should be set to an Arabic integer number.
In HTML5 , ordered lists also have a brand new feature- reversed, currently only Chrome and Safari 6 support the reversed attribute. This attribute is a Boolean attribute that specifies that the ordered list is in reverse order.
3. Definition list
The definition list is a list that needs to be given a definition description one by one, which is quite different from the unordered list and the ordered list in use. First, let's take a look at the written example.
<dl>
<dt>列表项1</dt>
<dd>对列表项1的解释说明1</dd>
<dd>对列表项1的解释说明2</dd>
<dt>列表项2</dt>
<dd>对列表项2的解释说明</dd>
<dt>列表项3</dt>
<dd>对列表项3的解释说明</dd>
</dl>
The actual effect is shown in the figure below.
In the definition list tag <dl></dl>content, you must first <dt></dt>write the item to be described in the tag (which can contain tags such as pictures), and then <dd></dd>write an explanation of the item to be described in one or more tags, and then <dt></dt>write another The items to be described... and so on.
It can also be written like this:
<dl>
<dt>列表项1</dt>
<dd>对列表项1的解释说明1</dd>
<dd>对列表项1的解释说明2</dd>
</dl>
<dl>
<dt>列表项2</dt>
<dd>对列表项2的解释说明</dd>
</dl>
<dl>
<dt>列表项3</dt>
<dd>对列表项3的解释说明</dd>
</dl>
The actual effect is as follows. According to the style needs, to flexibly change the wording.
As long as there is a text with the meaning of "explanation" in the semantics, and it is in the form of a list, the definition list should be used.
Second, the multimedia label
1. Picture tags
<img src="images/picture.jpg" alt="对图像文本的描述" width="300" height="300">
The img tag introduces images to the web page. The picture is not inserted into the webpage in essence, but is just introduced into the webpage. Therefore, in the future, the pictures will also be uploaded to the server together, and the pictures will be copied to the project file to upload them as a whole.
Src is the abbreviation of source, which represents the source of the picture. In this attribute, we need to write the storage directory and the full file name of the picture . Pictures must be copied to the project folder, usually we put the pictures used in the images subfolder in the project folder.
Here we need to understand the concept of relative path and absolute path. The relative path description starts from the webpage, how to find the picture, if you need to go back to the level, use the wording ".../". The absolute path describes the precise address of the picture. The absolute path has nothing to do with the location of the web page and does not need to be changed.
The alt attribute is a textual description of the image, so you don’t have to write this attribute. When the image fails to load, it will be displayed instead, and it will also be read aloud by the web reader.
The width and height attributes respectively set the width and height, the unit is pixel, but you do not need to write the unit. If one of the attributes is omitted, it means that the image is scaled according to the original scale.
The inserted picture must be in a picture format supported by the webpage.
| format | description |
|---|---|
| .bmp | The format saved by default in windows drawing software |
| .gif | Support animation |
| .jpeg(.jpg) | Lossy compressed pictures, usually used for photos |
| .png | Portable network image, used for logo, background graphics, etc., supports transparent and semi-transparent |
| .svg | Vector picture |
| .webp | A new image format with excellent compression algorithm |
2. Audio Video Tag
Both of these tags are newly added tags in HTML5. They have similar functions and have many similar attributes. We can learn them together.
Audio Insert Tag
<audio controls src="audios/music.mp3">
抱歉，您的浏览器不支持audio标签，请升级浏览器
</audio>
Same as the img tag, the src attribute represents the source of the audio. In this attribute, we need to write the storage directory and the full file name of the audio . The audio must be copied to the project folder, usually we put the audio used in the audios subfolder in the project folder.
There are many attributes of the audio tag, but you don't need to be discouraged. Most of the attributes take effect when you write them, and you can just remember them.
Autoplay attribute: The audio will play automatically when it is ready, but in order not to disturb the user, the commonly used browser may not allow the automatic play of the music, and the user must manually click it before it can be played.
The controls attribute: The presence of this attribute will show the user audio controls (such as a play/pause button).
loop attribute: if this attribute appears, the audio will be played in a loop.
muted attribute: when this attribute appears, the audio is muted.
Preload attributes:
- The attribute value is auto, and the entire audio is loaded when the page is loaded
- The attribute value is meta, and only metadata is loaded when the page is loaded
- The attribute value is none, no audio will be loaded when the page is loaded
- If the autoplay attribute is set, the attribute is ignored
<audio> Three file formats supported by tags: MP3, Wav, and Ogg; depending on the browser, Wav and Ogg are not supported, but MP3 is supported by all current mainstream browsers.
Video insertion tag
<video controls src="videos/video.mp4" loop autoplay>
抱歉，您的浏览器不支持video标签，请升级浏览器
</video>
The src attribute represents the source of the video. In this attribute, we need to write the storage directory and full file name of the video . The video must be copied to the project folder, usually we put the used video in the videos subfolder in the project folder.
The video tag has all the attributes of the audio tag, here only the attributes that the audio tag does not have are given.
Poster attribute: In this attribute, we need to write the storage directory and full file name of the picture displayed when the video is loaded, and the picture must be copied to the project folder.
The width and height attributes respectively set the width and height of the video player. The unit is pixel, but there is no need to write the unit.
<video>Element supports three video formats: MP4, WebM, Ogg. IE and Safari do not support WebM and Ogg, but MP4 is supported by all current mainstream browsers. Don't use IE
source tag
When we are developing the front-end, there is no way to predict what browser users will use, that is, we need to consider compatibility issues instead of letting users solve them. It is not ruled out that "the ones using IE are not suitable for our web pages, and those who are still using IE are not our target users at all". In other words, we have to put multiple types of media resources in advance so that the user's browser can load the resources that can be supported by itself.
<source>The label defines the media resource for the media element ( <video>and <audio>). In the usage method, we take the audio label as an example:
<audio controls>
<source src="audios/sound.ogg" type="audio/ogg">
<source src="sudios/sound.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
The src attribute has been said many times before, so I won’t repeat it.
The type attribute specifies the MIME type of the media resource.
Common MIME types:
- Video: video/ogg; video/mp4; video/webm
- Sound: audio / ogg; audio / mpeg
3. Hyperlink
We use <a></a>(anchor, anchor) tags to write hyperlinks.
<a href="2.html">去第二个网页</a>
href attribute:
- The url used to write the target webpage, supports relative path and absolute path.
- Links to exe, zip, rar and other file formats will automatically become download links;
- Links with the prefix mailto: are email links, and the system will automatically open the email-related software;
- The link with the tel: prefix is a telephone connection, and the system will automatically open the dial pad.
<a href="2.html#anchor">去第二个页面锚点处</a>You can jump to the specified anchor point in the 2.html page
What is a web anchor?
In the case of a long page, you can appropriately add the id attribute to the h series tags, which will become the anchor point of the page. When # is added after the URL, the page will automatically scroll to the position of the anchor point.
The rel attribute is used to specify the relationship between the current document and the linked document. The rel attribute can only be used when the href attribute is used. Although the browser will not use this attribute in any way, search engines can use this attribute to obtain more information about the link. Information, the value of this attribute is not given here, and those who are interested can find it by themselves.
The target attribute specifies where to open the target URL, and is only used when the href attribute exists.
- self: By default, the current page jumps.
- blank: A new window opens.
- parent: Open the link in the parent window.
- top: Open the link in the current form and replace the current entire form (frame page).
Add an underscore before attributes in HTML4.
<a></a>In between is the object to which the hyperlink is added. When there is an img tag, the picture can also be hyperlinked.
to sum up
This article was written and found to be unexpectedly long...
List tags are very useful when making webpage carousels, and audio and video tags are also inseparable when webpages play audio and video. Don't use flash anymore. That stuff has long been retired. Now it’s the era of HTML5. Needless to say, the hyperlink tag is not to mention. The reason why the Internet can be called a web is that it links different web pages together.
With the update of HTML5, many different block tags have brought more convenience to front-end development, and various semantic tags have also brought new possibilities for style development. The next content is block tags, semantic tags, form tags and table tags. Learn a little bit every day, and everyone will encourage each other.