2021-07-17

学习目标：

一周掌握 前端入门知识

---

学习内容：

• HTML5基础： 主要学习最常见的没有兼容性的HTML标签
• CSS3基础：没有兼容性的CSS样式，利用其那面学习的标签来完成传统的WEB网页布局
• H5C3提高:学习新增的HTML标签、CSS样式。
• 项目实战：品优购电商平台网站（首页、列表页、注册页）

---

学习时间：

1、 上午 8.00-上午 11.30
2、下午 2 点-下午 6 点

---

学习产出：

一、HTML相关知识

• 网页

  • 网站：指在因特网上根据一些规则，使用HTML的制作的用于展示特定内容的网页集合

  • 网页：网站中的一“页”，通常是HTML文件，它要通过浏览器来阅读

  • 网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频组成。网页通常.html、.htm结尾的文件、因此俗称HTML文件

  • HTML:超文本标记语言(Hyper Text Markup Language,它有超越了文本限制和超链接文本两个含义),它是用来描述网页的一种标记语言（markup language),标记语言是一套标记标签（markup tag)。

  • 网页的形成：网页是由元素组成的，这些元素是利用html标签描述出来的，然后通过浏览器来解析呈现。

  • 产出：标签

    <img src="1.jpg">
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wOC2rdUk-1626530111172)(C:\Users\周一豪\AppData\Roaming\Typora\typora-user-images\image-20210717160645566.png)]

• 浏览器

  • 浏览器内核：也称渲染引擎，负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

    浏览器	内核	备注
    IE	Trident	IE、猎豹、360、百度浏览器的内核
    firefox	Gecko	火狐浏览器内核
    Safari	Webkit	苹果浏览器内核
    Chrome/Opera	Blink	Chrome、Opera浏览器内核，Blink其实是Webkit的分支
    部分国产浏览器	Webkit/Blink	UC

• WEB标准

  • 即WC组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

  • 好处：

    • 让不同的研发者析出的页面更标准、更统一
    • 让Web的发展前景更广阔
    • 内容能被给更广泛的设备房屋
    • 更容易被搜索引擎所搜索
    • 降低网站流量费用
    • 使网站易于维护
    • 提高页面浏览速度

  • 构成：结构（Structure）、表现（Presentation）和行为（Behavior）。

    标准	说明
    结构	对王网页元素进行整理和分类, 主要学的是html
    表现	设置网页元素的版式、颜色、大小等外观样式，主要学的是CSS
    行为	行为是指网页模型的定义及交互的编写，主要学的是JavaScript

HTML标签

• 语法规范

  • 基本规范：尖括号包围的关键词，例如 。通常标签是成对出现的，称为双标签，例如：、一个是开始标签一个是结束标签。偶尔有单标签,例如
    
  • 标签关系：包含和并列

• 基本结构标签

  • 每个网页都有一个基本结构标签（也称骨架标签），包含页面基本内容

    标签名	定义	说明
    < html >和< /html >	HTML标签	页面中最大的标签 根标签
    < head >< /head >	文档的头部	注意在head中必须要设置的标签是title
    < title >< /title >	文档的标题	让页面有自己的网页标题
    < body >< /body >	文档的主体	元素包含文档的内容,页面内容都是放在body里的

• 开发工具
  VScode

• 常用标签
  1

• 注释和特殊字符