網頁概述（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;版權符號
```