HTML5 笔记

最新推荐文章于 2024-11-16 17:02:51 发布

qwert_01

最新推荐文章于 2024-11-16 17:02:51 发布

阅读量587

点赞数

分类专栏： Web programming 文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_47154327/article/details/125546596

版权

Web programming 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5 文档的基本结构：

<!doctype html>
<html lang="en"> 
<html>
    <head>
        <meta charset="utf-8">
        <title>Web example</title>
    </head>
    <body>
        <p>Hello, world!</p>
    </body>
</html>

<!doctype html>: 通知浏览器您正在处理 HTML 文档。

<html lang="es"> ... </html>: 使用 lang 属性，指定文档的语言（“en”、“fr”等）。 html 包含两个元素：head 和 body 元素。

<head>... </head>：将包含文档的元数据集（标题、有关样式和连字符的信息等）。

<!--另外一个例子-->
<!DOCTYPE HTML>
<HTML lang="en">

    <HEAD>
    <META CHARSET="UTF-8">
    <BASE HREF="http://www.example.es/">
    <TITLE>A document with a large header</TITLE>
    <!--style file (CSS file)-->
    <LINK REL="STYLESHEET" HREF="example.css">
    <!--javaScript file-->
    <SCRIPT SRC="example.js"></SCRIPT>
    <META NAME="APPLICATION-NAME" CONTENT="example 2">
    <META NAME="AUTHOR" CONTENT="Z07">
    <META NAME="DESCRIPTION" CONTENT="TEST DOCUMENT">
    </HEAD>
    <BODY>
    ...

HTML5的通用属性:

id	规定元素的唯一 id。
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名（classname）。
hidden	hidden 属性规定对元素进行隐藏。
lang	设置元素中内容的语言代码。
style	规定元素的行内样式（inline style）。
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）。

HTML5标签：

图片标签：

img 元素负责在 HTML 文档中包含图像（jpg、png 和 gif），包含图像的文件是通过将其名称（以及，如果需要的话，它的路径）指定给 src 。alt 属性用于分配描述图像的文本。

<img src="photography.png" alt="Photograph of the web team"/>

链接标签：

这种类型的 HTML 元素的用途是能够从一个页面导航到另一个页面，尽管也可以链接许多其它对象，例如图像、pdf 文档、视频等）。

<a href="example.html">HOME</a>

也可以使用图像而不是上述文本来创建链接：

<a href="www.example.es/html5-tutorial/next.html"> 
    <img src="fnext.jpg" alt = "next"/>
</a>

它也可以链接到电子邮件，这样在选择链接时会出现电子邮件消息的编辑器：

<a href="mailto:xxxxx@qq.com">Contact</a>

或者到电话号码，启动应用程序来拨打电话：

<a href="tel:6666666666">Telephone</a>

表格标签：

<!DOCTYPE html> 
<html>
    <body>
        <table border="1" summary="This table gives us an example of how to build them in HTML"> 
        <caption>table title – caption</caption>
        <thead>
            <tr>
                <th rowspan="2">multirow header - thead/tr/th - rowspan example</th> 
                <th colspan="2">multicolumn header - thead/tr/th colspan example</th>
            </tr> 
            <tr>
                <th>Column header 1 – tr/th</th>
                <th>Column header 2 - tr/th</th> 
            </tr>
        </thead>
        <tfoot> 
            <tr>
                <td colspan="3">This is an example of a table footer - tfoot and colspan example</td> 
            </tr>
        </tfoot> 
        <tbody>
            <tr>
                <th>Row 1 – tr/th</th>
                <td>Row 1 - Column 1 – tr/td</td> 
                <td>Row 1 - Column 2 - tr/td </td>
            </tr> 
            <tr>
                <th>Row2 - tr/th </th>
                <td>Row2 - Column 1 – tr/td</td> 
                <td>row 2 - Column 2 – tr/td</td>
            </tr> 
        </tbody>
        </table> 
    </body>
</html>

列表标签：

具有编号的序列

<ol>
    <li> ítem 1</li>
    <li> ítem 2</li>
    <li value="33"> ítem 32</li> 
</ol>

普通列表

<ul>
    <li> un ítem </li>
    <li> otro ítem </li>
    <li> y uno final</li> 
</ul>

语义标签：

标题 Headline: 标题有六级，从 h1 到 h6（<h1> Chapter 1 </h1>）。

<h1> Chapter 1 </h1>
<h2> Chapter 1 </h2>
<h3> Chapter 1 </h3>
<h4> Chapter 1 </h4>
<h5> Chapter 1 </h5>
<h6> Chapter 1 </h6>

header: 规定文档或节的页眉，文档标题，包含介绍性内容（标题、徽标、菜单等）。

<header>内容</header>

页脚 footer:

<footer> 页脚内容 </footer>

导航区域 (nav) :

<header>
    <img src="images/logo.jpg" /> 
    <nav>
        <ul>
            <li><a href="home.html">HOME</a></li> 
            <li><a href="products.html">Products</a></li> 
            <li><a href="services.html">Services</a></li> 
            <li><a href="about.htm">About us</a></li>
        </ul> 
    </nav>
</header>

Main:

<!DOCTYPE html> 
<html>
    <head>
        <title>Main usage Example <title>
    </head> 
    <body>
        <header>Headboard:
        <nav>
            <ul>
                <li><a href="link1.html">Link1</a></li> 
                <li><a href="link2.html">Link2</a></li>
            </ul> 
        </nav>
    </header> 
    <main>
        <h1>Parts of the main content</h1>
        <nav>
            <ul>
                <li><a href="#part1">Part 1</a></li>
                <li><a href="#part2">Part 2</a></li> 
            </ul>
        </nav>

        <H2 id="part1">Part1</H2>
        <p>Here is the content of part 1</p> 
        <!-- ... -->
        
        <H2 id="part2">Part2</H2>
        <p>Here is the content of part 2</p> 
        <!-- ... -->
        
        <h2 id="part2">Part 2</h2>
    </main>
    <footer> 
        Copyright 2019 zlq
    </footer> 
    </body>
</html>

Sections: 它们用于对具有相似语义的内容进行分组，定义文档的节。

<section>
    <h1>HTML5</h1>
    <p>HTML5 se emplea para estructurar contenido en la web.</p>
</section> 
<section>
    <h1>CSS3</h1>
    <p>CSS3 is aimed at the design part of the web.</p> 
</section>

Article：

<section> 
    <h1>HTML5</h1> 
    <article>
        <h2>Html5 tags</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit aenean curae sem, libero fermentum proin ultricies mus himen</p>
    </article> 
    <article>
        <h2> HTML3</h2>
        ... 
    </article>
</section> 
<section>
    <h1>Internacional</h1> 
    <article>
        <h2> HTML5</h2> 
        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit aenean curae sem, libero fermentum proin ultricies mus himen</p>
    </article> 
</section>

“侧面”（aside）:

<aside>Links of interest... </aside>

文本块:

blockquote标记允许指示以段落的文本是从另一个来源引用的：

<blockquote> Lorem ipsum dolor sit amet consectetur adipiscing elit aenean curae sem, libero fermentum proin ultricies mus himena</blockquote>

<p> original phrase of <cite> Lorem ipsum </cite> </p>
<!-- or -->
<blockquote> Lorem ipsum dolor sit amet consectetur adipiscing elit aenean curae sem <cite> Lorem ipsum </cite> </blockquote>
<!-- or it can also be inserted as an attribute of blockquote -->
<blockquote cite=”Lorem ipsum”>Lorem ipsum dolor sit amet consectetur adipiscing elit aenean curae sem </blockquote>

*尊重空格、制表符、换行符等。使用 pre 元素，当要显示编程语言的源代码时（结合 code.

<pre> 
    <code>
        % Code in Matlab. 
            for i=1:3:100
                m(i,:)= 5* m(i,:); 
            end
    </code> 
</pre>

headline grouping:

<hgroup> 
    <h1>HTML5</h1>
    <h2>A general vision</h2> 
</hgroup>

其他语义标签：

address 地址标签:

<address> C/Plaza de Tiananmén，Beijing, China</address>

定义 (dfn):

<p> <dfn>鸟</dfn>
niǎo 
脊椎动物的一纲，温血卵生，全身有羽毛，后肢能行走，前肢变为翅，一般能飞：鸟类。候鸟。益鸟。鸟语花香。  <br/> -- 新华字典
</p>

定义列表：

<dl>
    <dt>狗</dt>
    <dd>哺乳动物，种类很多，听觉嗅觉都很敏锐，。。。</dd> 
    <dt>猫</dt>
    <dd>哺乳动物，面呈圆形，脚有利爪，行动敏捷，。。。</dd>
</dl>

details：

<details>
    <summary>Copyright 2022 zlq</summary>
    <p> - 计算机科学与人工智能系</p>
    <p> 本网站上的所有内容均为 CCIA </p> 
</details>

缩写：

<p> my computer has 6 <abbr title="Gigabytes">GB</abbr>
memory <abbr title="Random Access Memory">RAM</abbr>.</p>

strong：

<p> The most remarkable thing about the application is its ability to <strong> learn from data </strong> .</p>

emphasis (em)：

<p><em> people </em> are also animals.</p>

媒体标签：

figure：

<figure>
    <img src = "example.jpg" alt = "figure example" /> 
    <figcaption>Explanatory text of the figure.</figcaption>
</figure>

audio:

<audio src="NewYork.mp3" controls>
    <a href = "NewYork.mp3"> New York, New York</a>
</audio>

audio 属性：

autoplay	浏览器加载文档的那一刻，将播放音频
controls	显示一个简单的音频播放器
preload	当页面在浏览器中加载时，音频文件将开始加载到内存中，但不会开始播放。
src	文件地址

<!--Alternatively to the src attribute, the source element is used, which can be used with the audio and video elements-->
<audio>
    <source src= "song1.mp3" > 
    <source src= "song2.mp3">
</audio>

video:

<video src="NewYork.mp4" controls>
    Your browser does not support the video element.
</video>

表单标签：

action: 它用于指定在获取所有输入并单击提交按钮后将表单数据发送到何处。

<form action="example.php">
...
</form>

method: 指将用于提交表单数据的 HTTP 方法的类型。 get 和 post。

<form action="example.php" method="get">
...
</form>

name: 表单标题

autocomplete：取值 ON 或 OFF 并用于指示激活或不激活表单自动完成。

The drop down lists：

<form action="process.php" method="post">
    <label for="list1">Drop down list </label> 
    <select id = "list1" >
        <option value = "1">One</option> 
        <option value = "2">Two</option> 
        <option value = "3">Three</option> 
        <option value = "4">four</option>
    </select>
</form>

Radio buttons:

<form action="process.php" method="post">
    <input type = "radio" id = "radiobutton1" name="menu" value = "eggs" checked />                                
    <input type = "radio" id = "radiobutton2" name="menu" value = "milk" />
    <input type = "radio" id = "radiobutton3" name="menu" value = "water" />
</form>