HTML02

最新推荐文章于 2024-10-10 11:15:29 发布

LongMidnight

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量68

点赞数

分类专栏： Web Developer Camp 文章标签： html

本文链接：https://blog.csdn.net/qq_34466250/article/details/117264833

版权

Web Developer Camp 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML5是HTML的最新版本，引入了语义元素如<header>、<main>、<section>等，提升了内容描述的精确性。它还包含离线存储、多媒体支持、设备访问等功能，增强了网页的交互性和性能。此外，Emmet等工具为开发者提供了更高效的编码方式。HTML5的语义标记使得代码更易读，对视障人士更友好。

摘要由CSDN通过智能技术生成

HTML5

HTML5是定义HTML的标准的最新版本，是一个书写范式，描述如何实现功能，而浏览器实现描述。代表了两个不同的概念：它是HTML语言的一个新版本，具有新的元素、属性和行为，以及一套更大的技术，允许建立更多样化和更强大的网站和应用程序。

技术不是html的element：

Semantics: allowing you to describe more precisely what your content is.
Connectivity: allowing you to communicate with the server in new and innovative ways.
Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.
Multimedia: making video and audio first-class citizens in the Open Web.
2D/3D graphics and effects: allowing a much more diverse range of presentation options.
Performance and integration: providing greater speed optimization and better usage of computer hardware.
Device access: allowing for the usage of various input and output devices.
Styling: letting authors write more sophisticated themes.

Inline 和 Block element、Divs 和 Spans

Block element：head和paragraph

Inline element：anchor tag

div：（block element类型）内容的通用容器，将内容放置在一个组内

<div class="warning">
    <img src="/media/examples/leopard.jpg"
         alt="An intimidating leopard.">
    <p>Beware of the leopard</p>
</div>

span:（inline element类型）内容的通用容器，将内容放置在一个组内，后可用css风格化

<p>Add the <span class="ingredient">basil</span>, <span class="ingredient">pine nuts</span> and <span class="ingredient">garlic</span> to a blender and blend into a paste.</p>

<p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>

hr, br, sub, sup

hr: horizontal rule element

在这里插入图片描述

br: line break element

在这里插入图片描述

sub: subscript element

在这里插入图片描述

sup: The Superscript element

在这里插入图片描述

Entity Codes

特殊符号的输入&#8513:

在这里插入图片描述

<h1>1 &lt; 6 </h1> /// 1<6

查阅entitycode.com

语义标记（semetic markup）

不同

semetic relating to meaning

non-semetic：很多无意义的div

在这里插入图片描述

semetic：出现了main元素，告诉浏览器这是主要内容，还有section，nav（navigation），footer，以上充当div，但有自己的名字

在这里插入图片描述

语义标记让代码更加有可读性，方便视障人士读取内容

用法

和div相比，没加新的特性

main：页面的主要内容

nav：提供导航的内容

section：单独的一片内容

article：代表文档，页面，应用程序或站点中的独立组件

在这里插入图片描述

aside：文档的一部分，其内容仅与文档的主要内容间接相关。

在这里插入图片描述

header和footer：头和尾

time：

<time datetime="2018-07-07">July 7</time>

figure:

在这里插入图片描述

vscode tip： emmet

Emmet

div>ul>li

div+p+bq

ul>li*5

ul>li.item$*5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>