html CSS_html/css_WEB-ITnose

Html

1 Basic tags of html

1.1 html file structure

1.1.1 DOCTYPE

Definition and Usage

The declaration must be the first line of the HTML document, before the tag.

The declaration is not an HTML tag; it is an instruction to the web browser as to which version of HTML the page should be written in.

In HTML 4.01, the declaration references a DTD because HTML 4.01 is based on SGML. A DTD specifies the rules for a markup language so that browsers can render content correctly.

(Standard Generalized Markup Language(SGML is Standard Generalized Markup Language))

Tip: Always add the declaration to your HTML document and browse it like this The document type needs to be known to the server.

HTML elements and document types (Doctype)

	Strict 严格型	Transitional过渡类型	Frameset 框架
HTML 4.01	该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。	该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 "http://www.w3.org/TR/html4/loose.dtd">	该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。 "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0	该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 "http://www.w3.org/TR/html4/loose.dtd">	该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Strict td>

Transitional transition type

Frameset frame

HTML 4.01

This DTD contains all HTML elements and attributes, but does not include presentational and deprecated elements (such as font). Framesets are not allowed.

This DTD contains all HTML elements and attributes, including presentational and deprecated elements (such as font). Framesets are not allowed. <🎜>"http://www.w3.org/TR/html4/loose. dtd">

This DTD is equivalent to HTML 4.01 Transitional, but allows frameset content. <🎜>"http://www.w3.org/TR/html4/frameset. dtd">

XHTML 1.0

This DTD contains all HTML elements and attributes, but not Includes presentational and deprecated elements (such as font). Framesets are not allowed. Markup must be written in well-formed XML. <🎜>"http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">

This DTD contains all HTML elements and attributes, including presentational and deprecated elements (such as font). Framesets are not allowed. <🎜>"http://www.w3.org/TR/html4/loose. dtd">

This DTD is equivalent to XHTML 1.0 Transitional, but allows frameset content. <🎜>"http://www.w3.org/TR/xhtml1/DTD/ xhtml1-frameset.dtd">

HTML 5

See this table of HTML elements that lists what each element will do In which document type it appears.

Tips and Notes

Note: declares no closing tag.

Tip: declarations are not case-sensitive.

Tip: Use the W3C's validator to check that you've written a valid HTML/XHTML document!

XHTML 1.1

This DTD is equivalent to XHTML 1.0 Strict, but allows for additional models (such as providing ruby ​​support for East Asian languages).

XHTML1.0 is a reorganization of HTML4.0, considered a revised version of HTML4.01, and is named XHTML1.0.

1. All label element names must be lowercase

2. All unpaired empty tags must end with />,

---

3. Target="_blank" is not allowed (but XHTML1.0 is not allowed, you can rewrite it as target="new)

4. All attributes must have values XHTML1.0 stipulates that all attributes must have a value. If not, the attribute must be repeated as the value

5. Encode all < and & special symbols

6. Select the same id The device cannot be reused

7. Never omit double quotes or single quotes

8. Tags must be a pair

9. Add text description to the image label alt= "Description"

10. Correct tag order

11. Correct writing of XHTML 1.0 file category declaration (not lowercase)

W3C standard test URL http://validator.w3.org/

Web page automatic test URL http://validator.w3.org/check?uri=referer

Test There must be "16. File type declaration" and the specified file encoding

1.1.2 meta

The element provides meta-information about the page, such as for search engines and updates Frequency description and keywords.

tag is located at the head of the document and does not contain any content. The tag's properties define the name/value pairs associated with the document.

Tips and Notes:

Note: The tag is always inside the head element.

Note: Metadata is always passed in name/value pairs.

属性	值	描述
http-equiv	content-type expires refresh set-cookie	把 content 属性关联到 HTTP 头部。 content 属性关联到一个名称。
name	author description keywords generator revised others	content 属性关联到一个名称。

Attribute

Value

Description

http-equiv

content-type expires refresh set-cookie

Associate the content attribute to the HTTP header. The content attribute is associated with a name.

name

author description keywords generator revised others

The content attribute is associated with a name.

1.1.3 xmlns

xmlns is the abbreviation of xml namespace, which is XML namespace. The xmlns attribute can define one or more optional namespaces in the document. This attribute can be placed on the opening tag of any element within the document. The value of this attribute is similar to a URL, and it defines a namespace that the browser will use for all content within the element where the attribute is located.

Why do you need this xmlns? It may be like this. For example, in xhtml, you are allowed to use different DTD files. It is possible that different DTD files contain the same identifier, so this will happen. The problem of logo conflict, if you use xmlns, you can distinguish the same logo in different files. For example, a.dtd and b.dtd both contain table, but if an xhtml file contains both dtd file, and the logo table is used, so there will be a logo conflict problem. In order to solve the logo conflict problem, you can use xmlns as follows:

This way you can distinguish which logo in the dtd file is used.

There is another problem. According to the definition: the network address used to identify the namespace is not called by the XML parser. The XML parser does not need to find information from this network address. The The purpose of the network address is only to give the namespace a unique name, so this network address can also be virtual. So for the browser, how to know which dtd file a:table... should be the symbol in? The xmlns value should be specified in each xml dtd file. If the xmlns value in the dtd file is equal to the value in xhtml, it is considered a match.

1.1.4 html

Root node

1.1.5 head

Head node

1.1.6 body

The theme part of the web page

1.2 Block-level tags

: refers to the ability to exist independently, and general block-level elements are separated by line breaks ( For example, start a new line after the end of a paragraph. >

1.2.2 p

1.2.3 hr

---

1.2.4 ol li

1.2.5 ul li

1.2.6 dl dt dd

1.2.7 table

< ;td> 

🎜>

1.2.8 from

First name:

Last name:

< /form>

Attribute

Value

?application/x-www-form-urlencoded _self

Description	action	url
Specifies where to send form data when the form is submitted.	enctype	(EncodeType )
?multipart/form-data ?text/plain	Specifies how to process form data before sending it encoding method	get/post
Submit method	name
form name	target	_blank
_parent	Specifies where to open the action URL.

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
text/plain	不对特殊字符编码。

value description application/x-www-form-urlencoded Encode all characters before sending (default) multipart/form-data Does not encode characters. This value is required when using a form that contains a file upload control. text/plain Does not encode special characters.

Parameters:

属性	GET方法	POST方法
历史：	通常使用GET方法发送的数据作为URL的一部分将会被浏览器保存起来	使用POST方法提交的数据则不会作为URL的一部分，当然不会浏览器保存。
书签：	GET方法可能被浏览器当作书签(bookmark)保存	POST方法则不会
回退与重新提交：	使用GET方法的页面可以被回退并重新执行而不通知用户	POST方法会通知用户再次提交
Form编码类型：	GET提交数据只支持	POST支持application/x-www-form-urlencoded与multipart/form-data
	application/x-www-form-urlencoded
参数：	由于GET的参数一般都跟在URL后面，支持的数据大小一般在2K，有些服务器可以支持到64K。这个就是很多网页超过64K就挂掉的真实原因。因为服务器限制了。	发送参数，还可以是文件，大小在理论上没有限制。
被攻击：	GET方法提交数据很容易被黑客攻击，实施脚本绑架。	POST方法相对GET方法不是那么容易被黑客攻击
数据类型限制：	GET方法提交数据只能是文本数据	POST方法则不受限制，二进制文件也可以。
安全性：	GET方法的安全性比POST方法要低一些，原因是数据做为URL的一部分是可见的。而且被浏览器存在历史访问记录中。	POST方法的安全性相对GET要高一些。因为参数数据不能被浏览器作为URL的一部分而存入历史访问记录中。
表单数据长度：	由于表单数据做为URL的一部分而URL长度通常是有限制的。	POST方法没有限制。
可用性：	GET方法通常不被用来发送密码与敏感信息。但是我发现还是有不少网站用GET来实现login。比如XXXX社区，它把login方法放在一个jquery完成JavaScript脚本中，用GET请求完成。	POST方法可以用来发送密码与其他敏感信息。
可见性：	GET方法对所有人可见	POST方法的变量是不可见的在URL中
缓存：	GET方法默认被缓存，这个就是很多时候用GET方法获取数据后面要跟个时间戳的原因	POST方法默认不被缓存。
		除非Response头设置了Cache-Control或者Expires属性值。
最大的变量值：	GET支持最大为7607个字符	POST方法支持最大值为8MB
应用场合：	GET最常用的场合是获取数据，浏览器获取网页时候绝大多数通过GET方法实现，大多数浏览器下载也是使用GET方法获取文件	POST主要用来向服务器提交数

Properties

GET method

POST method

History:

Usually the data sent using the GET method will be saved by the browser as part of the URL

Data submitted using the POST method will not be part of the URL and will certainly not be saved by the browser.

Bookmark:

GET method may be treated as Bookmark saving

POST method will not

Rollback and restart Submit:

A page using the GET method can be rolled back and re-executed without notifying the user

POST method The user will be notified to submit again

Form encoding type:

GET Submitting data only supports

POST supports application/x-www-form-urlencoded and multipart/form-data

application/x-www-form-urlencoded

Since GET parameters generally follow the URL, the supported data size is generally 2K, and some servers can support it. to 64K. This is the real reason why many web pages crash when they exceed 64K. Because of server restrictions.

Send parameters, which can also be files. There is no limit to the size in theory.

Attacked:

The data submitted by the GET method is easily attacked Hacking and script kidnapping.

The POST method is not so easy to be hacked compared to the GET method

Data type restrictions ：

The data submitted by the GET method can only be text data

The POST method is not restricted, and binary files are also Can.

Security:

GET method is safer than POST The method is lower because the data is visible as part of the URL. And it is stored in the historical access record by the browser.

The security of the POST method is higher than that of GET. Because parameter data cannot be stored in historical access records by the browser as part of the URL.

Form data length:

Because the form data is used as a URL part of the URL and the length is usually limited.

There is no limit to the POST method.

Availability:

GET method is usually not used to send Passwords and Sensitive Information. But I found that there are still many websites that use GET to implement login. For example, the XXXX community puts the login method in a jquery completion JavaScript script and uses a GET request to complete it.

The POST method can be used to send passwords and other sensitive information.

Visibility:

GET method is visible to everyone

POST method variables are not visible in the URL

Cache: strong>

The GET method is cached by default. This is why many times the GET method is used to obtain data followed by a timestamp

POST method is not cached by default.

Unless Cache-Control is set in the Response header Or the Expires attribute value.

Maximum variable value:

GET supports a maximum of 7607 characters

The maximum value supported by the POST method is 8MB

Application occasions: strong>

The most commonly used occasion for GET is to obtain data. When browsers obtain web pages, most of them use the GET method. Most browsers also use the GET method to obtain files when downloading

POST is mainly used to submit data to the server

1.2.9 div

1.3 Row-level tags

refers to the existence of other block-level elements. Displayed between connected elements without line breaks.

1.3.1 img

Two attributes

height px %

width

1.3.2 span

sometext.some other text.

1.3.3 br

1.3.4 a

Hyperlink< ;/a>

_blank

_new

_parent

_self

_top

framename

Where to specify

Anchor link

Mail

Mail

1.3.5 input

bookpainting

type	功能	例子
text	单行文本输入
password	密码
radio	单选	男 女
checkbox	多选	书 画
reset	重置表单数据
file	文件上传
submit	提交表单数据
image	图形提交按钮
button	普通按钮

type td>

Function

Example

text

Single line text input

password

Password

radio

Radio choice

Male Female

checkbox

Multiple selection

reset

Reset form data

file

File upload

submit

Submit form data td>

image

Graphic submit button

< input type="image" src="images/button.gif" />

button

Normal button

 

 

1.3.6 textarea

 </strong></p> <p><strong>    文本内容 </strong></p> <p><strong>

 

1.3.7 select

     [选择月份]

     一月

     二月

     三月

     四月

 

 

1.4 w3c标准

1.4.1 内容和表现分离

1.4.2 内容结构要求语义化

1.4.3 遵循xhtml1.0的规范

1.5 a标签

参阅: a

1.6 注释特殊符号

空格：  

大于(>)：> 

小于(<）: <

引号（”）："

版权号() ：©

1.7 表单

参阅: from

2 表格

2.1 表格基础

参阅: table

2.2 跨行

跨行使用的是rowspan

 

    

   

   

 

 

   

   

 

 

   

   

   

 

2.3 夸列

跨行使用的是colspan

 

 

  

 

    

   

 

   

   

   

 

 

   

   

   

 

 

2.4 表格布局

表格布局一般用于数据展示页

和表单页面

 

3 框架

什么是框架?

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

框架用途?

在同一个浏览器窗口显示多个页面

可以实现复用

实现典型的目录结构

 

框架分为哪两种类型

 

3.1 frameset

特点

    结构清晰

两种

   列 

  

   

   

<body>您的浏览器无法处理框架！</body>

行

<body>Your browser cannot handle frames! </body>

Property

属性	值	描述
frameborder	0,1	规定是否显示框架周围的边框。
name	name	规定框架的名称。
noresize	noresize	规定无法调整框架的大小。
scrolling	yes no auto	规定是否在框架中显示滚动条。

Property

Value

Description

frameborder

0,1

Specifies whether to display a border around the frame.

name

属性	值	描述
frameborder	0,1	规定是否显示框架周围的边框。
height	pixels %	高度
width	pixels %	宽度
src	URL	路径
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。

name

Specifies the name of the frame.

noresize

noresize

Specifies that the frame cannot be resized.

scrolling

yes no auto

Specifies whether to display scroll bars in the frame.

3.2 IFrame