Wondershare EdrawMind
心智圖資源庫 Basic tags for getting started with HTML
- 37
Basic tags for getting started with HTML
Introduction to basic tag classification for getting started with HTML! The figure below contains a detailed introduction to commonly used software, html structure, <!DOCTYPE> documents, and tags. Organized and summarized for easy review and viewing! Share it with friends who want to learn HTML, learn and make progress together!
編輯於2019-09-22 15:47:36
- 推薦給您
- 大綱
HTML
Most used software
eclipse
sublime
debug browser chrome
html structure
<html> <head></head> <body></body> </html>
<!DOCTYPE>Documentation
Defines the document type; not an HTML tag; it is an instruction to the web browser as to which version of HTML the page is written in; comes before the <html> tag
Such as HTML5 <!DOCTYPE html>
Label
Base
Comment<!-- -->
<head></head>
<h1> - <h6> tags define titles. <h1> defines the largest heading. <h6> defines the smallest heading
<body></body>
The body element contains all the content of the document (such as text, hyperlinks, images, tables, lists, etc.)
Single tags, such as <br><hr>; paired tags
<script></script>
Introduce script
Attribute type; src specifies the URL of the external file
Such as <script type="text/javascript async="" src="">alert('hello');</script>
head
<title></title>
<title>XHTML Tag Reference</title>
<link/>
Import style files
Such as <link rel="stylesheet" type="text/css" href=""/>
Attribute relThe relationship between the current document and the linked document type;href;media is displayed on what device
<base/>
Define default link address
Attribute href; target link mode, whether it is the current page or a new blank page
Such as <base href=""/>;<base target="_blank"/>
<meta/>
Provides explanatory information for the page; convenient for SEO and search engine optimization
Value content; http-equiv associates the value with the HTTP header; name associates the value with a name; scheme translation format
Such as <meta http-equiv="expires" content="31 Dec 2015"/>
Such as <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style></style>
Define the style, which contains css style information
Attribute type; media defines what media the style sheet should be applied to;
Such as <style type="text/css">p{color:blue}</style>
body
<p></p>
define paragraph
It can be plain text, or it can have other tags.
<div></div>
Define document partition; range is larger than p tag
It can be plain text, or it can have other tags.
<span></span>
Represents inline elements in the document; it is convenient to change style information for selected inline elements
Block-level elements vs. inline elements
Block-level elements such as div, p, h1 occupy a complete block or line.
Inline elements such as span, a, and img are used within block-level elements and only occupy the actual width.
<a></a>
define a hyperlink
Attributes: Required href link target web page; optional target defines how to open the link, title defines the link name to facilitate knowing the purpose of the link
For example, <a href="" target="_blank" title="Check it out">Check it out on Baidu</a>
<img/>
Embed an image
Attributes: Required src defines the URL of the image, alt defines the text information displayed when the image cannot be displayed; optional width, height
<ul></ul>
unordered list
Each list item<li></li>
<ol></ol>
ordered list
Each list item<li></li>
<table></table>
sheet
<th></th>Header
<tr></tr> represents row;
<td></td> represents the columns in tr
colspan merges n cells horizontally, colspan="" is placed in th and td start tags
rowspan merges n cells vertically
<form></form>
Forms, such as login, registration and submission are forms
The attribute action indicates where the form is submitted; method indicates the method of form submission, post or get.
<input/>Single line input box
text single line text input, attribute type="text", other attributes of the input tag name define the input box name, value, placeholder prompts the user's information
Radio radio button, type="radio", attribute name, value, checked default selected value
checkboxMultiple selection boxes
password password input box
Hidden hidden field, obtain hidden information in the background, hide page information, convenient to get the value when needed
reset, reset, clear all data in the form, attribute value
Such as <input type="reset" value="Reset"/>
submit, submit, attribute value
Such as <input type="submit" value="submit"/>
<label></label>
Define the label for the input label; when the label text is clicked, the bound input label will be triggered
The value of the attribute for is the id name defined by the bound input tag.
Usage 1. <label for="male">Male</label> <input type="radio" name="gender" id="male" />
Usage 2.<label>Male<input type="radio" name="gender" /></label>
<textarea></textarea>Multi-line text input box
Common attributes cols, rows, autofocus automatically gain focus
<select></select>Drop-down selection box
Each option of the selection box <option></option>, attribute value, selected initial value
For example, <form action="" method="get"> Email: <input type="text" name="email"/><br/> Name: <input type="text" name="name"/>< br/> <input type="reset" value="Reset"/> <input type="submit" value="Submit"/></form>
<button></button>Define button
Common attributes type (button type button, reset, submit), name, value
Type reset, submit function is the same as input
When type is button type, it can not only be used in forms, but also in other modules.
<iframe></iframe>
Embed a document/webpage
Attributes src, width, height
<abbr></abbr>
When the mouse is parked on an abbreviation, it indicates the meaning of the abbreviation or abbreviation, providing useful information for browsers, spelling abbreviations and search engines.
attributetitle
<center></center> Centered
Center included text horizontally
<strong></strong>
Emphasize part of the text, with a bold effect
<dl></dl>
Represents a list that can be used for explanatory content
<dt></dt> represents the list title
<dd></dd> represents the list item description