Html 5 - Basic Tags

<html></html>The root tag
<head></head>defines the head of the document The
<body></body>main content of the web page
<hx></hx>X-level heading
<p></p>Paragraph
Indicates emphasis:
<em></em>Indicates emphasis, the browser defaults to "italic"
<strong></strong>for stronger emphasis, the browser defaults to "bold"
<span></span>without semantics, used to set Individual style
<q></q>Indicates short text references, double quotation marks are added automatically
<blockquote></blockquote>Indicates long text references, displayed as indentation in browsers
<br />Indicates newline
&nbsp;Indicates spaces
<hr />Add horizontal lines
<address></address>Contact or address information, the default style is italics
<code></code>Single-line code
<pre></pre>Multi-line code
Unordered tags

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

ordered labels

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

<div id="板块名称"></div>Containers, divided into logical parts


Hyperlink
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
By default , the linked web page is opened in the current browser window. It can be set to open in a new browser window, as follows:
<a href="目标网址" target="_blank">链接显示的文本</a>,
Use mailto to link the email address:
<a href="mailto:邮件地址?cc=抄送地址&bcc=密件抄送地址" target="_blank">链接显示的文本</a>,
Note: If there are multiple parameters after mailto at the same time, the first A parameter must start with "?" and each subsequent parameter is separated by "&".
Other keywords:
subject=mail subject body=mail content ";" separates multiple recipient addresses


Tables:
<table>…</table>Tables are displayed
<tbody>…</tbody>in blocks
<tr>…</tr>One row
<td>…</td>One cell One cell in the
<th>…</th>table header Tables
<table summary="表格简介文本">...</table>with summaries, summaries are not displayed in the browser
<caption>标题文本</caption>Table header


Insert image:
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">,
src: identifies the location of the image
alt: specifies the descriptive text of the image, when the image is not visible (the download is unsuccessful), you can see the text specified by this attribute
title: provides a description of the image when the image is visible ( Text displayed when the mouse rolls over the image)


Form tags (to interact with the user)

<form method="传送方式" action="服务器文件">,
1. <form> :<form>Tags appear in pairs, <form>starting and </form>ending
2.action: the place where the data entered by the browser is transmitted, such as a PHP page (save.php)
3.method: the way of data transmission (get/ post)
Note: All form controls (text boxes, text fields, buttons, radio boxes, checkboxes, etc.) must be placed between <form></form>tags

Text input box/password input box:

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

1. type:
When type=”text”, the input box is a text input box;
when type=”password”, the input box is a password input box.
2. name: Name the text box for use by the background programs ASP and PHP.
3. value: Set the default value for the text input box. (usually as a reminder)

Text field, supports multi-line text input:
<textarea rows="行数" cols="列数">文本</textarea>,
1. < textarea>tags appear in pairs, <textarea>starting with and </textarea>ending with.
2. cols : The number of columns in the multi-line input field. Can be used instead of width.
3. rows: The number of rows in the multi-line input field. Can be used instead of height.
4. <textarea></textarea>Default values ​​can be entered between the labels.

Use radio box, check box:
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>,
1, type:
when type=”radio”, the control is a radio box
When type=”checkbox”, the control is a checkbox
2, value: the value of submitting data to the server (used by PHP in the background program)
3. name: Name the control for use by the background programs ASP and PHP
4. checked: When checked=”checked” is set, this option is selected by default
Note : For radio buttons in the same group, name The value must be consistent

Use dropdown list boxes to save space:

<select>
      <option value="向服务器提交的值">显示的值</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物" selected="selected">购物</option>
</select>

Set the selected=”selected” attribute, then the option is selected by default.

Drop-down list box for multiple selection: <select multiple="multiple"></select>,

Use the submit button to submit data: <input type="submit" value="提交" name="submitBtn" />,
type: only when the type value is set to submit, the button has a submit function
value: the text displayed on the button

Use the reset button to reset the form information: <input type="reset" value="重置" />,
type: the button has a reset function only when the type value is set to reset
value: the text displayed on the button

The label tag in the form form: <label for="控件id名称">, the
label tag does not present any special effects to the user, its role is to improve usability for mouse users. This control is triggered if you click on the text inside the label label. That is to say, when the user clicks to select the label label, the browser will automatically turn the focus to the form control associated with the label (the form control associated with the label label will be automatically selected).
Note: The value in the for attribute of the label should be the same as the value of the id attribute of the related control.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325707574&siteId=291194637