網頁概述（html/css)-有解無憂

網頁概述

優點

不需要安裝
無需更新
跨平臺

使用的語言

HTML、CSS、JavaScript

網頁簡史

歷史
- 蒂姆·伯納斯-李爵士萬維網發明人
- 從1990年代初的基本文本編輯的網頁開始，1990年代中期的在線網頁建設，到上世紀90年代末崛起的flash，再到后來的CSS和Javasvript的崛起，直到現在web 2.0時代鼎盛時期，網頁設計經歷了多次變革，
瀏覽器和網頁
- 瀏覽器將撰寫的網頁源代碼渲染成我們想要的樣子
- 瀏覽器問題：
  
  存在很多不同的瀏覽器
  
  萬維網的初期，網頁撰寫沒有標準
W3C的建立
- 伯納斯1994年建立萬維網聯盟（W3C）
- 制定了網頁開發標準，使同一個網頁在不同的瀏覽器中有相同的效果

網頁結構

根據W3C標準，一個網頁主要由三部分組成：結構、表現、行為，
- 結構 html用于描述頁面的結構
- 表現 CSS用于控制頁面中元素的樣式，美化頁面
- 行為 JavaScript用于回應用戶操作

HTML

HTML(Hypertext Markup Language) 超文本標記語言
HTML使用標簽的形式來標識網頁中不同的組成部分
超文本指的是超鏈接，使用超鏈接可以從一個頁面，跳轉到另一個頁面

基本語法

注釋：HTML中的注釋是
```

```
標簽：

在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用來設定網頁中的元素樣式

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/274376.html

標籤：Html/Css

上一篇：css — display

下一篇：jquery對某個標簽添加只讀（readonly）或者禁用（disabled）屬性