current position:Home>1、 HTML base tag

1、 HTML base tag

2022-04-29 11:56:30Handsome BIA

Preface

HTML Basic labels

One 、HTML File structure

Document structure
html All tags of are in tree structure .
<html> label
HTML<html> Elements It means a HTML The root of the document ( Top elements ), So it's also called the root element . All other elements must be descendants of this element .



<head> label
HTML head Elements Specify the configuration information related to the document ( Metadata ), Include the title of the document , Referenced document styles and scripts .

<body> label
HTML body Element represents the content of the document .document.body Properties provide easy access to documents body Script of element .



<title> label
HTML <title> Elements Define the title of the document , Displayed on the title bar or tab of the browser . It should only contain text , If it contains a label , Any tags it contains will be ignored .

<meta>
HTML <meta> The elements represent those that cannot be represented by other HTML Meta correlation (meta-related) Elements ( <base><link>, <script><style> or <title>) Any metadata information represented by .
Common properties :
charset: This attribute declares the character encoding of the document . If this property is used , Its value must be the same as ASCII Case is irrelevant (ASCII case-insensitive) Of ”utf-8”.
name:name and content Properties can be used together , To name - Provide metadata to documents in the form of value pairs , among name As the name of metadata ,content As the value of metadata .
such as <meta name="keywords" content="lyy, Programming "> keywords Is to let others search the keywords of our web page when Baidu web page ,content Fill in the key words .
<meta name="description" content="lyy Learn programming "> decription It's some instructions that we show others on our website .

icon Is the icon of our web page
icon
<link rel="icon" href="images/icon.png">

Example

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="lyy, Programming ">
    <meta name="description" content="lyy Learn programming ">
    <link rel="icon" href="../images/icon.png">
</head>

<body>
    <!--   
         The contents here are all notes 
        <h1>Hello world</h1>
        <p>
             The paragraph .
        </p>
    -->
</body>

</html>

Two 、HTML Text label

Although there are many text labels , But most of them can be seen as pre-determined patterns <div> and <span>.

<div> label
<div> Elements ( or HTML Document partition element ) It is a general-purpose stream content container , Without using CSS Under the circumstances , It has no impact on the content or layout .
Other block level labels, such as :<h1>,<p>, <pre>, <ul>, <ol>, <table>.


<span> label
<span> The element is a general line content container for phrase content , It doesn't have any special semantics . You can use it to group elements to achieve some style intent ( By using classes or Id attribute ), Or these elements have common attributes , such as lang. It should only be used when there are no other suitable semantic elements .<span> And <div> The elements are very similar , but <div> It's a A block element and <span> It is Inline elements
Other inline tags, such as :<i>, <b>, <del>, <ins>, <td>, <a>.



<p> label
HTML <p> Elements ( Or say HTML Paragraph elements ) Represents a paragraph of text . This element is usually represented as a whole block of text separated from adjacent text , Indent the first line with a blank or vertical space . in addition , <p> Is a block level element .

<pre> label
HTML <pre> Element represents predefined formatted text . The text in this element is usually arranged according to the original file , In the form of an equal width font , Blanks in text ( For example, spaces and line breaks ) It will show .( Keep up with the <pre> Line breaks after the start tag are also omitted )

<h1> - <h6> Title Tag
<br> Enter label
<hr> Boundary labels
<i> Italics label
<b> Bold label
<del> Delete line labels
<ins> Glide line label

3、 ... and 、HTML Picture label

HTML <img> Element embeds an image into the document .
The default is inline element , namely display: inline.

src attribute The file path containing the image you want to embed .

alt attribute The text displayed when the picture cannot be displayed

height attribute
The height of the image , stay HTML5 The unit in is CSS Pixels , stay HTML 4 Can be either pixels , It can also be a percentage . You can only specify width and height A value of , The browser zooms according to the original image .

width attribute
The width of the image , stay HTML5 The unit in is CSS Pixels , stay HTML 4 Can be pixels or percentages .

Four 、HTML Audio and Video Tags

<audio> label
HTML <audio> Element is used to embed audio content in a document . <audio> The element can contain one or more audio resources , These audio resources can be used src Property or <source> Element to describe : The browser will choose the most suitable one to use . You can also use MediaStream Use this element for streaming media .

Use src Attribute playback controls Indicates that you can control video or audio
Example :

<audio controls src="../video/sound1.mp3">
        Your browser does not support the
        <code>audio</code> element.
 </audio>

<audio> With many <source> Elements
This example contains several <source> Elements . If it can be played , The browser will try to load the first source Elements ; If it doesn't , Then go back to the second and load the second .
Example

 <audio controls>
     <source src="../video/sound3.mp3" type="audio/mpeg" />
     <source src="../video/sound2.mp3" type="audio/mpeg" />
 </audio>

<video> label
HTML <video> Elements Used in HTML perhaps XHTML Embed media player in document , Used to support video playback in the document . You can also <video> Tags are used for audio content , however <audio> Elements may be more appropriate in the user experience .
Example :

<video controls width="800">
     <source src="../video/video1.mp4" ,type="video/mp4">
     <source src="../video/video2.mp4" ,type="video/mp4">
     Sorry, your browser doesn't support embedded videos.
</video>

5、 ... and 、HTML Hyperlink label

HTML <a> Elements ( Or anchor element ) You can get through it href Property to create links to other web pages 、 file 、 Location within the same page 、 Email address or any other URL Hyperlinks for .<a> The content in should indicate the intention of the link . If there is href attribute , When <a> When the element is focused, press enter to activate it .

Common options
Click the link to open a new tab page and add properties :target=“_blank”

6、 ... and 、HTML Form labels

<form> label
HTML <form> Element represents an area in the document , This area contains interactive controls , Used to direct to Web The server submits information ,action The property passed to the back-end function is .
lable label
Used to bind an element , Passing attribute for To bind elements id
<input> label
HTML <input> Used to fill in the content , Common types are :

<input type="text">: Create a basic single line text box .
<input type="number">: Used to let the user enter a number . It includes built-in verification to reject non digital inputs . The browser may choose to provide a step arrow , Allows the user to use the mouse to increase and decrease the value entered , Or just tap with your fingertips .
<input type="email">: with “email” ( email ) Input box element of type tag <input> Allows users to enter or edit an email address , Besides , If you specify multiple attribute , Users can also enter multiple email addresses . Before the form is submitted , The input box will automatically verify whether the input value is one or more legal email addresses ( Non null value and conform to e-mail address format ). CSS Pseudo label :valid and :invalid It can be automatically applied after verification .
<input type="password"><input> Elements There is a kind of called “password” Value , Give us a way to make users enter passwords more safely . This element is rendered as a line of plain text editor control , The text is obscured so that it cannot be read , Usually by using something like an asterisk (“*”) Or point (“•”) Wait for symbols to replace each character to achieve . This symbol will display which... According to the user's browser and operating system .
<input type="radio"><input> Of radio The type element is rendered as a small circle chart by default , Filling is the activation , Similar to the check box described earlier (checkbox) type . Radio buttons allow you to select a single value to submit the form .
stay radio in , alike name Bind to the same group , For content value Attribute replacement
name: name
id: only ID
maxlength: Maximum length
minlength: Minimum length
required: If required
placeholder: When the form control is empty , Control

Example :

<body>
    <form action="">
        <label for="username">Username</label>
        <input type="text" maxlength="10" minlength="3" name="username" id="username">
        <br>
        <label for="age">Age</label>
        <input type="number" name="age" id="age">
        <br>
        <label for="email">Emial</label>
        <input type="email" name="email" id="email">
        <br>
        <label for="password">Password</label>
        <input type="password" required name="password" id="password">
        <br>
        <label for="cpp"></label>
        <input type="radio" name="lang" value="cpp" id="cpp">   
        <label for="java"></label>
        <input type="radio" name="lang" value="java" id="java">
        <label for="python"></label>
        <input type="radio" name="lang" value="python" id="python">
        <br>
        <button type="submit">submit</button>
    </form>
</body>

<textarea> label
HTML <textarea> Element represents a multiline plain text editing control , When you want users to enter a fairly long 、 Unformatted text , For example, when commenting or giving feedback on a comment in a form , It's very useful .
<select> And <option> label
HTML <select> Element represents a control that provides a menu of options .
Example :

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<button> label
HTML <button> Element represents a clickable button , It can be used in forms or documents where simple standard buttons need to be used .

7、 ... and 、HTML Tabs tab

<ul> And <li> label
HTML <ul> Elements ( Or called HTML Unordered list elements ) Represents an unordered list or bullet list that can contain multiple elements in a .
Example :

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

<ol> And <li> label
HTML <ol> The element represents an ordered list , Usually rendered as a numbered list .

Example :

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

<dl><dt> And <dd> label
HTML <dl> Elements ( or HTML Describe list elements ) Is a list of definitions and descriptions of terms , Usually used to display vocabulary or metadata ( key - List of value pairs ).

Example :

<dl>
    <dt>Name</dt>
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
    <dt>Color</dt>
    <dd>Green</dd>
    <dd>Orange</dd>
</dl>

8、 ... and 、HTML Tabular label

<table> label
HTML Of table Element represents table data — That is, the information represented by two-dimensional data table .

<thead> label
HTML The element of defines a set of rows that define the column headers of the table .

<tbody> label
HTML The element of defines a set of data rows .

<tr> label
HTML Elements define rows in a table . The same line can appear at the same time and Elements .

<th> label
HTML Element defines the header cell in the table .

<td> label
HTML Elements Defines a table cell that contains data .

<caption> label
HTML <caption> Elements (or HTML Table title element ) Show the title of a table , It is often used as <table> The first child element of appears , At the same time, it is displayed at the front of the table , however , It can also be CSS Stylization , therefore , It can also appear anywhere relative to the table .
Example :

<body>
    <table>
        <caption> school report </caption>
        <thead>
            <tr>
                <th> full name </th>
                <th> mathematics </th>
                <th> English </th>
                <th> Chinese language and literature </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>lyy</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>alcie</td>
                <td>98</td>
                <td>51</td>
                <td>16</td>
            </tr>
            <tr>
                <td>make</td>
                <td>100</td>
                <td>100</td>
                <td>65</td>
            </tr>
        </tbody>
    </table>
</body>

Nine 、HTML Semantic label

<header>
HTML <header> Elements are used to present introductory content , It usually contains a set of introductory or useful navigation aids . It may contain some title elements , But it may also contain other elements , such as Logo、 Search box 、 Author's name , wait .

<nav>
HTML<nav> Element represents a part of the page , The purpose is to provide navigation links in the current document or other documents . A common example of the navigation section is the menu , Catalog and index .

<section>
HTML <section> Element represents an element contained in HTML Separate parts of the document , It has no more specific semantic elements to represent , Generally speaking, there will be a title .

<figure>
HTML <figure> The element represents a separate piece of content , Often with instructions (caption)<figcaption> In combination with , And as a separate reference unit . When it belongs to the main content stream (main flow) when , Its position is independent of the subject . This tag is often a picture quoted in the main text , illustrations , form , Code snippets, etc , When this part is transferred to the appendix or other pages, it will not affect the main body .

<figcaption>
HTML <figcaption> Elements Is a description of the picture associated with it / title , Used to describe its parent node <figure> Other data in the element . It means <figcaption> stay <figure> In the block is the first or last . meanwhile HTML Figcaption Element is optional ; If there is no such element , The picture of this parent node just doesn't explain / title .

<article>
HTML <article> Element represents the document 、 page 、 A stand-alone structure in an application or website , It is intended to be an independently distributable or reusable structure , For example, in the release , It could be a forum post 、 Magazines or news articles 、 Blog 、 Comments submitted by users 、 Developers just need to focus on the implementation logic , Or other independent content projects .

<aside>
HTML <aside> Element represents a part that has little to do with the rest of the page content , It is considered to be independent of the content and can be split separately without affecting the whole . It is usually represented as a sidebar or callout box (call-out boxes).

<footer>
HTML <footer> Element represents the content of the latest chapter or the root node (sectioning root ) The footer of the element . A footer usually contains the author of the chapter 、 Copyright data or links related to documents .

Ten 、HTML Special symbols

HTML Source code Show results describe
&lt; < Less than sign or display mark
&gt; > Greater than sign or display mark
&amp; & Can be used to display other special characters
&quot; “ quotes
&reg; Registered
&copy; Copyright
&trade; trademark
&nbsp; The blank that goes on

summary

This paper summarizes the basic html label , introduction html necessary .
 Insert picture description here

copyright notice
author[Handsome BIA],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291023275441.html

Random recommended