暑期学习记录05

最新推荐文章于 2021-07-28 15:36:27 发布

原创最新推荐文章于 2021-07-28 15:36:27 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #编码 #语言

学习笔记专栏收录该内容

35 篇文章

订阅专栏

html

基本格式

<!DOCTYPE html>
<html lang="en">#lang 属性规定元素内容的语言。
<head>
     <meta charster="UTF-8"/>#声明文档对应的字符编码，UTF-8适用面最广很少需要其他编码
     <title></title>
</head>
<body>


</body>
</html>

HTML lang 属性
HTML 全局属性所有浏览器均支持 lang 属性。
定义和用法

lang 属性规定元素内容的语言。

注释：lang 属性在以下标签中无效：

<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>

理解html5的文档大纲

推荐使用如下方法：

<!DOCTYPE html>
<html lang="language-code">
<head>
     <meta charster="UTF-8"/>
     <title></title>
</head>
<body>
<article>
    <h1>product user guide</h1>
    <section>
         <h2>setting it up</h2>
    </section>

    <section>
         <h2>basic feature</h2>
         <section>
             <h3>video playback</h3>
         </section>
     </section>

     <section>
         <h2>advanced feature</h2>
     </section>
</body>
</html>

查看html大纲

这里写图片描述

nav标签：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charster="UTF-8"/>
     <title></title>
</head>
<body>
<header>
     <nav>
       <ul>
          <li><a href="#gaudi">Barelona's Architect</a></li>
          <li lang="es"><a href="#sagrada-familia">La Sagrada Familia</a></li>
          <li><a href="#park-guell">Park Guell</a></li>
       </ul>
     </nav>
</header> 
</body>
</html>

这里写图片描述
ui标记为无序列表，如果链接顺序比较重要，标记为ol结构。

article标签：
内容可以包含任意数量的元素，类型包括段落，列表，音频，视频，图像，图形等
article是四个分块内容元素中的一个，其他三个是nav（将一组连接指定为重要导航），section，aside。
article不能嵌套在address元素中。

aside标签：
输入侧栏的内容，尽管用法标记侧栏内容，但元素本身并不影响页面的布局。
如果在侧栏中使用一个或多个aside，在html中将他们放在主要内容的后面。
html5中不允许aside嵌套在address中。

footer标签：
footer元素代表嵌套它的最近的元素的页脚，只有当它最近的祖先是body时，它才是整个页面的页脚。

title元素与title属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Adding the Title Attribute to Elements</title>   
</head>
<body>
    <header role="banner">
        <nav role="navigation">
            <ul id="toc" title="Table of Contents">
                <li><a href="#gaudi" title="Learn about Antoni Gaudí">Barcelona's Architect</a></li>
                <li><a href="#sagrada-familia" lang="es">La Sagrada Família</a></li>
                <li><a href="#park-guell">Park Guell</a></li>
            </ul>
        </nav>
    </header>

    <p>... [rest of page] ...</p>
</body> 
</html>