Home > Developer > JavaScript
Common Html tags and common Html tags
HTML is the carrier of webpage content. The content is the information that the webpage maker places on the page to allow users to browse, including text, images, and videos. Html tags are combined into a variety of web pages. Next we will talk about some common tags, which are also a summary of the learned knowledge...
* <Html> * <Head> the label defines the header of a document. It is a container for all header elements. The header elements include <title>, <script>, <style>, <link>, and <meta> tags.
* The content between the <body> and </body> tags is the main content of a webpage, such as
* <P> paragraph text </p> <p> the default style of the label. The default style is left blank after the paragraph.
* There are 6 title tags in total. h1, h2, h3, h4, h5, and h6 are level 1 titles, level 2 titles, Level 3 titles, Level 4 titles, Level 5 titles, and level 6 titles respectively. And decrease according to importance. <H1> is the highest level.
* The <em> or <strong> label can be used to emphasize a certain number of words in a paragraph. However, there is a difference between the two in the tone of emphasis: <em> indicates emphasis, <strong> indicates stronger emphasis. In the browser, <em> is in italic by default, and <strong> is in bold. Compared with the two labels, front-end programmers in china prefer to use <strong> to emphasize.
* <Span> labels have no semantics. They are used to set individual styles.
* <Q> reference text </q> label, <q> the real key of a tag is not its default double quotation marks (if this is the case, we can enter double quotation marks on the keyboard), but its syntax: Reference others.
* <Blockquote> is used to reference others' texts. However, it is a reference to long text. For example, this label is required when a famous writer is introduced into an article.
* <Br/> wrap tags in html.
* <Hr/> horizontal separator.
* <Address> </address> indicates the address written in the middle. The text displayed in the browser is italic and contains line breaks.
* <Code> code text </code> -- defines the computer code text.
* <Pre> multi-line code text </pre> -- a common application of tags is to represent the computer's source code. The label usually contains spaces and carriage returns. The label cannot contain tags that lead to segment disconnection, such as <p> and <address>.
* <Ul>
<Li> Information </li> ...... </ul>
Ul-li is a list of information labels with no forward or backward order. The default style of ul-li displayed on the webpage is generally: each item of li comes with a dot.
* <Ol>
<Li> Information </li> ...... </ol> <li> </ol>, ordered tag. Compared with <ul>, add a number to display the menu format.
* <Div>... </Div>, some independent logical parts can be divided into one<div>In the tag, the <div> tag serves as a container. Use the id attribute to provide a unique name for <div>. This is like each of us has an id card number, which uniquely identifies and must be unique.
* Four elements for creating a table:
Table, tbody, tr, th, td
1. <table>... </Table>: the entire table starts with the <table> mark and ends with the </table> mark.
2. <tbody>... </Tbody>: when the table contains a large amount of content, the table will be downloaded and displayed a little bit. However, if the <tbody> label is added, the table will be displayed only after all the table content is downloaded. For example, the code in the code editor on the right.
3. <tr>... </Tr>: one row of the table. Therefore, there are several rows in the pair of tr tables.
4. <td>... </Td>: a cell in the table. A row contains several pairs <td>... </td>, indicating that a row contains several columns.
5. <th>... </Th>: a cell in the table header, table header.
6. The number of columns in the table depends on the number of data cells in a row.
* <Table summary = "summary">
<Caption> table title </caption>: The title is placed on the top of the entire table and centered.
</Table>
* <A> hyperlink label, <a href = "target URL" title = "move the mouse over the displayed text"> text displayed on the Link </a>.
* <A> the tag uses mailto to connect to the email address and send emails to the Administrator. Parameter: mailto: email address; cc = cc address; bcc = bcc address; subject = Add email subject; body = Add email content. Separate multiple recipients; the first parameter after multiple parameters in mailto is "?"" Separated. Each of the following parameters is separated .]
Example: <a href = "mailto: yy@imooc.com? Subject = look at the amazing Gatsby and have a feeling & body = Hello, I have some thoughts on this. "> What do you think of this evaluation? send an email to mE </a>.
*
1. src: Identify the image position;
2. alt: Specifies the descriptive text of the image. When the image is invisible (when the download fails), the text specified by this attribute is displayed;
3. title: Provide the description of the image when the image is visible (the text displayed when the mouse slides over the image );
4. images can be GIF, PNG, or JPEG image files;
* Use form tags to interact with users <form>... </form>
Syntax: <form method = "Transfer method" action = "Server File">
1. <form>: <form> labels appear in pairs, starting with <form> and ending with </form>.
2. action: the place where the data input by the viewer is sent, such as a PHP page (save. php ).
3. method: the data transmission method (get/post ).
Note:
1. All Form Controls (text box, text field, button, single button, check box, etc) must be placed between <form> </form> labels (otherwise, the information entered by the user cannot be submitted to the server !).
* <Form>
<Input type = "text/password" name = "name" value = "text"/> "input" is a single tag, so/
</Form>
1. type:
When type = "text", the input box is a text input box;
When type = "password", the input box is the password input box.
2. name: name the text box for the background program ASP and PHP.
3. value: Set the default value for the text input box. (Usually serves as a prompt ).
* When you need to input a large text segment in a form, you need to use the text input field.
<Textarea rows = "number of rows" cols = "Number of columns"> enter the content here... </Textarea>
1. The <textarea> label appears in pairs, starting with <textarea> and ending with </textarea>.
2. cols: Number of columns in multiple input fields.
3. rows: number of rows in multiple input fields.
* Single-choice and check boxes. The difference between the two is that option users in a single-choice can only select one item, and users in the check box can select any number or even all.
<Input type = "radio/checkbox" value = "value" name = "name" checked = "checked"/>
1. type:
When type = "radio", the control is single-threaded. The name attribute must be consistent for a single sequence. In this way, single-choice buttons in the same group can act as single-choice buttons.
When type = "checkbox", the control is a check box.
2. value: the value of the data submitted to the server.
* Select from the drop-down list box:
Syntax: select is usually used with option. option is used as a sub-list item;
<Select>
<Option value = "Submit value" selected = "selected">... Option... </Option>
</Select>
<Select>
Set the multiple = "multiple" attribute in the tag to enable the multi-choice function. In the widows operating system, press Ctrl and click (use Command + Click on Mac) to select multiple options.
* There are two buttons available in the form: submit button and reset.
<Input type = "submit" value = "submit">
Type: the button can be submitted only when the type value is set to submit.
Value: The text displayed on the button.
<Input type = "reset" value = "reset">
Type: the button can be reset only when the type value is set to reset.
* The <label> label does not show any effect to the user, but improves the user experience. If you click Text in the <label> label, the control is triggered, note that the for property value must be the same as the id property value of the related control. <label for = "Control id name">
Syntax:
<Label for = "Control id name">
Note: the value in the for Attribute of the tag must be the same as the id attribute value of the related control.
Example:
<Form>
<Label for = "male"> male </label>
<Input type = "radio" name = "sex" id = "male"/>
<Br/>
<Label for = "female"> female </label>
<Input type = "radio" name = "sex" id = "female"/>
<Label for = "email"> enter your email address </label>
<Input type = "email" id = "email" placeholder = "Enter email">
<Label> what kind of sports are you interested in: </label> <br/>
<Label for = "manpao"> jogging </label>
<Input type = "checkbox" name = "yundong" id = "manpao"> <br/>
<Label for = "dengshan"> mountaineering </label>
<Input type = "checkbox" name = "yundong" id = "dengshan"> <br/>
<Label for = "lanqiu"> basketball </label>
<Input type = "checkbox" name = "yundong" id = "lanqiu">
</Form>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
