欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML与CSS基础day1

程序员文章站 2022-03-29 17:41:37
[toc] 术语 1. web：互联网。 2. w3c：万维网联盟，非盈利组织，官网：w3.org。为互联网提供各种标准。 1. 代替网址：MDN：Mozilla Development Network。Mozilla开发者社区。有中文。 3. ISO：国际标准组织。 4. XML： 可扩展 的标记 ......

目录

术语

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

html

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

  2. html全称：hyper text markup language。超文本标记语言。

  3. 书写一个一级标题：

    <h1>一级标题</h1>

css

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

  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. 显示文件扩展名（不懂可百度）。大部分文件：文件名+扩展名（后缀名）。

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

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

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

  3. 安装专业编辑器：

    1. sublime

    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>

上一篇： 绿芯发布首款工业级2TB M.2 SSD：零下40度都冻不坏

下一篇： python如何让类支持比较运算

推荐阅读