HTML与CSS基础day1

时间  2020-04-05
标签 html css 基础 day1 day 栏目 HTML 繁體版
原文   原文链接

目录

术语

  1. web：互联网。
  2. w3c：万维网联盟，非盈利组织，官网：w3.org。为互联网提供各类标准。
    1. 代替网址：MDN：Mozilla Development Network。Mozilla开发者社区。有中文。
  3. ISO：国际标准组织。
  4. XML：可扩展的标记语言（extension markup language）用于定义文档结构。

HTML

  1. HTML是w3c组织定义的语言标准。HTML是用于描述页面结构的语言。css

  2. HTML全称：Hyper Text Markup Language。超文本标记语言。html

  3. 书写一个一级标题：web

    <h1>一级标题</h1>

CSS

  1. CSS也是w3c定义的语言标准。CSS是用于描述页面展现的语言。（字体颜色，大小，布局等等。）shell

  2. CSS决定页面长什么样子。浏览器

  3. 执行HTML与CSS：用浏览器内核执行。编辑器

    1. 浏览器由两部分组成：
      1. shell：外壳。
      2. core：内核（JS执行引擎、渲染引擎）。
    2. 世界上主流的浏览器（拥有本身的内核）：
      1. IE：Trident内核。
      2. Firefox：Gecko内核。
      3. Chrome：以前为Webkit内核如今是Blink内核。
      4. Opera：Blink内核。
      5. Safari：Webkit内核。

    版本和兼容性

    1. HTLM5:2014出版。
      1. XHTML:能够认为是HTML的一个版本，彻底符合XML的规范。但如今基本不用。
    2. CSS3：目前尚未制定完成。

开发环境的准备

  1. 显示文件扩展名（不懂可百度）。大部分文件：文件名+扩展名（后缀名）。ide

    1. 扩展名决定了文件被什么打开。

  2. 安装浏览器：推荐安装谷歌浏览器（推荐百度搜索Chrome，进入官网安装，以避免安装有病毒）布局

    1. 谷歌浏览器始终与w3c标准同步。
    2. 将谷歌浏览器设置为默认浏览器

  3. 安装专业编辑器：字体

    1. Sublimeui

    2. ATom

    3. Dreamweaver

    4. vscode（推荐）
      目录：

      目录

  4. Emmet插件：自动生成html代码片断

HTML

  1. 注释方法：Ctrl+?
<!-- 注释内容 -->
  1. 元素(标签、标记，但官方称之为element（元素）)
    1. 元素 = 起始标记（begin tag）+ 结束标记（end tag）+ 元素内容（element content）+ 元素属性（非必选）
      属性 = 属性名（href)+属性值
      1. 局部属性：某些元素特有的属性。
      2. 全局属性：全部的元素同用。
<title>text</title>
    <a href="http://baidu.com" title = "百度官网">百度</a>
    <h1 title="这是全局属性">
        这是全局属性
    </h1>
    <!-- <a>: 起始标记，表示a元素
        </a>：结束标记，
        百度：元素内容。
        :-->
  1. 有些元素没有结束标记（故没有元素内容），叫作空元素
<meta charset="UTF-8">

    空元素的两种写法：
    1.    <meta charset="UTF-8">
    2.    <meta charset="UTF-8"/>   /:表示闭合标记，表示结束。
  1. 元素的嵌套：元素不能相互嵌套；父元素；子元素；祖先元素；后代元素；兄弟元素（拥有同一个父元素的两个元素）
  2. 标准的文档结构
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie+edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<!-- 文档声明：告诉浏览器当前文档使用的HTNL标准是HTML5，不写文档声明将致使浏览器进入怪异渲染模式 -->
<!DOCTYPE html>

<!-- 根元素：一个页面最多只能有一个，而且该元素是其余全部元素的父元素或者祖先元素,HTML5能够不写 
    lang属性（能够用在任意元素中）：language,全局属性，表示该元素内部使用的文字是哪种天然语言书写而成的；en:English，zh-CN:简体中文，但已过期，如今用cmn-hans:简体中国官方语言-->
<html lang="cmn-hans">
</html>

<!-- 必须做为子元素出现,表示文档头，文档头内部的内容不会显示在页面上。
    <meta>元素：文档的原数据，文档的附加信息。
    charset：指定网页内部编码，计算机中，低压电（0~2V）来表示0，高压电（2~5V）表示1。计算机中只能存储数字，只能将文字和数字进行对应，至关于一个字典，改字典就叫作字符编码表。 
    name、content：适配手机端的
    <meta http-equiv="X-UA-Compatible" content="ie+edge">：若是浏览器是IE则告诉浏览器使用edge内核，即更换浏览器的内核-->
    <!-- <title>Document</title>：网页标题。 -->
<head>
</head>

<!-- 文档体: 页面上全部要参与显示的元素-->
<body>
</body>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程