cumi6497
cumi6497

html代码范例_最佳HTML范例和HTML5范例

html代码范例

HTML provides the structure of websites. Here are some examples of how to use HTML syntax to build websites, including some examples of newer HTML5 features.

HTML提供了网站的结构。 以下是一些如何使用HTML语法来构建网站的示例，包括一些更新HTML5功能的示例。

A Href属性示例 (The A Href Attribute Example)

The attribute refers to a destination provided by a link. The a (anchor) tag is dead without the attribute. Sometimes in your workflow, you don’t want a live link or you won’t know the link destination yet. In this case, it’s useful to set the href attribute to "#" to create a dead link. The hrefattribute can be used to link to local files or files on the internet.

属性是指链接提供的目标。 没有属性的a (锚定)标记 。 有时在您的工作流程中，您不需要实时链接，或者您尚不知道链接目标。 在这种情况下，将href属性设置为"#"以创建无效链接很有用。 href属性可用于链接到本地​​文件或Internet上的文件。

For instance:

例如： 


  
    Href Attribute Example
  
  
    
Href Attribute Example

      

        The freeCodeCamp Contribution Page shows you how and where you can contribute to freeCodeCamp's community and growth.

The attribute is supported by all browsers.

所有浏览器都支持属性。

更多属性： (More attributes:)

hreflang : Specifies the language of the linked resource. target : Specifies the context in which the linked resource will open. title : Defines the title of a link, which appears to the user as a tooltip.

hreflang ：指定链接资源的语言。 target ：指定链接资源将在其中打开的上下文。 title ：定义链接的标题，它在用户面前显示为工具提示。

例子 (Examples)

This is a dead link
This is a live link to freeCodeCamp
more with a href attribute

页内锚 (In-page anchors)

It’s also possible to set an anchor to certain place of the page. To do this you should first place a tab at location on the page with tag and necessary attribute “name” with any keyword description in it, like this:

也可以在页面的特定位置设置锚点。 为此，您应该首先在页面上的位置放置一个标签，其中包含标签和必要的属性“名称”，并在其中包含任何关键字描述，如下所示：

Any description between tags is not required. After that you can place a link leading to this anchor at any palce on same page. To do this you should use tag with necessary attribute “href” with symbol # (sharp) and key-word description of the anchor, like this:

标签之间不需要任何描述。 之后，您可以在该页面的任意位置放置一个指向该锚点的链接。 为此，您应该使用带有必要属性“ href”的标记，标记为＃(尖锐)和锚点的关键字描述，如下所示： 

Go to Top

The may also be applied to images and other HTML elements.

也可以应用于图像和其他HTML元素。

例 (Example)

picture

例 (Example)

href的更多示例 (Some more examples of href)

This gives a base url for all further urls on the page
This is a live link to an external stylesheet

目标实例 (The A Target Example)

The attribute specifies where to open the linked document in an a (anchor) tag.

的属性指定在何处打开在所链接的文档a (锚)标签。

Examples:

例子：

A target attribute with the value of “_blank” opens the linked document in a new window or tab.

值为“ _blank”的目标属性会在新窗口或选项卡中打开链接的文档。 

freeCodeCamp

A target attribute with the value of “_self” opens the linked document in the same frame as it was clicked (this is the default and usually does not need to be specified).

值为“ _self”的目标属性会在单击链接的同一帧中打开链接的文档(这是默认设置，通常无需指定)。 

freeCodeCamp
freeCodeCamp

A target attribute with the value of “_parent” opens the linked document in the parent frame.

值为“ _parent”的目标属性将在父框架中打开链接的文档。 

freeCodeCamp

A target attribute with the value of “_top” opens the linked document in the full body of the window.

值为“ _top”的目标属性将在窗口的整个正文中打开链接的文档。 

freeCodeCamp

A target attribute with the value of “framename” Opens the linked document in a specified named frame.

值为“ framename”的目标属性在指定的命名框架中打开链接的文档。 

freeCodeCamp

身体背景属性示例 (The Body Background Attribute Example)

If you want to add a background image instead of a color, one solution is the attribute. It specifies a background image for an HTML document.

如果要添加背景图像而不是颜色，则一种解决方案是属性。 它为HTML文档指定背景图片。

Syntax:

句法：

Attribute:

属性：

background - URL for background image

background - URL for background image

Example:

例：

身体背景属性已贬值 (body-background attribute is depreciated)

the body-background attribute been deprecated in HTML5. The correct way to style the tag is with CSS.

在HTML5中不推荐使用body-background属性。 设置标签样式的正确方法是使用CSS。

There are several CSS properties used for setting the background of an element. These can be used on to set the background of an entire page.

有几个CSS属性用于设置元素的背景。 这些可用于设置整个页面的背景。

身体Bgcolor属性示例 (The Body Bgcolor Attribute Example)

The attribute assigns a background color for an HTML document.

属性为HTML文档分配背景色。

Syntax:

语法 ：

The color value can be either a color name (like, purple) or a hex value (like, #af0000).

颜色值可以是颜色名称(如purple )或十六进制值(如#af0000 )。

To add a background color to a webpage you can use the attribute. It specifies a color for the HTML document to display.

要为网页添加背景色，可以使用属性。 它指定HTML文档显示的颜色。

For example:

例如： 


  
    Body bgcolor Attribute example
  
  
    
This webpage has colored background.

You can change the color by replacing ###### with a hexadecimal value. For simple colors you can also use the word, such as “red” or “black”.

您可以通过将######替换为十六进制值来更改颜色。 对于简单的颜色，您也可以使用单词，例如“红色”或“黑色”。

All major browsers support the attribute.

所有主要的浏览器都支持属性。

Note:

注意：

  • HTML 5 does not support the attribute. Use CSS for this purpose. How? By using the following code: Of course, you can also do it in a separate document instead of an inline method.

    HTML 5不支持属性。 为此使用CSS。 怎么样？ 通过使用以下代码： 当然，您也可以在单独的文档中代替内联方法来完成此操作。

  • Do not use RGB value in attribute because rgb() is for CSS only, that is, it will not work in HTML.

    不要在属性中使用RGB值，因为rgb()仅适用于CSS，也就是说，它不适用于HTML。

Div Align属性示例 (The Div Align Attribute Example)

The

attribute is used for aligning the text in a div tag to The Left, Right, center or justify.

属性用于将div标记中的文本对齐到“左”，“右”，“居中”或“对齐”。

For instance:

例如： 



 Div Align Attribbute 




Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

重要！ (Important!)

This attribute is no longer supported in html5. css is the way to go.

html5中不再支持此属性。 CSS是要走的路。

The Div Align attribute can be used to horizontally align the contents within a div. In the below example, the text will be centered within the div.

Div Align属性可用于在div中水平对齐内容。 在下面的示例中，文本将在div中居中。 


  This Text Will Be Centered

**This attribute is not supported in HTML5 and CSS Text Align should be used instead

** HTML5不支持此属性，而应使用CSS文本对齐

字体颜色属性示例 (The Font Color Attribute Example)

This attribute is used to set a color to the text enclosed in a tag.

此属性用于为标记中包含的文本设置颜色。

重要： (Important:)

This attribute is not supported in HTML5. Instead, this freeCodeCamp article specifies a CSS method, which can be used.

HTML5不支持此属性。 相反，此freeCodeCamp文章指定了可以使用CSS方法。

注意： (Note:)

A color can also be specified using a 'hex code' or an 'rgb code', instead of using a name.

也可以使用“十六进制代码”或“ rgb代码”指定颜色，而不使用名称。

例： (Example:)

  1. Color name attribute

    颜色名称属性 

 
  Font color example using color attribute

Hex code attribute

十六进制代码属性 



Font color example using color attribute

RGB attribute

RGB属性 



Font color example using color attribute

字体大小属性示例 (The Font Size Attribute Example)

This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7with 1 being the smallest and 3 the default. It can also be defined using a relative value, like +2 or -3, which set it relative to the value of the size attribute of the element, or relative to 3, the default value, if none does exist.

此属性将字体大小指定为数字值或相对值。 数值范围为1到7其中1为最小值，默认值为3 。 也可以使用相对值来定义它，例如+2或-3 ，将其相对于元素的size属性值设置，或者相对于默认值3 (如果不存在的话)进行设置。

Syntax:

句法：

Example:

例： 


  
    This is some text!

Note : The size attribute of is not supported in HTML5. Use CSS instead.

注意： The size attribute of is not supported in HTML5. Use CSS instead. The size attribute of is not supported in HTML5. Use CSS instead.

图对齐属性示例 (The Img Align Attribute Example)

The align attribute of an image specifies where the image should be aligned according to the surrounding element.

图像的align属性指定应根据周围元素将图像对齐的位置。

Attribute Values:right - Align image to the right left - Align image to the lefttop - Align image to the topbottom - Align image to the bottommiddle - Align image to the middle

属性值：右-将图像左对齐-将图像左对齐-将图像对齐到底部-将图像对齐到底部-将图像对齐到中间

For example:

例如： 



  
   Img Align Attribute
 

  
This is an example. Image More text right here
  Image

We can also align in right if we want:

如果需要，我们也可以右对齐： 

This is another exampleImage

Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.

请注意，HTML5不支持align属性，而应使用CSS。 但是，所有主要浏览器仍支持该功能。

Img Width属性 (The Img Width Attribute)

The HTML ‘width’ attribute refers to the width of an image. The value in the quotations is the amount of pixels.

HTML的“宽度”属性是指图像的宽度。 报价中的值是像素数量。

For example, if you already have a link to an image set up via the src attribute you can add the width attribute like so:

例如，如果您已经具有通过src属性设置的图像链接，则可以添加width属性，如下所示： 



  
    Img Width Attribute
  
  
    Image

In the code snippet above there is an image tag and the image is set to a width of 100 pixels. width="100"

在上面的代码段中，有一个图像标签，图像设置为100像素的宽度。 width="100"

Img Src属性示例 (The Img Src Attribute Example)

The attribute refers to the source of the image you want to display. The img tag will not display an image without the src attribute. However, if you set the source to the location of the image, you can display any image.

属性引用您要显示的图像的来源。 没有src属性， img标签将不会显示图像。 但是，如果将源设置为图像的位置，则可以显示任何图像。

There is an image of the freeCodeCamp Logo located at https://avatars0.githubusercontent.com/u/9892522?v=4&s=400

在https://avatars0.githubusercontent.com/u/9892522?v=4&s=400上有freeCodeCamp徽标的图像。

You can set that as the image using the src attribute.

您可以使用src属性将其设置为图像。 


  
    Img Src Attribute Example

The above code displays like this:

上面的代码显示如下：

The src attribute is supported by all browsers.

所有浏览器都支持src属性。

You can also have a locally hosted file as your image.

您还可以将本地托管的文件作为映像。

For example, 会如果有一个文件夹中称为工作images ，其具有freeCodeCamp.jpeg内，只要该‘图像’文件夹是在相同的位置index.html文件。

../files/index.html

../files/index.html

..files/images/freeCodeCamp.jpeg

..files/images/freeCodeCamp.jpeg

HTML实体范例 (HTML Entity Example)

总览 (Overview)

什么是HTML实体？ (What are HTML Entities?)

HTML entities are characters that are used to replace reserved characters in HTML or for characters that do not appear on your keyboard. Some characters are reserved in HTML. If you use the less than(<) or greater than(>) signs in your text, the browser might mix them up with tags.

HTML实体是用于替换HTML中保留字符或用于键盘上未出现的字符的字符。 HTML中保留了某些字符。 如果在文本中使用小于(<)或大于(>)符号，则浏览器可能会将它们与标签混在一起。

它们是用来干什么的？ (What are they used for?)

As mentioned about HTML entities are used in order to replace reserved characters that are reserved by HTML.

如前所述，HTML实体用于替换HTML保留的保留字符。

您如何使用它们？ (How do you use them?)

A character entity looks similar to this:

字符实体看起来类似于： 



<

Or

要么 



<

参考指南 (Reference Guide)

This is by no means an exhaustive list but the links below will be able to give you more entities if the ones below do not work for your needs. Happy Coding :bowtie:

这绝不是一个详尽的列表，但是如果下面的链接不能满足您的需求，则下面的链接将为您提供更多的实体。 快乐编码：领结： 

Character	Entity Name	Entity Number	Description
 	Space
!		!	Exclamation mark
”		"	Quotation mark
#		#	Number sign
$		$	Dollar sign
¢	¢	¢	Cent sign
€	€	€	Euro sign
£	£	£	GBP sign
¥	¥	¥	Yen sign
%		%	Percent sign
&	&	&	Ampersand
’		'	Apostrophe
(		(	Opening/Left Parenthesis
)		)	Closing/Right Parenthesis
*		*	Asterisk
+		+	Plus sign
,		,	Comma
-		-	Hyphen
.		.	Period
/		/	Slash
©	©	©	Copyright
®	®	®	Registered Trademark
”	"	"	double quotation mark
>	>	>	Greater-than sign
<	<	<	Less-than sign
•	•	•	Bullet point

HTML表单示例 (HTML Form Example)

Basically, forms are used to collect data entered by a user, which are then sent to the server for further processing. They can be used for different kinds of user inputs, such as name, email etc.

基本上，表单用于收集用户输入的数据，然后将其发送到服务器以进行进一步处理。 它们可用于不同类型的用户输入，例如姓名，电子邮件等。

Form contains control elements which are wrapped around

tags, like input, which can have types like:

表单包含包裹在

标记周围的控制元素，例如input ，其类型可以是：

  • text

    text

  • email

    email

  • password

    password

  • checkbox

    checkbox

  • radio

    radio

  • submit

    submit

  • range

    range

  • search

    search

  • date

    date

  • time

    time

  • week

    week

  • color

    color

  • datalist

    datalist

Code example:

代码示例： 


    
    
    
    
    Male

    Female

    Other
    
    
       
    
    
    Correct

Other elements that form can contain:

形成的其他元素可以包含：

  • textarea - is a multiline box which is most often used for adding some text eg. comment. Size of textarea is defined by number of rows and columns.

    textarea是一个多行框，最常用于添加一些文本，例如。 评论。 文本区域的大小由行数和列数定义。

  • select - together with tag creates drop-down select menu.

    select -连同标记创建下拉选择菜单。

  • button - The button element can be used to define a clickable button.

    button按钮元素可用于定义可单击的按钮。

MORE INFORMATION ON HTML FORMS.

有关HTML格式的更多信息。

HTML Forms are required when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.

当您想从网站访问者那里收集一些数据时，需要HTML表单。 例如，在用户注册期间，您想收集诸如姓名，电子邮件地址，信用卡等信息。

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

表单将从站点访问者那里获取输入，然后将其发布到后端应用程序，例如CGI，ASP Script或PHP脚本等。后端应用程序将根据内部定义的业务逻辑对传递的数据执行所需的处理。应用程序。

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

有各种可用的表单元素，例如文本字段，textarea字段，下拉菜单，单选按钮，复选框等。

The HTML

tag is used to create an HTML form and it has following syntax −

HTML 标签用于创建HTML表单，它具有以下语法- 


         form elements like input, textarea etc.

If the form method is not defined then it will default to “GET”.

如果未定义表单方法，则默认为“ GET”。

The form tag can also have an attribute named “target” which specifies where the link will open. It can open in the browser tab, a frame, or in the current window.

表单标签还可以具有一个名为“ target”的属性，该属性指定链接的打开位置。 它可以在浏览器选项卡，框架或当前窗口中打开。

The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page at the Script URL when the user clicks on the submit button. If the action attribute is omitted, the action is set to the current page.

action属性定义提交表单时要执行的操作。 通常，当用户单击提交按钮时，表单数据将通过脚本URL发送到网页。 如果省略action属性，则将动作设置为当前页面。

HTML5音频示例 (HTML5 Audio Example)

Before HTML5, audio files had to be played in a browser using a plug-in like Adobe Flash. The HTML

在HTML5之前，必须使用诸如Adobe Flash之类的插件在浏览器中播放音频文件。 HTML

The following code snippet adds an audio file with the filename tutorial.ogg or tutorial.mp3. Theelement indicates alternative audio files which the browser may choose from. The browser will utilize the first recognized format.

以下代码段添加了一个音频文件，其文件名为tutorial.ogg或tutorial.mp3 。 该元素指示浏览器可以选择的替代音频文件。 浏览器将使用第一个可识别的格式。

例子1 (Example 1)

例子2 (Example 2)

The controls attribute includes audio controls like play, pause, and volume. If you don’t use this attribute, then no controls will be shown.

controls属性包括音频控件，如播放，暂停和音量。 如果您不使用此属性，则不会显示任何控件。

The element enables you to indicate alternative audio files which the browser may choose from. The browser will utilize the first recognize format. The text between the and tags may be shown in browser that does not support the HTML5 element.

元素使您可以指示浏览器可以选择的替代音频文件。 浏览器将使用第一种识别格式。 和标记之间的文本可能会在不支持HTML5 元素的浏览器中显示。

The autoplay attribute will automatically play your audio file in the background. It is considered better practice to let visitors choose to play audio.

autoplay属性将在后台自动播放音频文件。 让访问者选择播放音频被认为是更好的做法。

The preload attribute indicates what the browser should do if the player is not set to autoplay.

preload属性指示如果播放器未设置为自动播放，浏览器应该做什么。

The loop attribute will play your audio file in a continous loop if mentioned

如果提到，loop属性将以连续循环播放音频文件

Since this is html5, some browser do not support it. You can check it at https://caniuse.com/#search=audio

由于这是html5，因此某些浏览器不支持它。 您可以在https://caniuse.com/#search=audio上进行检查

HTML5语义元素示例 (HTML5 Semantic Elements Example)

Semantic HTML elements clearly describe it’s meaning in a human and machine readable way. Elements such as

,