A brief introduction to Html_html/css_WEB-ITnose

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
Emphasis ObjectionObject Oppose Oppose

●Definition listThe list appears in two levels

○Definition entryTitle indicating the definition

○Definition contentMark definition contentTable mark

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			●
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
		●	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
		○	Base glyph tags	Set all glyphs, sizes, colors
		●	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
		●	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

● Table markSet the parameters of the table●Table titleMake a dozen columns to fill in Table title ●Table columnsSet the table Column●Table ColumnSet the columns of the table ●Table headerequal to Form mark●Form tagsDetermine the operation mode of a single form<td> </td> ●<td> </td>Text block<td> </td>Provide text boxes for inputting larger amounts of text○Input markDetermine the input form● Select markCreate pop-up scrolling list ○ OptionsEach mark indicates an option Graphic mark○Graphic mark is used to insert graphics and set graphic propertiesLink tag●Link tagAdd link○Benchmark tagCan convert relative URL to absolute and specify the link targetFrame tag●Frame SetSet the frame

						, but the font inside will become bold
	○	框窗设定	设定框窗
	○	页内框架	于网页中间插入框架	IE
	●	不支援框架	设定当浏览器不支援框架时的提示
影像地图
	●	影像地图名称	设定影像地图名称
	○	连结区域	设定各连结区域
多媒体
	○	背景声音	于背景播放声音或音乐	IE
	○	多媒体	加入声音、音乐或影像
其他标记
	●	走动文字	令文字左右走动	IE
	●	闪烁文字	闪烁文字	NC
	○	页内寻找器	可输入关键字寻找于该一页	反对
	○	开头定义	让浏览器知道这是 HTML 文件
	○	关系定义	定义该文件与其他 URL 的关系
StyleSheet
	●	样式表	控制网页版面
	●	自订标记	独立使用或与样式表同用

注：

● 表示该标记属围堵标记，即需要关闭标记如 标记>。

○ 表示该标记属空标记，即不需要关闭标记。

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> ; face="Arial" sets the font style of the text. Arial is a commonly used one. Please do not use glyphs other than Window’s built-in glyphs. For Chinese web pages that are not set to Gb2312 Encoding, Netscape Net vigator will not display any Chinese glyphs specified by this tag. size=" 2" sets the size of the text. The value can be absolute or relative. Absolute means that the mark determines the size of the text by itself and is not affected by .

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 > ; The surrounding text, pictures, etc. can become a link. General parameter settings for : 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 is called a form tag, which is used to declare that this is a form mode and belongs to a container tag , indicating that other form tags need to be surrounded by it to be effective, is one of them, used to set various methods of inputting data. It is an empty tag. Parameter settings (commonly used): For example: action="http://your.isp.com/cgi-local/example.cgi" The form is usually used with CGI, and the parameter action is used to specify the CGI program position so that the information filled in this form can be correctly transmitted to CGI for processing. If there is no CGI for testing, you can set this parameter to ACTION="mailto:your@email.com" so that the information filled in the form will be sent to this email address (red part). method="POST" The method of transmitting data to CGI. The optional values ​​are POST and GET. You just need to remember that POST allows the transmission of large amounts of data, but GET only accepts data less than 1K, so if you have seen other people's form source code, you will find that the application form uses POST and the search engine uses GET . Parameter settings (commonly used): Because its first parameter type has many choices, and different choices represent different input methods, and other parameters also accordingly Different input methods and other parameter settings will be introduced separately below. type="Text" Optional values ​​are Text, Radio, Checkbox, Password, Submit/Reset, Image, File, Hidden, Button.