网页概述（html/css)

时间 2021-04-10

标签 css html html5 web 浏览器搜索引擎设计 code htm 索引栏目 HTML 繁體版

原文原文链接

网页概述

优势

不须要安装
无需更新
跨平台

使用的语言

HTML、CSS、JavaScript

网页简史

历史css
- 蒂姆·伯纳斯-李爵士万维网发明人
- 从1990年代初的基本文本编辑的网页开始，1990年代中期的在线网页建设，到上世纪90年代末崛起的flash，再到后来的CSS和Javasvript的崛起，直到如今web 2.0时代鼎盛时期，网页设计经历了屡次变革。
浏览器和网页html
- 浏览器将编写的网页源代码渲染成咱们想要的样子html5
- 浏览器问题：web
  
  存在不少不一样的浏览器浏览器
  
  万维网的初期，网页编写没有标准搜索引擎
W3C的创建设计
- 伯纳斯1994年创建万维网联盟（W3C）
- 制定了网页开发标准，使同一个网页在不一样的浏览器中有相同的效果

网页结构

根据W3C标准，一个网页主要由三部分组成：结构、表现、行为。
- 结构 html用于描述页面的结构
- 表现 CSS用于控制页面中元素的样式，美化页面
- 行为 JavaScript用于响应用户操做

HTML

HTML(Hypertext Markup Language) 超文本标记语言
HTML使用标签的形式来标识网页中不一样的组成部分
超文本指的是超连接，使用超连接能够从一个页面，跳转到另外一个页面

基本语法

注释：HTML中的注释是code
```

```
标签：htm

在HTML中用<标签名> </标签名>来标识特定的内容索引
- 标签的属性
  - 属性是一个名值对（x=y)
  - 属性和标签名或其余属性使用空格隔开
  - 属性根据文档来编写，有些属性有属性值，有些没有，有属性值的要用引号引发来
    
    代码示例
```
<h1>
    这是个人<font color="red"  size="3">第一个</font>网页
</h1>
```
文档声明（doctype)
- 文档声明用来告知浏览器当前网页的版本
- html5的文档声明
```
<!doctype html>
或
<!DOCTYPE HTML>
```

网页基本结构

<!--文档声明，声明当前网页的版本HTML5版本-->
<!doctype html>
<!--html的根标签（元素），网页中的全部内容都要写在根元素的里边-->
<html>
   <!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页--> 
  <head>
      <!--meta标签用来设置网页的元数据，这里meta用来 设置网页的字符集，避免乱码问题-->
      <meta charset="utf-8">
      <!--title 中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->
      <title>网页的标题</title>
  </head>
    <!--body是html的子元素，表示网页的主体，网页中全部可见的内容都写在body中-->
    <body>
        
    </body>
</html>

实体
- 在网页中编写多个空格默认状况会自动被浏览器解析为一个空格
- 在HTML中，有些特殊符号不能直接书写。例：多个连续空格，大于号/小于号
- 使用实体（转义字符）来书写这些特殊符号
  
  实体语法：
```
&nbsp; 空格
&gt; 大于号
&lt; 小于号
&copy;版权符号
```

CSS概述

自己含义：层叠样式表
- 网页其实是一个多层结构，经过css能够分别为网页的每一层来设置样式，最终咱们所看到的是网页的最上边一层
- 总之，CSS用来设置网页中的元素样式