HTML5基础 - 蓝桥云课

实验一 HTML5基础

添加 html5 文档类型声明

<!DOCTYPE html>
<html></html>
copy

文档类型声明<!DOCTYPE>是强制使用的，必须位于文档首行。
<html>与</html>标签定义了文档的开始和结束。
2.添加<head>和<body>标签

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        Hello World!
    </body>
</html>
copy

文档由头部和主体组成，文档的头部由<head>标签定义，主体由<body>标签定义。
图片描述
3. 头部元素： <title>标签

        <head>
            <title>HTML Reference</title>
        </head>
copy

<title>标记在所有 HTML 文档中都是必需的，它定义了文档的标题。
<title>元素：

在浏览器工具栏中定义标题；
将页面添加到收藏夹时为其提供标题；
在搜索引擎结果中显示页面标题；
<meta>标签：

定义搜索引擎的关键字：

<meta name="keywords" content="HTML,CSS,JavaScript" />
copy

定义网页描述：

<meta name="desription" content="Free Web tutorials for HTML and CSS" />
copy

定义页面的作者：

          <meta name="author" content="John Doe" />
copy

每 30 秒刷新一次文档：

<meta http-equiv="refresh" content="30" />
copy

设置视口：
```
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
copy
```
width = device-width部分将页面的宽度设置为跟随设备的屏幕宽度。
initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。

<meta>标签数据是有关数据的数据。
<meta>标记始终位于<head>元素内，并且它们提供有关 HTML 文档的元数据。
<meta>标记通常用于指定字符集，页面描述，关键字，文档的作者和视口设置。

<header>标签

<article>
 <header>
     <h1>Most important heading here</h1>
     <h2>Less important heading here</h2>
     <p>Some additional information here</p>
     </header>
     <p>Lorem Ipsum dolor set amet....</p>
</article>
copy

<header>元素表示介绍性内容或一组导航链接的容器。
<header>元素通常包含：

一个或多个标题元素;
徽标或图标;
作者信息；
一个文档中可以包含多个<header>元素。
<header>标记不能放在<footer>，<address>或另一个<header>元素内。

<nav>标签

<nav>
  <a href="/html/">HTML</a> | <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>
copy

定义了一组导航链接，并非文档的所有链接都应在<nav>元素内。<nav>元素仅用于主要的导航链接块。
图片描述

<article>标签

<article>
 <h2>Microsoft Edge</h2>

 <p>
      Microsoft Edge is a web browser developed by Microsoft,released in 2015,
      Microsoft Edge replaced Internet Explorer.
 </p>
</article>
copy

指定独立的，独立的内容。
图片描述

<section>标签
```
<section>
 <h2>WWF</h2>
 <p>The World Wide Fund for Nature (WWF) is....</p>
</section>
copy
```
定义文档中的各个部分，例如章节，页眉，页脚或文档的任何其他部分。

<aside>标签

<p>
     My family and I visited The Epcot center this summer. The weather was nice,
     and Epcot was amazing! I had a great summer together with my family!
 </p>

 <aside>
     <h4>Epcot Center</h4>
     <p>
         Epcot is a theme park at Walt Disney World Resort featuring exciting
         attractions, international pavilions, award-winning fireworks and seasonal
         special events.
     </p>
 </aside>
copy

定义了放置内容以外的内容。
图片描述

<footer>标签

<footer>
     <p>Posted by:Hege Refsnes</p>
     <p>
         Contact information:
         <a href="mailto:someone@example.com"> someone@example.com</a>.
     </p>
 </footer>
copy

定义文档或节的页脚。
<footer>元素通常包含：

作者信息
版权信息
联系信息
网站地图
回到顶部链接
相关文件
一个文档中可以包含多个<footer>元素。

<details>和<summary>标签

<details>
    <summary>Copyright 1999-2018.</summary>
    <p>- by Refsnes Data. ALL Rights Reserved.</p>
    <p>
        All content and graphics on this web site are the property of the company
        Refsnes Data.
    </p>
</details>
copy

<details>标签：指定用户可以按需查看或隐藏的其他详细信息。
<summary>标签：为<details>元素定义了可见的标题。可以单击标题以查看/隐藏详细信息。
图片描述

<div>标签

<div style="background-color:lightblue">
    <h3>This is a heading</h3>
    <p>This is a paragraph</p>
</div>
copy

定义HTML文档中的分区或部分。
图片描述

<span>标签

<p>My mother has <span style="color:blue">blue</span> eyes</p>
copy

定义文本颜色.
图片描述

html5基础标签
<h1>-<h6>标签

  <h1>This is heading 1</h1>
  <h2>This is heading 2</h2>
  <h3>This is heading 3</h3>
  <h4>This is heading 4</h4>
  <h5>This is heading 5</h5>
  <h6>This is heading 6</h6>
copy

<h1>到<h6>标记用于定义 HTML 标题。
<h1>定义最重要的标题。 <h6>定义最不重要的标题。
图片描述

<p>标签
<p>This is some text in a paragraph.</p>
定义一个段落。
图片描述

<br>标签

<p>
 TO force<br />
 line breaks<br />
 in a text,<br />
 use the br<br />
 element.
</p>
copy

插入了一个换行符。
图片描述

<hr>标签

<h1>HTML</h1>
<P>HTML is a language for describing web pages.....</P>

<hr />

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</P>
copy

定义 HTML 页面中的主题中断。
图片描述

注释标签

      <!--This is a comment. Comments are not displayed in the browser-->
      <p>This is a paragraph.</p>
copy

comment 标签用于在源代码中插入注释。注释不会显示在浏览器中。
图片描述
14. html5 格式化标签
文本格式化标签

    <p>This text contains <sub>subscript</sub> text.</p>
    <p>This text contains <sup>superscript</sup> text.</p>
    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

    <p>
            To learn AJAX, you must be familiar with the XML<wbr />Http<wbr />Request
            Object.
    </p>

    <pre>
    
    Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both      spaces and
    line breaks
    </pre>
copy

图片描述

引用和术语定义标签

    The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

    <address>
        Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br />
        Visit us at:<br />
        Example.com<br />
        Box 564, Disneyland<br />
        USA
    </address>

    <bdo dir="rtl">
        This text will go right-to-left.
    </bdo>

    <blockquote cite="http://www.worldwildlife.org/who/index.html">
      For 50 years, WWF has been protecting the future of nature. The world's
      leading conservation organization, WWF works in 100 countries and is supported
      by 1.2 million members in the United States and close to 5 million globally.
    </blockquote>

    <p>
        WWF's goal is to:
        <q>Build a future where people live in harmony with nature.</q>
        We hope they succeed.
</p>
copy

图片描述
15.html5列表
有序列表

        <ol>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>

        <ol start="50">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
copy

<ol>标记定义一个有序列表。有序列表可以是数字或字母。
使用<li>标记定义列表项。
图片描述

无序列表

          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
copy

<ul>标记定义了无序列表（项目符号）。
图片描述

定义列表

            <dl>
                <dt>Coffee</dt>
                <dd>Black hot drirk</dd>
                <dt>Milk</dt>
                <dd>White cold drink</dd>
            </dl>
copy

<dl>标记定义描述列表。
图片描述
16.html5超链接
<a>标签

<a href="https://www.bing.com">Visit Bing!</a>
copy

如果<a>标记没有href属性，则它只是超链接的占位符。
如果href属性不存在，则不会显示以下属性：download，hreflang，media，rel，target和type。
图片描述
17.html5多媒体
<img>标签

<img
       src="https://pic1.zhimg.com/v2-e327160ba23d1bc7c457b63798b85a69_1200x500.jpg"
       alt="Smiley face"
       height="420"
 />
copy

<img>标记在 HTML 页面中定义图像。<img>标记具有两个必需的属性：src和alt。
图片描述

<audio>标签

<audio controls>
        <source src="horse.ogg" type="audio/ogg"/>
        <source src="horse.mp3" type="audio/mpeg"/>
        Your browser does not support the audio tag.
</audio>
copy

定义声音
图片描述

<video>标签

<video width="320" height="240" controls>
        <sourse src="movie.mp4" type="video/mp4" />
        <sourse src="movie.ogg" type="video/ogg" />
        Your browser does not support the video tag.
</video>
copy

指定视频
图片描述

“Web开发基础”实验报告