当前位置： 移动技术网 > IT编程>网页制作>CSS > HTML与CSS基础day1

HTML与CSS基础day1

2020年04月03日  | 移动技术网IT编程  | 我要评论

目录

术语

  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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网