HTML5

作者: 败于化纤 | 来源:发表于2022-10-30 19:27 被阅读0次

    单词

    • 四种读音:[ i : ] [ e ] [ ae ] (ai)
    • Exercise:练习
    • meta : 元
    • Viewport:视点,视口
    • scale:n.天平,秤,磅秤; 天平盘
    • main :主要的。
    • container:容器

    1.<!DOCTYPE > 定义文档类型

    • DOC :英文document的意思,翻译为文档
    • TYPE : 翻译为类型
      任何一个网页都必须再第一行声明文档类型。且必须是 HTML 文档的第一行,位于 <html> 标签之前。

    用法:

    h3

    <html>
    </html>
    

    h4

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    </html>
    

    h5

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

    2.<html></html>

    定义:定义一个HTML文档

    3.<head></head>

    定义:定义一个HTML文档的头部区域(次要的区域)

    • 不是给人看的,给用户代理看
    • 给搜索引擎看。

    4.<meta/>标签

    meta : 定义页面的原信息。(描述有关页面信息的元信息)
    用法:

    • <meta/>标签位于文档的头部
    • <meta/>是一个单标签
    • <meta/>采用“名值对”形式定义元信息。
      语法:
    <meta name="" content=""/>
    

    常见的meta设置:

    字符集:字符集(Character Set)是多个字符的集合,字符集种类较多,每个字符集包含的字符个数不同,常见字符集有:

    • ASCII字符集
    • GBK字符集
    • Unicode(UTF-8)字符集等。

     <meta charset="utf-8">
    

    页面描述:为搜索引擎设置的

     <meta name="description" content="简书是一个优质的创作社区,在这里,你可以任性地创作,一篇短文、一张照片、一首诗、一幅画……我们相信,每个人都是生活中的艺术家,有着无穷的创造力。">
    

    页面关键字:为搜索引擎设置的

        <meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">
    

    视口:

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    

    元信息:计算机名词
    元信息是描述信息的信息,元信息允许服务器提供所发送数据的信息,如HTTP可以提高所发的对象语言和对象,也可以用元信息来实现有条件请求以及报告事务完成。收到数据的浏览器可以根据元信息确定服务器发来的是什么内容,预料有什么数据,确知是否接收完整的数据,以及过程中是否出错,这样客户就可以知道传输对象的类型。

    5.<tilte></tilte>

    定义:定义HTML文档标题

    6.<link/>

    定义:定义当前网页文档与外部资源的关系。

    • 外部资源:可以是css文件,也可以是图片。
      -收藏夹图标:favourite icon的缩写,表示图标的意思

    用法:

    1.使用<link>关联外部的css文件
    <link rel="stylesheet" hret="css外部文件"/>
    
    2.使用<link>管理icon图标
     <link rel="stylesheet"   href="icon-"  sizes="72x72" />
    

    sizes:设置图片大小

    7. <script> </script>

    定义:定义客户端脚本。如:JavaScript

    • 客户端:指访问网站的用户的浏览器
    • 脚本:目前使用率最高的是js (其他:ActionScript , VBScript)
      用法1:引入外部脚本文件
    <script src = "脚本文件路径"></script>
    

    用法2:创建脚本区域

    <head>
    <script></script>
    </head>
    

    8.<body></body>

    定义:定义文档的主体

    • 主体:给用户看的全部放在body里面。
    • 文档次要的部分:<head>
      用法:
    • 一个HTML文档只能有一个。

    9.<header></header> h5

    定义:定义文档的页眉

    • 页面包括什么
      搜索框
      登录区
      快捷入口(链接)
      LOGO
      主导航

    10.<section></section> h5

    定义:定义了文档中的节。具有通用性。

    10.<main></main>

    main:主要的
    定义:定义文档的主要内容区域。

    11.<aside></aside>

    aside:次要的
    定义:定义文档次要内容区域。

    12. <section></section>

    定义:定义章节。

    13.<footer></footer> h5

    定义:定义页尾。

    14.<nav></nav>

    navigation :导航
    定义:定义导航
    用法1:包裹a标签。

    <nav>
           <a href="#">⾸⻚</a>
        <a href="#">关于我</a>
          <a href="#">个人技能</a>
            <a href="#">学习经历</a>
            <a href="#">作品集</a>
          <a href="#">联系方式</a>
    </nav>
    

    用法2:包裹ul标签。

    <nav>
          <ul>
                    <li><a href="#">联系方式</a></li>
         </ul>        
      </nav>
    

    HTML5的语义化

    语义:标签所蕴含的意义。

    HTML4标签的语义化并不明显


    有语义的:

    <h1>标题</h1>
    <p>段落</p>
    <ul>无序列表头</ul>
    <li>无序列表项目</li>
    <ol>有序列表</ol>
    <img/>
    <strong>加粗</strong>
    

    没有语义的:

    <div id="header">块</div>
    <div id="nav">导航</div>
    <div id="main">次要内容区域</div>
    <div id="footer">页尾</div>
    

    HTML对<div>派生了多个语义化标签

    <header>页头</header>
    <nav>导航</nav>
    <main>主要内容</main>
    <aside>次要内容</aside>
    <footer>页尾<footer>
    

    H5标签可以在项目中使用吗?

    • 商量方案
    • 确定你的观点:有一个网站可以帮助你决策
      Can I Use :http//www.caniuse.com

    常见页面布局的种类

    • 分屏式布局
    • 工字形布局
    • 圣杯布局
    • 口字形布局
    • 两栏布局
    • 三栏布局
      作业:
      1.添加元信息
    • 页面描述文字
    • 页面关键词
    • 视口
    • 字符编码

    构建元信息的标签:

    • <head></head>
    • <title></title>
    • <meta></meta>
    • <link>

    格式化内容的标签:直接格式化内容,让内容具有格式化,多数都是块元素。

    • <ul></ul>
    • <ol></ol>
    • <dl></dl>
    • <li></li>
    • <dd></dd>
    • <dt></dt>
    • <div></div>
    • ······

    描述内容标签:不具有格式,所有行内元素都属于描述内容标签。

    • <a></a>
    • <strong></strong>
    • <i></i>
    • <span></span>
    • <em></em>

    分节标签:只能用来组织标签的标签,用于划分章节。

    • <h1></h1>
    • <header></header>
    • <nav></nav>
    • <section></section>
    • <fooer></fooer>
    • <address></address>
    • <main></main>

    相关文章

      网友评论

          本文标题:HTML5

          本文链接:https://www.haomeiwen.com/subject/wlvktdtx.html