DFN blockchain
in line element list:
& lt; a> Tags can define anchors
& lt; abbr> Denotes an abbreviation
& lt; acronym> The definition takes only the acronym
& lt; b> Bold
& lt; bdo> Can override the default text direction
& lt; big> Large font bold
& lt; br> Line feed
& lt; cite> Define by reference
& lt; code> Define computer code text
& lt; dfn> Define a definition project
& lt; em> Defined as stressed content
& lt; i> Italicized text effect
& lt; img> Embed an image into a web page
& lt; input> Input box
& lt; kbd> Define keyboard text
& lt; label> The label is
& lt; input> Element definition annotation (tag)
& lt; q> Define short references
& lt; samp> Define sample text
& lt; select> Create a single or multiple choice menu
& lt; small> Small font effect
& lt; span> Combine the line elements in the document
& lt; strong> More emphatic content
& lt; sub> Define subscript text
& lt; sup> Define superscript text
& lt; textarea> Multi line text input control
& lt; tt> Typewriter or equal width text effect
& lt; var> Define variable
block level element list:
& lt; address> Define address
& lt; caption> Define table title
& lt; dd> Define items in the definition list
& lt; div> Define the partition or section in the document
& lt; dl> Definition list
& lt; dt> Define items in the list
& lt; fieldset> Define a frame set
& lt; form> Create HTML form
& lt; h1> Define the largest Title
& lt; h2> Define subtitles
& lt; h3> Define Title
& lt; h4> Define Title
& lt; h5> Define Title
& lt; h6> Define the smallest Title
& lt; hr> Create a horizontal line
& lt; legend> The element is
& lt; fieldset> Element definition Title
& lt; li> Label definition list items
& lt; noframes> For browsers that don't support frames, display text inside the frameset element
& lt; noscript> Define the alternative content when the script is not executed
& lt; ol> Defined sequence table
& lt; ul> Define unordered list
& lt; p> Label definition paragraph
& lt; pre> Define pre formatted text
& lt; table> Tag definition HTML table
& lt; tbody> Label table body (text)
& lt; td> Standard cells in tables
& lt; tfoot> Define the footers (footnotes or table notes) of a table
& lt; th> Define header cell
& lt; thead> Label definition table header
& lt; tr> Define the row in the table
{rrrrrrr}
extended data:
one, explain the block level elements and intra line elements from the perspective of concept
1. Block level elements generally start from a new row, which can accommodate intra line elements and other block elements, common block level elements such as div / P, etc“ "Form" is a special fast element, which can only accommodate other block elements
2. Inline elements: also called inline elements, are generally basic elements at the semantic level. Inline elements can only accommodate text or other inline elements
block element and inline element are concepts in HTML specification. The basic difference between block elements and inline elements is that block elements generally start with new lines
and after adding CSS control, block elements can become inline elements, and inline elements can also become block elements
Second, the difference between block level elements and inline elements1. Block level elements will monopolize a line, and its width will automatically fill in the width of its parent element
elements in a line will not monopolize a line, and elements in adjacent lines will be arranged in the same line, and will not wrap until there is no line, and its width will change with the content of elements,
2, Block level elements can set width and height attributes, and intra line elements can set width and height attributes, which are invalid
(note that block level elements still own one line after setting width attribute)
3. Block level elements can set margin and padding attributes
horizontal padding left and padding right of intra line elements will proce margin effect, However, padding top and padding bottom in the vertical direction will not proce margin effect
file type & lt; HTML>& lt;/ HTML> Put at the beginning and end of the file) file subject & lt; TITLE>& lt;/ TITLE> Must be placed in the "header" block)
header & lt; HEAD>& lt;/ HEAD> Descriptive materials, such as "theme") style & lt; BODY>& lt;/ BODY> File body)
(browser controlled display style)
title & lt; H?& gt;& lt;/ H?& gt; From 1 to 6, there are six levels of selection) alignment of headings & lt; H? ALIGN=LEFT|CENTER|RIGHT>& lt;/ H?& gt;
distinguish & lt; DIV>& lt;/ DIV> Distinguished alignment & lt; DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY>& lt;/ DIV>
citation Block & lt; BLOCKQUOTE>& lt;/ BLOCKQUOTE> It usually shrinks)
emphasizes & lt; EM>& lt;/ EM> Usually in italics)
special emphasis (usually in BOLD)
citation & lt; CITE>& lt;/ CITE> Usually in italics) code & lt; CODE>& lt;/ CODE> Display source code)
sample & lt; SAMP>& lt;/ SAMP> Keyboard input & lt; KBD>& lt;/ KBD> Variables & lt; VAR>& lt;/ VAR>
definition & lt; DFN>& lt;/ DFN> Some browsers don't provide an address & lt; ADDRESS>& lt;/ ADDRESS>
big character & lt; BIG>& lt;/ BIG> Small & lt; SMALL>& lt;/ SMALL>
appearance related labels (the author's own way of expression)
bold & lt; B>& lt;/ B> Italics & lt; I>& lt;/ I> Bottom line & lt; U>& lt;/ U> There are still some browsers that don't provide) strikeouts & lt; S>& lt;/ S> Some browsers do not provide)
subscript & lt; SUB>& lt;/ SUB> Superscript & lt; SUP>& lt;/ SUP>
typing body & lt; TT>& lt;/ TT> Display with single space font)
preset format & lt; PRE>& lt;/ PRE> Keep the size of the space in the file)
width of the predetermined format & lt; PRE WIDTH=?& gt;& lt;/ PRE> In character)
align with the middle & lt; CENTER>& lt;/ CENTER> Words and pictures are OK)
shine & lt; BLINK>& lt;/ BLINK> The most ridiculed label ever)
font size & lt; FONT SIZE=?& gt;& lt;/ FONT> From 1 to 7) change font size & lt; FONT SIZE=+|-?& gt;& lt;/ FONT>
basic font size & lt; BASEFONT SIZE=?& gt; From 1 to 7; 3)
font color & lt; FONT COLOR='#$$$$$$ 39;& gt;& lt;/ FONT>
2. Links and graphics
links & lt; A href='/ URL'& gt;& lt;/ A>
link to anchor & lt; A HREF=' URL#***'& gt;& lt;/ A> If the anchor is in another file)
& lt; A HREF='#*** 39;& gt;& lt;/ A> If the anchor (current file)
links to the destination view frame & lt; A href='/ URL' TARGET='*** 39;& gt;& lt;/ A>
set anchor & lt; A NAME='*** 39;& gt;& lt;/ A>
Graphics & lt; IMG src='/ URL'& gt;
Graphic alignment & lt; IMG src='/ URL' ALIGN=TOP|BOTTOM|MIDDLE>
Graphic alignment & lt; IMG src='/ URL' < br />ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
replace text & lt; IMG src='/ URL' ALT='*** 39;& gt; If there is no way to display the graph, the text will be displayed)
click the graph & lt; IMG src='/ URL' ISMAP> Need CGI program)
n2.0 point selection & lt; IMG src='/ URL' USEMAP=' URL'& gt;
n2.0 Map & lt; MAP NAME='*** 39;& gt;& lt;/ MAP> Description map)
n2.0 paragraph & lt; AREA SHAPE=' RECT' COORDS=',,, 39; href='/ URL'| NOHREF>
3.0 size & lt; IMG src='/ URL' WIDTH='? 39; HEIGHT='? 39;& gt; N1.0 graphics edge & lt; IMG src='/ URL' BORDER=?& gt; In pixels)
N1.0 edge space & lt; IMG src='/ URL' HSPACE=? VSPACE=?& gt; In pixels)
N1.0 low resolution graphics & lt; IMG src='/ URL' LOWsrc='/ URL'& gt;
n1.1 client pull & lt; META HTTP-EQUIV=' Refresh' CONTENT='?; URL=URL'& gt; User side automatic update)
n2.0 embedded objects & lt; EMBED src='/ URL'& gt; Insert object into page)
n2.0 embedded object size & lt; EMBED src='/ URL' WIDTH='? 39; HEIGHT='? 39;& gt;
3. Separate
paragraphs & lt; P> Usually two returns)
3.0 paragraph & lt; P> New definition as container label)
3.0 text alignment & lt; P ALIGN=LEFT|CENTER|RIGHT>
line feed & lt; BR> A return)
N1.0 text part alignment & lt; BR CLEAR=LEFT|RIGHT|ALL> When combined with graphics)
horizontal line & lt; HR>
N1.0 line alignment & lt; HR ALIGN=LEFT|RIGHT|CENTER>
N1.0 horizontal line thickness & lt; HR SIZE=?& gt; In pixels)
N1.0 horizontal line width & lt; HR WIDTH=?& gt; In pixels)
N1.0 horizontal ratio width & lt; HR WIDTH=%> The page width is 100%)
N1.0 solid line & lt; HR NOSHADE> There is no stereo effect)
N1.0 non newline & lt; NOBR>& lt;/ NOBR> No line feed)
N1.0 line feed & lt; WBR> If necessary, you can break the line here)
list (you can nest)
list without order & lt; UL>& lt; LI>& lt;/ UL> & lt; LI> Before each item)
N1.0 public listing & lt; UL TYPE=DISC|CIRCLE|SQUARE> Define all enumerations)
& lt; LI TYPE=DISC|CIRCLE|SQUARE> Define this and subsequent enumerations)
sequential enumerations & lt; OL>& lt; LI>& lt;/ OL> & lt; LI> In front of each item)
N1.0 scalar form & lt; OL TYPE=A|a|I|i|1> Define all enumerations)
& lt; LI TYPE=A|a|I|i|1> Define this and subsequent enumeration)
N1.0 starting number & lt; OL value=?& gt; Define all enumerations)
& lt; LI value=?& gt; Define this and subsequent enumerations)
defined enumerations & lt; DL>& lt; DT>& lt; DD>& lt;/ DL>& lt; DT> Project, & lt; DD> Definition)
tabular enumeration & lt; MENU>& lt; LI>& lt;/ MENU>& lt; LI> In front of each item)
List & lt; DIR>& lt; LI>& lt;/ DIR> & lt; LI> In front of each item)
background and color
3.0 repeated background & lt; BODY background='/ URL'& gt;
n1.1 + background color & lt; BODY BGCOLOR='#$$$$$$ 39;& gt; The order is red, green and blue)
n1.1 + text color & lt; BODY TEXT='#$$$$$$ 39;& gt;
n1.1 + link color & lt; BODY LINK='#$$$$$$ 39;& gt;
n1.1 + seen links & lt; BODY VLINK='#$$$$$$ 39;& gt;
n1.1 links in use & lt; BODY ALINK='#$$$$$$ 39;& gt;
4. Special characters (the following labels should be in lowercase)
Special Symbols & # Among them? Code for ISO 8859-1)
& lt& lt; & gt; & gt; & & 39; 39;
registered trademark TM
N1.0 + registered trademark TM
right symbol
N1.0 + right symbol
5. Form (usually need to cooperate with CGI program)
define form & lt; FORM ACTION=' URL' METHOD=GET|POST>& lt;/ FORM>
n2.0 upload files & lt; FORM ENCTYPE=' multipart/form-data>& lt;/ FORM>
input fields & lt; INPUT TYPE=' TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET'& gt;
field name & lt; INPUT NAME='*** 39;& gt;
fixed value in field & lt; INPUT value='*** 39;& gt;
selected & lt; INPUT CHECKED> For checkboxes and radio boxes)
field width & lt; INPUT SIZE=?& gt;
maximum number of characters & lt; INPUT MAXLENGTH=?& gt;
drop down menu & lt; SELECT>& lt;/ SELECT>
drop down menu name & lt; SELECT NAME='*** 39;& gt;& lt;/ SELECT>
number of menu items & lt; SELECT SIZE=?& gt;& lt;/ SELECT>
multiple choice menu & lt; SELECT MULTIPLE> Multiple choice)
Options & lt; OPTION>
internal options & lt; OPTION SELECTED>
text input area & lt; TEXTAREA ROWS=? COLS=?& gt;& lt;/ TEXTAREA>
input area name & lt; TEXTAREA NAME='*** 39;& gt;& lt;/ TEXTAREA>
n2.0 input area line feed mode & lt; TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL>& lt;/ TEXTAREA>
6. Table
3.0 define table & lt; TABLE>& lt;/ TABLE>
3.0 table border & lt; TABLE BORDER>& lt;/ TABLE> With or without)
n1.1 table border & lt; TABLE BORDER=?& gt;& lt;/ TABLE> You can set the value)
n1.1 cell left and right blank & lt; TABLE CELLSPACING=?& gt;
n1.1 cells are left blank & lt; TABLE CELLPADDING=?& gt;
n1.1 table width & lt; TABLE WIDTH=?& gt; In pixels)
n1.1 width ratio & lt; TABLE WIDTH=%> The page width is 100%)
3.0 table column & lt; TR>& lt;/ TR>
3.0 table column content is the same & lt; TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 cells & lt; TD>& lt;/ TD> Must be used with column)
3.0 cell content & lt; TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 do not wrap & lt; TD NOWRAP>
n3.0 cell background color & lt; TD BGCOLOR=#$$$$$$>
3.0 cell horizontal connection & lt; TD COLSPAN=?& gt;
3.0 cell vertical connection & lt; TD ROWSPAN=?& gt;
n1.1 cell width & lt; TD WIDTH=?& gt; In pixels)
n1.1 cell width ratio & lt; TD WIDTH=%> Page width is 100%)
3.0 table title & lt; TH>& lt;/ TH> Follow & lt; TD> Same, but center and bold)
3.0 table title alignment & lt; TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 table title does not wrap & lt; TH NOWRAP>
3.0 how many columns does the table title occupy & lt; TH COLSPAN=?& gt;
3.0 how many columns does the table title occupy & lt; TH ROWSPAN=?& gt;
n1.1 table title width & lt; TH WIDTH=?& gt; In pixels)
n1.1 table title ratio width & lt; TH WIDTH=%> Page width is 100%)
3.0 table header & lt; CAPTION>& lt;/ CAPTION>
3.0 form head up & lt; CAPTION ALIGN=TOP|BOTTOM> Above / below the table)
viewframe (define and control specific areas on the screen)
n2.0 viewframe format general definition & lt; FRAMESET>& lt;/ FRAMESET> Replace & lt; BODY>
n2.0 view frame line length allocation & lt; FRAMESET ROWS=,,,>& lt;/ FRAMESET> Pixels or%)
n2.0 frame line length allocation & lt; FRAMESET ROWS=*>& lt;/ FRAMESET> * = Relative size)
n2.0 view frame bar width allocation & lt; FRAMESET COLS=,,,>& lt;/ FRAMESET> Pixels or%)
n2.0 view frame bar width allocation & lt; FRAMESET COLS=*>& lt;/ FRAMESET> * = Relative size)
n2.0 define indivial frames & lt; FRAME> Define indivial view frame)
n2.0 indivial view frame content & lt; FRAME src='/ URL'& gt;
n2.0 indivial view frame name & lt; FRAME NAME='*** 39;|_ blank|_
block element
address - address
blockquote - block reference
Center - middle alignment block
dir - directory list
div - common block level, It is also the main label of CSS layout
DL - definition list
fieldset - form control group
form - interactive form
H1 - headline
H2 - subtitle
H3 - 3 level Title
H4 - 4 level Title
H5 - 5 level Title
H6 - 6 level Title
HR - horizontal separator
isindex - input prompt
menu - menu list
NOFRAMES - frames optional content (display this block content for browsers that do not support frame)
noscript - optional script content (display this content for browsers that do not support script)
ol - sort list
p - paragraph
pre - formatted text
Table - table
ul - non sort list
inline element
A - anchor
abbr - abbreviation
acronym- First word
b - bold (not recommended)
BDO - bidi override
big - large font
Br - newline
cite - Reference
code - computer code (required when referring to source code)
DFN - definition field
em - emphasis
font - font setting (not recommended)
I - italics
img - picture
Input - input box
KBD - define keyboard text This
label - table label
Q - short reference
s - middle dash (not recommended)
samp - define example computer code
Select - item selection
small - small font text
span - Common inline container, Define text block
strike - middle dash
strong - bold emphasis
sub - subscript
sup - superscript
textarea - multiline text input box
TT - teletext
U - underline
var - define variable
variable element
variable element is determined as block element or inline element according to context
applet - Java applet
button - button
del - delete text
iframe - inline frame
ins - inserted text
map - picture block (map)
Object - object
script - client script
Chinese character of CSS authority guide shows that any visible element that is not a block level element is an inline element. The characteristic of its expression is the form of "row layout", which means that its expression is always displayed in rows. For example, we set an inline element border- bottom:1px solid #000; The performance is repeated in each line, there will be a black thin line below each line. If it is a block level element, the black line displayed will only appear at the bottom of the block
elements such as P, H1, or div are often called block level elements, which are displayed as a block of content; Strong Span and other elements are called in line elements, and their contents are displayed in the line, namely "in line box" Display = block can be used to convert elements in a row into block elements, and display = none means that the generated elements have no frame at all, neither display elements nor occupy the space in the document)
elements in a row are elements in a row, which can only be placed in a row; Block level element is a square block that can be placed anywhere on the page
to put it bluntly, the element in the line is like a word; A block level element is like a paragraph. If it is not defined separately, it will appear on a separate line
general block level elements such as paragraph & lt; p>、 Title & lt; h1>& lt; h2>...、 List& lt; ul>& lt; ol>& lt; li> 、 Form & lt; table>、 Forms & lt; form>、 DIV< div> And body & lt; body> And so on. Inline elements, such as: form elements & lt; input>、 Hyperlinks & lt; a>、 Image & lt; img>、& lt; span> ........
the salient feature of block level element is that each block level element is displayed from a new line, and the subsequent element also needs to be displayed from another line< br />< span> In CSS definition, it belongs to an in line element, while & lt; div> Is a block level element
for those who have studied CSS, you can understand it as soon as you listen to it. But it's not easy for the novice to understand. I'm mainly familiar with the novice
with the word container, it is easier to understand their existence and purpose. The element in the line is a small container, while & lt; div> It's equivalent to a large container. Of course, a small container can be placed in a large container& lt; span> It's a small container, so you may have a preliminary impression in your mind, if we want to put some water in a large container. But I also want to put some ink in it? It's very simple. We take out the small container, fill it with ink, and then put it into the clear water in the large container
block elements are generally container elements for other elements
block elements generally start from a new line, which can hold inline elements and other block elements. The common block elements are paragraph labels; P"“ form" This block element is special and can only be used to hold other block elements
without the function of CSS, block elements will be arranged one line at a time. With CSS, we can change the default layout mode of HTML and put the block elements where you want. Instead of foolishly starting a new line every time. It should be pointed out that the table tag is also a kind of block element. From the perspective of general users (excluding the visually impaired and the blind), table based layout and CSS based layout have no difference except for the difference in page loading speed. But if ordinary users inadvertently click the view page source code button, the difference between the two is very big. The CSS layout page source code based on good reconstruction concept design can at least let ordinary users without web development experience read the content quickly. From this point of view, CSS layout code should have a better aesthetic experience
you can think of the block container element div as boxes, or it's easier to understand if you've played with clip posts. First, we cut out the articles we need from all kinds of newspapers and magazines. Each cut is a block. Then we stick these pieces of paper to a blank new piece of paper with glue according to our own layout intention. This will form your own unique digest express. As an extension of technology, web layout design also follows the same pattern
inline elements are generally semantic based basic elements. Inline elements can only hold text or other inline elements. A common inline element is "a"
both block element and inline element are concepts in the HTML specification. The basic difference between block elements and inline elements is that block elements generally start with new lines. When the CSS control is added, the attribute difference between block elements and inline elements will not be the difference. For example, we can add the inline element cite display:block This kind of attribute enables him to start from a new line every time
the basic concept of variable element is that it needs to determine whether the element is a block element or an inline element according to the context. Variable elements still belong to the above two element categories. Once the context determines their categories, they have to follow the rules of block elements or inline elements. For the general classification of elements, see the full text
there are many kinds of inline elements, inline elements, inline elements and straight forward elements in Chinese. Basically, there is no unified translation. How to call love. In addition, when it comes to inline elements, we will think of a display attribute that is display:inline; This property can fix the famous ie double floating boundary problem.
Block level elements
features: 1. Each block level element occupies a single line, and the subsequent elements can only start another line, and two elements cannot share one line
The height, width, row height and top bottom margin of elements can be set3. If the width of the element is not set, it is the width of the parent element by default
common block level elements: & lt; div>、& lt; p>、& lt; h1>...& lt; h6>、& lt; ol>、& lt; ul>、& lt; dl>、& lt; table>、& lt; address>、& lt; blockquote> 、& lt; form>
line level elements
features: 1. It can be in the same line with other elements, and there is no need to start another line
The height, width and top and bottom margins of the element cannot be set3. The width of an element is the width of the text and picture it contains and cannot be changed
block element HTML tag classification details
address - address
blockquote - block reference
Center - middle alignment block
dir - directory list
DL - definition list
fieldset - form control group
form - interactive form (only used to hold other block elements)
H1 - headline
H2 - subtitle
H3 - Level 3 headline
H4 - 4 Level Title
H5 - 5 level Title
H6 - 6 level Title
HR - horizontal separator line
isindex - input prompt
menu - menu list
NOFRAMES - optional contents of frames, (display this block content for browsers that do not support frame
noscript - optional script content (display this content for browsers that do not support script)
ol - sort form
p - paragraph
pre - formatted text
Table - table
ul - non sort list
inline element HTML tag classification details
A - anchor
abbr)- Acronym
acronym - acronym
b - bold (not recommended)
BDO - bidi override
big - large font
Br - newline
cite - Reference
code - computer code (required when referring to source code)
DFN - definition field
em - emphasis
font - font setting (not recommended)
I - italics
img - picture
Input - input box
KBD - Definition Keyboard text
label - table label
s - middle dash (not recommended)
samp - definition example computer code
Select - item selection
small - small font text
span - common inline container, Define text block
strike - middle dash
strong - bold emphasis
sub - subscript
sup - superscript
textarea - multiline text input box
TT - teletext
U - underline
var - define variable
variable element HTML tag classification details
applet - Java applet
button - button
del - delete text
iframe - inli NE frame
ins - inserted text
map - image block (map)
Object - object
script - client script
extension:
html is not a programming language, but a markup language, which is necessary for web page making“ Hypertext "means that the page can contain pictures, links, even music, programs and other non text elements
the structure of hypertext markup language (or hypertext markup language) includes the "head" part, which provides information about the web page, and the "body" part which provides the specific content of the web page
character set:
in addition to the common American Standard Code for information exchange (ASCII) characters and Chinese characters, HTML has many special characters, which together constitute the HTML character set
there are two situations in which special characters need to be used, one is the characters with special meaning in the web page, the other is the characters not on the keyboard. HTML characters can be represented by some codes, which can be represented in two ways
is character code (named entity) and number code (numbered entity). Character code with "& amp;" Start with a semicolon & quot& quot; End with a character name in between, such as & amp; reg; The number code is also marked with "& amp;" Start with a semicolon & quot& quot; At the end, there is a number in between, such as
hypertext markup language is an application of standard general markup language, and it is also a kind of specification and a kind of standard. It marks all parts of the web page to be displayed by marking symbols
the web page file itself is a kind of text file. By adding markers to the text file, you can tell the browser how to display its contents (such as: how to deal with the text, how to arrange the screen, how to display the pictures, etc.)
the browser reads the web page file in order, and then interprets and displays the content of the tag according to the tag. For the tag with writing error, the error will not be pointed out, and the interpretation process will not be stopped. The compiler can only analyze the cause and location of the error through the display effect
however, it should be noted that different browsers may have different interpretations of the same marker, which may lead to different display effects
hypertext markup language document making is not very complex, but it has powerful functions and supports the insertion of files with different data formats, which is one of the reasons why the world wide web (WWW) is popular. Its main features are as follows:
simplicity: hypertext markup language version upgrade adopts superset mode, which makes it more flexible and convenient
Extensibility: the extensive application of hypertext markup language brings the requirements of strengthening functions and increasing identifiers. Hypertext markup language adopts the way of subclass elements to ensure the system expansion
platform independence: although personal computers are popular, there are many people using MAC and other machines. Hypertext markup language can be used on a wide range of platforms, which is another reason why the world wide web (WWW) is popular
generality: in addition, html is the general language of the network, a simple and general full markup language
it allows web procers to create complex pages with text and pictures, which can be browsed by anyone else on the Internet, no matter what type of computer or browser they use
reference source: Web HTML
Common block level elements in CSS: & lt; div>、& lt; p>、& lt; h1>...& lt; h6>、& lt; ol>、& lt; ul>、& lt; dl>、& lt; table>、& lt; address>、& lt; blockquote> 、& lt; form>
The characteristics of
block level elements are as follows:
each block level element occupies a single line, and the subsequent elements can only start another line, and two elements cannot share the same line. The height, width, row height, and top and bottom margins of elements can be set. If the width of the element is not set, it is the width of the parent element by default
Characteristics ofline level elements:
can be in the same line with other elements, and there is no need to start another line. The height, width, and top and bottom margins of an element cannot be set. The width of an element is the width of the text and picture it contains, and cannot be changed
< H2 >< H2 > extended data: the conversion between row level elements and block level elements can be used in CSS styles display:inline You can also use the display:block Set row level elements to block level elements Reference: web link)
HTML & lt;! ----& gt; The content stored in the comment tag in the tag
HTML document will not be displayed in the page
HTML & lt;! DOCTYPE> The tag
tells the browser which HTML or XHTML specification the document uses to render the web page< br />HTML < a> Tag
a tag can be used to define either a hyperlink or an anchor link, which is one of the most important tags in HTML< br />HTML < abbr> Label
abbr a label represents an abbreviation, such as & quot; Inc."、& quot; etc.", Indicates that the text it contains is an abbreviation of a longer word or phrase< br />HTML < acronym> Label
acronym elements can be defined as acronyms only, such as & quot; WWWC", Represents "World Wide Web Consortium"< br />HTML < address> The label
address defines a contact (e.g. email address). You can use it to define an address, a signature, or the authorship of a document< br />HTML < applet> The tag
applet defines an applet embedded in HTML. Applets are usually HTML based programs created in Java< br />HTML < area> Label
the area label defines the area in the image map, and the area label is always nested in the map label< br />HTML < b> Label
bthe text included in the label presents bold text effect, but does not have the extended meaning of strong label< br />HTML < base> Tag
the base tag specifies the default URL and the default open location target for all links on the HTML page< br />HTML < basefont> Label
BASEFONT label defines the base font style of HTML. This tag can define the color, size and font family of the default font of HTML document< br />HTML < bdo> The label
BDO is used to define the reading direction of text in HTML documents, usually from left to right LTR, especially Arabic RTL from right to left< br />HTML < big> Tags
big tags can easily enlarge fonts. When the browser displays the text between the big tag and its corresponding big tag, its font is one size larger than the surrounding text
HTML & lt; blockquote> Label
blockquote label defines block reference. All defined text is separated from normal text. It is often indented on the left and right sides (increasing the outer margin), and sometimes italics are used< br />HTML < body> The tag
body element defines the body of an HTML document and contains all the contents of the document (such as text, hyperlinks, images, tables, lists, etc.)< br />HTML < br> Tag
br tag is used to insert a new line character in HTML, which is an empty tag without an end tag. The correct writing method in XHTML is & #< br />'< br />HTML < button> The
button tag defines a button. Inside the button element, you can place content, such as text or images. This is the difference between the element and the button created with the input tag< br />HTML < caption> Label
the caption label is used to define the title of a table. It must be immediately after the table label. Usually, the title is centered on the table< br />HTML < center> Label
center centers the text it contains horizontally. In XHTML 1.0 strict DTD, center element is not supported, so CSS style is recommended to center the text< br />HTML < cite> The label
cite usually indicates that the text it contains is a reference, such as the title of a book or magazine, which is usually in italics< br />HTML < code> Tags
codetags are often used to display the text content of computer / programming source code< br />HTML < col> Tags
col tags define attribute values, such as width or alignment, for one or more columns in a table. This eliminates the need to repeatedly apply styles to indivial cells and rows< br />HTML < colgroup> Tags
colgroup tags are used to combine columns in a table to format them. Tags can only be used in table elements< br />HTML < dd> Tag
DD defines the definition part of the entry in the custom list DL, which is usually used with DT< br />HTML < del> Tag
del tag can delete the text content in HTML, and is often used with INS tag to describe the update and correction in the document< br />HTML < dfn> Tags
DFN tags can be used to mark special terms or phrases in HTML, and browsers usually use italics to display the text in DFN< br />HTML < dir> Label
definition and usage dir label defines directory list. In XHTML 1.0 strict DTD, dir element is not supported, and dir element is not approved. Please use CSS to add style for list< br />HTML < div> Tag
div tag is often used to layout the content of HTML document, which can take the content with relatively complete logic function as a block. Div + CSS has become a standard specification for XHTML to organize content< br />HTML < dl> The tag
DL is used to create a custom list in HTML, which is used with DT and DD in the same city< br />HTML < dt> The tag
DT is used to define the title term part of the entry in the custom list DL, and DD is used to define the content part of the entry< br />HTML < em> Label
em the text content in the label indicates the specially emphasized part, and the browser usually uses italics to display the text in EM< br />HTML < fieldset> Label
the fieldset label can group the related elements in the form. For example, the legend label can be used to draw a box with a title around the form control< br />HTML < font> Label
font is used to specify the font, font size and font color of text in HTML. In XHTML 1.0 strict DTD, font element is not supported, so it is suggested to use style CSS instead of font label< br />HTML < form> Tag
the form tag can create HTML input forms for users, use action to transfer data to the server, and usually have a submit button. The form element is a block level element, and there will be line breaks before and after it< br />HTML < frame> The tag
frame tag defines a specific window (frame) in the frameset. Each frame can set different properties, such as border, scrolling, noResize, etc< br />HTML < frameset> The label
frameset element defines a frameset. It is used to organize multiple windows (frames). Each frame has its own document< br />HTML < head> The tag
head tag is located in the head of the HTML document, and it is the container of all header elements. In the head tag, meta information such as title, keywords, description and base can be defined, and CSS style sheet file and JS browser script can also be introced< br />HTML < h> Tags
H1 - H6 tags can define different levels of HTML titles. H1 - H6 tags have exact semantics, so it is recommended to choose the appropriate title level to construct the structure of the document< br />HTML < hr> Tag
hrtag creates a horizontal line in HTML page. In HTML, hrtag has no end tag. In XHTML, HR must be added / closed correctly< br />HTML < html> Tags
HTML tags define the start and end points of an HTML document, between which are the head and body of the document< br />HTML < i> Tags
I tags are similar to content-based style tags. It tells the browser to display the included text in italics or obliques< br />HTML < iframe> The tag
iframe tag creates an area on the HTML page, which loads another URL. You can place text between iframes so that browsers that don't support iframes can display it< br />HTML < img> The tag
img element embeds an image into the web page. IMG tag has two required attributes: SRC attribute and alt attribute< br />HTML < input> Tag
input tag is used to collect user information and is an important tag in interactive HTML. According to different type attribute values, input fields can take many forms, such as text field, check box, masked text control, radio button, button, etc.
HTML & lt; ins> Label
ins label defines the text that has been inserted into the document, and is often used together with del label to describe the update and correction in the document< br />HTML < kbd> The label
KBD defines the keyboard text, and the browser usually displays the text contained in the label in the same width font< br />HTML < label> Label
label defines the text label for the input element in the form. When the user clicks the text in the label, the input control corresponding to the for attribute will get the focus, which improves the user interaction< br />HTML < legend> Tag
use legend in HTML fieldset tag to draw a table frame with title around the form
HTML & lt; li> The tag
Li title is used to define the items in the list, which can be used in unordered list UL and sequential list ol, and can be easily typeset in HTML by cooperating with CSS
HTML & lt; link> Tags
link tags are located in the head part of HTML documents, which define the relationship between documents and external resources. The most common use is to link external style sheet CSS files< br />HTML < map> Label
map defines a client image map. Image map refers to an image with a clickable area< br />HTML < menu> Label
menu label can define a menu list, please use CSS style to define the type of list< br />HTML < meta> Tag
the meta tag is located in the head section and is used to define meta information about the page, such as character set, keywords, page description and other important information< br />HTML < noframes> The tag
NOFRAMES element displays text for browsers that do not support frames. The NOFRAMES element is inside the frameset element< br />HTML < noscript> The tag
noscript element is used to define alternative text content when the browser does not support script< br />HTML < object> Tag
object defines an object embedded in HTML, which can be used to add multimedia to HTML pages, such as audio, video, Java applets, ActiveX, PDF and flash< br />HTML < ol> Tag
ol tag defines a sequence table. All major browsers support OL tags< br />HTML < optgroup> Tag
optgroup tag defines the option group. Through the optgroup tag, the related options are combined:
HTML & lt; option> The tag
option element is located inside the select element and is used to define an option (an item) in the drop-down list< br />HTML < p> Tags
P tags are used to define text paragraphs in HTML. The P element automatically creates some white space before and after it. The browser will automatically add these blanks, and you can also set them in the style sheet CSS< br />HTML < param> The tag
param element allows you to insert XHTML documents for
text setting
1. Font size: font size parameter
2. Font style: Font Format
3. Font weight: font thickness
4. Color attribute
Color: parameter
pay attention to using web page security color
hyperlink setting
text decoration: parameter
the main purpose is to change the underline when the browser displays text links
parameter range:
underline: underline the text
Outline: underline the text
line through: delete the text
blink: make the text blink
none: do not display any of the above effects
1. Background color: parameter
2 Background image
background image: URL (URL)
URL is the storage path of background image, none means none
3. Background image repetition
background repeat: parameter
parameter range:
no repeat: tile background image without repetition
repeat-x: tile the image horizontally only
repeat-y: tile the image vertically only
if the background image repetition attribute is not specified, the browser defaults to tile the background image horizontally and horizontally Tile vertically in both directions
4. Background image fixation
background image fixation controls whether the background image scrolls with the scrolling of the web page. If you do not set the fixed property of the background image, the browser will scroll with the scrolling of the web page by default. In order to avoid too flashy background image diverting the attention of the browser when scrolling, it is generally set as fixed
background attachment: parameter
parameter range:
fixed: when the web page scrolls, the background image is fixed relative to the browser window
scroll: when the web page scrolls, the background image is fixed relative to the browser window, Scroll together
block
1. Word spacing
word spacing: spacing
2. Letter spacing
letter spacing
3. Text alignment
text align: parameter
parameter value:
left: left alignment
right: right alignment
Center: center alignment
justify: relative left-right alignment
4 Vertical alignment
vertical alignment: parameter
Top: Top alignment
bottom: bottom alignment
text top: relative text top alignment
text bottom: relative text bottom alignment
baseline: baseline alignment
Middle: center alignment
sub: display in the form of superscript
Super: display in the form of superscript
5 Text indent
text indent: indent distance
12px is equivalent to a text distance
6, space
white space: parameter
normal
pre preserve
nowrap do not wrap
7, display style
Display: parameter
parameter value range:
block: block level element, Wrap before and after the object
inline: wrap before and after the object
list item: wrap before and after the object, add the bullet
none: no display
box
1, height
2, width
3, padding inner margin
4, margin outer margin
5, float: block level elements can be arranged in one line, For example, horizontal menu
6. Clear clear floating
border
1. Style
border style parameter
border style parameter:
none: no border
dotted: border is dotted line
dashed: Border is long short line
solid: border is solid line
double: border is double line
2. Width
border width parameter
3 Color
border color parameter
List
list style type list style
the list characters of different browsers may be different, which may affect the web page, so the list in the web page is mostly displayed by the background image
control the style of user interface
mouse
cursor: mouse shape parameter
CSS mouse shape parameter table:
mouse shape: CSS code
style = & quot; cursor:hand" Hand shape
style = & quot; cursor:crosshair" Cross
style = & quot; cursor:text" Text form
style = & quot; cursor:wait" Hourglass shape
style = & quot; cursor:move" Cross arrow:
style = & quot; cursor:help" Question mark
style = & quot; cursor:e-resize" Right arrow shape
style = & quot; cursor:n-resize" Up arrow shape
style = & quot; cursor:nw-resize" Top left arrow shape
style = & quot; cursor:w-resize" Left arrow shape
style = & quot; cursor:s-resize" Down arrow
style = & quot; cursor:se-resize" Right down arrow shape
style = & quot; cursor:sw-resize" Left down arrow shape
common HTML code: structural definition
file type & lt; HTML>& lt;/ HTML> At the beginning and end of the file)
file subject & lt; TITLE>& lt;/ TITLE> Must be placed in the "header" block)
header & lt; HEAD>& lt;/ HEAD> Descriptive materials, such as "theme")
style & lt; BODY>& lt;/ BODY> Document ontology)
title & lt; H?& gt;& lt;/ H?& gt; From 1 to 6, there are six levels to choose)
Title alignment & lt; H?ALIGN=LEFT|CENTER|RIGHT>& lt;/ H?& gt;
distinguish & lt; DIV>& lt;/ DIV>
distinguished alignment & lt; DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY>& lt;/ DIV>
citation Block & lt; BLOCKQUOTE>& lt;/ BLOCKQUOTE> It usually shrinks)
emphasizes & lt; EM>& lt;/ EM> Usually in italics)
special emphasis & lt; STRONG>& lt;/ STRONG> Usually in BOLD)
citation & lt; CITE>& lt;/ CITE> Usually in italics)
code & lt; CODE>& lt;/ CODE> Display source code)
sample & lt; SAMP>& lt;/ SAMP>
keyboard input & lt; KBD>& lt;/ KBD>
Variables & lt; VAR>& lt;/ VAR>
definition & lt; DFN>& lt;/ DFN> Some browsers do not provide)
address & lt; ADDRESS>& lt;/ ADDRESS>
big character & lt; BIG>& lt;/ BIG>
small & lt; SMALL>& lt;/ SMALL>
appearance related labels (the author's own way of expression)
bold & lt; B>& lt;/ B>
italics & lt; I>& lt;/ I>
bottom line & lt; U>& lt;/ U> Some browsers don't provide it)
strikeout & lt; S>& lt;/ S> Some browsers do not provide)
subscript & lt; SUB>& lt;/ SUB>
superscript & lt; SUP>& lt;/ SUP>
typing body & lt; TT>& lt;/ TT> Display with single space font)
preset format & lt; PRE>& lt;/ PRE> Keep the size of the space in the file)
width of the predetermined format & lt; PRE WIDTH=?& gt;& lt;/ PRE> In character)
align with the middle & lt; CENTER>& lt;/ CENTER> Words and pictures are OK)
shine & lt; BLINK>& lt;/ BLINK> The most ridiculed label ever)
font size & lt; FONTSIZE=?& gt;& lt;/ FONT> From 1 to 7)
change font size & lt; FONTSIZE=+|-?& gt;& lt;/ FONT>
basic font size & lt; BASEFONTSIZE=?& gt; From 1 to 7; 3)
font color & lt; FONTCOLOR="#$$& quot;& gt;& lt;/ FONT>$$ Color code)
one of the common HTML Codes: modify the practicability of the page HTML code
map: & lt; img src=" Picture address & quot& gt;
join link: & lt; a href=" Related address to connect to & quot& gt; Write what you want & lt/ a>
open a connection in a new window: & lt; a href=" Related address & quot; target="_ blank"& gt; Write what you want to write & lt/ a>
mobile font (lantern): & lt; marquee> Write what you want & lt/ marquee>
bold: & lt; b> Write what you want & lt/ b>
font italics: & lt; i> Write what you want & lt/ i>
font underline: & lt; u> Write what you want & lt/ u>
font strikeouts: & lt; s> Write what you want & lt/ s>
larger font: & lt; big> Write what you want & lt/ big>
font control size: & lt; h1> Write what you want & lt/ h1> ( The font size can be changed from H1 to H5, H1 is the largest, H5 is the smallest)
change the font color: & lt; font color="# value"& gt; Write what you want & lt/ font>( Where the value value is between 000000 and ffffff (16 bit system)
remove the underlined connection: & lt; a href=" Related address & quot; style=" text-d ecoration:none"& gt; Write what you want & lt/ a>
post Music: & lt; embed src=" Music address & quot; width=" Width & quot; height=" Height & quot; autostart=false>
post flash: & lt; embed src=" Flash address & quot; width=" Width & quot; height=" Height & quot& gt;
post video files: & lt; img dynsrc=" File address & quot; width=" Width & quot; height=" Height & quot; start=mouseover>
line feed: & lt; br>
paragraph: & lt; p> Paragraph & lt/ p>
original text style: & lt; pre> Text & lt/ pre>
change post background: & lt; body background=" Background picture address & quot& gt;
fixed post background does not scroll with scroll bar: & lt; body background=" Background picture address & quot; body bgproperties=fixed>
Customize post background color: & lt; body bgcolor="# value"& gt;( Value (see 10)
post background music: & lt; bgsound=" Background music address & quot; loop=infinite>
post webpage: & lt; iframe. src=" Related address & quot; width=" Width & quot; height=" Height & quot& gt;& lt;/ iframe>
common HTML Codes: common problems
Click to close the window
& lt; a href=" javascript.:top.window.close();& quot;& gt; Click to close the window & lt/ a>
how to remove the scroll bar on the right side of the homepage< br />< body scroll=" no"& gt;< br />
< body style=" overflow-y:hidden"& gt;<
how to close a web page automatically.
& lt; html>< br />
< head>< br />< OBJECT id=closes type=" application/x-oleobject" classid=" clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"& gt;< br />< param name=" Command" value=" Close"& gt;< br /></ object>< br /></ head>< br />< body >
this window will automatically close after 10 seconds without a prompt. & lt/ body>
how to refresh CSS without refreshing the page< br />< style>< br />button{ color:#000000;}< br /></ style>< br />< button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘> Click the button to change the button selector in the style tab to red & lt/ button>
how to refresh a web page automatically
Enter & lt; META. HTTP-EQUIV=" Refresh" c> Where 20 is automatically refreshed after 20 seconds, you can change it to any value
how to refresh the page automatically< In the first method, the code fragment of refresh
html is as follows:
& lt; head>< br />< meta. http-equiv=" refresh" c>< br /></ head>
5 means refresh time
[Ctrl + a select all prompt: you can modify part of the code first, and then press run]
method 2, use settimeou