1. Html --- the abbreviation of hypertext markup language --- hypertext markup language.
What is this technology
What can this technology do
How to use technology well
2. Html is used to make web pages.
html refers to hypertext markup language, but it is not a programming language but a markup language A markup language is a set of markup tags html uses markup tags to describe web pages 3. Some html specifications
Html files have their own specific extensions of: .html, .htm
Html tags are divided into the following two types:
Single tags: Single tags are generally used for special meanings, for example:
means line break,
horizontal line
Double labels: Double labels are generally used to encapsulate data and display specific styles, for example: Welcome
Rules for writing tags
In HTML, whether it is a single tag or a double tag, it must be closed correctly,
For any html page, there will be a fixed content:
Html must use html as the root tag, and then there are head and body tags below. Generally, the title tag and meta tag are written in the head. , where title sets the title content of
Html page. Meta is used to specify specific attribute information of html page.
Comments in Html:
4. Common tags
HTML tag list Mark | Type | Translation or meaning | Function | Remarks |
File tags |
| ● | File declaration | Let the browser know that this is an HTML file | |
| ● | Start | Provide overall information of the file | |
| ● | Title | Define the file title, which will be displayed at the top of the browser | |
| ● | This article | Design file format and content location | |
Typesetting mark |
| ○ | The description tag | adds a description to the file but is not displayed | |
| ○ | Paragraph mark | Leave a blank line between words, pictures, tables, etc. | |
| ○ | Line break mark | To display words, pictures, tables, etc. on the next line | |
| ○ | Horizontal line | Insert a horizontal line | |
| ● | Center | Let words, pictures, tables, etc. be displayed in the middle | Object |
| ● | Default format | Display the files according to the source code arrangement | |
| ● | Separation mark | Set the placement of words, pictures, tables, etc. | |
| | ● | Recommended fold | Default fold location |
| Font tag | | | ● |
Emphasis Produces font bold Bold Effect |
| | ● | Bold mark | produces a bold font Effect |
| | ● | Emphasis mark | The font appears with italic effect |
| | ● | Italic mark | The font has an italic effect |
| | ● | Typing font | Courier font, same letter width |
| | ● | Add bottom line | Add bottom line |
Objection | | ● | Level 1 title tag | Get thicker, bigger and wider, the degree is inversely proportional to the series |
| | ● | Secondary title tag | Make the font bolder and larger Widen |
| | ● | Third-level title tag | Change the font Thick to large and widened |
| | ● | Level 4 title tag | Make the font thicker, larger and wider |
| | ● | Level 5 title tag | Make the font thicker, larger and wider |
| | ● | Level 6 title tag | Make the font thicker, larger and wider |
| | ● | glyph Mark | Set font, size, color |
Object | | ○ | Base glyph tags | Set all glyphs, sizes, colors |
Oppose | | ● | Enlarge the font size | Make the font size slightly larger |
| | ● | Shrink the font size | Make the font slightly thinner |
| | ● | Draw strikethrough | Add a strikethrough to the font |
Oppose |
| ● | Program code | The font is slightly wider, such as |
|
| ● | Keyboard words | The font is slightly wider, single space | |
| ● | Example | The font is slightly wider, such as | |
| ● | Variable | italic effect | |
| ● | Biography Quote | italic effect | |
| ● | Quote text block | Indented font | |
| ● | Predicate definition | Italic effect | |
| ● | Address tag | italic effect | |
| ● | Subscript | Index | |
| ● | Subscript | Subscript | |
List tag |
| ● | Sequential list | The list items will be arranged in numerical and alphabetical order | |
| ● | Unordered list | List items will be arranged in dots | |
| ○ | Checklist items | Each tag identifies a checklist item | |
| ● | Menu list | The list items will be arranged in dots, such as | Objection |
| | | ● | Definition list | The list appears in two levels
| | | ○ | Definition entry | Title indicating the definition
| | | ○ | Definition content | Mark definition content
| | Table mark | | 注:
● 表示该标记属围堵标记,即需要关闭标记如 标记>。 ○ 表示该标记属空标记,即不需要关闭标记。 IE 表示该标记只适用于 Internet Explorer。 NC 表示该标记只适用于 Netscape Communicator。 反对 表示该标记不为 W3C 所赞同,通常这标记是 IE 或 NC 自订,且己为众所支 持,只是 HTML 标准中有其它同功能或更好的选择。 弃用 表示该标记己为 W3C 所弃用,是过时的标记,但 HTML 具向下兼容的特 性,不用担心新浏览器不支援旧标记。 新 表示该标记是 HTML 4.0 中新增的。
5、html的一些特殊符号
只要你认识了 HTML 标记,你便会知道特殊字符的用处。
HTML 原始码 | 显示结果 | 描述 |
< | < | 小於号或显示标记 |
> | > | 大於号或显示标记 |
& | & | 可用於显示其它特殊字符 |
" | " | 引号 |
® | ? | 己注册 |
© | ? | 版权 |
™ | ? | 商标 |
| | 半方大的空白 |
| | 全方大的空白 |
| | 不断行的空白 |
6. Introduction to commonly used tags
1), font tag:
is applied to the content part of the file, that is, the position between and . It only affects the marked words and sentences, and is a containment mark.
Parameter settings: Example: Creation of Webpage.
For example, size="5" means that the size is 5, and html The default value is 3, that is, size="3" is the same as not being set. Relative means to increase or decrease the size series based on the default value of 3. For example, size=" 2" is equivalent to size="5" in absolute representation, but if Then its actual size is n 2 and is no longer 3 2. Absolute notation only. color="#008000" sets the color of the text. #008000 means green
2), img tag
is mainly used to insert pictures into web pages
General parameter settings for:
For example,
src="logo.gif"
Image source, accepts .gif, .jpg and .png formats , the former two have been popular for a long time, and the latter began to develop in 1996 and will replace the former two in the future. If the image file is in the same directory as the html file, only the file name must be written. Otherwise, the correct path must be added, either relative or absolute. width=100 height=100
Set the image size. The width and height are generally in pixels. Usually only set to the actual size of the picture to avoid distortion. If you want to change the size of the picture, it is best to use an image editing tool in advance. hspace=5 vspace=5
Set the edge of the image to be blank to prevent text or other images from being too close. hspace is to set the space around the image, vspace is to set the space above and below the image, and the height is in pixels. border=2
Image border thickness. align="top"
Adjust the position of the text next to the picture. You can control the text to appear at the top, middle, bottom, left and right of the picture, etc. Optional values: top, middle, bottom, left, right, default is bottom. Netscape also supports texttop, baseline, absmiddle, absbottom.
texttop means that the picture and text are paired according to the top line.
baseline means that the picture is paired to the bottom line of the current text line.
absmiddle means that the picture is paired to the current text line. In the center,
absbottom indicates the absolute bottom of the image to the current line of text (the absolute bottom means that it takes into account the lower edge of words such as y, g, q, etc.). alt="Logo of PenPal Garden"
This is the text used to describe the graphic. If the user uses a text browser, since images are not supported, these texts will be displayed instead of the image. If the browser supports image display, the text will also be displayed when the mouse is moved over the image. lowsrc="pre_logo.gif"
Set to display the low-resolution image first. If a large image is added and the download time is very long, the low-resolution image will be displayed first. To avoid losing interest in browsing, it is usually a grayscale version of the original image.
3), table tag
is a container tag, which means it is used to Declares that this is a table and that other table tags are only applicable within its scope. There are other container tags.
Used to mark table columns (rows)
Used to mark cells (cells)
Parameter settings (commonly used): For example: width="400" Table width, accept absolute value (such as 80 ) and relative values (such as 80%). border="1" Table border thickness. Different browsers have different default values, so please specify.
cellspacing="2" Table grid thickness, please see example 3, that is a grid thickened to 5. cellpadding="2" For the distance between the text and the grid, please see Example 4, that is the padding added to 10. align="CENTER" The placement position of the table (horizontal), the optional values are: left, right, center, please see example 5 or 6, the table is It is placed in the middle because some browsers do not support it, so the center mark is added. It is just a multi-layered guarantee. Of course, only can also be used. valign="TOP". The position (vertical) of the placement of calligraphy and painting in the table. Optional values are: top, middle, bottom. background="myweb.gif" Form paper, do not use it with bgcolor. bgcolor="#0000FF" Table background color, do not use it with background. Please see Example 6. bordercolor="#FF00FF" Table border color, NC and IE have different effects, please see Example 6. bordercolorlight="#00FF00" The color of the light facing part of the table border, please see example 2. 『Only applicable to IE』 bordercolordark="#00FFFF" The color of the backlight part of the table border, please see example 2. When using bordercolorlight or bordercolordark, bordercolor will be invalid. 『Only applicable to IE』 cols="2" The number of table fields just allows the browser to draw the entire table before downloading the table. Parameter settings (commonly used): For example: align="RIGHT" The position (horizontal) of placing calligraphy and painting in this column. Optional values are: left, center, right . valign="MIDDLE" The position (vertical) of the placement of calligraphy and painting in this column. Optional values are: top, middle, bottom. bgcolor="#0000FF" For the background color of this column, please see Example 5. bordercolor="#FF00FF" For the border color of this column, please see Example 3. 『Only applicable to IE』 bordercolorlight="#808080" For the color of the light-facing part of the border in this column, please see Example 3. 『Only applicable to IE』 bordercolordark="#FF0000" The color of the backlight part of the border of this column, please see example 3. When using bordercolorlight or bordercolordark, bordercolor will be invalid. 『Only applicable to IE』 Parameter settings (commonly used): For example: | width="48%" This cell width accepts absolute values (such as 80) and relative values (such as 80%). height="400" The height of the cell. colspan="5" The number of columns that this cell opens to the right. Please see Example 6 rowspan="4" The number of columns that this cell opens downwards. Please see Example 6 align="RIGHT" The position (horizontal) of the placement of calligraphy and painting in this cell. The optional values are: left, center, right . valign="BOTTOM" The position (vertical) of the placement of calligraphy and painting in this cell. Optional values are: top, middle, bottom. bgcolor="#FF00FF" For the background color of this cell, please see Example 4. bordercolor="#808080" For the cell border color, please see Example 3. 『Only applicable to IE』 bordercolorlight="#FF0000" The color of the light-facing part of the cell border, please see Example 3. 『Only applicable to IE』 bordercolordark="#00FF00" The color of the backlight part of the cell border. Please see Example 3. When using bordercolorlight or bordercolordark, bordercolor will Invalid. 『Only applicable to IE』 background="myweb.gif" This grid paper can be used with either bgcolor. 4), hyperlink is called a link tag, consisting of and
: For example
href="index.html" This parameter cannot be used together with another parameter name. Use this parameter to create a clickable link.
When used as an external link: href is set to the file name to which the link is to be linked. If the file is not in the same directory as the html file, please add the appropriate The path can be relative or absolute.
When used as an internal link: href is set to the reference point in the same document or the reference point of the specified document to which the link is to be connected, and do not surround any calligraphy and painting and only add Just add the closing tag , such as , and < ;a href="http://www.school.net.hk/~chris55/index.html#there"> where there is the reference point, and the symbol # is added in front of it. Identification, the reference point is pre-buried in the file by the next parameter name. name="hello" This parameter is used to bury the reference point for the file. It will be linked and will not be displayed. So to create an internal link, use the link tag twice. One uses the parameter name to bury a reference point in the file in advance, and the other uses the parameter href to connect to this reference point. target="_top" Set the window to be displayed when the link is clicked. Optional values are: _blank, _parent, _self, _top, frame window name. target="frame name" This only applies to the frame. If set, the link result will be displayed in the frame window of the "frame name". The frame window name is pre-named by the frame tag. target="_blank" or target="new" Open the linked screen content in a new browsing window. target="_parent" Treat the linked screen content as the previous screen of the document. target="_self" Display the linked screen content in the current window. (Default) target="_top" Display the content of the screen linked in the frame in a window without a frame. (That is, the frame is removed) 5), form tag | |