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 <a href> attribute refers to a destination provided by a link. The a (anchor) tag is dead without the <href> 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>属性的a (锚定)标记<href> 。 有时在您的工作流程中，您不需要实时链接，或者您尚不知道链接目标。 在这种情况下，将href属性设置为"#"以创建无效链接很有用。 href属性可用于链接到本地文件或Internet上的文件。
For instance:
例如：
<html><head><title>Href Attribute Example</title></head><body><h1>Href Attribute Example</h1><p><a href="https://www.freecodecamp.org/contribute/">The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamp's community and growth.</p></h1></body>
</html>The <a href> attribute is supported by all browsers.
所有浏览器都支持<a href>属性。
更多属性： (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)
<a href="#">This is a dead link</a>
<a href="https://www.freecodecamp.org">This is a live link to freeCodeCamp</a>
<a href="https://html.com/attributes/a-href/">more with a href attribute</a>页内锚 (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:
也可以在页面的特定位置设置锚点。 为此，您应该首先在页面上的位置放置一个标签，其中包含标签和必要的属性“名称”，并在其中包含任何关键字描述，如下所示：
<a name="top"></a>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”的标记，标记为＃(尖锐)和锚点的关键字描述，如下所示：
<a href="#top">Go to Top</a>图片链接 (Image Links)
The <a href="#"> may also be applied to images and other HTML elements.
<a href="#">也可以应用于图像和其他HTML元素。
例 (Example)
<a href="#"><img itemprop="image" style="height: 90px;" src="http://www.chatbot.chat/assets/images/header-bg_y.jpg" alt="picture"> </a>例 (Example)
href的更多示例 (Some more examples of href)
<base href="https://www.freecodecamp.org/a-href/">This gives a base url for all further urls on the page</a>
<link href="style.css">This is a live link to an external stylesheet</a>目标实例 (The A Target Example)
The <a target> attribute specifies where to open the linked document in an a (anchor) tag.
的<a target>属性指定在何处打开在所链接的文档a (锚)标签。
Examples:
例子：
A target attribute with the value of “_blank” opens the linked document in a new window or tab.
值为“ _blank”的目标属性会在新窗口或选项卡中打开链接的文档。
<a href="https://www.freecodecamp.org" target="_blank">freeCodeCamp</a>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”的目标属性会在单击链接的同一帧中打开链接的文档(这是默认设置，通常无需指定)。
<a href="https://www.freecodecamp.org" target="_self">freeCodeCamp</a><a href="https://www.freecodecamp.org">freeCodeCamp</a>A target attribute with the value of “_parent” opens the linked document in the parent frame.
值为“ _parent”的目标属性将在父框架中打开链接的文档。
<a href="https://www.freecodecamp.org" target="_parent">freeCodeCamp</a>A target attribute with the value of “_top” opens the linked document in the full body of the window.
值为“ _top”的目标属性将在窗口的整个正文中打开链接的文档。
<a href="https://www.freecodecamp.org" target="_top">freeCodeCamp</a>A target attribute with the value of “framename” Opens the linked document in a specified named frame.
值为“ framename”的目标属性在指定的命名框架中打开链接的文档。
<a href="https://www.freecodecamp.org" target="framename">freeCodeCamp</a>身体背景属性示例 (The Body Background Attribute Example)
If you want to add a background image instead of a color, one solution is the <body background> attribute. It specifies a background image for an HTML document.
如果要添加背景图像而不是颜色，则一种解决方案是<body background>属性。 它为HTML文档指定背景图片。
Syntax:
句法：
<body background="URL">
<body background="URL">
Attribute:
属性：
background - URL for background image
background - URL for background image
Example:
例：
<html><body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png"></body>
</html>身体背景属性已贬值 (body-background attribute is depreciated)
the body-background attribute been deprecated in HTML5. The correct way to style the <body> tag is with CSS.
在HTML5中不推荐使用body-background属性。 设置<body>标签样式的正确方法是使用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 <body bgcolor> attribute assigns a background color for an HTML document.
<body bgcolor>属性为HTML文档分配背景色。
Syntax:
语法 ：
<body bgcolor="color"> The color value can be either a color name (like, purple) or a hex value (like, #af0000).
<body bgcolor="color">颜色值可以是颜色名称(如purple )或十六进制值(如#af0000 )。
To add a background color to a webpage you can use the <body bgcolor="######"> attribute. It specifies a color for the HTML document to display.
要为网页添加背景色，可以使用<body bgcolor="######">属性。 它指定HTML文档显示的颜色。
For example:
例如：
<html><head><title>Body bgcolor Attribute example</title></head><body bgcolor="#afafaf"><h1>This webpage has colored background.</h1></body>
</html>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 <body bgcolor> attribute.
所有主要的浏览器都支持<body bgcolor>属性。
Note:
注意：
HTML 5 does not support the
<body bgcolor>attribute. Use CSS for this purpose. How? By using the following code:<body style="background-color: color">Of course, you can also do it in a separate document instead of an inline method.HTML 5不支持
<body bgcolor>属性。 为此使用CSS。 怎么样？ 通过使用以下代码：<body style="background-color: color">当然，您也可以在单独的文档中代替内联方法来完成此操作。Do not use RGB value in
<body bgcolor>attribute becausergb()is for CSS only, that is, it will not work in HTML.不要在
<body bgcolor>属性中使用RGB值，因为rgb()仅适用于CSS，也就是说，它不适用于HTML。
Div Align属性示例 (The Div Align Attribute Example)
The <div align=""> attribute is used for aligning the text in a div tag to The Left, Right, center or justify.
<div align="">属性用于将div标记中的文本对齐到“左”，“右”，“居中”或“对齐”。
For instance:
例如：
<html>
<head>
<title> Div Align Attribbute </title>
</head>
<body>
<div align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>重要！ (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中居中。
<div align="center">This Text Will Be Centered
</div>**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 <font> tag.
此属性用于为<font>标记中包含的文本设置颜色。
重要： (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:)
- Color name attribute
颜色名称属性
<html><body><font color="green">Font color example using color attribute</font>
</body>
</html>Hex code attribute
十六进制代码属性
<html>
<body>
<font color="#00FF00">Font color example using color attribute</font>
</body>
</html>RGB attribute
RGB属性
<html>
<body>
<font color="rgb(0,255,0)">Font color example using color attribute</font>
</body>
</html>字体大小属性示例 (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 <basefont> element, or relative to 3, the default value, if none does exist.
此属性将字体大小指定为数字值或相对值。 数值范围为1到7其中1为最小值，默认值为3 。 也可以使用相对值来定义它，例如+2或-3 ，将其相对于<basefont>元素的size属性值设置，或者相对于默认值3 (如果不存在的话)进行设置。
Syntax:
句法：
<font size="number">
<font size="number">
Example:
例：
<html><body><font size="6">This is some text!</font></body>
</html>Note : The size attribute of <font> is not supported in HTML5. Use CSS instead.
注意： The size attribute of <font> is not supported in HTML5. Use CSS instead. The size attribute of <font> 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:
例如：
<!DOCTYPE html>
<html lang="en"><head><title>Img Align Attribute</title></head>
<body><p>This is an example. <img src="data:image.png" alt="Image" align="middle"> More text right here<img src="data:image.png" alt="Image" width="100"/></body>
</html>We can also align in right if we want:
如果需要，我们也可以右对齐：
<p>This is another example<img src="data:image.png" alt="Image" align="right"></p>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属性，如下所示：
<!DOCTYPE html>
<html lang="en"><head><title>Img Width Attribute</title></head><body><img src="data:image.png" alt="Image" width="100"/></body>
</html>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 <img src> 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.
<img src>属性引用您要显示的图像的来源。 没有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属性将其设置为图像。
<html><head><title>Img Src Attribute Example</title></head><body><img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400"></body>
</html>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, <img src="data:images/freeCodeCamp.jpeg> would work if you had a folder called imageswhich had the freeCodeCamp.jpeg inside, as long as the ‘images’ folder was in the same location as the index.html file.
例如， <img src="data:images/freeCodeCamp.jpeg>会如果有一个文件夹中称为工作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:
字符实体看起来类似于：
<!-- format &[entity_name]; -->
<!-- example for a less-than sign (<) -->
<Or
要么
<!-- &#[entity_number]; -->
<!-- example for a less-than sign (<) -->
<参考指南 (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 pointHTML表单示例 (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 <form></form> tags, like input, which can have types like:
表单包含包裹在<form></form>标记周围的控制元素，例如input ，其类型可以是：
texttextemailemailpasswordpasswordcheckboxcheckboxradioradiosubmitsubmitrangerangesearchsearchdatedatetimetimeweekweekcolorcolordatalistdatalist
Code example:
代码示例：
<form><label for="username">Username:</label><input type="text" name="username" id="username"><label for="password">Password:</label><input type="password" name="password" id="password"><input type="radio" name="gender" value="male">Male<br><input type="radio" name="gender" value="female">Female<br><input type="radio" name="gender" value="other">Other<input list="Options"><datalist id="Options"><option value="Option1"><option value="Option2"><option value="Option3"></datalist> <input type="submit" value="Submit"><input type="color"><input type="checkbox" name="correct" value="correct">Correct
</form>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<option></option>tag creates drop-down select menu.select-连同<option></option>标记创建下拉选择菜单。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 <form> tag is used to create an HTML form and it has following syntax −
HTML <form>标签用于创建HTML表单，它具有以下语法-
<form action = "Script URL" method = "GET|POST">form elements like input, textarea etc.</form>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)
<audio controls><source src="tutorial.ogg" type="audio/ogg"><source src="tutorial.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>例子2 (Example 2)
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay>
</audio>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 <source> 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 <audio> and </audio> tags may be shown in browser that does not support the HTML5 <audio> element.
<source>元素使您可以指示浏览器可以选择的替代音频文件。 浏览器将使用第一种识别格式。 <audio>和</audio>标记之间的文本可能会在不支持HTML5 <audio>元素的浏览器中显示。
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 <header>, <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.
语义HTML元素以人类和机器可读的方式清楚地描述了它的含义。 诸如<header> ， <footer>和<article>元素都被认为是语义的，因为它们准确地描述了元素的用途以及它们内部内容的类型。
快速历史 (A Quick History)
HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, it’s needs changed. Where the internet was originally inteded for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer. Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the <table></table> to describe information using a table, programmers would use them to position other elements on a page. As the use of visually designed layouts progressed, programmers started to use a generic “non-semantic” tag like <div>. They would often give these elements a class or id attribute to describe their purpose. For example, instead of <header> this was often written as <div class="header">. As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.
HTML最初是作为一种标记语言创建的，用于描述早期Internet上的文档。 随着互联网的发展和越来越多的人采用互联网，它的需求发生了变化。 互联网最初旨在共享科学文档，现在人们也希望共享其他内容。 很快，人们开始希望使网络看起来更好。 因为最初并不是为设计网络而设计的，所以程序员使用不同的技巧来以不同的方式布置事物。 程序员不是使用<table></table>来使用<table></table>来描述信息，而是会使用它们在页面上放置其他元素。 随着视觉设计布局的使用的发展，程序员开始使用通用的“非语义”标记，例如<div> 。 他们通常会给这些元素一个class或id属性来描述它们的目的。 例如，它通常代替<header>编写为<div class="header"> 。 由于HTML5仍然是相对较新的，因此在当今的网站上，非语义元素的这种使用仍然非常普遍。
新语义元素列表 (List of new semantic elements)
The semantic elements added in HTML5 are:
HTML5中添加的语义元素是：
<article><article><aside><aside><details><details><figcaption><figcaption><figure><figure><footer><footer><header><header><main><main><mark><mark><nav><nav><section><section><summary><summary><time><time>
Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act more or less like <div> elements. They group other elements together into page sections. However where a <div> tag could contain any type of information, it is easy to identify what sort of information would go in a semantic <header> region.
诸如<header> ， <nav> ， <section> ， <article> ， <aside>和<footer>类的元素或多或少类似于<div>元素。 他们将其他元素组合到页面部分中。 但是，在<div>标记可以包含任何类型的信息的地方，很容易确定语义<header>区域中将包含哪种信息。
An example of semantic element layout by w3schools
w3schools的语义元素布局示例
语义元素的好处 (Benefits of semantic elements)
To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of code uses semantic elements:
为了查看语义元素的好处，这里有两段HTML代码。 第一部分代码使用语义元素：
<header></header>
<section><article><figure><img><figcaption></figcaption></figure></article>
</section>
<footer></footer>Whilst this second block of code uses non-semantic elements:
尽管第二个代码块使用非语义元素：
<div id="header"></div>
<div class="section"><div class="article"><div class="figure"><img><div class="figcaption"></div></div></div>
</div>
<div id="footer"></div>First, it is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.
首先，它更容易阅读 。 当使用语义元素查看第一段代码时，这可能是您会注意到的第一件事。 这是一个小例子，但是作为程序员，您可以阅读成百上千的代码行。 越容易阅读和理解该代码，就越容易完成工作。
It has greater accessibility. You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.
它具有更大的可访问性 。 您不是唯一发现语义元素更容易理解的人。 搜索引擎和辅助技术(例如视力障碍用户的屏幕阅读器)也可以更好地了解您网站的上下文和内容，从而为用户带来更好的体验。
Overall, semantic elements also lead to more consistent code. When creating a header using non-semantic elements, different programmers might write this as <div class="header">, <div id="header">, <div class="head">, or simply <div>. There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.
总体而言，语义元素还会导致代码更加一致 。 使用非语义元素创建标头时，不同的程序员可能将其写为<div class="header"> ， <div id="header"> ， <div class="head">或简称为<div> 。 创建标题元素的方法有很多，它们都取决于程序员的个人喜好。 通过创建标准语义元素，它使每个人都更容易。
Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” elements. To this day, some of us might still be confused as to why so many different elements that doesn’t seem to show any major changes.
自2014年10月起，HTML4和一些新的“语义”元素已升级为HTML5。 时至今日，我们中的某些人可能仍对为什么这么多不同的元素似乎没有显示出任何重大变化感到困惑。
<section>和<article> (<section> and <article>)
“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation. HTML4 offered only one type of container element, which is <div>. While this is still used in HTML5, HTML5 provided us with <section>and <article> in a way to replace <div>.
您可能会问：“有什么区别？”。 这两个元素都用于分割内容，是的，它们可以互换使用。 这取决于哪种情况。 HTML4仅提供一种容器元素，即<div> 。 尽管在HTML5中仍使用此功能，但HTML5为我们提供了<section>和<article>来代替<div> 。
The <section> and <article> elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:
<section>和<article>元素在概念上相似并且可以互换。 要决定应选择哪种方式，请注意以下几点：
- An article is intended to be independently distributable or reusable.
文章旨在独立分发或可重复使用。 - A section is a thematic grouping of content.
一节是内容的主题分组。
<section><p>Top Stories</p><section><p>News</p><article>Story 1</article><article>Story 2</article><article>Story 3</article></section><section><p>Sport</p><article>Story 1</article><article>Story 2</article><article>Story 3</article></section>
</section><header>和<hgroup> (<header> and <hgroup>)
The <header> element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.
<header>元素通常位于文档，节或文章的顶部，通常包含主要标题以及一些导航和搜索工具。
<header><h1>Company A</h1><ul><li><a href="/home">Home</a></li><li><a href="/about">About</a></li><li><a href="/contact">Contact us</a></li></ul><form target="/search"><input name="q" type="search" /><input type="submit" /></form>
</header>The <hgroup> element should be used where you want a main heading with one or more subheadings.
<hgroup>元素应用于需要一个或多个子标题的主标题的地方。
<hgroup><h1>Heading 1</h1><h2>Subheading 1</h2><h2>Subheading 2</h2>
</hgroup>REMEMBER, that the <header> element can contain any content, but the <hgroup> element can only contain other headers, that is <h1> to <h6> and including <hgroup>.
请记住， <header>元素可以包含任何内容，但是<hgroup>元素只能包含其他标题，即<h1>至<h6>并包括<hgroup> 。
<aside> (<aside>)
The <aside> element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of <aside> as a sidebar to your main content.
<aside>元素用于不属于其出现的文本流的内容，但仍以某种方式相关。 <aside>作为主要内容的侧边栏。
<aside><p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
</aside>Before HTML5, our menus were created with <ul>’s and <li>’s. Now, together with these, we can separate our menu items with a <nav>, for navigation between your pages. You can have any number of <nav> elements on a page, for example, its common to have global navigation across the top (in the <header>) and local navigation in a sidebar (in an <aside> element).
在HTML5之前，我们的菜单是使用<ul>和<li>的。 现在，连同这些，我们可以使用<nav>分隔菜单项，以在页面之间进行导航。 您可以在页面上具有任意数量的<nav>元素，例如，在顶部进行全局导航(在<header> )和在侧栏中进行局部导航(在<aside>元素中)是常见的做法。
<nav><ul><li><a href="/home">Home</a></li><li><a href="/about">About</a></li><li><a href="/contact">Contact us</a></li></ul>
</nav><footer> (<footer>)
If there is a <header> there must be a <footer>. A <footer> is generally found at the bottom of a document, a section, or an article. Just like the <header> the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include <section>elements within a footer.
如果有一个<header>则必须有一个<footer> 。 通常在文档，节或文章的底部找到<footer> 。 就像<header> ，内容通常是元信息，例如作者详细信息，法律信息和/或相关信息的链接。 在页脚中包含<section>元素也是有效的。
<footer>©Company A</footer><small> (<small>)
The <small> element often appears within a <footer> or <aside> element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.
<small>元素通常出现在<footer>或<aside>元素内，该元素通常包含版权信息或法律免责声明以及其他此类精美文字。 但是，这并不是要使文本变小。 它仅是描述其内容，而不是规定演示。
<footer><small>©Company A</small> Date</footer><time> (<time>)
The <time> element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.
<time>元素允许将明确的ISO 8601日期附加到该日期的人类可读版本。
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>Why bother with <time>? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.
为什么要困扰<time> ？ 虽然人类可以正常方式读取可以通过上下文进行歧义的时间，但计算机可以读取ISO 8601日期并查看日期，时间和时区。
<figure>和<figcaption> (<figure> and <figcaption>)
<figure> is for wrapping your image content around it, and <figcaption> is to caption your image.
<figure>用于将图像内容包装在其周围，而<figcaption>用于为图像添加标题。
<figure><img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" /><figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>HTML5视频示例 (HTML5 Video Example)
Before HTML5, in order to have a video play in a webpage you would need to use a plugin, like Adobe Flash Player. With the introduction of HTML5, you can now place it directly into the page itself. The HTML
在HTML5之前，要在网页中播放视频，您需要使用Adobe Flash Player之类的插件。 随着HTML5的引入，您现在可以将其直接放入页面本身。 HTML
To embed video file into web page, just add this code snippet and change the src of audio file.
要将视频文件嵌入到网页中，只需添加此代码段并更改音频文件的src。
<video controls><source src="tutorial.ogg" type="video /ogg"><source src="tutorial.mp4" type="video /mpeg">Your browser does not support the video element. Kindly,update it to latest version.</video >The controls attribute includes video controls, similar to play, pause, and volume.
控件属性包括视频控件，类似于播放，暂停和音量。
This feature is supported by all modern/updated browsers. However, not all support the same video file format. My recommendation for a wide range of compatibilty is MP4, as it is the most widely accepted format. There are also two other formats (WebM and Ogg) that are supported in Chrome, Firefox, and Opera.
所有现代/更新的浏览器均支持此功能。 但是，并非所有人都支持相同的视频文件格式。 对于广泛的兼容性，我的建议是MP4，因为它是最广泛接受的格式。 Chrome，Firefox和Opera还支持其他两种格式(WebM和Ogg)。
The element enables you to indicate alternative video files which the browser may choose from. The browser will utilize the first recognize format. In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.
该元素使您可以指示浏览器可以选择的替代视频文件。 浏览器将使用第一种识别格式。 在HTML5中，支持3种视频格式：MP4，WebM和Ogg。
The text between the tags will only be displayed in browsers that do not support the
标签之间的文本只会在不支持
There are several different elements of the video tag, many of these explanations are based on Mozilla’s web docs (linked below). There are even more if you click the link at the bottom.
video标签有几个不同的元素，其中许多解释都是基于Mozilla的网络文档(在下面链接)。 如果您单击底部的链接，则更多。
自动播放 (autoplay)
“autoplay” can be set to either true or false. You set it to true by adding it into the tag, if it is not present in the tag it is set to false. If set to true, the video will begin playing as soon as enough of the video has buffered for it to be able to play. Many people find autoplaying videos as disruptive or annoying so use this feature sparingly. Also note, that some mobile browsers, such as Safari for iOS, ignore this attribute.
可以将“自动播放”设置为true或false。 您可以通过将其添加到标签中来将其设置为true，如果标签中不存在该标签，则将其设置为false。 如果设置为true，则视频将在有足够的缓冲缓冲后才能开始播放。 许多人认为自动播放视频具有破坏性或烦人性，因此请谨慎使用此功能。 另请注意，某些移动浏览器(例如iOS的Safari)会忽略此属性。
<video autoplay><source src="video.mp4" type="video/mp4"></video>海报 (poster)
The “poster” attribute is the image that shows on the video until the user clicks to play it.
“海报”属性是在视频上显示的图像，直到用户单击播放它为止。
<video poster="poster.png"><source src="video.mp4" type="video/mp4"></video>控制项 (controls)
The “controls” attribute can be set to true or false and will handle whether controls such as the play/pause button or volume slider appear. You set it to true by adding it into the tag, if it is not present in the tag it is set to false.
“ controls”属性可以设置为true或false，并将处理是否出现诸如播放/暂停按钮或音量滑块之类的控件。 您可以通过将其添加到标签中来将其设置为true，如果标签中不存在该标签，则将其设置为false。
<video controls><source src="video.mp4" type="video/mp4"></video>There are many more attributes that can be added that are optional to customize the videoplayer in the page. To learn more, click on the links below.
您可以添加更多可选属性，以自定义页面中的视频播放器。 要了解更多信息，请单击下面的链接。
HTML5 Web存储示例 (HTML5 Web Storage Example)
Web storage allows web applications to store up to 5MB of information in browser storage per origin (per domain and protocol).
Web存储允许Web应用程序按来源(按域和协议)在浏览器存储中存储多达5MB的信息。
Web存储的类型 (Types of Web Storage)
There are two objects for storing data on the client:
有两个用于在客户端上存储数据的对象：
window.localStorage: stores data with no expiration date and lives until removed.
window.localStorage ：存储没有到期日期的数据，并且在删除之前一直存在。
// Store Item
localStorage.setItem("foo", "bar");// Get Item
localStorage.getItem("foo"); //returns "bar"window.sessionStorage: stores data for one session, where data is lost when the browser / browser tab is closed.
window.sessionStorage ：存储一个会话的数据，当关闭浏览器/浏览器选项卡时，数据将丢失。
// Store Item
sessionStorage.setItem("foo", "bar");// Get Item
sessionStorage.getItem("foo"); //returns "bar"Since the current implementation only supports string-to-string mappings, you need to serialize and de-serialize other data structures.
由于当前的实现仅支持字符串到字符串的映射，因此您需要对其他数据结构进行序列化和反序列化。
You can do so using JSON.stringify() and JSON.parse().
您可以使用JSON.stringify()和JSON.parse()来实现。
For e.g. for the given JSON
例如对于给定的JSON
var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };We first convert the JSON object to string and save in the local storage:
我们首先将JSON对象转换为字符串并保存在本地存储中：
localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));To get the JSON object from the string stored in local storage:
要从本地存储中存储的字符串获取JSON对象，请执行以下操作：
var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));Mailto链接示例 (Mailto Links Example)
A mailto link is a kind of hyperlink (<a href=""></a>) with special parameters that lets you specify additional recipients, a subject line, and/or a body text.
mailto链接是一种带有特殊参数的超链接( <a href=""></a> )，可用于指定其他收件人，主题行和/或正文。
收件人的基本语法是： (The basic syntax with a recipient is:)
<a href="mailto:friend@something.com">Some text</a>更多定制！ (More customization!)
在该邮件中添加一个主题： (Adding a subject to that mail:)
If you want to add a specific subject to that mail, be careful to add %20 or + everywhere there’s a space in the subject line. An easy way to ensure that it is properly formatted is to use a URL Decoder / Encoder.
如果要为该邮件添加特定主题，请小心在主题行中有空格的地方添加%20或+ 。 一种确保格式正确的简单方法是使用URL解码器/编码器 。
添加正文： (Adding body text:)
Similarly, you can add a specific message in the body portion of the email: Again, spaces have to be replaced by %20 or +. After the subject paramater, any additional parameter must be preceded by &
同样，您可以在电子邮件的正文部分添加特定的消息：同样，必须用%20或+代替空格。 在主题参数之后，任何其他参数都必须在&之前
Example: Say you want users to send an email to their friends about their progress at Free Code Camp:
示例：假设您希望用户向朋友发送有关其在Free Code Camp上的进度的电子邮件：
Address: empty
地址：空
Subject: Great news
主题：好消息
Body: I am becoming a developer
正文：我正在成为一名开发人员
Your html link now:
您的html链接现在：
<a href="mailto:?subject=Great%20news&body=I%20am%20becoming%20a%20developer">Send mail!</a>Here, we’ve left mailto empty (mailto:?). This will open the user’s email client and the user will add the recipient address themselves.
在这里，我们将mailto留空(mailto :?)。 这将打开用户的电子邮件客户端，并且用户将自己添加收件人地址。
添加更多收件人： (Adding more recipients:)
In the same manner, you can add CC and bcc parameters. Seperate each address by a comma!
以相同的方式，您可以添加CC和bcc参数。 用逗号分隔每个地址！
Additional parameters must be preceded by &.
附加参数必须在&之前。
<a href="mailto:firstfriend@something.com?subject=Great%20news&cc=secondfriend@something.com,thirdfriend@something.com&bcc=fourthfriend@something.com">Send mail!</a>感谢您使用此HTML参考。 编码愉快！ (Thank you for using this HTML reference. Happy coding!)
翻译自: https://www.freecodecamp.org/news/html-and-html5-example/
html代码范例
html代码范例_最佳HTML范例和HTML5范例相关推荐
- python范例_最佳Python代码范例
python范例 Python is a general purpose programming language which is dynamically typed, interpreted, a ...
- 优秀ppt作品范例_毕业论文答辩ppt模板优秀范例
毕业论文答辩ppt模板优秀范例 这是一套简约风格的PPT模板素材,共25页.PPT封面以两位大学生模样的年轻人正在查看各个领域的商业资讯,开展符合自己论文答辩的各项实践活动,黑色正体字突出主题:XX大 ...
- matlab编程范例_编程范例到底是什么？
matlab编程范例 Any fool can write code that a computer can understand. Good programmers write code that ...
- 软件需求文档范例_【设计API系列】 一文了解常见的事件驱动APIs范例
最近几年, 很多种API范例涌现出来,目前比较流行的标准如REST, RPC, GraphQL, WebHooks 以及WebSockets等.但是大家大家真的对每一种都很了解吗?什么场景下适合用哪种 ...
- 手把手教你用Keras进行多标签分类（附代码）_数据派THU-CSDN博客 (翻译：程思衍校对：付宇帅)
手把手教你用Keras进行多标签分类(附代码)_数据派THU-CSDN博客 手把手教你用Keras进行多标签分类(附代码)_数据派THU-CSDN博客
- 最佳实践系列：前端代码标准和最佳实践
最佳实践系列:前端代码标准 @窝窝商城前端(刘轶/李晨/徐利/穆尚)翻译于2012年 版本0.55 @郑昀校对 isobar的这个前端代码标准和最佳实践文档,涵盖了Web应用开发的方方面面,我们翻译了 ...
- Html代码seo优化最佳布局实例讲解
搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步.一个符合seo规则的代码大体如下界面所示. 1.<!–木庄网络博客–> 这个东西是些页面注释的,可以在这里加我的& ...
- java 静态代码块_关于Java你不知道的那些事之代码块
前言 普通代码块:在方法或语句中出现的{},就被称为代码块 静态代码块:静态代码块有且仅加载一次,也就是在这个类被加载至内存的时候 普通代码块和一般语句执行顺序由他们在代码中出现的次序决定,先出现先执 ...
- git拉取tag代码_10年经验17张图带你进入gitflow企业项目代码版本管理的最佳实践...
前言 对于项目版本管理,你是否存在这样的痛点:项目分支多而杂不好管理,git log界面commit信息错乱复杂无规范,版本回退不知道选择什么版本合适--. 项目版本管理的最佳实践系列,笔者将以两篇文 ...
最新文章
- canvas 闭合_想使用SVG或者canvas 手绘闭合多边形，使用vml效果已经实现了，由于vml只能支持ie所以想转成SVG或canvas...
- 使用开源的驰骋表单设计器设计表单案例演示
- CCNA-第七篇-思科私有路由协议-EIGRP-初级
- Linux的一些简单的常用命令
- InfoPath 发布表单到SharePoint库报错
- Python数据分析与可视化（1）——Python数据分析与可视化
- 微信编辑器有哪些呢？
- natapp 使用教程
- ubuntu无法定位软件包的问题
- got-10k数据预处理
- 时间格式2020-01-13T16:00:00.000Z中的T和Z分别表示什么,如何处理
- RGB三通道图像和灰度值简单理解
- PHP 处理苹果内购二次验证
- python代码调试工具_我猜你需要这个Python调试工具
- 旋转编码器怎么调零点？
- 后端---最全最简单细致的Java接入微信支付接口（Native接入）
- [经济管理]《余世维-有效沟通II》VOB AVI双版本下载及我的笔记
- rocketmq 远程连_RocketMQ-单机版安装及远程连接测试
- [转贴]eclipse和netbeans的区别
- java 手电筒_《SystemUI》限制低电量打开手电筒