首页 > > 网页制作 > css >

HTML与CSS基础day1

2020-04-01 16:03:30来源：博客园阅读 ()

HTML与CSS基础day1

术语
HTML
CSS
- 版本和兼容性
开发环境的准备
HTML

术语

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

HTML

HTML是w3c组织定义的语言标准。HTML是用于描述页面结构的语言。
HTML全称：Hyper Text Markup Language。超文本标记语言。
书写一个一级标题：
```
<h1>一级标题</h1>
```

CSS

CSS也是w3c定义的语言标准。CSS是用于描述页面展示的语言。（字体颜色，大小，布局等等。）
CSS决定页面长什么样子。
执行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. 扩展名决定了文件被什么打开。
安装浏览器：推荐安装谷歌浏览器（推荐百度搜索Chrome，进入官网安装，以免安装有病毒）
1. 谷歌浏览器始终与w3c标准同步。
2. 将谷歌浏览器设置为默认浏览器
安装专业编辑器：
1. Sublime
2. ATom
3. Dreamweaver
4. vscode（推荐）
  目录：目录
  - 术语
  - HTML
  - CSS
    - 版本和兼容性
  - 开发环境的准备
  - HTML
Emmet插件：自动生成html代码片段

HTML

注释方法：Ctrl+?

<!-- 注释内容 -->

元素(标签、标记，但官方称之为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>：结束标记，
        百度：元素内容。
        :-->

有些元素没有结束标记（故没有元素内容），叫做空元素

    <meta charset="UTF-8">

    空元素的两种写法：
    1.    <meta charset="UTF-8">
    2.    <meta charset="UTF-8"/>   /:表示闭合标记，表示结束。

元素的嵌套：元素不能相互嵌套；父元素；子元素；祖先元素；后代元素；兄弟元素（拥有同一个父元素的两个元素）
标准的文档结构

<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>

原文链接:https://www.cnblogs.com/wby-110/p/12612900.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有