W3school--HTML4.01 study notes

HTML is not a programming language, but a markup language, which is a set of tag tags, and HTML uses tag tags to describe a Web page.

  Tag Properties: There is a pair of angle brackets consisting of keywords, which usually appear in pairs, the first tag is called the start tag (open tag), and the second tag is called the closing tag (closed tag).  html document = = page, the HTML document describes the Web page, and the document contains HTML tags and text.   A label that appears in pairs, such as <a></a&gt, where the end tag "/" Cannot have spaces in front of it, otherwise the label will not be recognized. The  html element refers to all the code from the start tag to the end tag. Elements with no content are called empty elements, and empty elements end in the start tag.  html4.01 is not sensitive to capitalization, it is recommended to use lowercase, forcing lowercase in XHTML.   Properties: HTML tags can have properties, and properties provide more information about the labels. The   property always appears as a name/value pair and only exists in the start tag.   Lowercase property, always enclose the property value in quotation marks.   Title:  title (heading) is implemented through

Note: Always add a forward slash to a subfolder. If you write this link: href= "http://www.w3school.com.cn/html", it will generate two HTTP requests to the server. This is because the server adds a forward slash to this address, and then creates a new request, like this: href= "http://www.w3school.com.cn/html/".

Tip: Named anchors are often used to create catalogs at the start of a large document. You can assign a named anchor to each chapter, and then place a link to the anchor to the top of the document. If you visit Baidu Encyclopedia frequently, you will find that almost every entry in it uses this kind of navigation method.

Tip: If the browser cannot find a named anchor that is already defined, it will be positioned at the top of the document. No errors will occur.

The alt attribute of the tag, used for realistic text in the image position when the image is not loaded, is a good habit to add alt attributes to each image, which helps to better display the information and is useful for those who use a plain text browser. When the image is embedded in the text, the Align property is used to control how the image and text are aligned, and the default value is bottom, which is the bottom of the image is flat with the text. Table: <table> Tags: the border property is used to define the border of a table, cellpadding defines the distance between padding,cellspacing defined cells inside a cell. <th> Tags: a table header for a row in a table table or the meaning of a column of data, the RowSpan property is used to define the cell across several rows, and the Colspan property defines the cell across several columns. <tr> Tags: table represents the label of the row. <td> Tags: represents the specific cell that holds the data. <caption> the title of the table. <thead><tfoot><tbody><col><colgroup> tag Follow-up learning supplement, each cell has a align attribute that specifies the arrangement of text in the cell. The Frame property of the table label:

Note:The Frame property cannot be displayed correctly in Internet Explorer, appears normal in IE9 and above, IE8 and the following display are inconsistent.

Table with frame= "box": Table shows four borders, inner cell has no border

Table with Frame= "above": Table only shows top border

Table with Frame= "below": Table only shows bottom border

Table with Frame= "hsides": Table shows top and bottom borders

Table with Frame= "vsides": Table shows left and right borders

List: Lists can be nested. If the UL tag is nested, the type attribute principle is not repeated, that is, the outer layer is a solid dot, then the inner layers become hollow dots, the inner layer becomes the implementation block, and if nested more than three layers, the inner list is always a solid block list style. OL nesting does not change, it is always the default list of numbers. <ul> Tags: define unordered list, type attribute (disc,circle,square) definition list is preceded by a solid dot, hollow dot, solid square. <ol> Tags: Define a sequence table, the type attribute (default number, a,a, i,i) definition list preceded by numbers, uppercase letters, lowercase letters, uppercase Roman letters, and lowercase Roman letters. <li> Tags: list items for ordered and unordered lists. <dl> Tags: Customize labels <dt> Tags: customize labels for items <dd> Tags: Description of custom Label items, forms: Form (<form></form>) is a region that contains form elements. Form elements are elements that allow users to enter information into a form. In most cases the label used is the <input> tag, and the input type has the label's type attribute determined. Type value: Text,radio, CheckBox, button, Reset, submit ... <select></select> drop-down list. <option> drop-down list option, the Value property represents the value of the variable returned after the option is selected, to select an item by default, the selected of the item is assigned the value "selected" <textarea rows = "cols =" ";: Rows and cols represent the area of the text area, respectively. <fieldset> tags and <legend> tag mates achieve the following effects: The Action property of the form: when the user clicks the Confirm button (<input type = "submit" value = "Submit" >) , the contents of the form are passed to a different file, and the Action property of the form defines the file name of the destination file, which typically handles the data that is passed by the form.Frame:Frame Structure Labels <frameset>Frame structure label (<frameset>)

• Frame structure label (<frameset>) defines how to split a window into a frame
• Each frameset defines a series of rows or columns
• The Rows/columns value specifies the area of the screen that each row or column occupies.

By using the framework, you can no longer display a page in the browser, each frame is independent of other frameworks, and the downside is that developers must keep track of multiple HTML documents, which makes it difficult to print entire pages. The frame label:<frame> defines the HTML document that is placed in each frame, and the Noresize property controls whether the border can be resized with the mouse and assigned a value noresize

<frameset cols= "25%,75%" > <frame src= "frame_a.htm" > <frame src= "frame_b.htm" ></frameset>

Add <noframes> tags to browsers that do not support frames.

Important: You cannot use the <body></body> tag with the <frameset></frameset> tag simultaneously! However, if you add a <noframes> tag that contains a piece of text, you must nest the text in the <body></body> tag. (in the first instance below, you can see how it is implemented.) ）

The <iframe> inline frame is used to display a Web page in a Web page, and the Frameborder property determines whether the surrounding border is displayed. <iframe> tags can be used as hyperlinks to open targets, usage: Set the Name property for the <iframe> tag, and then the hyperlink tag <a> target property value is assigned the value of the Name property of the IFRAME, The linked page will open in the IFRAME. Color:

Tip: Only 16 color names are supported by the HTML 4.0 standard, which are: Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, Teal, white, yellow.

If you use a different color, you should use the hexadecimal color value.

<! Doctype> document type to help the browser display Web pages correctly, not HTML tags. In the Web world there are many kinds of documents, only to understand the type of document, the browser can load them correctly.the same HTML also has many versions, only fully understand the HTML version of the page to be loaded, the browser can load them correctly, it provides the browser with a message that the HTML document to use what version of the written.

In HTML 4.01, <! The doctype> declaration references a DTD because HTML 4.01 is based on SGML. The DTD prescribes the rules of the markup language so that the browser renders the content correctly.

HTML5 is not based on SGML, so you do not need to reference a DTD.

Common DOCTYPE Declaration HTML 5

<! DOCTYPE html>

HTML 4.01 Strict

The DTD contains all the HTML elements and attributes, but does not include the display and deprecated elements (such as font). Frameset (framesets) is not allowed.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

HTML 4.01 Transitional

The DTD contains all the HTML elements and attributes, including both display and deprecated elements (such as font). Frameset (framesets) is not allowed.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

HTML 4.01 Frameset

The DTD is equivalent to the HTML 4.01 transitional, but allows the frameset content.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 frameset//en" "HTTP://WWW.W3.ORG/TR/HTML4/FRAMESET.DTD" >

XHTML 1.0 Strict

The DTD contains all the HTML elements and attributes, but does not include the display and deprecated elements (such as font). Frameset (framesets) is not allowed. tags must be written in well-formed XML.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

XHTML 1.0 Transitional

The DTD contains all the HTML elements and attributes, including both display and deprecated elements (such as font). Frameset (framesets) is not allowed. tags must be written in well-formed XML.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

XHTML 1.0 Frameset

The DTD is equivalent to XHTML 1.0 transitional, but allows frameset content.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

XHTML 1.1

The DTD is equivalent to XHTML 1.0 Strict, but allows models to be added (for example, to provide Ruby support for East Asian languages).

<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >

tags placed within ：

The <base> tag specifies the default address or default target for all links on the page:

HTML <meta> Elements
Meta data (metadata) is information about the data.
The <meta> tag provides metadata about the HTML document. The metadata is not displayed on the page, but is readable for the machine.
Typically, the meta element is used to specify the description of the page, the keywords, the author of the document, the last modification time, and other metadata.
The <meta> tag is always in the head element.
Meta data can be used in browsers (how to display content or reload pages), search engines (keywords), or other Web services.
Keywords for search engines
Some search engines use the name and content properties of the META element to index your page.
The following meta element defines the description of the page:
<meta name= "description" content= "Free Web tutorials on HTML, CSS, XML"/>
The following META element defines the keywords for the page:
<meta name= "keywords" content= "HTML, CSS, XML"/>
The role of the name and content properties is to describe the content of the page.
<noscript> tags
<noscript> tags provide alternatives when scripting is not available, such as when the browser disables the script, or when the browser does not support client script.
The NoScript element can contain all the elements that can be found in the BODY element of an ordinary HTML page.
The contents of the NoScript element are displayed only if the browser does not support scripting or disables scripts:
<script type= "Text/javascript" >document.write ("Hello world!") </script> <noscript> Your Browser does not support javascript!</noscript>
How to deal with old-fashioned browsers
If the browser doesn't recognize the <script> tag at all, the contents of the <script> tag are displayed as text on the page. To prevent this from happening, you should hide the script in the Comment tab. Those old browsers (browsers that do not recognize <script> tag) ignore these comments, so the contents of the labels are not displayed on the page. And those new browsers will read these scripts and execute them, even if the code is nested inside the comment tag.
Instance javascript:
<script type= "Text/javascript" > <!-- document.write ("Hello world!") //--> </script>
URL encoding
URLs can only be sent over the Internet using the ASCII character set.
Because URLs often contain characters outside of the ASCII collection, URLs must be converted to valid ASCII formats.
URL encoding uses a "%" followed by a two-bit hexadecimal number to replace non-ASCII characters.
The URL cannot contain spaces. URL encoding typically uses + to replace spaces.
The most important differences between XHTML and HTML are:
Document structure
 
 

  
  
 
   
XHTML DOCTYPE is mandatory
 
   
The XML namespace attribute in  
   
 
  
 
 
element syntax
 
 

  
  
 
   
XHTML elements must be nested correctly
 
   
XHTML elements must always be closed
 
   
XHTML elements must be lowercase
 
   
An XHTML document must have a root element
 
  
 
 
Attribute syntax
 
 

  
  
 
   
XHTML attribute must use lowercase
 
   
XHTML attribute values must be surrounded by quotation marks
 
   
XHTML attribute minimization is also forbidden
 
  
 
 
The name attribute is discouraged in XHTML and is replaced with the id attribute.
Important Compatibility Tips:
You should add an extra space before the "/" symbol to make your XHTML compatible with today's browsers.
Language attribute (lang)
The lang attribute is applied to almost all XHTML elements. It defines the type of language used within the content of the element.
If you use the lang attribute in an element, you must add additional Xml:lang, like this:
lang="no" xml:lang="no">heia norge!</div>
Annotation definition and usage
The comment label is used to insert comments in the source code. Comments are not displayed in the browser.
You can use annotations to interpret your code to help you edit the code at a later time. This is especially useful when you are writing a lot of code.
It is also a good practice to use comment tags to hide scripts that are not supported by browsers (so that scripts are not displayed as plain text):
<script type= "Text/javascript" ><!--function displaymsg () {alert ("Hello world!")} --></script>
Note: The two slash (//) at the end of the comment line is a JavaScript comment symbol. This avoids JavaScript execution and tagging.