梁一文寒假学习报告

文章目录

• 第一阶段（1.13~1.22）
• • 1.13 HTML & CSS概述
  • 1.14 准备开发环境（网络原因搁置一天）
  • 1.15 准备开发环境
  • 1.16 HTML(第一个网页)
  • 1.17&1.18 HTML(语义化、文本元素、html实体)
  • • 语义化
    • 文本元素
    • html实体
  • 1.19 HTML(a元素)
  • 1.20 HTML(路径的写法)
  • 1.21 HTML(图片元素)
  • 1.22 休息一天

第一阶段（1.13~1.22）

1.13 HTML & CSS概述

HTML：Hyper Text Markup Language
超文本标记语言 ；定义网页中有什么

HTML是W3C定义的语言标准：HTML是用于描述页面结构的语言。

CSS：Cascading Style Sheets
层叠样式表；定义网页中的东西长什么样子

CSS是W3C定义的语言标准：CSS是用于描述页面展示的语言

1.14 准备开发环境（网络原因搁置一天）

1.15 准备开发环境

1.16 HTML(第一个网页)

• 第一个网页

• 注释

  • 注释为代码的阅读者提供帮助，注释不参与运行

  • 注释可以写多行

  • 在HTML中，注释使用如下格式（快捷方式为Ctrl+/）

• element（元素）

  • 其他叫法：标签、标记

  • 元素 = 起始标记 （begin tag） + 结束标记 （end tag） + 元素内容 + 元素属性（非必须，描述元素额外信息）

  • 属性

    • 属性 = 属性名 + 属性值

    • 属性分类：

      局部属性：某些元素特有的属性

      全局属性：所有元素通用

  • 有些元素没有结束标记，这样的元素叫做：空元素

  • 空元素的两种写法：

• 元素的嵌套

  • 元素不能相互嵌套

  • 父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

• 标准的文档结构

  • HTML：页面、HTML文档

    • 文档声明（告诉浏览器，当前文档使用的HTML标准是HTML5）（不写文档声明，将导致浏览器进入怪异渲染模式）

    • 根元素（一个页面最多元素只能一个，并且该元素是所有其他元素的父元素或祖先元素）

      lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的

    • 文档头（文档头内部的内容，不会显示到页面上）

    • 文档的元数据（附加信息）

      charset属性：指定网页内容编码

    • 网页标题

    • 文档体（页面上所有要参与显示的元素，都应该放置到文档体中）

1.17&1.18 HTML(语义化、文本元素、html实体)

语义化

• 什么是语义化

  1. 每一个HTML元素都有具体的含义

  2. 所有元素与展示效果无关
     元素展示到页面中的效果，应该由CSS决定，浏览器带有默认的CSS样式，所以每个元素都有一些默认样式

  3. 选择什么元素，取决于内容的含义，而不是显示出的效果

• 为什么需要语义化

  1. 为了搜索引擎优化（SEO）

     搜索引擎：百度、搜搜、Bing、Google

     每隔一段时间，搜索引擎都会从整个互联网中，抓取页面源代码

  2. 为了让浏览器理解网页

文本元素

• h

  • 标题（head）
  • h1~h6：表示1级标题到6级标题

• p

  • 段落（paragraphs）

• span

  • 无语义，仅用于样式的设计

  • 以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素），到了HTML5，已经弃用这种说法

• pre

  • 预格式化文本元素

  • 空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格

  • 例外：在pre元素中的内容不会出现空白折叠

  • 在pre元素内部出现的内容，会按照源代码格式显示到页面上

  • 该元素通常用于在网页上显示一些代码
    显示代码时，通常外面套code元素，code表示代码区域

  • pre元素功能的本质：它有一个默认的CSS属性

html实体

• 实体字符（HTML Entity）

  • 实体字符通常用于在页面显示一些特殊符号

  • 书写方式

    1. &单词;

    2. &#数字;

  • 实体字符表示

1.19 HTML(a元素)

• href属性

  • hyper reference：通常用于表示跳转地址

    1. 普通链接

    2. 锚链接

           a href="#chatper1">章节1a>    a href="#chatper2">章节2a>    a href="#chatper3">章节3a>    a href="#chatper4">章节4a>    a href="#chatper5">章节5a>    a href="#chatper6">章节6a>    h2 id="chatper1">章节1h2>    p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eum quis exercitationem qui unde suscipit similique labore architecto nesciunt officia facilis ea rerum in nisi inventore dolorem maiores, aliquid id, minima tempore eaque quisquam dolorum nulla. Eos, ullam repudiandae omnis quos facilis soluta debitis, possimus deleniti cumque dolorum adipisci pariatur quasi deserunt corrupti consectetur itaque et in dolor quibusdam doloribus facere aspernatur dolore! Nostrum dolores dicta praesentium mollitia ea soluta, officia neque sit numquam excepturi hic, illo sed dolore reprehenderit, optio repudiandae aliquid harum beatae voluptatum inventore tempore nemo enimVeritatis, atque mollitia pariatur optio reprehenderit minima quos eligendi adipisci. Itaque perspiciatis laboriosam esse molestiae sequi exSoluta dolorum doloremque, laudantium quis aliquam nihil delectus atque cupiditate laborum rerum, consectetur dolore magni dignissimos et aperiam animi modi iusto molestias. Odit rerum placeat possimus beatae ratione ipsam eum delectus necessitatibus quos officia deleniti, enim similique quia fuga esse error deserunt iste ducimus eos consequuntur assumenda fugiat explicabo. Repudiandae quisquam culpa commodi dolor temporibus obcaecati consequuntur totam pariatur enim in at doloremque iusto quae minima, rerum ratione deleniti neque distinctio quas veniam odio optio. Fugit mollitia temporibus repudiandae totam, unde harum quae dolorum blanditiis error quod voluptatum aut, distinctio soluta consequatur! Culpa!p>    h2 id="chatper2">章节2h2>    p>Soluta quasi, laborum eos voluptate, necessitatibus sit ea voluptas quos modi debitis eius tempora impedit mollitia omnis dolore recusandae numquam nostrum exercitationem, magni eum illo qui. Reprehenderit expedita quis qui debitis repellat dolor veniam. Molestias minima saepe vero provident neque reiciendis quod numquam repellendus libero accusantium, quam doloribus quibusdam culpa corporis sequi itaque quidem autem, voluptatum dolorem praesentium rem illum dolorum. Quod odit veritatis quiaVero eos ex aliquid doloremque recusandae consectetur, eveniet itaque tempore sint placeat inventore provident nam in quasi, deleniti ab possimus consequuntur. Molestias eum porro nam quaerat praesentium perspiciatis nulla necessitatibus minus itaque nobis doloribus, omnis tenetur aspernatur id perferendis distinctio vero recusandae placeatDolorem voluptatibus quae, provident vero, recusandae temporibus ipsum officiis voluptatum, at aperiam error. Architecto laborum dolore eligendi tempore ipsa totam nemo expedita perspiciatis doloremque, fuga est animi voluptas at provident! Provident laborum obcaecati aut nam enim ad possimus optio, similique nulla perferendis. Tenetur, ipsam quae. Omnis fugit, reprehenderit provident eos laborum dolore ipsa, iste dolorem consectetur recusandae labore repudiandae dolorum consequatur adipisci similique voluptatum voluptates placeat repellat blanditiis ipsam iusto beatae eligendi veniam! Voluptatem qui sint tempora quibusdam aperiam, quam officia cumque nam recusandae facilis quaerat ipsum nulla numquam optio labore possimus.p>    h2 id="chatper3">章节3h2>    p>Earum ullam veniam beatae et commodi adipisci illum rem accusantium, fugiat ab dicta cupiditate, quis aut ad nihil id pariatur. Asperiores repellat, facere voluptas ducimus, ea totam corporis aliquid ratione optio voluptates cum facilis repellendus autem namFacilis rem asperiores porro quos architecto repellendus iste dolorum voluptates, consequuntur reiciendis minima fugit deleniti ut magni laudantium quaerat aliquid eaque vel iusto animi atque itaque quod, cupiditate voluptatum! Numquam corrupti quia consectetur rerum eaque harum eius iste ut, sunt est nesciunt aliquam nisi sit blanditiis animi, officia saepe dolorum quod repudiandae quibusdam magni veritatis voluptate. Consequatur dignissimos assumenda eaque illo, aut nulla. Ullam voluptates dolores sit commodi quaerat et sapiente at, nihil qui illum asperiores tempora similique magnam nobis officiis ea architecto aperiam dolor iste, corrupti amet perferendis dolorum vitae tempore! Enim sed natus tempora recusandae aut id ratione a asperiores. Non accusamus reiciendis, voluptas quia impedit eius suscipit totam fugit magni quibusdam odit quam delectus ipsam quas blanditiis, odio ad beatae! Assumenda iusto ipsum, at libero excepturi aliquid repudiandae hic, porro harum a incidunt dolores amet quod fugit similique nobis molestias optio vitae cum itaque eius repellendus, sequi recusandae. Sequi neque numquam praesentium laudantium perspiciatis! Ipsum laudantium velit incidunt dolorum illumspan class="token tag">p>    h2 id="chatper4">章节4h2>    p>Placeat quae quaerat ut dicta est ullam reiciendis architecto possimus vitae ad non, tenetur distinctio esse maxime, quis earum veniam libero eos tempora et expedita voluptates culpa neque autAliquid, a velit aperiam perferendis, omnis eveniet dolorum dolorem neque possimus nemo modi impedit consequuntur veritatis! Dignissimos dicta tempore nonOfficiis nemo ratione accusamus! Ipsam in vero quaerat, nulla autem architecto. Mollitia, qui natus nam perferendis esse totam minima voluptates unde at quasi soluta quis veniam illum. Quisquam in ipsa facere eligendi illo placeat harum, rem cumque amet aliquid, porro esse consequuntur perferendis aut quibusdam. Eligendi at vero obcaecati consequatur perspiciatis culpa explicabo fuga molestias veritatis debitis dignissimos modi minus quo quasi eius corporis sit esse nisi placeat unde, iusto laborum eaque, qui assumendaVoluptatum, autem numquamQuibusdam nam maiores ratione doloribus eaque nulla sequi iusto similique tempora, corrupti qui delectusMolestias non voluptas rem libero nesciunt mollitia temporibus eligendi commodi, error odit reiciendis aspernatur, sit velit, debitis dicta autem quaerat quisquam maiores nam molestiae excepturi ipsum. Accusamus, perferendis. Cupiditate, reiciendis modi debitis esse iure odit reprehenderit, voluptates veritatis quas doloremque nisi repudiandae earum molestias atqueEsse doloremque aliquid optio consequatur quia fuga, qui laudantium nesciunt ea neque, ut eveniet temporibus.p>    h2 id="chatper5">章节5h2>    p>Eaque hic consequatur maiores aliquid saepe laudantium placeat porro ducimus rem, consectetur non vel! Adipisci voluptatibus quibusdam delectus fugiat ullam inventore ex molestiae eum labore voluptate, porro autem dignissimos nisi. Veniam vero voluptas, quas fugiat nesciunt in blanditiis voluptatibus repellendus quaerat laudantium possimus officiis hicCupiditate assumenda, reiciendis vel, quia quos doloremque distinctio, asperiores molestiae labore vitae nesciunt ut mollitia quo non. A rem modi maiores similique voluptasF
       来源：liangyiliangyiyi
                                                               
       声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！