HTML Basics


HTML Basics

  1. The history of HTML: HTML, XHTML
  2. Global attribute of HTML: global standard attribute, global event attribute
  3. HTML elements:

HTML Basics

HTML Basics

  1. Markup language is a kind of computer text coding that combines text and other information related to text to show the details of document structure and data processing.
  2. Html is a hypertext markup language.
  3. XHTMLIs an Extensible HyperText Markup Language, is a purer, more strict, more standardizedhtmlcode.
  4. htmlThe file is composed of file header and file body.
  5. Label classification: double label, single label.

Double label: it is composed of “start tag” and “end tag”, which must be used in pairs and nested reasonably.

Single tag: close in the start tag (ends with the end of the start tag).

Global standard properties of HTML

stayHTMLEight global standard attributes are defined in.

  1. classThe class name used to define the element.
  2. idSpecifies the uniqueness of the elementid
  3. styleSpecifies the in line style of the element.
  4. titleAdditional information used to specify the element.
  5. accesskeyA shortcut key that specifies the activation of an element.

supportaccesskeyThe elements of the attribute are<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>

  1. tabindexUsed to specify the element in thetabKey.

supporttabindexThe elements of the attribute are<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

  1. dirSpecifies the text direction of the content in the element.

dirThe property values of theltrandrtlThere are two kindsleft to rightandright to left

  1. langThe language used to specify the content of the element.

Global event properties of HTML

WindowWindow events

  1. onload, triggered after the end of page loading.
  2. onunload, triggered when the user leaves the page, such as click jump, page overload, close browser window, etc.

FormForm Events

  1. onblurWhen the element loses focus.
  2. onchangeIs triggered when the element value of an element is changed.
  3. onfocusWhen the element gets focus.
  4. onresetWhen the overload button in the form is hit.
  5. onselectIs triggered when the text in the element is selected.
  6. onsubmitIs triggered when the form is submitted.

KeyboardKeyboard events

  1. onkeydownWhen the user presses the key.
  2. onkeypressAfter the user presses the key, it is triggered when the key is pressed.

This attribute will not take effect on all keys. For example:altctrlshiftesc

  1. onkeyupWhen the user releases the key.

MouseMouse events

  1. onclickIs triggered when you click the mouse over an element.
  2. onblclick, triggered when you double-click an element.
  3. onmousedownIs triggered when the mouse button is pressed on the element.
  4. onmousemoveIs triggered when the mouse pointer moves over the element.
  5. onmouseoutIs triggered when the mouse pointer moves out of the element.
  6. onmouseoverIs triggered when the mouse pointer moves over the element.
  7. onmouseupIs triggered when the mouse button is released over the element.

Media events

  1. onabort, triggered when exiting the media player.
  2. onwaiting, triggered when the media has stopped playing but intends to continue playing.

HTML Element

HTML Basics

Tags contained in an HTML document

  1. <!DOCTYPE>, declare the document type.
  2. <html>, the real root element of the HTML element.
  3. <head>, definitionhtmlThe document header of the document.
The element Title contained in the head defines the HTML document title base, specifies the default address or default target link for all links on the page, defines the relationship meta between the document and external resources, and provides metadata style about html, which is used to define style information script for HTML document and define client script
  1. body, definitionhtmlThe body of the document.
  2. content-Type, which is used to set the character set of the web page to facilitate the browser to parse and render the page.


<meta http-equiv="content-Type` content="text/html"; charset=utf-8">
  1. cache-control, which tells the browser how to cache a response and how long.


No cache is used to send a request and confirm with the server whether the resource has been changed. If not, the cache no store is used to allow caching. Every time you download a complete response from the server public, cache all responses private, only cache Max age for a single user. This indicates how long the corresponding response can be cached and reused when the current request starts, and does not go to the server to request again , Max age = 60 means that the response can be cached and reused for 60 seconds < meta http equiv = cache control "content:" no cache ">
  1. expires, which is used to set the expiration time of the web page, and then retransmit to the server after expiration.
  2. refresh, the web page will automatically refresh and turn to the set URL within the set time
  3. Set-Cookie, used to set the page to expire.
  4. No semantic element:<span>,<div><span>Is an inline tag used in a line of text,<div>Is a block level label.


divIt is used to store the data to be displayed,cssIt is used to specify how to display the data style, so that the structure and style are separated from each other.

View div + CSS style HTML: click the link below to jump to view the source code:


Format Element

  1. Plain text
  • <b>, define bold text
  • <big>, defining large characters
  • <em>The definition focuses on the text
  • <i>, define italics
  • <small>, defining small words
  • <strong>Defining the accentuation
  • <sub>, defining Subscripts
  • <sup>, define the superscript
  • <ins>, define caret
  • <del>, define delete word
  1. Computer output
  • <code>, define the computer code
  • <kbd>, define the keyboard output style
  • <samp>To define a computer code sample
  • <tt>, define the typewriter input style
  • <pre>To define the preformatted text
  1. term
  • <abbr>, define abbreviations
  • <acronym>, define acronyms
  • <address>, define address
  • <bdo>, define the text direction
  • <blockquote>Defining long references
  • <q>To define short quotations
  • <cite>Definition, reference, citation
  • <dfn>, define a concept, project

Picture elements

< img ALT = alternate text for image ">

Hyperlink element

  1. <a>TaggedtargetProperty, the default value is_self
value explain
_self Open the target page in the frame or window where the hyperlink is located
_blank Open the target page in a new browser window
_parent Loads the target page into the parent frameset or window that contains the linked frame
_top Opens the target page in the current entire browser window, so all frames are removed
  1. Links are text<a></a>The element content between tags is text content.
  2. Anchor link is used to#+Corresponding anchor, anchor point commonly used unique attribute valueidset up.

Image hotspots link

Image hot area link, what is it? When you are looking at some shopping websites, you can link to different target locations in different places on a picture, and click different places to jump to different webpages. This is also the technology commonly used in mall projects.

Not at this time<a>Tag element, but<area>Element.

<area>The element has two attributesshapecordsProperty.

shapeattribute explain cordsattribute explain
circle circular x,y,r (x, y) is the coordinates of the center of the circle and R is the radius
rect rectangle x1,y1; x2,y2 (x1, Y1) is the upper left coordinate, (X2, Y2) is the lower right coordinate
poly polygon x1,y1;x2,y2;x3,y3;… They are the coordinates of each point

<area>The origin is the upper left corner of the picture, the positive direction of X axis is right, and the positive direction of Y axis is downward

I’ll draw a picture to reflect<area>Coordinate system of:

HTML Basics

The use of image hotspots links,<map>Tag defines aimage-mapCan contain more than one hot zone<area>Each hotspot has its own link.


take<img>TaggedusemapAttribute and<map>TaggednameProperty.

To prove that I learned, I wrote an HTML page.

map -> name="image_link"img -> usemap="#image_link"

Click jump: imgmap.html

E-mail link

The e-mail link is mainly to see that there are a lot of official pages that need to be done to open a new email.

Click the link below to see the effect:

contact us


<a href=" mailto:[email protected] "> contact us</a>

JavaScript links

Click the JavaScript link:

Click the pop-up window.)


<a href="j avascript:alert ('ha ha, you click! '; "> click the pop-up window</a>

Empty link

  1. An empty link is a hyperlink that has no destination address assigned to it.

Code for empty link:

javascript: void(0)<a href=""></a><a href="#"></a><a href="javascript:void(0)"></a>

List elements

Integration list HTML page, click jump: UL- ol.html

  1. Unordered list,<ul>Define an unordered list,<li>Define list items.

<ul>OftypeAttribute value:discPoint,squareSquare,circleCircle,noneNone

  1. Ordered list,<ol>There is a sequence table defined,<li>Define list items.

<ol>OftypeAttribute values: numbers, uppercase letters, capital Roman numerals, lowercase letters, lowercase Roman numerals.

startProperty defines the starting position of the ordinal number.

  1. Definition list<dl>, which defines that there can be multiple list item titles in the list, and each list item title can use<dt>Label definition, list item title can have more than one list item description<dd>Label definition.


To integrate the HTML page of the form, click to jump to: table.html

  1. <table>Definition table
  2. <caption>Define table title
  3. <tr>Define several lines
  4. <td>Define several cells
  5. <th>Define header
  6. The table is divided into head, body and bottom<thead>,<tbody>,<tfoot>Three tags.
attribute explain
border Sets the border width of the table
width Sets the width of the table
height Set the height of the table
cellpadding Set inner margin
cellspacing Set margin
  1. <td>Two properties of:colspanUsed to define cells across rows,rowspanUsed to define cell cross column
  2. <tbody>,<thead>,<tfoot>Tags are usually used to group table content.
  3. Form by<form>Label definition,actionProperty defines the address where the form is submitted,methodProperty defines how the form is submitted.


<input type="text"><input type="password"><input type="radio"><input type="checkbox"><input type="submit"><input type="reset"><input type="button"><input type="image"><input type="file"><input type="hidden">
The < Select > < option > size attribute is used to set the height of the selection bar, and the multiple attribute is used to determine whether to select a multiple selection list or a single selection. Selected = selected

Form control for entering more text


<textarea>Tags havename,cols,rows3 attributes.

  1. nameUsed to submit parameters
  2. valueUsed to enter text content
  3. colsandrowsThe number of columns and rows, width and height for the text box, respectively.


< form action = “Web” method = “post” data tool = “mdnice editor” > self evaluation:
<textarea rows=”10″ cols=”50″ name=”introduce”></textarea>
<input type=”submit” id=”” name=””></form>


< form action = "Web" method = "post" > self evaluation: < br / > < textarea rows = "10" cols = "50" name = "Introduction" > < br / > < input type = "submit" id = > < / form >


  1. <frameset>A frameset is defined to organize multiple windows. Each frame has its own HTML document
  2. <frameset>Not with<body>Common use, unless<noframe>element
  3. <frame>Used to define<frameset>A specific window in the. Empty element<frame/>


attribute explain
src What needs to be displayedhtmlfile
frameborder Defines the outer border of the frame. The property value is 0 or 1
scrolling To define whether to display the scroll bar, there are three values: Yes, no, auto
noresize="noresize" Define that the frame cannot be resized. It can be adjusted by default
marginheightandmarginwidthattribute Define the margins up, down, left and right
  1. <noframe>To display text for browsers that do not support framesets
  2. <iframe>, and<frame>The elements are the same,iframeYesframeAlso addedheightandwidth


<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>frameset</title>    </head>    <frameset cols="25%,50%, 25% "> < frame scrolling =" no "noResize =" noResize "> < / frame > < frame > < frame > < frame > < / frameset > < NOFRAMES > < body > your browser cannot handle the frame, please change the browser and open < / body > < / NOFRAMES ></html>

Reserved characters

Reserved characters in HTML must be replaced with character entities.

Show results describe Entity name Entity number
Space &nbsp;  
< Less than sign &lt; <
> Greater than sign &gt; >
& And sign &amp; &
Quotation marks &quot; "
apostrophe &apos;(not supported by IE) '
Cent &cent; ¢
£ Pound &pound; £
¥ Yuan (yen) &yen; ¥
Euro &euro;
§ Section &sect; §
© Copyright &copy; ©
® Registered trademark &reg; ®
trademark &trade;
× multiplication sign &times; ×
÷ division sign &divide; ÷